tuain-ng-forms-lib 14.0.0 → 14.0.1

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/tuain-ng-forms-lib'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/tuain-ng-forms-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "nanoid",
+    "yn"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuain-ng-forms-lib",
-  "version": "14.0.0",
+  "version": "14.0.1",
   "description": "Componentes y Clases Angular para la gestión de formularios TUAIN",
   "author": "Mauricio Méndez, Imix Consulting",
   "license": "MIT",
@@ -22,25 +22,5 @@
     "nanoid": "^4.0.0",
     "tslib": "^2.4.0",
     "yn": "^5.0.0"
-  },
-  "module": "fesm2015/tuain-ng-forms-lib.mjs",
-  "es2020": "fesm2020/tuain-ng-forms-lib.mjs",
-  "esm2020": "esm2020/tuain-ng-forms-lib.mjs",
-  "fesm2020": "fesm2020/tuain-ng-forms-lib.mjs",
-  "fesm2015": "fesm2015/tuain-ng-forms-lib.mjs",
-  "typings": "tuain-ng-forms-lib.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./tuain-ng-forms-lib.d.ts",
-      "esm2020": "./esm2020/tuain-ng-forms-lib.mjs",
-      "es2020": "./fesm2020/tuain-ng-forms-lib.mjs",
-      "es2015": "./fesm2015/tuain-ng-forms-lib.mjs",
-      "node": "./fesm2015/tuain-ng-forms-lib.mjs",
-      "default": "./fesm2020/tuain-ng-forms-lib.mjs"
-    }
-  },
-  "sideEffects": false
+  }
 }

package/src/lib/classes/forms/action.ts

@@ -0,0 +1,55 @@
+import { Subject } from 'rxjs';
+import { elementTypes } from './form.constants';
+import { FormElement } from './element';
+
+const HEADER = 'HEADER';
+
+export class FormAction extends FormElement {
+  private readonly _actionActivated = new Subject<string>();
+
+  inProgress = false;
+  newState: string;
+  backend: boolean;
+
+  actionCode: string;
+  actionName: string;
+  iconName: string;
+
+  restrictedOnField: string;
+  restrictedOnOperator: string;
+  restrictedOnValue: string;
+  customValidation: any;
+
+  constructor(actionDefinition, formConfig) {
+    super(actionDefinition, formConfig);
+    this.elementType = elementTypes.action;
+    this.actionCode = actionDefinition.actionCode ? actionDefinition.actionCode.toString() : '';
+    this.actionName = actionDefinition.actionTitle;
+    this.iconName = actionDefinition.iconName || this.actionCode;
+    this.setCustomAttribute('location', actionDefinition.position || HEADER);
+    this.backend = actionDefinition?.serverAction ?? false;
+    this.newState = actionDefinition?.newState;
+
+    this.restrictedOnField = actionDefinition.fieldRestrictedCode ? actionDefinition.fieldRestrictedCode.toString() : '';
+    this.restrictedOnOperator = actionDefinition.operatorRestricted || '';
+    this.restrictedOnValue = actionDefinition.valueRestricted ?? '';
+    this.customValidation = () => true;
+  }
+
+  get actionActivated() { return this._actionActivated; }
+
+  start() { this.inProgress = true; }
+  stop() { this.inProgress = false; }
+
+  notifyActivation() { this._actionActivated.next(this.actionCode); }
+
+  updateFromServer(receivedAction) {
+    for (const propertyName in receivedAction) {
+      if (propertyName !== 'actionCode' && propertyName !== 'actionId') {
+        this[propertyName] = receivedAction[propertyName];
+      }
+    }
+  }
+
+  setCustomValidation(callback) { this.customValidation = () => callback(); }
+}

package/src/lib/classes/forms/element.ts

@@ -0,0 +1,98 @@
+import { elementTypes } from './form.constants';
+export class FormElement {
+  protected _visible: boolean;
+  protected _visibleForced: boolean;
+  protected _isForced: boolean;
+  _formConfig: any;
+  disabled: boolean;
+  visibleStates: string[];
+  enabledStates: string[];
+  elementType: string;
+  customAttributes: any;
+
+  constructor(elementDefinition: any, formConfig: any) {
+    this._formConfig = formConfig;
+    this._isForced = false;
+    this.setVisibleStates(elementDefinition.visibleStates);
+    this.setEnabledStates(elementDefinition.enabledStates);
+    this._visibleForced = false;
+    this.disabled = elementDefinition?.disabled ?? false;
+    this.setVisibility(elementDefinition?.visible ?? true);
+    this.customAttributes = elementDefinition?.customAttributes ?? {};
+  }
+
+  getCustomAttribute(name: string): any { return this.customAttributes?.[name] ?? null; }
+  setCustomAttribute(name: string, value: any): void { if (name) { this.customAttributes[name] = value; } }
+  matchAttribute(name: string, value: string): boolean { return this.customAttributes?.[name] === value; }
+
+  isField(): boolean { return this.elementType === elementTypes.field; }
+  isAction(): boolean { return this.elementType === elementTypes.action; }
+  isTable(): boolean { return this.elementType === elementTypes.table; }
+
+  setVisibleStates(newStates: any): void {
+    const visibleStates = (!Array.isArray(newStates) && typeof newStates === 'string')
+      ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
+      : newStates;
+    this.visibleStates = (Array.isArray(visibleStates)) ? visibleStates : [];
+  }
+
+  setEnabledStates(newStates: any): void {
+    const enabledStates = (!Array.isArray(newStates) && typeof newStates === 'string')
+      ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
+      : newStates;
+    this.enabledStates = (Array.isArray(enabledStates)) ? enabledStates : [];
+  }
+
+  viewOnState(state: string): boolean { return (this.visibleStates && state) ? this.visibleStates.includes(state) : false; }
+  enabledOnState(state: string): boolean { return (this.enabledStates && state) ? this.enabledStates.includes(state) : false; }
+
+  /**
+   * @deprecated Utilizar viewOnState
+   */
+  supportState(state: string): boolean { return this.viewOnState(state); }
+
+  /**
+   * @deprecated Utilizar viewOnState
+   */
+  supportMode(state: string): boolean { return this.viewOnState(state); }
+
+  get visible(): boolean { return (this._isForced) ? this._visibleForced : this._visible; }
+  set visible(visible: boolean) { this.setVisibility(visible); }
+
+  visibleOn(state: string): boolean {
+    return this.visible && this.viewOnState(state);
+  }
+
+  enabledOn(state: string): boolean {
+    return !this.disabled && this.enabledOnState(state);
+  }
+
+  setVisibility(visible: boolean, forced: boolean = null): void {
+    this._visible = visible && true;
+    if (forced != null) {
+      this._isForced = forced;
+    }
+  }
+
+  show(forced?: boolean): void {
+    this._visible = true;
+    if (forced !== null) {
+      this._isForced = forced;
+      this._visibleForced = true;
+    }
+  }
+
+  hide(forced?: boolean): void {
+    this._visible = false;
+    if (forced !== null) {
+      this._isForced = forced;
+      this._visibleForced = false;
+    }
+  }
+
+  enable(): void { this.disabled = false; }
+  disable(): void { this.disabled = true; }
+
+  get enabled(): boolean { return !this.disabled; }
+  get editable(): boolean { return !this.disabled; }
+}

package/src/lib/classes/forms/field.ts

