ngx-t-forms 2.0.7 → 2.0.9

package/fesm2022/{ngx-t-forms-validators-config.component-SyL_Vln8.mjs.map → ngx-t-forms-validators-config.component-CGXCCl45.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ngx-t-forms-validators-config.component-SyL_Vln8.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Optional, Output, Self } from '@angular/core';\r\nimport { MenuCloseReason } from '@angular/material/menu';\r\n\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { ElementTypes, FormControlCustomValidatorsInterface, IMultiple } from 'ngx-t-forms-types';\r\nimport { FormColumnInputs } from 'ngx-t-forms-types';\r\nimport { getInputIllustration } from '../../../../shared/functions/getInputIllustration';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormInputSelectorComponent } from '../form-input-selector/form-input-selector.component';\r\n\r\nimport { FormsModule, NgControl } from '@angular/forms';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n  selector: 'app-validators-config',\r\n  templateUrl: './validators-config.component.html',\r\n  styleUrls: ['./validators-config.component.scss'],\r\n  standalone: true,\r\n  imports:[\r\n    MatModulesModule,\r\n    CommonModule,\r\n    FormInputSelectorComponent,\r\n    FormsModule\r\n  ],\r\n  providers: [{ provide: MatFormFieldControl, useExisting: ValidatorsConfigComponent}],\r\n})\r\nexport class ValidatorsConfigComponent implements OnInit,MatFormFieldControl<FormControlCustomValidatorsInterface []> {\r\n \r\n\r\n   static nextId = 0;\r\n   stateChanges = new Subject<void>();\r\n \r\n   @HostBinding() id = `app-validators-config-${ValidatorsConfigComponent.nextId++}`;\r\n   \r\n   placeholder: string = ''\r\n   constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n   focused: boolean = false;\r\n   get empty() {\r\n     return !this.value\r\n   }\r\n   get shouldLabelFloat() {\r\n     return this.focused || !this.empty;\r\n   }\r\n   required: boolean = false;\r\n   disabled: boolean = false;\r\nget errorState(): boolean {\r\n     const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n     return !this.value && !!this.required  || hasError\r\n   }\r\n \r\n   controlType?: string | undefined;\r\n   autofilled?: boolean | undefined;\r\n   userAriaDescribedBy?: string | undefined;\r\n   disableAutomaticLabeling?: boolean | undefined;\r\n   setDescribedByIds(ids: string[]) {\r\n     // Ensure the component view is initialized\r\n     if (this._elementRef && this._elementRef.nativeElement) {\r\n       const controlElement = this._elementRef.nativeElement.querySelector('.app-validators-config');\r\n       // Check if the controlElement exists before attempting to set its attribute\r\n       if (controlElement) {\r\n         controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n       }\r\n     }\r\n   }\r\n   onContainerClick(event: MouseEvent): void {\r\n     this.markAsTouched();\r\n     this.stateChanges.next();\r\n   }\r\n     @Input() errors:IConfigElementError[] |undefined = [];\r\n   touched: boolean = false;\r\n   onTouched = () => {};\r\n   markAsTouched() {\r\n     console.log('markAsTouched')  \r\n     if (!this.touched) {\r\n       this.onTouched();\r\n       this.touched = true;\r\n     }\r\n   } \r\n \r\n  @Input() mapToData:FormColumnInputs | undefined = undefined;\r\n  @Input() value!: (FormControlCustomValidatorsInterface  )[];\r\n  @Input() formInputs: Array<FormColumnInputs> = []\r\n  @Output() valueChanged = new EventEmitter<any>();\r\n\r\n\r\n  ngOnInit() {}\r\n\r\n  edit:FormControlCustomValidatorsInterface  | undefined\r\n  menuClosed(event:MenuCloseReason){\r\n\r\n    if (this.edit) {\r\n      const editIndex = this.value.findIndex((item) => {\r\n        if (typeof item === 'string') {\r\n          return false;\r\n        }\r\n        return item.id === this.edit?.id;\r\n      });\r\n\r\n      if (editIndex !== -1) {\r\n        this.value[editIndex] = this.edit;\r\n      } \r\n      this.valueChanged.emit([...this.value])\r\n\r\n\r\n    }\r\n\r\n   this.edit = undefined\r\n  }\r\n  showVariables :boolean = false\r\n  editV(validator:string | FormControlCustomValidatorsInterface){\r\n    if(this.edit?.id === (validator as FormControlCustomValidatorsInterface).id){\r\n      this.edit = undefined\r\n      return\r\n    }\r\n    this.edit = validator as any\r\n  }\r\n  remove(validator:FormControlCustomValidatorsInterface|string){\r\n    const indexOfV = this.value.findIndex((item) => {\r\n      if (typeof item === 'string') {\r\n        return item === validator;\r\n      }\r\n      return item.id === (validator as FormControlCustomValidatorsInterface).id;\r\n    }\r\n    )\r\n\r\n\r\n    this.value = [...this.value].filter((item,i)=>indexOfV !== i)\r\n    this.valueChanged.emit([...this.value])\r\n\r\n  }\r\n  search: string = '';\r\n\r\n  getInputIcon(element: ElementTypes) {\r\n\r\n    return getInputIllustration(element)\r\n  }\r\n \r\n  selectInput(inputId: string) {\r\n    const input = this.formInputs.find((input) => input.id === inputId)\r\n    if(!input){\r\n      return\r\n    }\r\n    if(input?.multipleInputInEditId){\r\n      throw new Error('multipleInputInEditId is not supported')\r\n    }\r\n    if(!!this.edit){\r\n      this.edit.expression =  (this.edit?.expression || '' ).concat(input?.formControlName || '')\r\n      if(!this.edit.inputsObservedForChanges.find((i)=>i.inputId === (input?.originalId || input?.id))){\r\n        this.edit.inputsObservedForChanges.push({\r\n          inputId: input?.originalId || input?.id,\r\n          variable: input?.formControlName\r\n        })\r\n      }\r\n     \r\n    }\r\n    \r\n\r\n    this.showVariables = false\r\n\r\n  }\r\n\r\n  addVariable(event:any){\r\n  this.showVariables = true\r\n  event.stopPropagation()\r\n  event.preventDefault()\r\n\r\n  }\r\n  getMultipleFormInputs(input: IMultiple) {\r\n    if (\r\n      input.element === ElementTypes.MultipleInput&&\r\n      this.mapToData?.multipleInputInEditId === input.id\r\n    ) {\r\n      return input.formInputs;\r\n    }\r\n    return [];\r\n  }\r\n  returnExpression(){\r\n    return this.edit?.expression.replace(/(word)/g, '<span style=\\'color: blue\\'>$1</span>')\r\n  }\r\n  addValidator(){\r\n    this.edit = {\r\n      message: '',\r\n      expression: '',\r\n      canOverride: false,\r\n      inputsObservedForChanges: []\r\n    } as any\r\n  }\r\n\r\n  onTextChange(event:Event,key:string){\r\n    if(!this.edit) {\r\n      this.edit = {} as any\r\n    }\r\n    (this.edit as any)[key]  = (event.target as HTMLInputElement).value\r\n  }\r\n  saveVariable(event:any){\r\n      console.log(this.edit)\r\n      if(!this.edit) return;\r\n        const id = uuidv4()\r\n        const val = {...this.edit, id}\r\n        this.value = [...this.value, val]\r\n        this.valueChanged.emit([...this.value])\r\n        this.edit = undefined\r\n     \r\n      \r\n\r\n\r\n    \r\n  }\r\n  removeObserved(event:any,item:{ inputId: string; variable: string; }){\r\n    const i = this.edit?.inputsObservedForChanges.findIndex((i:any)=>i === item)\r\n    if(i !== undefined && i !== -1 && this.edit){\r\n      this.edit?.inputsObservedForChanges.splice(i, 1);\r\n      this.edit.expression = this.edit?.expression.replace(new RegExp(`\\\\b${item}\\\\b`, 'g'), '')\r\n\r\n    }\r\n\r\n    event.stopPropagation()\r\n    event.preventDefault()\r\n  }\r\n  isFormControlCustomValidator(validator: string |FormControlCustomValidatorsInterface  ){\r\n   if(typeof validator == 'string'){\r\n      return validator\r\n   }\r\n   return validator.message\r\n\r\n  }\r\n}\r\n\r\n\r\n\r\n","<div class=\"tree-instructions\">\r\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n  <span>\r\n    Custom validators are functions that take a form control as an argument and return an object of errors if the\r\n    validation fails.\r\n  </span>\r\n</div>\r\n\r\n<mat-list>\r\n<h5>\r\n  Custom Validators\r\n</h5>\r\n    <mat-chip-listbox  aria-label=\"Chip select options\">\r\n      @for (validator of  value; track $index) {\r\n      <mat-chip-option\r\n      style=\"height: fit-content;padding: 8px;\"\r\n      [selected]=\"edit?.id === validator.id\"\r\n      (click)=\"editV(validator)\">     \r\n      <span style=\"white-space: normal;\">\r\n        {{isFormControlCustomValidator(validator) | titlecase}}\r\n      </span>\r\n  \r\n        <button *ngIf=\"this.edit?.id !== validator.id\" (click)=\"remove(validator)\" matChipRemove \r\n        [attr.aria-label]=\"'remove ' \">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n          <mat-icon  *ngIf=\"this.edit?.id === validator.id\" matChipTrailingIcon>\r\n            check_circle\r\n          </mat-icon>\r\n    \r\n      \r\n      </mat-chip-option>\r\n    }\r\n    <mat-chip-option\r\n    matTooltip=\"Add a new custom validator\"\r\n    selectable=\"false\"\r\n    style=\"cursor: pointer !important;\"\r\n    highlighted=\"true\" color=\"accent\"   (click)=\"addValidator()\" *ngIf=\"!edit\">\r\n    <span >\r\n\r\n    </span>\r\n      Add validator\r\n      <mat-icon matChipTrailingIcon  >add</mat-icon>\r\n\r\n     \r\n    </mat-chip-option>\r\n    </mat-chip-listbox>\r\n\r\n  \r\n  \r\n\r\n\r\n</mat-list>\r\n<mat-card style=\"padding: 8px;background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"\r\n  *ngIf=\"edit\">\r\n  <ng-container *ngIf=\"edit && !showVariables; then validatorEditor\"></ng-container>\r\n  <mat-toolbar *ngIf=\"!showVariables\"  >\r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"edit=undefined\" mat-button>\r\n      close\r\n    </button>\r\n    <button mat-raised-button [disabled]=\"!edit.expression ||!edit.message\"\r\n     (click)=\"saveVariable($event)\" color=\"accent\">\r\n      Save Validation\r\n    </button>\r\n  </mat-toolbar>\r\n  <ng-container *ngIf=\"edit && !!showVariables; then variables\"></ng-container>\r\n</mat-card>\r\n\r\n\r\n\r\n\r\n<ng-template #validatorEditor>\r\n  <div class=\"tree-instructions\">\r\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n    <span>\r\n      The expression is checked on value change. The message shows if it fails.\r\n      <br>\r\n      You can observe inputs for changes to re-evaluate the expression.\r\n    </span>\r\n  </div>\r\n  <mat-list *ngIf=\"edit\">\r\n\r\n    <mat-form-field style=\"margin-bottom: 16px;\" (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n      <mat-label >Validation Message</mat-label>\r\n      <textarea matInput #textarea [value]=\"edit.message\"\r\n           (input)=\"onTextChange($event,'message')\"\r\n      placeholder=\"\r\n        Enter message\r\n        \"></textarea>\r\n\r\n      <mat-hint>\r\n        The message to display when the validation fails\r\n      </mat-hint>\r\n\r\n    </mat-form-field>\r\n\r\n\r\n\r\n\r\n    <mat-form-field (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n      <mat-label >Expression</mat-label>\r\n      <textarea matInput #textarea \r\n      (input)=\"onTextChange($event,'expression')\"\r\n      [value]=\"edit.expression\" placeholder=\"\r\n        enter expression\r\n        \"></textarea>\r\n\r\n      <mat-hint>\r\n        The expression to evaluate the validation\r\n      </mat-hint>\r\n\r\n    </mat-form-field>\r\n    <mat-toolbar>\r\n      <mat-slide-toggle (click)=\"$event.stopPropagation();\" name=\"CanOveride\" ngDefaultControl\r\n        (change)=\"edit.canOverride = $event.checked\" [checked]=\"edit.canOverride\">\r\n        <span style=\"margin-left: 5px;\"> Users can override this validation</span>\r\n\r\n      </mat-slide-toggle>\r\n    </mat-toolbar>\r\n    <label >\r\n      Observe inputs for changes\r\n    </label>\r\n    <mat-chip-listbox aria-label=\"Chip select options\">\r\n      @for(input of edit.inputsObservedForChanges;track input){\r\n      <mat-chip>input\r\n        <button (click)=\"removeObserved($event,input)\" matChipRemove [attr.aria-label]=\"'remove ' \">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip>\r\n      }\r\n      <mat-chip (click)=\"addVariable($event)\" color=\"primary\">\r\n        Variable\r\n        <mat-icon matChipTrailingIcon>\r\n          add\r\n        </mat-icon>\r\n      </mat-chip>\r\n    </mat-chip-listbox>\r\n\r\n    <br>\r\n    <mat-divider></mat-divider>\r\n\r\n\r\n  </mat-list>\r\n</ng-template>\r\n\r\n<ng-template #variables>\r\n\r\n  <section style=\"max-height: 360px; overflow-y: auto\">\r\n    <lib-form-input-selector (change)=\"selectInput($event)\" [formInputs]=\"formInputs\">\r\n\r\n    </lib-form-input-selector>\r\n\r\n    <div class=\"contentBackground\" *ngIf=\"formInputs.length === 0\">\r\n      <span style=\"\r\n          display: block;\r\n          text-align: center;\r\n          font-style: italic;\r\n          padding: 16px;\r\n        \">No form inputs</span>\r\n    </div>\r\n  </section>\r\n  <mat-toolbar>\r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"showVariables = !showVariables\" mat-flat-button>\r\n      Close\r\n      <mat-icon>\r\n        close\r\n      </mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n</ng-template>\r\n"],"names":["uuidv4","i13"],"mappings":"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"}
+{"version":3,"file":"ngx-t-forms-validators-config.component-CGXCCl45.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-dynamic-data-edit/elements/validators-config/validators-config.component.html"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Optional, Output, Self } from '@angular/core';\r\nimport { MenuCloseReason } from '@angular/material/menu';\r\n\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport { ElementTypes, FormControlCustomValidatorsInterface, IMultiple } from 'ngx-t-forms-types';\r\nimport { FormColumnInputs } from 'ngx-t-forms-types';\r\nimport { getInputIllustration } from '../../../../shared/functions/getInputIllustration';\r\n\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormInputSelectorComponent } from '../form-input-selector/form-input-selector.component';\r\n\r\nimport { FormsModule, NgControl } from '@angular/forms';\r\nimport { MatModulesModule } from '../../../../shared/modules/mat-modules.module';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\nimport { Subject } from 'rxjs';\r\nimport { IConfigElementError } from '../../t-dynamic-data-edit.component';\r\n\r\n@Component({\r\n  selector: 'app-validators-config',\r\n  templateUrl: './validators-config.component.html',\r\n  styleUrls: ['./validators-config.component.scss'],\r\n  standalone: true,\r\n  imports:[\r\n    MatModulesModule,\r\n    CommonModule,\r\n    FormInputSelectorComponent,\r\n    FormsModule\r\n  ],\r\n  providers: [{ provide: MatFormFieldControl, useExisting: ValidatorsConfigComponent}],\r\n})\r\nexport class ValidatorsConfigComponent implements OnInit,MatFormFieldControl<FormControlCustomValidatorsInterface []> {\r\n \r\n\r\n   static nextId = 0;\r\n   stateChanges = new Subject<void>();\r\n \r\n   @HostBinding() id = `app-validators-config-${ValidatorsConfigComponent.nextId++}`;\r\n   \r\n   placeholder: string = ''\r\n   constructor(@Optional() @Self() public ngControl: NgControl, private _elementRef: ElementRef<HTMLElement>,) { }\r\n   focused: boolean = false;\r\n   get empty() {\r\n     return !this.value\r\n   }\r\n   get shouldLabelFloat() {\r\n     return this.focused || !this.empty;\r\n   }\r\n   required: boolean = false;\r\n   disabled: boolean = false;\r\nget errorState(): boolean {\r\n     const hasError = !!this.ngControl?.control?.errors || (this.errors||[]).length > 0 && this.touched\r\n     return !this.value && !!this.required  || hasError\r\n   }\r\n \r\n   controlType?: string | undefined;\r\n   autofilled?: boolean | undefined;\r\n   userAriaDescribedBy?: string | undefined;\r\n   disableAutomaticLabeling?: boolean | undefined;\r\n   setDescribedByIds(ids: string[]) {\r\n     // Ensure the component view is initialized\r\n     if (this._elementRef && this._elementRef.nativeElement) {\r\n       const controlElement = this._elementRef.nativeElement.querySelector('.app-validators-config');\r\n       // Check if the controlElement exists before attempting to set its attribute\r\n       if (controlElement) {\r\n         controlElement.setAttribute('aria-describedby', ids.join(' '));\r\n       }\r\n     }\r\n   }\r\n   onContainerClick(event: MouseEvent): void {\r\n     this.markAsTouched();\r\n     this.stateChanges.next();\r\n   }\r\n     @Input() errors:IConfigElementError[] |undefined = [];\r\n   touched: boolean = false;\r\n   onTouched = () => {};\r\n   markAsTouched() {\r\n     console.log('markAsTouched')  \r\n     if (!this.touched) {\r\n       this.onTouched();\r\n       this.touched = true;\r\n     }\r\n   } \r\n \r\n  @Input() mapToData:FormColumnInputs | undefined = undefined;\r\n  @Input() value!: (FormControlCustomValidatorsInterface  )[];\r\n  @Input() formInputs: Array<FormColumnInputs> = []\r\n  @Output() valueChanged = new EventEmitter<any>();\r\n\r\n\r\n  ngOnInit() {}\r\n\r\n  edit:FormControlCustomValidatorsInterface  | undefined\r\n  menuClosed(event:MenuCloseReason){\r\n\r\n    if (this.edit) {\r\n      const editIndex = this.value.findIndex((item) => {\r\n        if (typeof item === 'string') {\r\n          return false;\r\n        }\r\n        return item.id === this.edit?.id;\r\n      });\r\n\r\n      if (editIndex !== -1) {\r\n        this.value[editIndex] = this.edit;\r\n      } \r\n      this.valueChanged.emit([...this.value])\r\n\r\n\r\n    }\r\n\r\n   this.edit = undefined\r\n  }\r\n  showVariables :boolean = false\r\n  editV(validator:string | FormControlCustomValidatorsInterface){\r\n    if(this.edit?.id === (validator as FormControlCustomValidatorsInterface).id){\r\n      this.edit = undefined\r\n      return\r\n    }\r\n    this.edit = validator as any\r\n  }\r\n  remove(validator:FormControlCustomValidatorsInterface|string){\r\n    const indexOfV = this.value.findIndex((item) => {\r\n      if (typeof item === 'string') {\r\n        return item === validator;\r\n      }\r\n      return item.id === (validator as FormControlCustomValidatorsInterface).id;\r\n    }\r\n    )\r\n\r\n\r\n    this.value = [...this.value].filter((item,i)=>indexOfV !== i)\r\n    this.valueChanged.emit([...this.value])\r\n\r\n  }\r\n  search: string = '';\r\n\r\n  getInputIcon(element: ElementTypes) {\r\n\r\n    return getInputIllustration(element)\r\n  }\r\n \r\n  selectInput(inputId: string) {\r\n    const input = this.formInputs.find((input) => input.id === inputId)\r\n    if(!input){\r\n      return\r\n    }\r\n    if(input?.multipleInputInEditId){\r\n      throw new Error('multipleInputInEditId is not supported')\r\n    }\r\n    if(!!this.edit){\r\n      this.edit.expression =  (this.edit?.expression || '' ).concat(input?.formControlName || '')\r\n      if(!this.edit.inputsObservedForChanges.find((i)=>i.inputId === (input?.originalId || input?.id))){\r\n        this.edit.inputsObservedForChanges.push({\r\n          inputId: input?.originalId || input?.id,\r\n          variable: input?.formControlName\r\n        })\r\n      }\r\n     \r\n    }\r\n    \r\n\r\n    this.showVariables = false\r\n\r\n  }\r\n\r\n  addVariable(event:any){\r\n  this.showVariables = true\r\n  event.stopPropagation()\r\n  event.preventDefault()\r\n\r\n  }\r\n  getMultipleFormInputs(input: IMultiple) {\r\n    if (\r\n      input.element === ElementTypes.MultipleInput&&\r\n      this.mapToData?.multipleInputInEditId === input.id\r\n    ) {\r\n      return input.formInputs;\r\n    }\r\n    return [];\r\n  }\r\n  returnExpression(){\r\n    return this.edit?.expression.replace(/(word)/g, '<span style=\\'color: blue\\'>$1</span>')\r\n  }\r\n  addValidator(){\r\n    this.edit = {\r\n      message: '',\r\n      expression: '',\r\n      canOverride: false,\r\n      inputsObservedForChanges: []\r\n    } as any\r\n  }\r\n\r\n  onTextChange(event:Event,key:string){\r\n    if(!this.edit) {\r\n      this.edit = {} as any\r\n    }\r\n    (this.edit as any)[key]  = (event.target as HTMLInputElement).value\r\n  }\r\n  saveVariable(event:any){\r\n      console.log(this.edit)\r\n      if(!this.edit) return;\r\n        const id = uuidv4()\r\n        const val = {...this.edit, id}\r\n        this.value = [...this.value, val]\r\n        this.valueChanged.emit([...this.value])\r\n        this.edit = undefined\r\n     \r\n      \r\n\r\n\r\n    \r\n  }\r\n  removeObserved(event:any,item:{ inputId: string; variable: string; }){\r\n    const i = this.edit?.inputsObservedForChanges.findIndex((i:any)=>i === item)\r\n    if(i !== undefined && i !== -1 && this.edit){\r\n      this.edit?.inputsObservedForChanges.splice(i, 1);\r\n      this.edit.expression = this.edit?.expression.replace(new RegExp(`\\\\b${item}\\\\b`, 'g'), '')\r\n\r\n    }\r\n\r\n    event.stopPropagation()\r\n    event.preventDefault()\r\n  }\r\n  isFormControlCustomValidator(validator: string |FormControlCustomValidatorsInterface  ){\r\n   if(typeof validator == 'string'){\r\n      return validator\r\n   }\r\n   return validator.message\r\n\r\n  }\r\n}\r\n\r\n\r\n\r\n","<div class=\"tree-instructions\">\r\n  <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n  <span>\r\n    Custom validators are functions that take a form control as an argument and return an object of errors if the\r\n    validation fails.\r\n  </span>\r\n</div>\r\n\r\n<mat-list>\r\n<h5>\r\n  Custom Validators\r\n</h5>\r\n    <mat-chip-listbox  aria-label=\"Chip select options\">\r\n      @for (validator of  value; track $index) {\r\n      <mat-chip-option\r\n      style=\"height: fit-content;padding: 8px;\"\r\n      [selected]=\"edit?.id === validator.id\"\r\n      (click)=\"editV(validator)\">     \r\n      <span style=\"white-space: normal;\">\r\n        {{isFormControlCustomValidator(validator) | titlecase}}\r\n      </span>\r\n  \r\n        <button *ngIf=\"this.edit?.id !== validator.id\" (click)=\"remove(validator)\" matChipRemove \r\n        [attr.aria-label]=\"'remove ' \">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n          <mat-icon  *ngIf=\"this.edit?.id === validator.id\" matChipTrailingIcon>\r\n            check_circle\r\n          </mat-icon>\r\n    \r\n      \r\n      </mat-chip-option>\r\n    }\r\n    <mat-chip-option\r\n    matTooltip=\"Add a new custom validator\"\r\n    selectable=\"false\"\r\n    style=\"cursor: pointer !important;\"\r\n    highlighted=\"true\" color=\"accent\"   (click)=\"addValidator()\" *ngIf=\"!edit\">\r\n    <span >\r\n\r\n    </span>\r\n      Add validator\r\n      <mat-icon matChipTrailingIcon  >add</mat-icon>\r\n\r\n     \r\n    </mat-chip-option>\r\n    </mat-chip-listbox>\r\n\r\n  \r\n  \r\n\r\n\r\n</mat-list>\r\n<mat-card style=\"padding: 8px;background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))\"\r\n  *ngIf=\"edit\">\r\n  <ng-container *ngIf=\"edit && !showVariables; then validatorEditor\"></ng-container>\r\n  <mat-toolbar *ngIf=\"!showVariables\"  >\r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"edit=undefined\" mat-button>\r\n      close\r\n    </button>\r\n    <button mat-raised-button [disabled]=\"!edit.expression ||!edit.message\"\r\n     (click)=\"saveVariable($event)\" color=\"accent\">\r\n      Save Validation\r\n    </button>\r\n  </mat-toolbar>\r\n  <ng-container *ngIf=\"edit && !!showVariables; then variables\"></ng-container>\r\n</mat-card>\r\n\r\n\r\n\r\n\r\n<ng-template #validatorEditor>\r\n  <div class=\"tree-instructions\">\r\n    <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n    <span>\r\n      The expression is checked on value change. The message shows if it fails.\r\n      <br>\r\n      You can observe inputs for changes to re-evaluate the expression.\r\n    </span>\r\n  </div>\r\n  <mat-list *ngIf=\"edit\">\r\n\r\n    <mat-form-field style=\"margin-bottom: 16px;\" (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n      <mat-label >Validation Message</mat-label>\r\n      <textarea matInput #textarea [value]=\"edit.message\"\r\n           (input)=\"onTextChange($event,'message')\"\r\n      placeholder=\"\r\n        Enter message\r\n        \"></textarea>\r\n\r\n      <mat-hint>\r\n        The message to display when the validation fails\r\n      </mat-hint>\r\n\r\n    </mat-form-field>\r\n\r\n\r\n\r\n\r\n    <mat-form-field (click)=\"$event.stopPropagation();\" appearance=\"outline\">\r\n      <mat-label >Expression</mat-label>\r\n      <textarea matInput #textarea \r\n      (input)=\"onTextChange($event,'expression')\"\r\n      [value]=\"edit.expression\" placeholder=\"\r\n        enter expression\r\n        \"></textarea>\r\n\r\n      <mat-hint>\r\n        The expression to evaluate the validation\r\n      </mat-hint>\r\n\r\n    </mat-form-field>\r\n    <mat-toolbar>\r\n      <mat-slide-toggle (click)=\"$event.stopPropagation();\" name=\"CanOveride\" ngDefaultControl\r\n        (change)=\"edit.canOverride = $event.checked\" [checked]=\"edit.canOverride\">\r\n        <span style=\"margin-left: 5px;\"> Users can override this validation</span>\r\n\r\n      </mat-slide-toggle>\r\n    </mat-toolbar>\r\n    <label >\r\n      Observe inputs for changes\r\n    </label>\r\n    <mat-chip-listbox aria-label=\"Chip select options\">\r\n      @for(input of edit.inputsObservedForChanges;track input){\r\n      <mat-chip>input\r\n        <button (click)=\"removeObserved($event,input)\" matChipRemove [attr.aria-label]=\"'remove ' \">\r\n          <mat-icon>cancel</mat-icon>\r\n        </button>\r\n      </mat-chip>\r\n      }\r\n      <mat-chip (click)=\"addVariable($event)\" color=\"primary\">\r\n        Variable\r\n        <mat-icon matChipTrailingIcon>\r\n          add\r\n        </mat-icon>\r\n      </mat-chip>\r\n    </mat-chip-listbox>\r\n\r\n    <br>\r\n    <mat-divider></mat-divider>\r\n\r\n\r\n  </mat-list>\r\n</ng-template>\r\n\r\n<ng-template #variables>\r\n\r\n  <section style=\"max-height: 360px; overflow-y: auto\">\r\n    <lib-form-input-selector (change)=\"selectInput($event)\" [formInputs]=\"formInputs\">\r\n\r\n    </lib-form-input-selector>\r\n\r\n    <div class=\"contentBackground\" *ngIf=\"formInputs.length === 0\">\r\n      <span style=\"\r\n          display: block;\r\n          text-align: center;\r\n          font-style: italic;\r\n          padding: 16px;\r\n        \">No form inputs</span>\r\n    </div>\r\n  </section>\r\n  <mat-toolbar>\r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"showVariables = !showVariables\" mat-flat-button>\r\n      Close\r\n      <mat-icon>\r\n        close\r\n      </mat-icon>\r\n    </button>\r\n  </mat-toolbar>\r\n</ng-template>\r\n"],"names":["uuidv4","i13"],"mappings":"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"}

package/fesm2022/ngx-t-forms.mjs

@@ -1,2 +1,2 @@
-export { x as DialogTemplateComponent, k as FORM_ACTIONS_TOKEN, l as FORM_CONFIG_TOKEN, n as FORM_INPUTS_TOKEN, m as FORM_SLIDES_TOKEN, s as FormBuilderComponent, c as FormTowerControllerService, r as FormsComponent, q as MSCOA_TREE_PROVIDER, o as MULTIPLE_FORM_INPUT_TOKEN, u as MscoaFormInputComponent, N as NGX_T_FORMS_CONFIG_TOKEN, h as NgxTFormsComponent, f as NgxTFormsService, P as PropertyAccessError, y as SignatureInputElementComponent, S as SyncEditorComponent, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent, w as TFormInputComponent, U as UTILS_OBJECT_TOKEN, v as UserFormStepperComponent, a as assignDeepPropertyToObject, j as formGenerator, C as getUrl, i as initFormConfigToV2, p as provideNgxTForms, z as returnDeepProperty, A as safeReturnDeepProperty, E as textIconsForUserHints, B as validateObjectAgainstString } from './ngx-t-forms-ngx-t-forms-DtoFU6uQ.mjs';
+export { x as DialogTemplateComponent, k as FORM_ACTIONS_TOKEN, l as FORM_CONFIG_TOKEN, n as FORM_INPUTS_TOKEN, m as FORM_SLIDES_TOKEN, s as FormBuilderComponent, c as FormTowerControllerService, r as FormsComponent, q as MSCOA_TREE_PROVIDER, o as MULTIPLE_FORM_INPUT_TOKEN, u as MscoaFormInputComponent, N as NGX_T_FORMS_CONFIG_TOKEN, h as NgxTFormsComponent, f as NgxTFormsService, P as PropertyAccessError, y as SignatureInputElementComponent, S as SyncEditorComponent, T as TDynamicDataEditComponent, b as TDynamicDataViewComponent, w as TFormInputComponent, U as UTILS_OBJECT_TOKEN, v as UserFormStepperComponent, W as WorkflowBuilderComponent, a as assignDeepPropertyToObject, j as formGenerator, C as getUrl, i as initFormConfigToV2, p as provideNgxTForms, z as returnDeepProperty, A as safeReturnDeepProperty, E as textIconsForUserHints, B as validateObjectAgainstString } from './ngx-t-forms-ngx-t-forms-1Roar4qK.mjs';
 //# sourceMappingURL=ngx-t-forms.mjs.map

package/lib/components/form-builder/elements/form-section-stepper/form-section-stepper.component.d.ts

@@ -10,6 +10,7 @@ export declare class FormSectionStepperComponent extends FormTowerControllerServ
     ngOnInit(): void;
     private store;
     loadingForm$: Observable<boolean>;
+    selectInputInEditId$: Observable<string | null>;
     isEditable: boolean;
     stepper: MatStepper | undefined;
     get formBuilderFunctions(): FormBuilderFunctions;
@@ -30,6 +31,7 @@ export declare class FormSectionStepperComponent extends FormTowerControllerServ
     editInput: (item: FormColumnInputs) => void;
     addMultipleInputValueCalculationFunction: (item: IMultipleInputCal, multipleInputId: string | undefined) => void;
     setActiveSection: ($event: StepperSelectionEvent) => number;
+    addInputToScoaSelection: (sectionId: string, scoaInputId: string) => void;
     addNewInput: (sectionId: string) => void;
     addSection: () => void;
     setMatActiveStepper: (index: number) => number;

package/lib/components/form-builder/elements/form-submissions-config/form-submissions-config.component.d.ts

@@ -25,7 +25,7 @@ export declare class FormSubmissionsConfigComponent {
     _data: any;
     store: FormsStoreService;
     form: import("@angular/core").Signal<import("ngx-t-forms-types").FormInterface | undefined>;
-    formInputs: import("@angular/core").Signal<import("ngx-t-forms-types").FormColumnInputs[]>;
+    formInputs: import("@angular/core").Signal<import("ngx-t-forms-types").FormColumnInputs[] | undefined>;
     getFormApis(key: any): import("@angular/core").Signal<APIDataFetchingConfigurationInterface[]>;
     constructor();
     dataPlaceholder: undefined | {

package/lib/components/form-builder/elements/input-element-editor/input-element-editor.component.d.ts

@@ -16,7 +16,7 @@ export declare class InputElementEditorComponent {
     }>;
     inputInEdit$: import("rxjs").Observable<import("ngx-t-forms-types").FormColumnInputs | undefined>;
     defaultInputInEdit$: import("rxjs").Observable<any>;
-    formInputs$: import("rxjs").Observable<import("ngx-t-forms-types").FormColumnInputs[]>;
+    formInputs$: import("rxjs").Observable<import("ngx-t-forms-types").FormColumnInputs[] | undefined>;
     elementConfigurationChanged: (value: any, ele: ElementEditorInnerSectionElementInterface) => void;
     clearInputInEdit: () => void;
     elementBlur: (event: any, element: ElementEditorInnerSectionElementInterface) => void;
@@ -37,7 +37,7 @@ export declare class InputElementEditorComponent {
             description?: string;
         };
         inputInEditValidationErrors: import("ngx-t-forms-types").ValidationError[];
-        formInputs: import("ngx-t-forms-types").FormColumnInputs[];
+        formInputs: import("ngx-t-forms-types").FormColumnInputs[] | undefined;
     }>;
     showDebugData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputElementEditorComponent, never>;

package/lib/components/forms/forms.component.d.ts

@@ -28,7 +28,7 @@ export declare class FormsComponent implements OnInit, OnDestroy {
         formControlName: string;
     }[];
     activeForm: string | null;
-    getCols(): 1 | 4 | 2 | 3;
+    getCols(): 1 | 3 | 2 | 4;
     getFormAvatar(formTitle: string): string;
     archive(form: LocalFormStateSelectorInterface, event: Event): Promise<void>;
     unarchive(form: LocalFormStateSelectorInterface, event: Event): Promise<void>;

package/lib/components/forms/store/Form-actions-formBuilder.d.ts

@@ -31,4 +31,5 @@ export declare function formBuilderStoreActions(store: FormsStoreService): {
     elementBlur: (inputId: string, event: any, element: ElementEditorInnerSectionElementInterface) => void;
     addMultipleFormInput: (sectionId: string, multipleInputInEditId: string) => void;
     clearInputInEdit: (inputId: string) => void;
+    addInputToScoaSelection: (sectionId: string, scoaInputId: string) => void;
 };

package/lib/components/forms/store/Form-selectors-FormBuilder.d.ts

@@ -14,7 +14,7 @@ export declare function formsFormBuilderStoreSelectors(store: FormsStoreService)
     defaultInputInEdit$: import("rxjs").Observable<any>;
     inputInEditValidationErrors$: import("rxjs").Observable<import("ngx-t-forms-types").ValidationError[]>;
     selectFormTitle$: import("rxjs").Observable<string | undefined>;
-    getAllFormInputs$: import("rxjs").Observable<import("ngx-t-forms-types").FormColumnInputs[]>;
+    getAllFormInputs$: import("rxjs").Observable<import("ngx-t-forms-types").FormColumnInputs[] | undefined>;
     inputElementEditorConfigs$: import("rxjs").Observable<{
         editorSections: {
             elements: import("ngx-t-forms-types").ElementEditorInnerSectionElementInterface[];

package/lib/components/forms/store/forms-store.service.d.ts

@@ -82,7 +82,7 @@ export declare class FormsStoreService extends ComponentStore<IFormsInitStateInt
         defaultInputInEdit$: Observable<any>;
         inputInEditValidationErrors$: Observable<import("ngx-t-forms-types").ValidationError[]>;
         selectFormTitle$: Observable<string | undefined>;
-        getAllFormInputs$: Observable<import("ngx-t-forms-types").FormColumnInputs[]>;
+        getAllFormInputs$: Observable<import("ngx-t-forms-types").FormColumnInputs[] | undefined>;
         inputElementEditorConfigs$: Observable<{
             editorSections: {
                 elements: import("ngx-t-forms-types").ElementEditorInnerSectionElementInterface[];
@@ -206,6 +206,7 @@ export declare class FormsStoreService extends ComponentStore<IFormsInitStateInt
         elementBlur: (inputId: string, event: any, element: import("ngx-t-forms-types").ElementEditorInnerSectionElementInterface) => void;
         addMultipleFormInput: (sectionId: string, multipleInputInEditId: string) => void;
         clearInputInEdit: (inputId: string) => void;
+        addInputToScoaSelection: (sectionId: string, scoaInputId: string) => void;
     };
     readonly effects: {
         createForm$: (observableOrValue: FormInterface | Observable<FormInterface>) => import("rxjs").Subscription;

package/lib/components/index.d.ts

@@ -8,4 +8,5 @@ import { MscoaFormInputComponent } from "./t-form-input/elements/mscoa-form-inpu
 import { SignatureInputElementComponent } from "./t-form-input/elements/signature-input-element/signature-input-element.component";
 import { TFormInputComponent } from "./t-form-input/t-form-input.component";
 import { UserFormStepperComponent } from "./user-form-stepper/user-form-stepper.component";
-export { FormsComponent, FormBuilderComponent, MscoaFormInputComponent, UserFormStepperComponent, TFormInputComponent, SyncEditorComponent, TDynamicDataEditComponent, TDynamicDataViewComponent, DialogTemplateComponent, SignatureInputElementComponent };
+import { WorkflowBuilderComponent } from "./workflow-builder/workflow-builder.component";
+export { FormsComponent, FormBuilderComponent, MscoaFormInputComponent, UserFormStepperComponent, TFormInputComponent, SyncEditorComponent, TDynamicDataEditComponent, TDynamicDataViewComponent, DialogTemplateComponent, SignatureInputElementComponent, WorkflowBuilderComponent };

package/lib/components/t-dynamic-data-edit/elements/mscoa-segment-config/mscoa-segment-config.component.d.ts

@@ -1,17 +1,12 @@
 import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, NgControl } from '@angular/forms';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { IGetTreeResponse } from 'ngx-t-forms-types';
+import { IGetTreeResponse, IIncludedSegmentConfig } from 'ngx-t-forms-types';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { IConfigElementError } from '../../t-dynamic-data-edit.component';
+import { MatSelectChange } from '@angular/material/select';
 import * as i0 from "@angular/core";
-interface IIncludedSegmentConfig {
-    segment: string;
-    label: string;
-    readOnly: boolean;
-    singleSelect: boolean;
-}
 export declare class MscoaSegmentConfigComponent implements OnInit, OnDestroy, MatFormFieldControl<IIncludedSegmentConfig[] | undefined> {
     private fb;
     ngControl: NgControl;
@@ -67,9 +62,10 @@ export declare class MscoaSegmentConfigComponent implements OnInit, OnDestroy, M
     singleSelectChange(event: MatSlideToggleChange): void;
     removeSegment(index: number): void;
     private toTitleCase;
-    alreadyExists(segment: string): IIncludedSegmentConfig | undefined;
+    alreadyExists(segment: IIncludedSegmentConfig): false | IIncludedSegmentConfig | undefined;
     checkShowAllSegments(): void;
+    selectSegment($event: MatSelectChange<any>): void;
+    multiLevelSelectChange(event: MatSlideToggleChange): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MscoaSegmentConfigComponent, [null, { optional: true; self: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MscoaSegmentConfigComponent, "app-mscoa-segment-config", never, { "errors": { "alias": "errors"; "required": false; }; "value": { "alias": "value"; "required": false; }; "showAllSegments": { "alias": "showAllSegments"; "required": false; }; "getMscoaTree": { "alias": "getMscoaTree"; "required": false; }; }, { "valueChanged": "valueChanged"; }, never, never, true, never>;
 }
-export {};

package/lib/components/t-form-input/elements/mscoa-form-input/elements/account-value/account-value.component.d.ts

@@ -1,14 +1,14 @@
 import { EventEmitter } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { IMSCOAAccount } from "ngx-t-forms-types";
+import { IScoaAccount } from "ngx-t-forms-types";
 import { FormColumnInputs } from 'ngx-t-forms-types';
 import * as i0 from "@angular/core";
 export declare class AccountValueComponent {
-    mscoaAccount: IMSCOAAccount | undefined;
+    mscoaAccount: IScoaAccount | undefined;
     accountInputs: FormColumnInputs[];
     userCanClearAccount: boolean;
     clearSelectedAccount: EventEmitter<void>;
-    updateAccount: EventEmitter<IMSCOAAccount>;
+    updateAccount: EventEmitter<IScoaAccount>;
     get accountDetails(): ({
         label: string;
         value: string | {

package/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-chart/mscoa-chart.component.d.ts

@@ -1,56 +1,64 @@
-import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
-import { Observable } from 'rxjs';
+import { OnInit, OnDestroy, EventEmitter, Injector } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
-import { IMSCOAAccount, IMscoaInputConfig, ITableScoaSelectionRow, MscoaSegmentValue } from "ngx-t-forms-types";
+import { IScoaAccount, IScoaInputConfig, ITableScoaSelectionRow, ScoaInnerInput, ScoaSegmentValue } from "ngx-t-forms-types";
 import { MscoaComponentStore } from '../../store/mscoa-component-store.service';
 import { FormColumnInputs } from 'ngx-t-forms-types';
 import { FormBuilderFunctions } from "ngx-t-forms-types";
+import { FormGroup } from '@angular/forms';
+import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from "@angular/core";
 export declare class MscoaChartComponent implements OnInit, OnDestroy {
     private store;
-    selectAccountTreeKeys$: Observable<{
-        segment: string | undefined;
-        singleSelect: boolean;
-        segmentTree: import("ngx-t-forms-types").MscoaAccountTree;
-        inputs: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput[];
-        segmentValue: {
-            debit: IMSCOAAccount | undefined;
-            credit: IMSCOAAccount | undefined;
-        } | undefined;
-    }[]>;
+    private injector;
+    selectAccountTreeKeys$: Observable<import("ngx-t-forms-types").IAccountSegmentTreeKeys[]>;
     selectMscoaLoadingTree$: Observable<boolean>;
     table$: Observable<{
-        segment: string | undefined;
+        segment: string;
+        innerInput: ScoaInnerInput;
+        label: string;
+        formInput: boolean;
+        segmentTree: import("ngx-t-forms-types").ScoaAccountTree;
+        inputs: ScoaInnerInput[];
+        segmentValue: Record<string, any>;
+        customSegment?: string | undefined;
+        readOnly: boolean;
         singleSelect: boolean;
-        segmentTree: import("ngx-t-forms-types").MscoaAccountTree;
-        inputs: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput[];
-        segmentValue: {
-            debit: IMSCOAAccount | undefined;
-            credit: IMSCOAAccount | undefined;
-        } | undefined;
-        accountInputs: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput[];
-        input: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput | undefined;
-        debit: string | IMSCOAAccount | undefined;
-        credit: string | IMSCOAAccount | undefined;
+        segmentExtension: boolean;
+        id: string;
+        accountInputs: ScoaInnerInput[];
+        input: ScoaInnerInput | undefined;
+        debit: any;
+        credit: any;
     }[]>;
-    segmentValues$: Observable<MscoaSegmentValue>;
+    segmentValues$: Observable<ScoaSegmentValue>;
     initiated$: Observable<boolean>;
+    inputs$: Observable<ScoaInnerInput[]>;
     private destroy$;
     _formBuilderFunctions: FormBuilderFunctions | undefined;
-    constructor(store: MscoaComponentStore);
+    constructor(store: MscoaComponentStore, injector: Injector);
+    inputPortals: {
+        [key: string]: ComponentPortal<any>;
+    };
+    setupPortals(inputs: ScoaInnerInput[]): void;
+    createInjectorWithProps(props: any): Injector;
+    inputConfig: FormColumnInputs | undefined;
+    editorMode: boolean;
     set formBuilderFunctions(func: FormBuilderFunctions | undefined);
     get formBuilderFunctions(): FormBuilderFunctions | undefined;
-    set segmentValues(segmentValues: MscoaSegmentValue | null);
+    set segmentValues(segmentValues: ScoaSegmentValue | null);
     readonly: boolean;
-    set config(config: IMscoaInputConfig | undefined | null);
-    segmentValuesChanged: EventEmitter<MscoaSegmentValue>;
+    _config: IScoaInputConfig | undefined | null;
+    set config(config: IScoaInputConfig | undefined | null);
+    formGroup: FormGroup | undefined | null;
+    segmentValuesChanged: EventEmitter<ScoaSegmentValue>;
     interaction: EventEmitter<string>;
     readonly dialog: MatDialog;
     ngOnInit(): void;
     segmentChange(activeSegment: string): void;
     loadMscoa(functions: FormBuilderFunctions | undefined): void;
     ngOnDestroy(): void;
-    accountNumberSelected(account: IMSCOAAccount | undefined, segment: string, accountType?: "debit" | "credit"): void;
+    accountNumberSelected(account: IScoaAccount | undefined, segment: string, accountType?: "debit" | "credit"): void;
     get hasMultiSelect$(): Observable<boolean>;
     get cols$(): Observable<string[]>;
     editSelection: ITableScoaSelectionRow | any;
@@ -61,33 +69,40 @@ export declare class MscoaChartComponent implements OnInit, OnDestroy {
     onClick(): void;
     viewData$: Observable<{
         loading: boolean;
-        accountTreeKeys: {
-            segment: string | undefined;
-            singleSelect: boolean;
-            segmentTree: import("ngx-t-forms-types").MscoaAccountTree;
-            inputs: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput[];
-            segmentValue: {
-                debit: IMSCOAAccount | undefined;
-                credit: IMSCOAAccount | undefined;
-            } | undefined;
-        }[];
+        accountTreeKeys: import("ngx-t-forms-types").IAccountSegmentTreeKeys[];
         tableData: {
-            segment: string | undefined;
+            segment: string;
+            innerInput: ScoaInnerInput;
+            label: string;
+            formInput: boolean;
+            segmentTree: import("ngx-t-forms-types").ScoaAccountTree;
+            inputs: ScoaInnerInput[];
+            segmentValue: Record<string, any>;
+            customSegment?: string | undefined;
+            readOnly: boolean;
             singleSelect: boolean;
-            segmentTree: import("ngx-t-forms-types").MscoaAccountTree;
-            inputs: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput[];
-            segmentValue: {
-                debit: IMSCOAAccount | undefined;
-                credit: IMSCOAAccount | undefined;
-            } | undefined;
-            accountInputs: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput[];
-            input: import("ngx-t-forms-types/dist/interfaces/formInput/IMscoaAccount").MscoaInnerInput | undefined;
-            debit: string | IMSCOAAccount | undefined;
-            credit: string | IMSCOAAccount | undefined;
+            segmentExtension: boolean;
+            id: string;
+            accountInputs: ScoaInnerInput[];
+            input: ScoaInnerInput | undefined;
+            debit: any;
+            credit: any;
         }[];
         cols: string[];
         hasMultiSelect: boolean;
     }>;
+    inputWillBeRemovedIn(id: string): number | null | undefined;
+    countdownSeconds: {
+        [key: string]: {
+            count: number | null;
+            stop$: Subject<void>;
+        };
+    };
+    removeInput(item: any): void;
+    stopDeletion(id: string): void;
+    overId: string | null;
+    formDeleteInput(item: FormColumnInputs): void;
+    editInput(input: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MscoaChartComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MscoaChartComponent, "app-mscoa-chart", never, { "formBuilderFunctions": { "alias": "formBuilderFunctions"; "required": false; }; "segmentValues": { "alias": "segmentValues"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "segmentValuesChanged": "segmentValuesChanged"; "interaction": "interaction"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MscoaChartComponent, "app-mscoa-chart", never, { "inputConfig": { "alias": "inputConfig"; "required": false; }; "editorMode": { "alias": "editorMode"; "required": false; }; "formBuilderFunctions": { "alias": "formBuilderFunctions"; "required": false; }; "segmentValues": { "alias": "segmentValues"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "config": { "alias": "config"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; }, { "segmentValuesChanged": "segmentValuesChanged"; "interaction": "interaction"; }, never, never, true, never>;
 }

package/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-computation/mscoa-computation.component.d.ts

@@ -3,28 +3,28 @@ import { Observable } from 'rxjs';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { MatTreeFlatDataSource } from '@angular/material/tree';
 import { MatDialogRef } from '@angular/material/dialog';
-import { IIncludedSegmentConfig, IMSCOAAccount, MscoaAccountTree } from "ngx-t-forms-types";
+import { IIncludedSegmentConfig, IScoaAccount, ScoaAccountTree } from "ngx-t-forms-types";
 import { ObjectTreeFlatNode, ObjectTreeNode } from '../../../../../t-dynamic-data-edit/elements/api-value-access-rules/functions/convertDataToTree';
 import { FormColumnInputs } from 'ngx-t-forms-types';
 import * as i0 from "@angular/core";
 export interface IMscoaComputationComponentData {
-    data: MscoaAccountTree;
+    data: ScoaAccountTree;
     segment: string;
-    value: IMSCOAAccount | undefined;
+    value: IScoaAccount | undefined;
     accountInputs: FormColumnInputs[];
     activeColumn: string | undefined;
     segmentConfig: IIncludedSegmentConfig | undefined;
     readonly: boolean;
     getSCOAAccount: (account: string) => Observable<{
-        accounts: IMSCOAAccount[];
+        accounts: IScoaAccount[];
     }>;
 }
 export declare class MscoaComputationComponent implements OnInit, OnDestroy {
     dialogRef: MatDialogRef<MscoaComputationComponent>;
     dataInjected: IMscoaComputationComponentData;
-    data: MscoaAccountTree | undefined;
+    data: ScoaAccountTree | undefined;
     segment: string | undefined;
-    value: IMSCOAAccount | undefined;
+    value: IScoaAccount | undefined;
     accountInputs: FormColumnInputs[];
     activeColumn: string | undefined;
     readonly: boolean;
@@ -50,12 +50,12 @@ export declare class MscoaComputationComponent implements OnInit, OnDestroy {
     getSelectedAccounts(): void;
     cancel(): void;
     saveAccount(): void;
-    closeAndPassData(account: IMSCOAAccount | undefined): void;
-    _selectedAccount: IMSCOAAccount | null;
-    selectAccount(account: IMSCOAAccount | null): void;
+    closeAndPassData(account: IScoaAccount | undefined): void;
+    _selectedAccount: IScoaAccount | null;
+    selectAccount(account: IScoaAccount | null): void;
     clearSelectedAccount(): void;
     get saveSelection(): boolean;
-    updateAccount(account: IMSCOAAccount): void;
+    updateAccount(account: IScoaAccount): void;
     get userCanClearAccount(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MscoaComputationComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MscoaComputationComponent, "app-mscoa-computation", never, {}, {}, never, never, true, never>;

package/lib/components/t-form-input/elements/mscoa-form-input/elements/mscoa-reactive-form-field/mscoa-reactive-form-field.component.d.ts

@@ -1,21 +1,23 @@
 import { ElementRef } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { FormGroup, NgControl } from '@angular/forms';
 import { BehaviorSubject } from 'rxjs';
 import { FormBuilderFunctions } from "ngx-t-forms-types";
 import { FormColumnInputs } from 'ngx-t-forms-types';
-import { IMscoaInputConfig, MscoaSegmentValue } from "ngx-t-forms-types";
+import { IScoaInputConfig, ScoaSegmentValue } from "ngx-t-forms-types";
 import { BaseCustomInput } from '../../../../../../services/core/t-input-controller/functions/baseCustomInput';
 import * as i0 from "@angular/core";
-export declare class MscoaReactiveFormFieldComponent extends BaseCustomInput<MscoaSegmentValue> {
+export declare class MscoaReactiveFormFieldComponent extends BaseCustomInput<ScoaSegmentValue> {
     get empty(): boolean;
     constructor(ngControl: NgControl, elementRef: ElementRef<HTMLElement>);
     formBuilderFunctions: FormBuilderFunctions | undefined;
+    editorMode: boolean;
     _inputConfig: FormColumnInputs;
-    mscoaInputConfig$: BehaviorSubject<IMscoaInputConfig | undefined>;
+    mscoaInputConfig$: BehaviorSubject<IScoaInputConfig | undefined>;
     set inputConfig(inputConfig: FormColumnInputs);
     get shouldLabelFloat(): boolean;
-    segmentValuesChanged(event: MscoaSegmentValue): void;
+    segmentValuesChanged(event: ScoaSegmentValue): void;
     get readonly(): boolean;
+    get parentFormGroup(): FormGroup | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MscoaReactiveFormFieldComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MscoaReactiveFormFieldComponent, "lib-mscoa-reactive-form-field", never, { "formBuilderFunctions": { "alias": "formBuilderFunctions"; "required": false; }; "inputConfig": { "alias": "inputConfig"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MscoaReactiveFormFieldComponent, "lib-mscoa-reactive-form-field", never, { "formBuilderFunctions": { "alias": "formBuilderFunctions"; "required": false; }; "editorMode": { "alias": "editorMode"; "required": false; }; "inputConfig": { "alias": "inputConfig"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/t-form-input/elements/mscoa-form-input/elements/scoa-account-table/scoa-account-table.component.d.ts

@@ -3,7 +3,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatCheckboxChange } from '@angular/material/checkbox';
-import { IMSCOAAccount } from "ngx-t-forms-types";
+import { IScoaAccount } from "ngx-t-forms-types";
 import { FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export interface ColumnConfig<T> {
@@ -14,13 +14,13 @@ export interface ColumnConfig<T> {
 }
 export declare class ScoaAccountTableComponent implements OnChanges, OnInit {
     data: {
-        accounts: IMSCOAAccount[];
+        accounts: IScoaAccount[];
         account: string;
     } | undefined;
-    accountSelected: EventEmitter<IMSCOAAccount | null>;
-    dataSource: MatTableDataSource<IMSCOAAccount>;
+    accountSelected: EventEmitter<IScoaAccount | null>;
+    dataSource: MatTableDataSource<IScoaAccount>;
     searchControl: FormControl<string | null>;
-    selectedAccount: IMSCOAAccount | null;
+    selectedAccount: IScoaAccount | null;
     segment: string | undefined;
     minViewCol: string[];
     scoaAccountColumns: any[];
@@ -33,7 +33,7 @@ export declare class ScoaAccountTableComponent implements OnChanges, OnInit {
     constructor();
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
-    mapAccounts(accounts: IMSCOAAccount[]): {
+    mapAccounts(accounts: IScoaAccount[]): {
         AccountNumberShortened: string;
         _id: {
             $oid: string;
@@ -73,9 +73,9 @@ export declare class ScoaAccountTableComponent implements OnChanges, OnInit {
     }[];
     removeTrailingZeros(str: string): string;
     applyFilter(filterValue: string): void;
-    selectAccount(account: IMSCOAAccount): void;
+    selectAccount(account: IScoaAccount): void;
     clearSearch(): void;
-    rowIsActivated(row: IMSCOAAccount): boolean;
+    rowIsActivated(row: IScoaAccount): boolean;
     showMinMal: boolean;
     toogleDetails(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScoaAccountTableComponent, never>;

package/lib/components/t-form-input/elements/mscoa-form-input/elements/scoa-input/scoa-input.component.d.ts

@@ -12,11 +12,11 @@ export declare class ScoaInputComponent implements OnInit {
     activeFormClass: undefined;
     dataInjected: any;
     inputConfig: FormColumnInputs;
+    formGroup: FormGroup;
     value: any;
     heading: any;
     subHeading: any;
     get hasError(): boolean;
-    formGroup: FormGroup;
     NGX_T_FORMS_CONFIG: import("ngx-t-forms-types").NgxTFormsConfig;
     constructor(dialogRef: MatDialogRef<ScoaInputComponent>);
     getContentInput(): any;

package/lib/components/t-form-input/elements/mscoa-form-input/mscoa-form-input.component.d.ts

@@ -1,15 +1,16 @@
 import { EventEmitter } from '@angular/core';
 import { FormColumnInputs } from "ngx-t-forms-types";
 import { FormGroup } from '@angular/forms';
-import { FormBuilderFunctions, MscoaSegmentValue } from "ngx-t-forms-types";
+import { FormBuilderFunctions, ScoaSegmentValue } from "ngx-t-forms-types";
 import * as i0 from "@angular/core";
 export declare class MscoaFormInputComponent {
     inputConfig: FormColumnInputs;
+    editorMode: boolean;
     formGroup: FormGroup;
     formBuilderFunctions: FormBuilderFunctions | undefined;
     valueChange: EventEmitter<any>;
-    segmentValuesChanged(event: MscoaSegmentValue): void;
+    segmentValuesChanged(event: ScoaSegmentValue): void;
     get errorMessage(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<MscoaFormInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MscoaFormInputComponent, "lib-mscoa-form-input", never, { "inputConfig": { "alias": "inputConfig"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formBuilderFunctions": { "alias": "formBuilderFunctions"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MscoaFormInputComponent, "lib-mscoa-form-input", never, { "inputConfig": { "alias": "inputConfig"; "required": false; }; "editorMode": { "alias": "editorMode"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formBuilderFunctions": { "alias": "formBuilderFunctions"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }