tuain-ng-forms-lib 17.2.22 → 17.2.23

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

@@ -1,522 +0,0 @@
-import { Subject } from 'rxjs';
-import yn from 'yn';
-import { elementTypes, NO_ERROR } from './form.constants';
-import { FormElement } from './element';
-
-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 directChanges = [
-  'defaultEditable', 'defaultValue', 'alignment', 'required', 'errorCode', 'errorMessage', 'errorType',
-  'tooltip', 'info', 'format', 'intrinsicErrorMessage', 'outputOnly', 'captureType', 'title', 'type',
-  'maxLength', 'maxValue', 'minLength', 'minValue', 'validateOnServer', 'serverAction', 'visibleLabel',
-  'options', 'placeholder',
-];
-
-const attrs = {
-  captureType: { name: '_captureType', propagate: 'captureType' },
-  errorCode: { name: '_errorCode', propagate: 'errorCode' },
-  errorMessage: { name: '_errorMessage', propagate: 'errorMessage' },
-  errorType: { name: '_errorType', propagate: 'errorType' },
-  defaultValue: { name: '_defaultValue', propagate: 'defaultValue' },
-  defaultEditable: { name: '_defaultEditable', propagate: 'defaultEditable' },
-  fieldAlignment: { name: '_fieldAlignment', propagate: 'alignment' },
-  fieldCode: { name: '_fieldCode', propagate: 'code' },
-  fieldInfo: { name: '_fieldInfo', propagate: 'info' },
-  fieldRequired: { name: '_fieldRequired', propagate: 'required' },
-  fieldTitle: { name: '_fieldTitle', propagate: 'title' },
-  fieldType: { name: '_fieldType', propagate: 'type' },
-  fieldFormat: { name: '_fieldFormat', propagate: 'format' },
-  fieldOptions: { name: '_fieldOptions', propagate: 'options' },
-  focus: { name: '_focus', propagate: 'focus' },
-  hasChanged: { name: '_hasChanged', propagate: 'hasChanged' },
-  intrinsicErrorMessage: { name: '_intrinsicErrorMessage', propagate: null },
-  maxLength: { name: '_maxLength', propagate: 'maxLength' },
-  maxValue: { name: '_maxValue', propagate: 'maxValue' },
-  minLength: { name: '_minLength', propagate: 'minLength' },
-  minValue: { name: '_minValue', propagate: 'minValue' },
-  onValidation: { name: '_onValidation', propagate: 'onValidation' },
-  outputOnly: { name: '_outputOnly', propagate: 'outputOnly' },
-  placeholder: { name: '_placeholder', propagate: 'placeholder' },
-  tooltipText: { name: '_tooltipText', propagate: 'tooltip' },
-  validateOnServer: { name: '_validateOnServer', propagate: 'validateOnServer' },
-  value: { name: '_value', propagate: 'value' },
-  visibleLabel: { name: '_visibleLabel', propagate: 'visibleLabel' },
-};
-
-export interface DetailEvent {
-  code: string;
-  detail: any;
-}
-
-export interface FieldOption {
-  fieldOptionValue: string;
-  fieldOptionId: string;
-}
-
-export class FieldDescriptor extends FormElement {
-  private readonly _customEvent = new Subject<any>();
-  private readonly _editionFinish = new Subject<any>();
-  private readonly _editionPartial = new Subject<any>();
-  private readonly _detailRequest = new Subject<DetailEvent>();
-
-  private _errorType: string = '';
-  private _errorCode: string = '';
-  private _errorMessage: string = '';
-  private _intrinsicErrorMessage: string = '';
-  private _minValue: any;
-  private _maxValue: any;
-  private _maxLength: number = 0;
-  private _minLength: number = 0;
-  private _focus: boolean = false;
-  private _onValidation: boolean = false;
-  private _validateOnServer: boolean = false;
-  private _value: any;
-  private _visibleLabel: boolean = false;
-  private _captureType: string = '';
-  private _defaultValue: any = '';
-  private _defaultEditable: boolean = false;
-  private _externalValue: any;
-  private _fieldAlignment: string = '';
-  private _fieldInfo: any = '';
-  private _fieldRequired: boolean = false;
-  private _fieldTitle: string = '';
-  private _fieldType: string = '';
-  private _fieldFormat: RegExp | null = null;
-  private _hasChanged: boolean = false;
-  private _outputOnly: boolean = false;
-  private _tooltipText: string = '';
-  private _placeholder: string = '';
-  private _fieldCode: string = '';
-  private _fieldOptions: FieldOption[] | null = null;
-
-  constructor(inputFieldReceived, formConfig) {
-    super(inputFieldReceived, formConfig);
-    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.fields ?? [];
-    this.elementType = elementTypes.field;
-    const fld = (inputFieldReceived) ? inputFieldReceived : {};
-    this.setAttr(attrs.fieldCode, fld.fieldCode);
-    this.title = fld.fieldTitle ?? this._fieldCode;
-    this.placeholder = fld.placeholder ?? this.title;
-    this.type = fld.fieldTypeCode;
-    this.captureType = fld.captureType ?? DEFAULT_CAPTURE_TYPE;
-
-    const defaultValue = fld.defaultValue ?? null;
-    if (this._fieldType === this._formConfig.fieldTypes.boolean) {
-      this.defaultValue = defaultValue ?? false;
-    } else {
-      this.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.alignment = fieldAlignment;
-    this.info = fld.info || '';
-    let fieldFormat;
-    try {
-      if (fld.format && typeof fld.format === 'string') {
-        fieldFormat = new RegExp(fld.format);
-      } else if (fld.format?.regExp) {
-        fieldFormat = new RegExp(fld.format?.regExp);
-      }
-    } catch (e) {
-      fieldFormat = null;
-    }
-    this.format = fieldFormat;
-    this.validateOnServer = fld.serverAction ?? false;
-    this.tooltip = fld.tooltip || '';
-    this.defaultEditable = this.enabled;
-    this.required = fld.required ?? false;
-    this.outputOnly = fld.outputOnly ?? false;
-    this.minLength = fld.minLength ?? 0;
-    this.maxLength = fld.maxLength || (this._captureType === 'TEXTAREA' ? BIG_MAX_LENGTH : STD_MAX_LENGTH);
-    this.intrinsicErrorMessage = this._formConfig?.fieldValidations?.[this._fieldType]?.message
-      ?? this._formConfig?.fieldValidations?.DEFAULT?.message ?? '';
-
-    this.setError(fld.errorCode, fld.errorMessage, fld.errorType ?? DEFAULT_ERROR_TYPE);
-    this.setEditable(fld.editable ?? true);
-    this.visibleLabel = fld.visibleLabel ?? true;
-    this.setVisibility(fld.visible);
-    this.options = fld.fieldOptions;
-    this._setValue(fld.fieldValue ?? this._defaultValue ?? '');
-  }
-
-  get alignment() { return this._fieldAlignment; }
-  set alignment(alignment) { this.setAttr(attrs.fieldAlignment, alignment); }
-  get backend() { return this._validateOnServer; }
-
-  get captureType() { return this._captureType; }
-  set captureType(captureType) { this.setAttr(attrs.captureType, captureType); }
-
-  get placeholder() { return this._placeholder; }
-  set placeholder(placeholder) { this.setAttr(attrs.placeholder, placeholder); }
-
-  get code() { return this._fieldCode; }
-  get defaultValue() { return this._defaultValue; }
-  set defaultValue(defaultValue) { this.setAttr(attrs.defaultValue, defaultValue); }
-  get defaultEditable() { return this._defaultEditable; }
-  set defaultEditable(editable) { this.setAttr(attrs.defaultEditable, editable); }
-  get detailRequest() { return this._detailRequest.asObservable(); }
-  get customEvent() { return this._customEvent.asObservable(); }
-  get editionFinish() { return this._editionFinish.asObservable(); }
-  get editionPartial() { return this._editionPartial.asObservable(); }
-
-  get empty(): boolean {
-    const fieldCurrentValue = this.value;
-    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;
-    };
-    const arrayFieldTypes = this._formConfig.arrayFieldTypes ?? null;
-    if (arrayFieldTypes && Object.keys(arrayFieldTypes).includes(this._fieldType)) {
-      let arraySize = arrayFieldTypes[this._fieldType];
-      arraySize = !Number.isNaN(+arraySize) ? +arraySize : 0;
-      if (arraySize === 0) {
-        return (Array.isArray(fieldCurrentValue) && fieldCurrentValue.length === 0);
-      }
-      return (Array.isArray(fieldCurrentValue) && fieldCurrentValue.length < arraySize);
-    };
-    return fieldCurrentValue === '';
-  }
-
-  get error() { return { type: this._errorType, code: this._errorCode, message: this._errorMessage }; }
-  set error(errorObj) { this.setError(errorObj.code, errorObj.message, errorObj.type ?? DEFAULT_ERROR_TYPE) }
-  get errorCode() { return this._errorCode; }
-  set errorCode(code) { this.setError(code, this._errorMessage); }
-  get errorMessage() { return this._errorMessage; }
-  set errorMessage(msg) { this.setError(this._errorCode, msg); }
-  get errorType() { return this._errorType; }
-  get externalValue() { return this._externalValue; }
-  get format() { return this._fieldFormat; }
-  set format(format) { this.setAttr(attrs.fieldFormat, format); }
-  get hasChanged() { return this._hasChanged; }
-  set hasChanged(hasChanged) { this.setAttr(attrs.hasChanged, hasChanged); }
-
-  get info() { return this._fieldInfo; }
-  set info(newInfo: string) { this.setAttr(attrs.fieldInfo, newInfo); }
-  set intrinsicErrorMessage(message: string) { this.setAttr(attrs.intrinsicErrorMessage, message); }
-  get maxLength() { return (this._maxLength > 0) ? this._maxLength.toString() : ''; }
-  set maxLength(requiredMaxLength: any) { this.setAttr(attrs.maxLength, requiredMaxLength ? +requiredMaxLength : null); }
-  get maxValue() { return this._maxValue; }
-
-  set maxValue(inputMaxValue) {
-    let maxValue = inputMaxValue;
-    if (this._fieldType === this._formConfig.fieldTypes.date) {
-      maxValue = new Date(maxValue);
-    }
-    this.setAttr(attrs.maxValue, maxValue);
-  }
-
-  get minLength() { return this._minLength; }
-  set minLength(requiredMinLength: number) {
-    this.setAttr(attrs.minLength, requiredMinLength ? +requiredMinLength : null);
-  }
-  get minValue() { return this._minValue; }
-
-  set minValue(inputMinValue) {
-    let minValue = inputMinValue;
-    if (this._fieldType === this._formConfig.fieldTypes.date) {
-      minValue = new Date(minValue);
-    }
-    this.setAttr(attrs.minValue, minValue);
-  }
-
-  get name() { return this._fieldCode; }
-
-  get options(): FieldOption[] | null {
-    return this._fieldOptions?.map(option => {
-      const optionCopy: FieldOption = { ...option };
-      return optionCopy;
-    }) ?? [];
-  }
-
-  set options(newOptions) {
-    if ((!this._formConfig.captureTypesWithOptions.includes(this._captureType))
-      || typeof newOptions === UNDEFINED || !newOptions
-      || !Array.isArray(newOptions)) {
-      return;
-    }
-    let fieldOptions = newOptions.map((option: any) => {
-      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(attrs.fieldOptions, 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(attrs.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._value !== this._fieldOptions?.[0].fieldOptionId) {
-      this._setValue(this._fieldOptions?.[0].fieldOptionId);
-      this.notifyEditionFinish();
-    }
-  }
-
-  get optionText() { return this._fieldOptions?.find(item => item.fieldOptionId === this._value)?.fieldOptionValue ?? null; }
-  get outputOnly() { return this._outputOnly; }
-  set outputOnly(outputOnly) { this.setAttr(attrs.outputOnly, outputOnly); }
-  get required(): boolean { return this._fieldRequired; }
-  set required(required: boolean) { this.setAttr(attrs.fieldRequired, required ?? false); }
-  get title() { return this._fieldTitle; }
-  set title(title) { this.setAttr(attrs.fieldTitle, title?.toString() ?? ''); }
-  get tooltip() { return this._tooltipText; }
-  set tooltip(tooltip) { this.setAttr(attrs.tooltipText, tooltip); }
-  get type() { return this._fieldType; }
-  set type(fieldType) { this.setAttr(attrs.fieldType, fieldType); }
-  get onValidation() { return this._onValidation; }
-  get validating() { return this._onValidation; }
-  set validating(isValidating: boolean) { this.setAttr(attrs.onValidation, isValidating); }
-  get value() {
-    return (this._fieldType === this._formConfig.fieldTypes.boolean
-      || this._fieldType === this._formConfig.fieldTypes.check) ? yn(this._value) : this._value;
-  }
-  get validateOnServer() { return this._validateOnServer; }
-  set validateOnServer(validateOnServer) { this.setAttr(attrs.validateOnServer, validateOnServer); }
-  get serverAction() { return this._validateOnServer; }
-  set serverAction(validateOnServer: boolean) { this.validateOnServer = validateOnServer; }
-
-  set value(newValue) { this._setValue(newValue); }
-  get visibleLabel() { return this._visibleLabel; }
-  set visibleLabel(visibleLabel: boolean) { this.setAttr(attrs.visibleLabel, visibleLabel); }
-
-  /**
-   * @deprecated Use value
-   */
-  get fieldValue() { return this.value; }
-
-  /**
-   * @deprecated Use hasChanged
-   */
-  changed(hasChanged = true) { this.hasChanged = hasChanged; }
-
-  clean() { this._setValue(this._defaultValue || ''); this.resetError(); }
-  focus() { this.setAttr(attrs.focus, true); }
-  getErrorCode() { return this.error.code; }
-  setErrorCode(code) { this.setError(code, this._errorMessage); }
-  getErrorMessage() { return this.error.message; }
-  setErrorMessage(msg) { this.setError(this._errorCode, msg); }
-  getRequired() { return this.required; }
-  hasError() { return this._errorCode !== NO_ERROR; }
-  hideLabel() { this.visibleLabel = false; }
-  resetError() { (this._errorCode !== NO_ERROR) && this.setError(NO_ERROR, null); }
-  setEditable(editable: boolean = true) { (editable) ? this.enable() : this.disable(); }
-  setValue(newValue, widgetUpdate = true) { this._setValue(newValue, widgetUpdate); }
-  showLabel() { this.visibleLabel = true; }
-
-  /**
-   * @deprecated Use code
-   */
-  get fieldCode() { return this._fieldCode; }
-
-
-  /**
-   * @deprecated Use title
-   */
-  setLabel(label) { this.title = label; }
-
-  /**
-   * @deprecated Use required
-   */
-  setRequired(required: boolean) { this.required = required; }
-
-  /**
-   * @deprecated Use changed
-   */
-  setChanged(hasChanged: boolean) { this.changed(hasChanged); }
-
-  /**
-   * @deprecated Use value
-   */
-  getValue(): any { return this.value; }
-
-  /**
-   * @deprecated Use empty
-   */
-  isEmpty(): boolean { return this.empty }
-
-  /**
-   * @deprecated Use error
-   */
-  getError() { return this.error; }
-
-  /**
-   * @deprecated Use optionText
-   */
-  getOptionText() { return this.optionText; }
-
-  /**
-   * @deprecated Use options
-   */
-  getFieldOptions() { return this.options; }
-
-  /**
-   * @deprecated Use options
-   */
-  setFieldOptions(newOptions) { return this.options = newOptions; }
-
-  /**
-   * @deprecated Use intrinsicErrorMessage
-   */
-  setIntrinsicErrorMessage(message: string) { this.intrinsicErrorMessage = message; }
-
-  /**
-   * @deprecated Use maxValue
-   */
-  setMaxValue(inputMaxValue) { this.maxValue = inputMaxValue; }
-
-  /**
-   * @deprecated Use minValue
-   */
-  setMinValue(inputMinValue) { this.minValue = inputMinValue; }
-
-  /**
-   * @deprecated Use showLabel
-   */
-  setVisibleLabel(visibleLabel: boolean) { this.visibleLabel = visibleLabel; }
-
-
-  notifyEditionPartial() {
-    this.resetError();
-    this._editionPartial.next({ code: this._fieldCode, intrinsicValidation: true });
-  }
-
-  triggerCustomEvent(eventName, eventData) {
-    this._customEvent.next({ code: this._fieldCode, eventName, eventData });
-  }
-
-  notifyEditionFinish() {
-    const fieldValue = this.value;
-    this.resetError();
-    const validationConfig = this._formConfig.fieldValidations?.[this._fieldType] ?? {};
-    const { type, validation } = validationConfig;
-    let message = validationConfig?.message;
-    let intrinsicValidation = true;
-    if (fieldValue && (validation || this._fieldFormat)) {
-      if (type === 'regexp') {
-        intrinsicValidation = (validation?.test(fieldValue) ?? true)
-          && (this._fieldFormat?.test(fieldValue) ?? true);
-      } else if (type === 'function' && typeof validation === 'function') {
-        const { valid, message: customMessage } = validation(fieldValue, this);
-        intrinsicValidation = valid;
-        message = customMessage;
-      }
-      if (!intrinsicValidation) {
-        this.setError('99', message ?? 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');
-    }
-    if (intrinsicValidation && fieldValue && typeof fieldValue === 'string'
-      && this._minLength && fieldValue?.length < this._minLength) {
-      intrinsicValidation = false;
-      this.setError('99', `Longitud de ${this._fieldTitle} debe ser de al menos ${this._minLength}`);
-    }
-    this._editionFinish.next({ code: this._fieldCode, intrinsicValidation });
-  }
-
-  notifyEditionDetailRequest(detail: any) {
-    const detailEvent: DetailEvent = { code: this._fieldCode, detail };
-    this._detailRequest.next(detailEvent);
-  }
-
-  setError(code, message, type = DEFAULT_ERROR_TYPE) {
-    this.setAttr(attrs.errorCode, code ?? NO_ERROR);
-    this.setAttr(attrs.errorType, (this._errorCode === NO_ERROR) ? '' : type);
-    this.setAttr(attrs.errorMessage, message ?? '');
-  }
-
-  updateFromServer(fld) {
-    const fieldKeys = Object.keys(fld);
-    for (let index = 0; index < fieldKeys.length; index++) {
-      const attrName = fieldKeys[index];
-      const attrValue = fld[attrName];
-      if (directChanges.includes(attrName)) {
-        this[attrName] = attrValue;
-      } else {
-        (attrName === 'label') && (this.title = attrValue);
-        (attrName === 'labelVisible') && (this.visibleLabel = attrValue);
-        (attrName === 'editable') && this.setEditable(attrValue);
-        (attrName === 'visible') && this.setVisibility(attrValue);
-        (attrName === 'value') && (this._setValue(attrValue) && (this.hasChanged = false));
-        (attrName === 'fieldValue') && (this._setValue(attrValue) && (this.hasChanged = false));
-        (attrName === 'fieldOptions') && (this.options = attrValue);
-        (attrName === 'fieldTitle') && (this.title = attrValue);
-        (attrName === 'fieldTypeCode') && (this.type = attrValue);
-        (attrName === 'fieldType') && (this.type = attrValue);
-        (attrName === 'tooltipText') && (this.tooltip = attrValue);
-        (attrName === 'customAttributes') && (this.setCustomAttributes(attrValue));
-      }
-    }
-  }
-
-  private _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._hasChanged = true;
-      if (widgetUpdate) {
-        this.setAttr(attrs.value, newFinalValue);
-      } else {
-        this._value = newFinalValue;
-      }
-    }
-    return true;
-  }
-}

package/src/lib/classes/forms/form.constants.ts

@@ -1,28 +0,0 @@
-export const NO_ERROR = '00';
-export const HEADER = 'HEADER';
-
-export const elementTypes = {
-  action: 'ACTION',
-  field: 'FIELD',
-  table: 'TABLE',
-};
-
-export const formActions = {
-  tableAction: 'TABLEACTION',
-  getData: 'GETDATA',
-  getTableData: 'GETTABLEDATA',
-  validate: 'VALIDATE',
-};
-
-export const operators = {
-  G: 'G',
-  L: 'L',
-  GE: 'GE',
-  LE: 'LE',
-  EQ: 'EQ',
-  NEQ: 'NEQ',
-  HAS: 'HAS',
-  NOTHAS: 'NOTHAS',
-  BETWEEN: 'BETWEEN',
-  IN: 'IN',
-};