@@ -0,0 +1,408 @@
+import { Subject } from 'rxjs';
+import yn from 'yn';
+import { elementTypes, NO_ERROR } from './form.constants';
+import { FormElement } from './element';
+import { isNgTemplate } from '@angular/compiler';
+
+const UNDEFINED = 'undefined';
+
+const DEFAULT_ERROR_TYPE = 'error';
+const DEFAULT_CAPTURE_TYPE = 'INPUT';
+const DEFAULT_ALIGNMENT = 'left';
+
+const STD_MAX_LENGTH = 50;
+const BIG_MAX_LENGTH = 500;
+
+const fldAttr = {
+  validateOnServer: 'validateOnServer',
+  value: '_value',
+  minValue: '_minValue',
+  maxValue: '_maxValue',
+  maxLength: '_maxLength',
+  onValidation: '_onValidation',
+  focus: 'focus',
+  intrinsicErrorMessage: '_intrinsicErrorMessage',
+  code: 'fieldCode',
+  info: 'fieldInfo',
+  defaultValue: 'defaultValue',
+  defaultEditable: 'defaultEditable',
+  visibleLabel: 'visibleLabel',
+  required: 'fieldRequired',
+  hasChanged: 'hasChanged',
+  outputOnly: 'outputOnly',
+  captureType: 'captureType',
+  title: 'fieldTitle',
+  type: 'fieldType',
+  alignment: 'fieldAlignment',
+  format: 'fieldFormat',
+  externalValue: 'externalValue',
+  tooltipText: 'tooltipText',
+  errorType: 'errorType',
+  errorCode: 'errorCode',
+  errorMessage: 'errorMessage',
+  options: 'fieldOptions',
+};
+
+export interface DetailEvent {
+  code: string;
+  detail: any;
+}
+
+export interface FieldOption {
+  fieldOptionValue: string;
+  fieldOptionId: string;
+}
+
+export class FieldDescriptor extends FormElement {
+  private readonly _editionFinish = new Subject<any>();
+  private readonly _editionPartial = new Subject<any>();
+  private readonly _detailRequest = new Subject<DetailEvent>();
+  private readonly _attributeChange = new Subject<any>();
+
+  private validateOnServer: boolean;
+
+  private _value: any;
+  private _focus: boolean;
+
+  private _minValue: any;
+  private _maxValue: any;
+  private _maxLength: number;
+  _onValidation: boolean;
+  _intrinsicErrorMessage: string;
+
+  fieldCode: string;
+  fieldInfo: string;
+  defaultValue: string;
+  defaultEditable: boolean;
+
+  visibleLabel: boolean;
+  fieldRequired: boolean;
+  hasChanged: boolean;
+  outputOnly: boolean;
+  captureType: string;
+  fieldTitle: string;
+  fieldType: string;
+  fieldAlignment: string;
+  fieldFormat: RegExp;
+  externalValue: any;
+  tooltipText: string;
+
+  errorType: string;
+  errorCode: string;
+  errorMessage: string;
+
+  fieldOptions: FieldOption[];
+
+  constructor(inputFieldReceived, formConfig) {
+    super(inputFieldReceived, formConfig);
+    this.elementType = elementTypes.field;
+    const fld = (inputFieldReceived) ? inputFieldReceived : {};
+
+    this.setAttr(fldAttr.code, fld.fieldCode);
+    this.setAttr(fldAttr.title, fld.fieldTitle ?? this.fieldCode);
+    this.setAttr(fldAttr.type, fld.fieldTypeCode)
+    this.setAttr(fldAttr.captureType, fld.captureType ?? DEFAULT_CAPTURE_TYPE);
+    const defaultValue = fld.defaultValue ?? null;
+    if (this.fieldType === this._formConfig.fieldTypes.boolean) {
+      this.setAttr(fldAttr.defaultValue, defaultValue ?? false);
+    } else {
+      this.setAttr(fldAttr.defaultValue, defaultValue);
+    }
+    const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this.fieldType] != null)
+      ? this._formConfig.tableFieldStyles[this.fieldType]['text-align'] : DEFAULT_ALIGNMENT;
+    const fieldAlignment = (fld.alignment != null) ? fld.alignment.toLowerCase() : defaultTypeAlignment;
+    this.setAttr(fldAttr.alignment, fieldAlignment);
+    this.setAttr(fldAttr.info, fld.info || '');
+    let fieldFormat;
+    try {
+      fieldFormat = (fld.format) ? new RegExp(fld.format) : null;
+    } catch (e) {
+      fieldFormat = null;
+    }
+    this.setAttr(fldAttr.format, fieldFormat);
+
+    this.setAttr(fldAttr.validateOnServer, fld.serverAction ?? false);
+
+    this.setAttr(fldAttr.tooltipText, fld.tooltip || '');
+    this.setAttr(fldAttr.defaultEditable, this.enabled);
+    this.setAttr(fldAttr.required, fld.required ?? false);
+    this.setError(fld.errorCode, fld.errorMessage, fld.errorType ?? DEFAULT_ERROR_TYPE);
+    this.setAttr(fldAttr.outputOnly, fld.outputOnly ?? false);
+    const maxLength = fld.maxLength ?? (this.captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
+    this.setAttr(fldAttr.maxLength, maxLength);
+    this.setAttr(fldAttr.intrinsicErrorMessage, this._formConfig.fieldTypeErrMsg[this.fieldType] ?? this._formConfig.fieldTypeErrMsg.DEFAULT);
+
+    this.setEditable(fld.editable ?? true);
+    this.setVisibleLabel(fld.visibleLabel ?? true);
+    this.setVisibility(fld.visible);
+    this.setFieldOptions(fld.fieldOptions);
+    this.setValue(fld.fieldValue ?? this.defaultValue ?? '');
+  }
+
+  get name() { return this.fieldCode; }
+  get editionFinish() { return this._editionFinish; }
+  get attributeChange() { return this._attributeChange; }
+
+  get editionPartial() { return this._editionPartial; }
+  get detailRequest() { return this._detailRequest; }
+  get info() { return this.fieldInfo; }
+
+  get validating() { return this._onValidation; }
+  set validating(isValidating: boolean) { this.setAttr(fldAttr.onValidation, isValidating); }
+
+  focus() { this.setAttr(fldAttr.focus, true); }
+
+  setIntrinsicErrorMessage(message: string) { this.setAttr(fldAttr.intrinsicErrorMessage, message); }
+  set intrinsicErrorMessage(message: string) { this.setIntrinsicErrorMessage(message); }
+
+  get fieldValue() { return this.getValue(); }
+
+  getRequired() { return this.required; }
+  setRequired(required: boolean) { this.required = required; }
+
+  get required(): boolean { return this.fieldRequired; }
+  set required(required: boolean) { this.setAttr(fldAttr.required, required ?? false); }
+  get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
+  set maxLength(requiredMaxLength: any) {
+    if (typeof requiredMaxLength === 'string') {
+      this.setAttr(fldAttr.maxLength, parseInt(requiredMaxLength, 10));
+    } else if (typeof requiredMaxLength === 'number') {
+      this.setAttr(fldAttr.maxLength, requiredMaxLength);
+    }
+  }
+  get value() { return this.getValue(); }
+  set value(newValue) { this.setValue(newValue); }
+
+  notifyEditionPartial() {
+    this._editionPartial.next({ code: this.fieldCode, intrinsicValidation: true });
+  }
+
+  notifyEditionFinish() {
+    console.log('1. notifyEditionFinish');
+    let intrinsicValidation = true;
+    const fieldDefaultFormat = this._formConfig.fieldTypesPatterns?.[this.fieldType] ?? null;
+    const fieldValue = this.getValue();
+    console.log(`2. notifyEditionFinish fieldDefaultFormat: ${fieldDefaultFormat} fieldValue:${fieldValue}`);
+
+    if (fieldValue && (fieldDefaultFormat || this.fieldFormat)) {
+      console.log(`3. notifyEditionFinish this.fieldFormat: ${this.fieldFormat}`);
+
+
+      intrinsicValidation = (fieldDefaultFormat?.test(fieldValue) ?? true)
+        && (this.fieldFormat?.test(fieldValue) ?? true);
+
+      console.log(`4. notifyEditionFinish intrinsicValidation: ${intrinsicValidation}`);
+
+
+      if (!intrinsicValidation) {
+        this.setError('99', this._intrinsicErrorMessage);
+      }
+    }
+    if (intrinsicValidation && fieldValue && this._minValue && fieldValue < this._minValue) {
+      intrinsicValidation = false;
+      this.setError('99', 'Campo con valor inferior al mínimo');
+    }
+    if (intrinsicValidation && fieldValue && this._maxValue && fieldValue > this._maxValue) {
+      intrinsicValidation = false;
+      this.setError('99', 'Campo con valor superior al máximo');
+    }
+    console.log('5. notifyEditionFinish END');
+
+    this._editionFinish.next({ code: this.fieldCode, intrinsicValidation });
+  }
+
+  setAttr(name: string, value: any) {
+    this[name] = value;
+    if (this._formConfig.monitoredFieldAttributes.includes(name)) {
+      this._attributeChange.next({ name, value });
+    }
+  }
+
+  notifyEditionDetailRequest(detail: any) {
+    const detailEvent: DetailEvent = {
+      code: this.fieldCode,
+      detail,
+    };
+    this._detailRequest.next(detailEvent);
+  }
+
+  setVisibleLabel(visibleLabel: boolean) { this.setAttr(fldAttr.visibleLabel, visibleLabel); }
+  showLabel() { this.setVisibleLabel(true); }
+  hideLabel() { this.setVisibleLabel(false); }
+
+  setChanged(hasChanged: boolean) { this.setAttr(fldAttr.hasChanged, hasChanged); }
+  changed() { this.setChanged(true); }
+
+  setLabel(label) { this.setAttr(fldAttr.title, label); }
+  clean() { this.setValue(this.defaultValue || ''); this.resetError(); }
+  get backend() { return this.validateOnServer; }
+
+  setEditable(editable: boolean = true) { (editable) ? this.enable() : this.disable(); }
+
+  hasError() { return this.errorCode !== NO_ERROR; }
+  resetError() { (this.errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
+  setError(code, message, type = DEFAULT_ERROR_TYPE) {
+    this.setAttr(fldAttr.errorCode, code ?? NO_ERROR);
+    this.setAttr(fldAttr.errorType, (this.errorCode === NO_ERROR) ? '' : type);
+    this.setAttr(fldAttr.errorMessage, message ?? '');
+  }
+
+  getError() { return { type: this.errorType, code: this.errorCode, message: this.errorMessage }; }
+  get error() { return this.getError(); }
+  set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE) }
+
+  getErrorCode() { return this.getError().code; }
+  setErrorCode(code) { this.setError(code, this.errorMessage); }
+  getErrorMessage() { return this.getError().message; }
+  setErrorMessage(msg) { this.setError(this.errorCode, msg); }
+
+  get empty(): boolean { return this.isEmpty(); }
+
+  isEmpty(): boolean {
+    const fieldCurrentValue = this.getValue();
+    if (fieldCurrentValue === undefined || fieldCurrentValue === null) {
+      return true;
+    }
+    if (this.fieldType === this._formConfig.fieldTypes.array
+      && Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0) {
+      return true;
+    };
+    if (this.fieldType === this._formConfig.fieldTypes.phone) {
+      if (!Array.isArray(fieldCurrentValue)) {
+        return true;
+      }
+      if (fieldCurrentValue.length !== 2 || !fieldCurrentValue[0] || !fieldCurrentValue[1]) {
+        return true;
+      }
+      return false;
+    };
+    return fieldCurrentValue === '';
+  }
+
+  getValue(): any {
+    if (this.fieldType === this._formConfig.fieldTypes.boolean
+      || this.fieldType === this._formConfig.fieldTypes.check) {
+      return yn(this._value);
+    }
+    return this._value;
+  }
+
+  getOptionText() {
+    return this.fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null;
+  }
+
+  updateFromServer(fld) {
+    const fieldKeys = Object.keys(fld);
+    for (let index = 0; index < fieldKeys.length; index++) {
+      const attrName = fieldKeys[index];
+      const attrValue = fld[attrName];
+      (attrName === this._formConfig.apiFieldAttrs.visible) && this.setVisibility(attrValue);
+      (attrName === this._formConfig.apiFieldAttrs.labelVisible) && this.setVisibleLabel(fld.visibleLabel);
+      (attrName === this._formConfig.apiFieldAttrs.required) && this.setAttr(fldAttr.required, fld.required ?? false);
+      (attrName === this._formConfig.apiFieldAttrs.errorCode) && this.setAttr(fldAttr.errorCode, fld.errorCode);
+      (attrName === this._formConfig.apiFieldAttrs.errorMessage) && this.setAttr(fldAttr.errorMessage, fld.errorMessage);
+      (attrName === this._formConfig.apiFieldAttrs.tooltip) && this.setAttr(fldAttr.tooltipText, fld.tooltip);
+      (attrName === this._formConfig.apiFieldAttrs.info) && this.setAttr(fldAttr.info, fld.info);
+      (attrName === this._formConfig.apiFieldAttrs.editable) && this.setEditable(fld.editable);
+      (attrName === this._formConfig.apiFieldAttrs.title) && this.setLabel(fld.fieldTitle.toString());
+      (attrName === this._formConfig.apiFieldAttrs.value) && (this.setValue(fld.fieldValue) && this.setChanged(false));
+      (attrName === this._formConfig.apiFieldAttrs.options) && this.setFieldOptions(fld.fieldOptions);
+      (attrName === this._formConfig.apiFieldAttrs.captureType) && this.setAttr(fldAttr.captureType, fld.captureType || 'INPUT');
+      (attrName === this._formConfig.apiFieldAttrs.type) && this.setAttr(fldAttr.type, fld.fieldTypeCode);
+      (attrName === this._formConfig.apiFieldAttrs.maxLength) && this.setAttr(fldAttr.maxLength, fld.maxLength);
+    }
+  }
+
+  setMinValue(inputMinValue) {
+    let minValue = inputMinValue;
+    if (this.fieldType === this._formConfig.fieldTypes.date) {
+      minValue = new Date(minValue);
+    }
+    this.setAttr(fldAttr.minValue, minValue);
+  }
+
+  setMaxValue(inputMaxValue) {
+    let maxValue = inputMaxValue;
+    if (this.fieldType === this._formConfig.fieldTypes.date) {
+      maxValue = new Date(maxValue);
+    }
+    this.setAttr(fldAttr.maxValue, maxValue);
+  }
+
+  getFieldOptions(): FieldOption[] {
+    return this.fieldOptions.map(option => {
+      const optionCopy: FieldOption = { ...option };
+      return optionCopy;
+    });
+  }
+
+
+  setFieldOptions(newOptions) {
+    if ((!this._formConfig.captureTypesWithOptions.includes(this.captureType))
+      || typeof newOptions === UNDEFINED || !newOptions
+      || !Array.isArray(newOptions)) {
+      return;
+    }
+    let fieldOptions = newOptions.map(option => {
+      if (option.text !== undefined && option.text !== null
+        && option.value !== undefined && option.value !== null) {
+        return { fieldOptionValue: option.text, fieldOptionId: option.value };
+      }
+      return { ...option };
+    });
+    fieldOptions = (fieldOptions && Array.isArray(fieldOptions)
+      && fieldOptions.length > 0) ? fieldOptions : [];
+    this.setAttr(fldAttr.options, fieldOptions);
+    if (this._value) {
+      if (this.fieldType === this._formConfig.fieldTypes.array && Array.isArray(this._value)) {
+        const fieldValue = this._value?.filter(item =>
+          this.fieldOptions.find(opt => opt.fieldOptionId === item)
+        );
+        this.setAttr(fldAttr.value, fieldValue);
+      } else {
+        const valInOptions = this.fieldOptions
+          .find(item => item.fieldOptionId === this._value);
+        if (!valInOptions) {
+          this.setValue('');
+        }
+      }
+    }
+    if (this.fieldRequired && this.fieldOptions.length === 1) {
+      this.setValue(this.fieldOptions[0].fieldOptionId);
+    }
+  }
+
+  setValue(newValue, widgetUpdate = true) {
+    if (typeof newValue === UNDEFINED) {
+      return true;
+    }
+    if (newValue === null && this.required) {
+      return true;
+    }
+    let newFinalValue;
+    if (this.fieldType === this._formConfig.fieldTypes.boolean
+      || this.fieldType === this._formConfig.fieldTypes.check) {
+      newFinalValue = yn(newValue) ?? false;
+    } else if (this.fieldType === this._formConfig.fieldTypes.array
+      || this.fieldType === this._formConfig.fieldTypes.map) {
+      if (newValue === null || newValue === '') {
+        newFinalValue = [];
+      } else if (Array.isArray(newValue)) {
+        newFinalValue = newValue;
+      } else {
+        newFinalValue = newValue.toString().split(',');
+      }
+    } else {
+      newFinalValue = newValue;
+    }
+    if (this._value !== newFinalValue) {
+      this.setChanged(true);
+      if (widgetUpdate) {
+        this.setAttr(fldAttr.value, newFinalValue);
+      } else {
+        this._value = newFinalValue;
+      }
+    }
+    return true;
+  }
+}