import { Component, Input, ViewChildren } from "@angular/core";
import { UntypedFormGroup, UntypedFormControl, Validators } from "@angular/forms";
import { Subscription } from "rxjs";
import { SubSink } from "subsink2";
import { ElementComponent } from "../element/element.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../../@directives/rbac.directive";
import * as i3 from "@angular/material/form-field";
import * as i4 from "@angular/material/core";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/material/list";
import * as i7 from "@angular/material/tooltip";
import * as i8 from "@angular/forms";
import * as i9 from "../autocomplete/autocomplete.component";
import * as i10 from "../checkbox/checkbox.component";
import * as i11 from "../chips/chips.component";
import * as i12 from "../datepicker/datepicker.component";
import * as i13 from "../input/input.component";
import * as i14 from "../multiselect/multiselect.component";
import * as i15 from "../textarea/textarea.component";
import * as i16 from "../toggle/toggle.component";
import * as i17 from "../element/element.component";
import * as i18 from "../native-select/native-select.component";
import * as i19 from "../../../@pipes/eagna.pipe";
export class EagnaFormComponent {
    constructor() {
        this._subs = new SubSink();
        this._confirmSubscription = new Subscription();
        this.frmGroup;
    }
    ngOnInit() {
        if (this.frmTemplate) {
            this.frmTemplate.forEach((formField) => {
                formField.autoSaveElement = () => {
                    this.autoSaveElement(formField);
                };
                if (formField.notListable == true) {
                    let nlControl = new UntypedFormControl(false, []);
                    formField.notListableAltFields.forEach((nl_field) => {
                        let nlControl = new UntypedFormControl('', []);
                        this.frmGroup.addControl(nl_field.key, nlControl);
                    });
                    this.frmGroup.addControl(formField.key + '_nl', nlControl);
                    this._subs.sink = nlControl.valueChanges.subscribe((nlChanged) => {
                        formField.isHidden = nlChanged;
                    });
                }
            });
            //console.log("frmTemplate", this.frmTemplate);
        }
    }
    removeArray(ftItem, index) {
        const fArr = this.frmGroup.get(ftItem.key);
        if (fArr) {
            fArr.removeAt(index != null && index >= 0 ? index : fArr.length - 1);
            if (fArr.length == 0 || (fArr.length > 0 && fArr.value.every(fa => !fa))) {
                fArr.reset();
            }
        }
        const fl = Object.assign([], ftItem.list);
        if (index != null && index >= 0) {
            fl.splice(index, 1);
        }
        else {
            fl.pop();
        }
        ftItem.list = [].concat(fl);
    }
    _performSave(formField, formCtrl) {
        formField.toSave = true;
        formField.list.forEach((val, i) => {
            if ((typeof formCtrl.controls[i].value) == "object") {
                const newVal = {};
                const eachControls = formCtrl.controls[i].controls;
                Object.keys(eachControls).forEach((eachKey, j) => {
                    newVal[eachKey] = eachControls[eachKey].value;
                });
                formCtrl.controls[i].setValue(newVal, { emitEvent: false });
                formField.list[i] = newVal;
            }
            else {
                formField.list[i] = formCtrl.controls[i].value;
            }
        });
        formCtrl.updateValueAndValidity();
        formCtrl.markAsPristine();
        formField.oldValue = (formField.list.length > 0 ? formField.list.slice(0, formField.list.length) : []);
        formField.editable = false;
    }
    startEditing(formField, formCtrl, isEmpty = false) {
        if (formField && formCtrl) {
            formField.oldValue = !isEmpty ? formField.list.slice(0, formField.list.length) : [];
            formField.editable = true;
            if (isEmpty) {
                this.addArray(formField);
            }
            formCtrl.controls.forEach(c => {
                if (!c.valid) {
                    c.markAllAsTouched();
                }
            });
        }
    }
    stopEditing(formField, formCtrl, toSave = false) {
        if (toSave) {
            if (formField.beforeSaveConfirm$) {
                const isConfirming$ = formField.beforeSaveConfirm$(formCtrl);
                if (isConfirming$) {
                    this._confirmSubscription.add(isConfirming$.subscribe(yes => {
                        if (yes) {
                            this._performSave(formField, formCtrl);
                        }
                        isConfirming$.unsubscribe();
                    }));
                }
                else {
                    this._performSave(formField, formCtrl);
                }
            }
            else {
                this._performSave(formField, formCtrl);
            }
        }
        else {
            formField.list.forEach((val, i) => {
                if ((typeof formCtrl.get(i).value) == "object") {
                    const oldVal = {};
                    const eachControls = formCtrl.get(i).controls;
                    Object.keys(eachControls).forEach((eachKey, j) => {
                        oldVal[eachKey] = val[eachKey];
                    });
                    formCtrl.get(i).setValue(oldVal, { emitEvent: false });
                }
                else {
                    formCtrl.get(i).setValue(val, { emitEvent: false });
                }
            }); //or simply formCtrl.reset(); and list = oldList
            //formCtrl.setValue(formField.list);
            formField.toSave = false;
            formCtrl.markAsPristine();
            formField.editable = false;
        }
    }
    stopListEditables(formField) {
        const tmp = this.frmGroup.get(formField.key).value;
        formField.oldValue = "old"; //ugly work around to listen to saving
        formField.value = tmp;
        this.frmGroup.get(formField.key).setValue(tmp);
        //this.frmGroup.get(formField.key).updateValueAndValidity({onlySelf: true, emitEvent: true});
        //formField.editable=false;
    }
    addArray(ftItem) {
        const fArr = this.frmGroup.get(ftItem.key);
        let newFt;
        if (fArr) {
            if (ftItem.arrayTemplate && ftItem.arrayTemplate.length > 0) {
                const grpObj = {};
                const grpObjTpl = {};
                for (const ftI of ftItem.arrayTemplate) {
                    const updateOn = ftI.updateOn || 'change';
                    let validators = ftI.customValidators || [];
                    if (ftI.required) {
                        validators.push(Validators.required);
                    }
                    const customAsyncValidators = ftI.customAsyncValidators || [];
                    grpObj[ftI.key] = new UntypedFormControl({ value: (ftI.excludeFromEdit ? null : ''), disabled: false }, validators, customAsyncValidators);
                    grpObjTpl[ftI.key] = (ftI.excludeFromEdit ? null : '');
                }
                newFt = new UntypedFormGroup(grpObj);
                fArr.push(newFt);
                const fl = Object.assign([], ftItem.list);
                fl.push(grpObjTpl);
                ftItem.list = [].concat(fl);
            }
            else {
                let validators = ftItem.customValidators || [];
                if (ftItem.required) {
                    validators.push(Validators.required);
                }
                const customAsyncValidators = ftItem.customAsyncValidators || [];
                newFt = new UntypedFormControl({ value: '', disabled: false }, validators, customAsyncValidators);
                fArr.push(newFt);
                const fl = Object.assign([], ftItem.list);
                fl.push(' ');
                ftItem.list = [].concat(fl);
            }
        }
    }
    getErrorMessage(frmControl) {
        if (frmControl.invalid) {
            switch (true) {
                case frmControl.hasError('required'): return frmControl.errors['required'].message;
                case frmControl.hasError('isNonConformanceToMask'): return frmControl.errors['isNonConformanceToMask'].message;
                case frmControl.hasError('invalidInput'): return frmControl.errors['invalidInput'].message;
                case frmControl.hasError('email'): return frmControl.errors['email'].message;
                case frmControl.hasError('isDuplicate'): return frmControl.errors['isDuplicate'].message;
                case frmControl.hasError('hasRemarks'): return frmControl.errors['hasRemarks'].message;
                case frmControl.hasError('minlength'): return frmControl.errors['minlength'].message;
                case frmControl.hasError('maxlength'): return frmControl.errors['maxlength'].message;
            }
            return "Error!";
        }
        return "";
    }
    ngOnDestroy() {
        //if(this._confirmSubscription){
        this._subs.unsubscribe();
        this._confirmSubscription.unsubscribe();
        //}
    }
    ngAfterViewInit() { }
    autoSaveElement(fte) {
        if (this.els) {
            (this.els.find(el => el.params.key == fte.key) || {}).save();
        }
    }
}
EagnaFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: EagnaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
EagnaFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: EagnaFormComponent, selector: "eagna-form", inputs: { frmGroup: "frmGroup", frmTemplate: "frmTemplate", flexContent: "flexContent", flexContentRow: "flexContentRow", isDynamic: "isDynamic" }, viewQueries: [{ propertyName: "els", predicate: ElementComponent, descendants: true }], ngImport: i0, template: "<div mat-line [formGroup]=\"frmGroup\"\r\n  [ngClass]=\"{'flex-content': flexContent, 'dynamic-content': isDynamic, 'flex-content-row':flexContentRow}\">\r\n  <div *ngFor=\"let formField of frmTemplate; let first=first\" [ngSwitch]=\"formField.controlType\" [ngStyle]=\"formField.style\"\r\n    [class]=\"formField.formClass\"\r\n    [style.width]=\"isDynamic && formField.controlType != 'nested' ? 'calc(100% - 66px)' : ''\">\r\n\r\n    <!-- [style.display]=\"formField.isHidden ? 'none': (formField.style ? formField.style.display : '')\" -->\r\n\r\n    <div *ngIf=\"!formField.isHidden\">\r\n      <ng-container [ngSwitch]=\"formField.controlType\">\r\n        <ng-container *ngSwitchCase=\"'element'\" [ngTemplateOutlet]=\"element\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'autocomplete'\" [ngTemplateOutlet]=\"autocomplete\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" [ngTemplateOutletContext]=\"{$implicit: formField}\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'select'\" [ngTemplateOutlet]=\"select\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'native-select'\" [ngTemplateOutlet]=\"nativeSelect\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'datepicker'\" [ngTemplateOutlet]=\"datePicker\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'checkbox'\" [ngTemplateOutlet]=\"checkbox\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'toggle'\" [ngTemplateOutlet]=\"toggle\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chips\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'textarea'\" [ngTemplateOutlet]=\"textarea\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'list'\" [ngTemplateOutlet]=\"list\"></ng-container>\r\n        <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"></ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"formField.notListable\">\r\n        <div *ngFor=\"let altField of formField.notListableAltFields;\" [ngStyle]=\"altField.style\"\r\n          [class]=\"altField.formClass\"\r\n          [style.width]=\"isDynamic && altField.controlType != 'nested' ? 'calc(100% - 66px)' : ''\">\r\n\r\n          <!-- [style.display]=\"formField.isHidden ? 'none': (formField.style ? formField.style.display : '')\" -->\r\n\r\n          <div *ngIf=\"frmGroup.get(formField.key+'_nl').value == true\">\r\n\r\n            <!-- <ng-container [ngSwitch]=\"altField.controlType\">\r\n              <ng-container *ngSwitchCase=\"'element'\" [ngTemplateOutlet]=\"element\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'autocomplete'\" [ngTemplateOutlet]=\"autocomplete\"></ng-container> -->\r\n              <ng-container [ngTemplateOutlet]=\"input\" [ngTemplateOutletContext]=\"{$implicit: altField}\"></ng-container>\r\n              <!-- <ng-container *ngSwitchCase=\"'select'\" [ngTemplateOutlet]=\"select\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'datepicker'\" [ngTemplateOutlet]=\"datePicker\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'checkbox'\" [ngTemplateOutlet]=\"checkbox\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'toggle'\" [ngTemplateOutlet]=\"toggle\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chips\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'textarea'\" [ngTemplateOutlet]=\"textarea\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'list'\" [ngTemplateOutlet]=\"list\"></ng-container>\r\n              <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"></ng-container>\r\n            </ng-container> -->\r\n          </div>\r\n        </div>\r\n        <eagna-checkbox [frmControl]=\"frmGroup.get(formField.key+'_nl') | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label+ ' not listed'\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [appearance]=\"formField.appearance\" [valign]=\"formField.valign\" [id]=\"formField.key+'_nl'\"></eagna-checkbox>\r\n    </ng-container>\r\n\r\n    <ng-template #nativeSelect>\r\n      <eagna-native-select [fc]=\"frmGroup.get(formField.key) | abstractToFormControl\" [ft]=\"formField\"></eagna-native-select>\r\n    </ng-template>\r\n\r\n    <ng-template #element>\r\n      <element [params]=\"{\r\n          key: formField.key,\r\n          type: formField.controlTypeControl,\r\n          header: formField.label,\r\n          value: formField.value,\r\n          placeholder: formField.placeholder,\r\n          editable: formField.editable,\r\n          formControl: (frmGroup.get(formField.key) | abstractToFormControl),\r\n          classes: formField.inputClass,\r\n          editByDefault: formField.editByDefault,\r\n          options: formField.options,\r\n          appearance: formField.appearance,\r\n          displayKey: formField.displayKey,\r\n          valueKey: formField.valueKey,\r\n          toolTip: formField.toolTip,\r\n          subTooltip: formField.subTooltip,\r\n          optionsAsyncParams: formField.optionsAsyncParams,\r\n          requireSelection: formField.requireSelection,\r\n          reduceOptionByQuery: formField.reduceOptionByQuery,\r\n          debounceTime: formField.debounceTime,\r\n          emitWhenEmpty: formField.emitWhenEmpty,\r\n          hasAssignment: formField.hasAssignment,\r\n          triggerOutsideEvent: formField.triggerOutsideEvent,\r\n          displayHtml: formField.displayHtml,\r\n          linkCallback: formField.linkCallback,\r\n          linkTooltop: formField.linkTooltop,\r\n          rbacRoles: (formField.rbacRoles || ['*']),\r\n          emptyLabel: formField.emptyLabel,\r\n          loadingMessage: (formField.loadingMessage || ''),\r\n          loadingIcon: formField.loadingIcon,\r\n          enterKeyFn: (formField.enterKeyFn || null),\r\n          headerClass: (formField.headerClass || null),\r\n          strikeWithNew: (formField.strikeWithNew || null),\r\n          allowSaveBlank: (formField.allowSaveBlank || null),\r\n          additionalText: (formField.additionalText || null)\r\n        }\" [class]=\"formField.formClass\">\r\n        <ng-content *ngIf=\"formField.triggerOutsideEvent\" select=\"div.content-projection\"></ng-content>\r\n      </element>\r\n    </ng-template>\r\n\r\n    <ng-template #autocomplete>\r\n      <eagna-autocomplete [appearance]=\"formField.appearance\" [dontFocus]=\"!first || formField.dontFocus\"\r\n        [placeholder]=\"formField.placeholder\" [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [label]=\"formField.label\" [options]=\"formField.options\"\r\n        [displayKey]=\"formField.displayKey\" [valueKey]=\"formField.valueKey\" [labelTooltip]=\"formField.labelTooltip\" [textTooltip]=\"formField.textTooltip\"\r\n        [displayFn]=\"formField.displayFn\" [class]=\"formField.formClass\"\r\n        [requireSelection]=\"formField.requireSelection\" [optionsAsyncParams]=\"formField.optionsAsyncParams\"\r\n        [searchTriggerLength]=\"formField.searchTriggerLength\"\r\n        [reduceOptionByQuery]=\"formField.reduceOptionByQuery\"\r\n        [debounceTime]=\"formField.debounceTime\" [emptyLabel]=\"formField.emptyLabel\"\r\n        [emitWhenEmpty]=\"formField.emitWhenEmpty\" (enterKeyFn)=\"formField.enterKeyFn ? formField.enterKeyFn($event) : null\"\r\n        [eraseParent]=\"formField.eraseParent\" [codeMask]=\"formField.codeMask\"\r\n        [minlength]=\"formField.minlength?.value\" [dontForceMinLength]=\"formField.minlength?.dontForce || false\"\r\n        [maxlength]=\"formField.maxlength?.value\" [displayMaxLength]=\"formField.maxlength?.display || false\" [dontForceMaxLength]=\"formField.maxlength?.dontForce || false\" [hintLabel]=\"formField.hintLabel\">\r\n      </eagna-autocomplete>\r\n    </ng-template>\r\n\r\n    <ng-template #input let-formField>\r\n      <eagna-input [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\" [dontFocus]=\"!first || formField.dontFocus\"\r\n        [label]=\"formField.label\" [placeholder]=\"formField.placeholder\" [type]=\"formField.type\"\r\n        [required]=\"formField.required\" [readonly]=\"formField.readonly\" [disabled]=\"formField.disabled\"\r\n        [appearance]=\"formField.appearance\" [classes]=\"formField.inputClass\" [labelTooltip]=\"formField.labelTooltip\" [textTooltip]=\"formField.textTooltip\"\r\n        [minlength]=\"formField.minlength?.value\" [dontForceMinLength]=\"formField.minlength?.dontForce || false\"\r\n        [maxlength]=\"formField.maxlength?.value\" [displayMaxLength]=\"formField.maxlength?.display || false\" [dontForceMaxLength]=\"formField.maxlength?.dontForce || false\" [hintLabel]=\"formField.hintLabel\" [codeMask]=\"formField.codeMask\"></eagna-input>\r\n    </ng-template>\r\n\r\n    <ng-template #select> <!-- [classes]=\"formField.inputClass\" -->\r\n      <eagna-multiselect [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\"\r\n        [class]=\"formField.formClass\" [label]=\"formField.label\" [placeholder]=\"formField.placeholder\"\r\n        [required]=\"formField.required\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [options]=\"formField.options\" [multiple]=\"formField.multiple\" [displayKey]=\"formField.displayKey\"\r\n        [valueKey]=\"formField.valueKey\" [appearance]=\"formField.appearance\" [displayFn]=\"formField.displayFn\"\r\n        [emptyLabel]=\"formField.emptyLabel\" [filter]=\"formField.filter\"\r\n        ></eagna-multiselect>\r\n    </ng-template>\r\n\r\n    <ng-template #datePicker>\r\n      <eagna-datepicker [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\"\r\n        [class]=\"formField.formClass\" [label]=\"formField.label\" [required]=\"formField.required\"\r\n        [editable]=\"formField.editable\" [editableCallback]=\"formField.editableCallback\"\r\n        [startDate]=\"formField.startDate\"\r\n        [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\" [appearance]=\"formField.appearance\"></eagna-datepicker>\r\n      </ng-template>\r\n\r\n    <ng-template #checkbox>\r\n      <eagna-checkbox [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [appearance]=\"formField.appearance\" [valign]=\"formField.valign\" [id]=\"formField.key\"></eagna-checkbox>\r\n    </ng-template>\r\n\r\n    <ng-template #toggle>\r\n      <eagna-toggle [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [appearance]=\"formField.appearance\"></eagna-toggle>\r\n    </ng-template>\r\n\r\n    <ng-template #chips>\r\n      <eagna-chips [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [placeholder]=\"formField.placeholder\" [disabled]=\"formField.disabled\"\r\n        [readonly]=\"formField.readonly\" [options]=\"formField.options\" [displayKey]=\"formField.displayKey\"\r\n        [valueKey]=\"formField.valueKey\" [appearance]=\"formField.appearance\"></eagna-chips>\r\n    </ng-template>\r\n\r\n    <ng-template #textarea>\r\n      <eagna-textarea [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [placeholder]=\"formField.placeholder\" [disabled]=\"formField.disabled\"\r\n        [readonly]=\"formField.readonly\" [appearance]=\"formField.appearance\" [classes]=\"formField.inputClass\"\r\n        [minRows]=\"formField.minRows\" [maxRows]=\"formField.maxRows\"></eagna-textarea>\r\n    </ng-template>\r\n\r\n    <ng-template #list>\r\n      <!-- {{formField | json}} -->\r\n      <div class=\"p-4\" [class.eagna-form-list]=\"formField.isDynamic\" [class.is-active]=\"formField.editable\">\r\n        <div *ngIf=\"formField.list.length > 0\">\r\n          <span [ngSwitch]=\"formField.editable\"\r\n            *ngIf=\"formField.list | filterBy: {field: formField.displayKey, value: formField.fListFilter, searchType: 'anywhere'} as ll\">\r\n            <span> <!-- style=\"display: flex;\" -->\r\n              <mat-label class=\"mat-subheading-1 pull-left font-eagna-secondary ls-1 fw-400 font-condensed\"\r\n                style=\"margin-bottom: 0px\" [innerHTML]=\"formField.label\"></mat-label> <!-- <sup *ngIf=\"!formField.ignoreInvalid && !frmGroup.get(formField.key)?.valid\" class=\"bold cursor-help font-danger\" title=\"Invalid Data\" style=\"padding-left: 2px\">!</sup> -->\r\n\r\n              <span *ngIf=\"!formField.dontUseSearch\" class=\"align-end pull-left\"> <!-- style=\"display: flex;flex-basis: 30%;\" -->\r\n                <mat-label class=\"mat-form-field\" style=\"margin-right: 2px\"\r\n                  [innerHTML]=\"'Showing ' + ll.length  + ' of ' + formField.list.length + ' ' + formField.placeholder + (formField.list.length > 1 ? 's': '')\">\r\n                </mat-label>\r\n                <mat-icon style=\"width: 16px !important;height: 16px !important;\">filter_alt</mat-icon>\r\n                <input class=\"mat-input\" #fList type=\"text\" [(ngModel)]=\"formField.fListFilter\"\r\n                  [ngModelOptions]=\"{standalone: true}\" placeholder=\"Filter {{formField.label}}\" /> <!-- debounce: 1000 -->\r\n              </span>\r\n\r\n              <span *ngIf=\"formField.dontUseSearch && formField.limit && formField.limit > 0\" class=\"align-end m-l-8 bold pull-left\">  <!-- style=\"display: flex;flex-basis: 30%;\" -->\r\n                  <mat-label class=\"mat-form-field\" style=\"margin-right: 2px\"\r\n                    [innerHTML]=\"'(' + ll.length  + ' of ' + formField.limit + ')'\">\r\n                  </mat-label>\r\n                </span>\r\n\r\n              <a *ngIf=\"formField.isDynamic\" rbac [roles]=\"formField.rbacRoles || ['*']\" class=\"edit-icon\">\r\n                  <mat-icon *ngIf=\"!formField.editable\" class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"startEditing(formField, frmGroup.get(formField.key))\" [matTooltip]=\"'Edit'\">\r\n                    edit\r\n                  </mat-icon>\r\n                  <span *ngIf=\"formField.editable\">\r\n                    <mat-icon *ngIf=\"(!formField.limit || (formField.limit && ll.length < formField.limit))\"\r\n                        class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"addArray(formField)\" [matTooltip]=\"'Add'\">\r\n                        add\r\n                      </mat-icon>\r\n                      <mat-icon *ngIf=\"frmGroup.get(formField.key)?.valid && (!frmGroup.get(formField.key)?.pristine || formField.oldValue?.length != formField.list?.length)\"\r\n                        class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key), true)\" [matTooltip]=\"'Apply Changes'\">\r\n                        save\r\n                      </mat-icon>\r\n                      <mat-icon\r\n                        class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key))\" [matTooltip]=\"'Cancel'\">\r\n                        cancel\r\n                      </mat-icon>\r\n                  </span>\r\n              </a>\r\n\r\n            </span>\r\n            <div style=\"clear: both\"></div>\r\n            <!-- BEGIN WHEN NOT EDITING -->\r\n            <mat-selection-list *ngSwitchDefault [multiple]=\"formField.multiple\"\r\n              (selectionChange)=\"formField.callback? formField.callback($event): null\" color=\"primary\"\r\n              [ngStyle]=\"{'max-height': '400px', 'overflow-y': 'auto', 'padding': '5px'}\">\r\n              <!-- <div mat-subheader>Files</div> -->\r\n              <!-- <cdk-virtual-scroll-viewport itemSize=\"15\" style=\"height: 400px\"> -->\r\n              <!-- <mat-list-option *cdkVirtualFor=\"let opt of ll\" [value]=\"formField.valueKey ? opt[formField.valueKey] : opt\"> -->\r\n              <mat-list-option *ngFor=\"let opt of ll; let i=index\"\r\n                [value]=\"formField.valueKey ? opt[formField.valueKey] : opt\" [class]=\"formField.inputClass\"\r\n                [style.cursor]=\"formField.linkCallback || formField.callback ? 'pointer' : 'default'\">\r\n                <mat-icon *ngIf=\"opt && opt.icon\" mat-list-icon>{{opt.icon}}</mat-icon>\r\n                <div matline *ngIf=\"opt\" [formArrayName]=\"formField.key\">\r\n                  <!-- BEGIN WHEN NOT EDITING AND WITH ARRAYTEMPLATE -->\r\n                  <ng-template [ngIf]=\"formField.arrayTemplate\">\r\n                    <span *ngFor=\"let oTpl of formField.arrayTemplate | filterBy: {field: 'excludeFromEdit', value: false}; let last=last; let odd=odd\"\r\n                      class=\"p-l-4\"\r\n                      [ngStyle]=\"formField.lineStyle\"\r\n                      [class.p-x-4]=\"!odd\"\r\n                      [class.font-danger]=\"!formField.ignoreInvalid && ((!(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.disabled && !(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.valid) )\"\r\n                      [style.text-decoration]=\"!formField.ignoreInvalid && ((!(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.disabled && !(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.valid) ) ? 'underline dotted': 'unset'\"\r\n                      [title]=\"!formField.ignoreInvalid? getErrorMessage((frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl))  : ''\"\r\n                      > <!-- || (oTpl.required && !opt[oTpl.key]) -->\r\n                      {{opt[oTpl.key]}} <mat-icon *ngIf=\"opt.toolTip && last\"\r\n                        [matTooltip]=\"opt.toolTip\" [class]=\"oTpl.inputClass\">info</mat-icon>\r\n                    </span>\r\n                  </ng-template>\r\n                  <!-- END -->\r\n\r\n                  <!-- BEGIN WHEN NOT EDITING AND WITHOUT ARRAYTEMPLATE -->\r\n                  <span *ngIf=\"!formField.arrayTemplate\"\r\n                    class=\"ell\"\r\n                    [ngStyle]=\"formField.lineStyle\"\r\n                    [class.font-danger]=\"!formField.ignoreInvalid && ((!frmGroup.get(formField.key)?.get([i])?.disabled && !frmGroup.get(formField.key)?.get([i])?.valid))\"\r\n                    [style.text-decoration]=\"formField.linkCallback || (!formField.ignoreInvalid && ((!frmGroup.get(formField.key)?.get([i])?.disabled && !frmGroup.get(formField.key)?.get([i])?.valid)))? ('underline'\r\n                      + (!formField.ignoreInvalid && ((!frmGroup.get(formField.key)?.get([i])?.disabled && !frmGroup.get(formField.key)?.get([i])?.valid)) ? ' dotted': '')): 'unset'\"\r\n                    [matTooltip]=\"formField.linkCallback ? (formField.displayKey ? opt[formField.displayKey] : opt) : ''\"\r\n                    [title]=\"!formField.ignoreInvalid? getErrorMessage(frmGroup.get(formField.key)?.get([i])) : ''\"\r\n                    [style.cursor]=\"formField.linkCallback? 'pointer': 'default'\"\r\n                    (click)=\"formField.linkCallback? formField.linkCallback($event, opt) : null\"> <!-- || (formField.required && !(formField.displayKey ? opt[formField.displayKey] : opt)) -->\r\n                      {{formField.displayKey ? opt[formField.displayKey] : opt}} <mat-icon *ngIf=\"opt.toolTip\" [matTooltip]=\"opt.toolTip\" class=\"p-l-4\">info</mat-icon>\r\n                  </span>\r\n                  <!-- END -->\r\n                </div>\r\n              </mat-list-option>\r\n              <!-- </cdk-virtual-scroll-viewport> -->\r\n            </mat-selection-list>\r\n            <!-- END -->\r\n\r\n            <!-- BEGIN WHEN EDITING -->\r\n            <div *ngSwitchCase=\"true\" [ngStyle]=\"{'max-height': '400px', 'overflow-y': 'auto', 'padding': '5px'}\">\r\n              <span *ngFor=\"let opt of ll; let i=index; let iLast=last\">\r\n                <!-- BEGIN WHEN EDITING AND WITH ARRAYTEMPLATE -->\r\n                <ng-template [ngIf]=\"formField.arrayTemplate\">\r\n                  <div style=\"display: flex; width: 100%\" *ngIf=\"opt\" [formArrayName]=\"formField.key\">\r\n                    <span *ngFor=\"let oTpl of formField.arrayTemplate | filterBy: {field: 'excludeFromEdit', value: false}; let first=first; let last=last; let odd=odd\"\r\n                      [ngSwitch]=\"oTpl.controlType\" [ngClass]=\"{'p-x-4': !odd}\">\r\n                        <eagna-input *ngSwitchDefault [frmControl]=\"(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)\" [class]=\"formField.formClass\"\r\n                          [label]=\"''\" [placeholder]=\"oTpl.placeholder\" [type]=\"oTpl.type\" [dontFocus]=\"!first || !iLast || oTpl.dontFocus\"\r\n                          [required]=\"formField.required\" [readonly]=\"false\" [disabled]=\"oTpl.disabled\"\r\n                          [minlength]=\"oTpl.minlength.value\" [dontForceMinLength]=\"oTpl.minlength.dontForce || false\"\r\n                          [maxlength]=\"oTpl.maxlength.value\" [displayMaxLength]=\"oTpl.maxlength.display || false\" [dontForceMaxLength]=\"oTpl.maxlength.dontForce || false\" [hintLabel]=\"oTpl.hintLabel\"\r\n                          [classes]=\"oTpl.inputClass\" [appearance]=\"formField.appearance\" [codeMask]=\"oTpl.codeMask\"></eagna-input>\r\n\r\n                        <eagna-autocomplete *ngSwitchCase=\"'autocomplete'\" [appearance]=\"oTpl.appearance\" [dontFocus]=\"!first || !iLast || oTpl.dontFocus\"\r\n                          [placeholder]=\"oTpl.placeholder\" [frmControl]=\"(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)\" [options]=\"oTpl.options\"\r\n                          [class]=\"oTpl.formClass\" [requireSelection]=\"oTpl.requireSelection\" [optionsAsyncParams]=\"oTpl.optionsAsyncParams\" [label]=\"oTpl.label\"\r\n                          [displayKey]=\"oTpl.displayKey\" [valueKey]=\"oTpl.valueKey\" [dontDisplaySearch]=\"!last\" [reduceOptionByQuery]=\"oTpl.reduceOptionByQuery\"\r\n                          [debounceTime]=\"oTpl.debounceTime\" [emitWhenEmpty]=\"oTpl.emitWhenEmpty\" [eraseParent]=\"oTpl.eraseParent\" [codeMask]=\"oTpl.codeMask\"\r\n                          (enterKeyFn)=\"oTpl.enterKeyFn ? oTpl.enterKeyFn($event) : null\" [minlength]=\"oTpl.minlength?.value\" [dontForceMinLength]=\"oTpl.minlength?.dontForce || false\"\r\n                          [maxlength]=\"oTpl.maxlength?.value\" [displayMaxLength]=\"oTpl.maxlength?.display || false\" [dontForceMaxLength]=\"oTpl.maxlength?.dontForce || false\" [hintLabel]=\"oTpl.hintLabel\" [classes]=\"oTpl.inputClass\"\r\n                          >\r\n                          <!--\r\n                            [searchTriggerLength]=\"formField.searchTriggerLength\"\r\n                            [displayFn]=\"formField.displayFn\"-->\r\n                        </eagna-autocomplete>\r\n                      </span>\r\n                      <mat-icon class=\"cursor-pointer font-danger\" style=\"float: right\" (click)=\"removeArray(formField, i)\" [matTooltip]=\"'Remove '\">\r\n                        remove\r\n                      </mat-icon>\r\n                  </div>\r\n                </ng-template>\r\n                <!-- END -->\r\n\r\n                <!-- BEGIN WHEN EDITING AND WITHOUT ARRAYTEMPLATE -->\r\n                <ng-template [ngIf]=\"!formField.arrayTemplate\">\r\n                  <div style=\"display: flex; width: 100%\">\r\n                      <eagna-input [frmControl]=\"frmGroup.get(formField.key).get([i]) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n                      [label]=\"''\" [placeholder]=\"formField.placeholder\" [type]=\"formField.type\"\r\n                      [required]=\"formField.required\" [readonly]=\"false\" [disabled]=\"false\"\r\n                      [appearance]=\"formField.appearance\" [classes]=\"formField.inputClass\"\r\n                      [minlength]=\"formField.minlength?.value\" [dontForceMinLength]=\"formField.minlength?.dontForce || false\"\r\n                      [maxlength]=\"formField.maxlength?.value\" [displayMaxLength]=\"formField.maxlength?.display || false\" [dontForceMaxLength]=\"formField.maxlength?.dontForce || false\" [hintLabel]=\"formField.hintLabel\"\r\n                      [codeMask]=\"formField.codeMask\"></eagna-input>\r\n                    <mat-icon class=\"cursor-pointer font-danger\" style=\"float: right\" (click)=\"removeArray(formField, i)\" [matTooltip]=\"'Remove '\">\r\n                      remove\r\n                    </mat-icon>\r\n                  </div>\r\n                </ng-template>\r\n                <!-- END -->\r\n\r\n              </span>\r\n            </div>\r\n            <!-- END -->\r\n\r\n            <mat-label class=\"mat-form-field\" *ngIf=\"!formField.dontUseSearch && ll.length == 0\"><i>No\r\n                {{formField.placeholder + 's'}} to show.</i></mat-label>\r\n          </span>\r\n        </div>\r\n        <div *ngIf=\"formField.list.length == 0\"\r\n          [style]=\"{'background-color':(formField.disabled? 'transparent' : 'none')}\">\r\n          <!--         <div *ngIf=\"formField.list.length == 0\"\r\n            [style]=\"{'background-color': (formField.disabled? 'rgba(0, 0, 0, 0.02)' : 'none')}\"> -->\r\n          <span> <!-- style=\"display: flex;\" -->\r\n            <mat-label class=\"mat-subheading-1 pull-left font-eagna-secondary ls-1 fw-400 font-condensed\"\r\n              style=\"margin-bottom: 0px\" [innerHTML]=\"formField.label\"></mat-label><!-- <br /> -->\r\n\r\n            <span *ngIf=\"formField.limit\" class=\"align-end m-l-8 bold pull-left\"> <!-- style=\"display: flex;flex-basis: 30%;\" -->\r\n                <mat-label class=\"mat-form-field\" style=\"margin-right: 2px\"\r\n                  [innerHTML]=\"'(0 of ' + formField.limit + ')'\">\r\n                </mat-label>\r\n            </span>\r\n\r\n            <!-- <span *ngIf=\"formField.isDynamic\" class=\"align-end\">\r\n              <mat-icon *ngIf=\"!formField.editable\" class=\"cursor-pointer font-eagna-primary\" (click)=\"formField.editable=true; addArray(formField)\" [matTooltip]=\"'Edit'\">\r\n                edit\r\n              </mat-icon>\r\n\r\n              <mat-icon  *ngIf=\"formField.editable\"\r\n                class=\"cursor-pointer font-eagna-primary\" (click)=\"addArray(formField)\" [matTooltip]=\"'Add '\">\r\n                add\r\n              </mat-icon>\r\n            </span> -->\r\n\r\n            <a *ngIf=\"formField.isDynamic\" rbac [roles]=\"formField.rbacRoles || ['*']\" class=\"edit-icon\">\r\n              <mat-icon *ngIf=\"!formField.editable\" class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"startEditing(formField, frmGroup.get(formField.key), true)\" [matTooltip]=\"'Edit'\">\r\n                edit\r\n              </mat-icon>\r\n              <span *ngIf=\"formField.editable\">\r\n                <mat-icon\r\n                  class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"addArray(formField)\" [matTooltip]=\"'Add'\">\r\n                  add\r\n                </mat-icon>\r\n                <mat-icon *ngIf=\"formField.oldValue?.length > 0\"\r\n                  class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key), true)\" [matTooltip]=\"'Apply Changes'\">\r\n                  save\r\n                </mat-icon>\r\n                <mat-icon\r\n                  class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key))\" [matTooltip]=\"'Cancel'\">\r\n                  cancel\r\n                </mat-icon>\r\n              </span>\r\n            </a>\r\n          </span>\r\n          <mat-label class=\"mat-form-field\">\r\n            <i>{{(formField.emptyMessage || 'No ' + formField.placeholder + 's' + ' to show.')}}</i></mat-label>\r\n        </div>\r\n      </div>\r\n      <ng-content select=\"div.list-content-projection\"></ng-content>\r\n    </ng-template>\r\n\r\n    <ng-template #default>\r\n      Unknown Control Type: {{ formField.controlType }}\r\n    </ng-template>\r\n  </div>\r\n\r\n  <ng-content mat-line></ng-content>\r\n</div>", styles: [".flex-content{display:flex;justify-content:space-between;flex-flow:row wrap}.flex-content-row{flex-direction:column;flex:1;justify-content:start}::ng-deep .mat-tooltip{white-space:pre-line!important}.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edit-icon{display:none}.eagna-form-list:hover,.eagna-form-list.is-active{background-color:#efeff4}.eagna-form-list:hover>div>span>a.edit-icon,.eagna-form-list.is-active>div>span>a.edit-icon,.eagna-form-list:hover>div>span>span>a.edit-icon,.eagna-form-list.is-active>div>span>span>a.edit-icon{cursor:pointer;display:block;float:right;font-size:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.RbacDirective, selector: "[rbac]", inputs: ["roles", "mode", "yDisabled", "enableSuperUserBypass", "allowAdmin"], outputs: ["onCheckAuth"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "component", type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i9.AutocompleteComponent, selector: "eagna-autocomplete", inputs: ["inputType", "appearance", "displayKey", "valueKey", "dispNoResults", "placeholder", "options", "searchTriggerLength", "displayFn", "frmControl", "label", "textTooltip", "labelTooltip", "emptyLabel", "autoActiveFirstOption", "requireSelection", "dontDisplaySearch", "optionsAsyncParams", "reduceOptionByQuery", "debounceTime", "emitWhenEmpty", "eraseParent", "minlength", "dontForceMinLength", "maxlength", "displayMaxLength", "dontForceMaxLength", "hintLabel", "codeMask", "dontFocus", "classes"], outputs: ["enterKeyFn"] }, { kind: "component", type: i10.CheckboxComponent, selector: "eagna-checkbox", inputs: ["frmControl", "label", "disabled", "readonly", "appearance", "valign", "id"] }, { kind: "component", type: i11.ChipsComponent, selector: "eagna-chips", inputs: ["separatorKeysCodes", "label", "placeholder", "disabled", "displayKey", "valueKey", "frmControl", "inputControl", "required", "readonly", "filterFunc", "options", "removable", "selectable", "appearance"] }, { kind: "component", type: i12.DatepickerComponent, selector: "eagna-datepicker", inputs: ["label", "disabled", "startDate", "editable", "editableCallback", "selectedDate", "frmControl", "required", "readonly", "appearance"], outputs: ["selectedChange"] }, { kind: "component", type: i13.InputComponent, selector: "eagna-input", inputs: ["type", "name", "label", "placeholder", "frmControl", "disabled", "readonly", "required", "appearance", "classes", "textTooltip", "labelTooltip", "hintLabel", "minlength", "dontForceMinLength", "maxlength", "displayMaxLength", "dontForceMaxLength", "codeMask", "dontFocus"], outputs: ["onExit"] }, { kind: "component", type: i14.MultiselectComponent, selector: "eagna-multiselect", inputs: ["label", "placeholder", "options", "disabled", "displayKey", "displayFn", "valueKey", "frmControl", "errorMsg", "showErrorMsg", "multiple", "selectedOptions", "required", "readonly", "filter", "labelCount", "appearance", "debounce", "fontClass", "emptyLabel"], outputs: ["selectionChange"] }, { kind: "component", type: i15.TextareaComponent, selector: "eagna-textarea", inputs: ["label", "placeholder", "frmControl", "disabled", "readonly", "required", "minRows", "editable", "maxRows", "appearance", "classes", "isWysiwig", "format", "inBuiltSave", "inBuiltImage", "inline", "height", "editorId", "autoresize"], outputs: ["onSave", "onAttach", "onLoaded", "onDetached", "onChange"] }, { kind: "component", type: i16.ToggleComponent, selector: "eagna-toggle", inputs: ["label", "frmControl", "readonly", "disabled", "appearance"] }, { kind: "component", type: i17.ElementComponent, selector: "element", inputs: ["params"] }, { kind: "component", type: i18.NativeSelectComponent, selector: "eagna-native-select", inputs: ["ft", "fc"] }, { kind: "pipe", type: i19.AbstractToFormControlPipe, name: "abstractToFormControl" }, { kind: "pipe", type: i19.FilterByPipe, name: "filterBy" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: EagnaFormComponent, decorators: [{
            type: Component,
            args: [{ selector: "eagna-form", template: "<div mat-line [formGroup]=\"frmGroup\"\r\n  [ngClass]=\"{'flex-content': flexContent, 'dynamic-content': isDynamic, 'flex-content-row':flexContentRow}\">\r\n  <div *ngFor=\"let formField of frmTemplate; let first=first\" [ngSwitch]=\"formField.controlType\" [ngStyle]=\"formField.style\"\r\n    [class]=\"formField.formClass\"\r\n    [style.width]=\"isDynamic && formField.controlType != 'nested' ? 'calc(100% - 66px)' : ''\">\r\n\r\n    <!-- [style.display]=\"formField.isHidden ? 'none': (formField.style ? formField.style.display : '')\" -->\r\n\r\n    <div *ngIf=\"!formField.isHidden\">\r\n      <ng-container [ngSwitch]=\"formField.controlType\">\r\n        <ng-container *ngSwitchCase=\"'element'\" [ngTemplateOutlet]=\"element\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'autocomplete'\" [ngTemplateOutlet]=\"autocomplete\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'input'\" [ngTemplateOutlet]=\"input\" [ngTemplateOutletContext]=\"{$implicit: formField}\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'select'\" [ngTemplateOutlet]=\"select\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'native-select'\" [ngTemplateOutlet]=\"nativeSelect\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'datepicker'\" [ngTemplateOutlet]=\"datePicker\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'checkbox'\" [ngTemplateOutlet]=\"checkbox\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'toggle'\" [ngTemplateOutlet]=\"toggle\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chips\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'textarea'\" [ngTemplateOutlet]=\"textarea\"></ng-container>\r\n        <ng-container *ngSwitchCase=\"'list'\" [ngTemplateOutlet]=\"list\"></ng-container>\r\n        <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"></ng-container>\r\n      </ng-container>\r\n\r\n    </div>\r\n    <ng-container *ngIf=\"formField.notListable\">\r\n        <div *ngFor=\"let altField of formField.notListableAltFields;\" [ngStyle]=\"altField.style\"\r\n          [class]=\"altField.formClass\"\r\n          [style.width]=\"isDynamic && altField.controlType != 'nested' ? 'calc(100% - 66px)' : ''\">\r\n\r\n          <!-- [style.display]=\"formField.isHidden ? 'none': (formField.style ? formField.style.display : '')\" -->\r\n\r\n          <div *ngIf=\"frmGroup.get(formField.key+'_nl').value == true\">\r\n\r\n            <!-- <ng-container [ngSwitch]=\"altField.controlType\">\r\n              <ng-container *ngSwitchCase=\"'element'\" [ngTemplateOutlet]=\"element\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'autocomplete'\" [ngTemplateOutlet]=\"autocomplete\"></ng-container> -->\r\n              <ng-container [ngTemplateOutlet]=\"input\" [ngTemplateOutletContext]=\"{$implicit: altField}\"></ng-container>\r\n              <!-- <ng-container *ngSwitchCase=\"'select'\" [ngTemplateOutlet]=\"select\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'datepicker'\" [ngTemplateOutlet]=\"datePicker\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'checkbox'\" [ngTemplateOutlet]=\"checkbox\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'toggle'\" [ngTemplateOutlet]=\"toggle\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'chips'\" [ngTemplateOutlet]=\"chips\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'textarea'\" [ngTemplateOutlet]=\"textarea\"></ng-container>\r\n              <ng-container *ngSwitchCase=\"'list'\" [ngTemplateOutlet]=\"list\"></ng-container>\r\n              <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"default\"></ng-container>\r\n            </ng-container> -->\r\n          </div>\r\n        </div>\r\n        <eagna-checkbox [frmControl]=\"frmGroup.get(formField.key+'_nl') | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label+ ' not listed'\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [appearance]=\"formField.appearance\" [valign]=\"formField.valign\" [id]=\"formField.key+'_nl'\"></eagna-checkbox>\r\n    </ng-container>\r\n\r\n    <ng-template #nativeSelect>\r\n      <eagna-native-select [fc]=\"frmGroup.get(formField.key) | abstractToFormControl\" [ft]=\"formField\"></eagna-native-select>\r\n    </ng-template>\r\n\r\n    <ng-template #element>\r\n      <element [params]=\"{\r\n          key: formField.key,\r\n          type: formField.controlTypeControl,\r\n          header: formField.label,\r\n          value: formField.value,\r\n          placeholder: formField.placeholder,\r\n          editable: formField.editable,\r\n          formControl: (frmGroup.get(formField.key) | abstractToFormControl),\r\n          classes: formField.inputClass,\r\n          editByDefault: formField.editByDefault,\r\n          options: formField.options,\r\n          appearance: formField.appearance,\r\n          displayKey: formField.displayKey,\r\n          valueKey: formField.valueKey,\r\n          toolTip: formField.toolTip,\r\n          subTooltip: formField.subTooltip,\r\n          optionsAsyncParams: formField.optionsAsyncParams,\r\n          requireSelection: formField.requireSelection,\r\n          reduceOptionByQuery: formField.reduceOptionByQuery,\r\n          debounceTime: formField.debounceTime,\r\n          emitWhenEmpty: formField.emitWhenEmpty,\r\n          hasAssignment: formField.hasAssignment,\r\n          triggerOutsideEvent: formField.triggerOutsideEvent,\r\n          displayHtml: formField.displayHtml,\r\n          linkCallback: formField.linkCallback,\r\n          linkTooltop: formField.linkTooltop,\r\n          rbacRoles: (formField.rbacRoles || ['*']),\r\n          emptyLabel: formField.emptyLabel,\r\n          loadingMessage: (formField.loadingMessage || ''),\r\n          loadingIcon: formField.loadingIcon,\r\n          enterKeyFn: (formField.enterKeyFn || null),\r\n          headerClass: (formField.headerClass || null),\r\n          strikeWithNew: (formField.strikeWithNew || null),\r\n          allowSaveBlank: (formField.allowSaveBlank || null),\r\n          additionalText: (formField.additionalText || null)\r\n        }\" [class]=\"formField.formClass\">\r\n        <ng-content *ngIf=\"formField.triggerOutsideEvent\" select=\"div.content-projection\"></ng-content>\r\n      </element>\r\n    </ng-template>\r\n\r\n    <ng-template #autocomplete>\r\n      <eagna-autocomplete [appearance]=\"formField.appearance\" [dontFocus]=\"!first || formField.dontFocus\"\r\n        [placeholder]=\"formField.placeholder\" [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [label]=\"formField.label\" [options]=\"formField.options\"\r\n        [displayKey]=\"formField.displayKey\" [valueKey]=\"formField.valueKey\" [labelTooltip]=\"formField.labelTooltip\" [textTooltip]=\"formField.textTooltip\"\r\n        [displayFn]=\"formField.displayFn\" [class]=\"formField.formClass\"\r\n        [requireSelection]=\"formField.requireSelection\" [optionsAsyncParams]=\"formField.optionsAsyncParams\"\r\n        [searchTriggerLength]=\"formField.searchTriggerLength\"\r\n        [reduceOptionByQuery]=\"formField.reduceOptionByQuery\"\r\n        [debounceTime]=\"formField.debounceTime\" [emptyLabel]=\"formField.emptyLabel\"\r\n        [emitWhenEmpty]=\"formField.emitWhenEmpty\" (enterKeyFn)=\"formField.enterKeyFn ? formField.enterKeyFn($event) : null\"\r\n        [eraseParent]=\"formField.eraseParent\" [codeMask]=\"formField.codeMask\"\r\n        [minlength]=\"formField.minlength?.value\" [dontForceMinLength]=\"formField.minlength?.dontForce || false\"\r\n        [maxlength]=\"formField.maxlength?.value\" [displayMaxLength]=\"formField.maxlength?.display || false\" [dontForceMaxLength]=\"formField.maxlength?.dontForce || false\" [hintLabel]=\"formField.hintLabel\">\r\n      </eagna-autocomplete>\r\n    </ng-template>\r\n\r\n    <ng-template #input let-formField>\r\n      <eagna-input [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\" [dontFocus]=\"!first || formField.dontFocus\"\r\n        [label]=\"formField.label\" [placeholder]=\"formField.placeholder\" [type]=\"formField.type\"\r\n        [required]=\"formField.required\" [readonly]=\"formField.readonly\" [disabled]=\"formField.disabled\"\r\n        [appearance]=\"formField.appearance\" [classes]=\"formField.inputClass\" [labelTooltip]=\"formField.labelTooltip\" [textTooltip]=\"formField.textTooltip\"\r\n        [minlength]=\"formField.minlength?.value\" [dontForceMinLength]=\"formField.minlength?.dontForce || false\"\r\n        [maxlength]=\"formField.maxlength?.value\" [displayMaxLength]=\"formField.maxlength?.display || false\" [dontForceMaxLength]=\"formField.maxlength?.dontForce || false\" [hintLabel]=\"formField.hintLabel\" [codeMask]=\"formField.codeMask\"></eagna-input>\r\n    </ng-template>\r\n\r\n    <ng-template #select> <!-- [classes]=\"formField.inputClass\" -->\r\n      <eagna-multiselect [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\"\r\n        [class]=\"formField.formClass\" [label]=\"formField.label\" [placeholder]=\"formField.placeholder\"\r\n        [required]=\"formField.required\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [options]=\"formField.options\" [multiple]=\"formField.multiple\" [displayKey]=\"formField.displayKey\"\r\n        [valueKey]=\"formField.valueKey\" [appearance]=\"formField.appearance\" [displayFn]=\"formField.displayFn\"\r\n        [emptyLabel]=\"formField.emptyLabel\" [filter]=\"formField.filter\"\r\n        ></eagna-multiselect>\r\n    </ng-template>\r\n\r\n    <ng-template #datePicker>\r\n      <eagna-datepicker [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\"\r\n        [class]=\"formField.formClass\" [label]=\"formField.label\" [required]=\"formField.required\"\r\n        [editable]=\"formField.editable\" [editableCallback]=\"formField.editableCallback\"\r\n        [startDate]=\"formField.startDate\"\r\n        [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\" [appearance]=\"formField.appearance\"></eagna-datepicker>\r\n      </ng-template>\r\n\r\n    <ng-template #checkbox>\r\n      <eagna-checkbox [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [appearance]=\"formField.appearance\" [valign]=\"formField.valign\" [id]=\"formField.key\"></eagna-checkbox>\r\n    </ng-template>\r\n\r\n    <ng-template #toggle>\r\n      <eagna-toggle [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [disabled]=\"formField.disabled\" [readonly]=\"formField.readonly\"\r\n        [appearance]=\"formField.appearance\"></eagna-toggle>\r\n    </ng-template>\r\n\r\n    <ng-template #chips>\r\n      <eagna-chips [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [placeholder]=\"formField.placeholder\" [disabled]=\"formField.disabled\"\r\n        [readonly]=\"formField.readonly\" [options]=\"formField.options\" [displayKey]=\"formField.displayKey\"\r\n        [valueKey]=\"formField.valueKey\" [appearance]=\"formField.appearance\"></eagna-chips>\r\n    </ng-template>\r\n\r\n    <ng-template #textarea>\r\n      <eagna-textarea [frmControl]=\"frmGroup.get(formField.key) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n        [label]=\"formField.label\" [placeholder]=\"formField.placeholder\" [disabled]=\"formField.disabled\"\r\n        [readonly]=\"formField.readonly\" [appearance]=\"formField.appearance\" [classes]=\"formField.inputClass\"\r\n        [minRows]=\"formField.minRows\" [maxRows]=\"formField.maxRows\"></eagna-textarea>\r\n    </ng-template>\r\n\r\n    <ng-template #list>\r\n      <!-- {{formField | json}} -->\r\n      <div class=\"p-4\" [class.eagna-form-list]=\"formField.isDynamic\" [class.is-active]=\"formField.editable\">\r\n        <div *ngIf=\"formField.list.length > 0\">\r\n          <span [ngSwitch]=\"formField.editable\"\r\n            *ngIf=\"formField.list | filterBy: {field: formField.displayKey, value: formField.fListFilter, searchType: 'anywhere'} as ll\">\r\n            <span> <!-- style=\"display: flex;\" -->\r\n              <mat-label class=\"mat-subheading-1 pull-left font-eagna-secondary ls-1 fw-400 font-condensed\"\r\n                style=\"margin-bottom: 0px\" [innerHTML]=\"formField.label\"></mat-label> <!-- <sup *ngIf=\"!formField.ignoreInvalid && !frmGroup.get(formField.key)?.valid\" class=\"bold cursor-help font-danger\" title=\"Invalid Data\" style=\"padding-left: 2px\">!</sup> -->\r\n\r\n              <span *ngIf=\"!formField.dontUseSearch\" class=\"align-end pull-left\"> <!-- style=\"display: flex;flex-basis: 30%;\" -->\r\n                <mat-label class=\"mat-form-field\" style=\"margin-right: 2px\"\r\n                  [innerHTML]=\"'Showing ' + ll.length  + ' of ' + formField.list.length + ' ' + formField.placeholder + (formField.list.length > 1 ? 's': '')\">\r\n                </mat-label>\r\n                <mat-icon style=\"width: 16px !important;height: 16px !important;\">filter_alt</mat-icon>\r\n                <input class=\"mat-input\" #fList type=\"text\" [(ngModel)]=\"formField.fListFilter\"\r\n                  [ngModelOptions]=\"{standalone: true}\" placeholder=\"Filter {{formField.label}}\" /> <!-- debounce: 1000 -->\r\n              </span>\r\n\r\n              <span *ngIf=\"formField.dontUseSearch && formField.limit && formField.limit > 0\" class=\"align-end m-l-8 bold pull-left\">  <!-- style=\"display: flex;flex-basis: 30%;\" -->\r\n                  <mat-label class=\"mat-form-field\" style=\"margin-right: 2px\"\r\n                    [innerHTML]=\"'(' + ll.length  + ' of ' + formField.limit + ')'\">\r\n                  </mat-label>\r\n                </span>\r\n\r\n              <a *ngIf=\"formField.isDynamic\" rbac [roles]=\"formField.rbacRoles || ['*']\" class=\"edit-icon\">\r\n                  <mat-icon *ngIf=\"!formField.editable\" class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"startEditing(formField, frmGroup.get(formField.key))\" [matTooltip]=\"'Edit'\">\r\n                    edit\r\n                  </mat-icon>\r\n                  <span *ngIf=\"formField.editable\">\r\n                    <mat-icon *ngIf=\"(!formField.limit || (formField.limit && ll.length < formField.limit))\"\r\n                        class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"addArray(formField)\" [matTooltip]=\"'Add'\">\r\n                        add\r\n                      </mat-icon>\r\n                      <mat-icon *ngIf=\"frmGroup.get(formField.key)?.valid && (!frmGroup.get(formField.key)?.pristine || formField.oldValue?.length != formField.list?.length)\"\r\n                        class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key), true)\" [matTooltip]=\"'Apply Changes'\">\r\n                        save\r\n                      </mat-icon>\r\n                      <mat-icon\r\n                        class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key))\" [matTooltip]=\"'Cancel'\">\r\n                        cancel\r\n                      </mat-icon>\r\n                  </span>\r\n              </a>\r\n\r\n            </span>\r\n            <div style=\"clear: both\"></div>\r\n            <!-- BEGIN WHEN NOT EDITING -->\r\n            <mat-selection-list *ngSwitchDefault [multiple]=\"formField.multiple\"\r\n              (selectionChange)=\"formField.callback? formField.callback($event): null\" color=\"primary\"\r\n              [ngStyle]=\"{'max-height': '400px', 'overflow-y': 'auto', 'padding': '5px'}\">\r\n              <!-- <div mat-subheader>Files</div> -->\r\n              <!-- <cdk-virtual-scroll-viewport itemSize=\"15\" style=\"height: 400px\"> -->\r\n              <!-- <mat-list-option *cdkVirtualFor=\"let opt of ll\" [value]=\"formField.valueKey ? opt[formField.valueKey] : opt\"> -->\r\n              <mat-list-option *ngFor=\"let opt of ll; let i=index\"\r\n                [value]=\"formField.valueKey ? opt[formField.valueKey] : opt\" [class]=\"formField.inputClass\"\r\n                [style.cursor]=\"formField.linkCallback || formField.callback ? 'pointer' : 'default'\">\r\n                <mat-icon *ngIf=\"opt && opt.icon\" mat-list-icon>{{opt.icon}}</mat-icon>\r\n                <div matline *ngIf=\"opt\" [formArrayName]=\"formField.key\">\r\n                  <!-- BEGIN WHEN NOT EDITING AND WITH ARRAYTEMPLATE -->\r\n                  <ng-template [ngIf]=\"formField.arrayTemplate\">\r\n                    <span *ngFor=\"let oTpl of formField.arrayTemplate | filterBy: {field: 'excludeFromEdit', value: false}; let last=last; let odd=odd\"\r\n                      class=\"p-l-4\"\r\n                      [ngStyle]=\"formField.lineStyle\"\r\n                      [class.p-x-4]=\"!odd\"\r\n                      [class.font-danger]=\"!formField.ignoreInvalid && ((!(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.disabled && !(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.valid) )\"\r\n                      [style.text-decoration]=\"!formField.ignoreInvalid && ((!(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.disabled && !(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)?.valid) ) ? 'underline dotted': 'unset'\"\r\n                      [title]=\"!formField.ignoreInvalid? getErrorMessage((frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl))  : ''\"\r\n                      > <!-- || (oTpl.required && !opt[oTpl.key]) -->\r\n                      {{opt[oTpl.key]}} <mat-icon *ngIf=\"opt.toolTip && last\"\r\n                        [matTooltip]=\"opt.toolTip\" [class]=\"oTpl.inputClass\">info</mat-icon>\r\n                    </span>\r\n                  </ng-template>\r\n                  <!-- END -->\r\n\r\n                  <!-- BEGIN WHEN NOT EDITING AND WITHOUT ARRAYTEMPLATE -->\r\n                  <span *ngIf=\"!formField.arrayTemplate\"\r\n                    class=\"ell\"\r\n                    [ngStyle]=\"formField.lineStyle\"\r\n                    [class.font-danger]=\"!formField.ignoreInvalid && ((!frmGroup.get(formField.key)?.get([i])?.disabled && !frmGroup.get(formField.key)?.get([i])?.valid))\"\r\n                    [style.text-decoration]=\"formField.linkCallback || (!formField.ignoreInvalid && ((!frmGroup.get(formField.key)?.get([i])?.disabled && !frmGroup.get(formField.key)?.get([i])?.valid)))? ('underline'\r\n                      + (!formField.ignoreInvalid && ((!frmGroup.get(formField.key)?.get([i])?.disabled && !frmGroup.get(formField.key)?.get([i])?.valid)) ? ' dotted': '')): 'unset'\"\r\n                    [matTooltip]=\"formField.linkCallback ? (formField.displayKey ? opt[formField.displayKey] : opt) : ''\"\r\n                    [title]=\"!formField.ignoreInvalid? getErrorMessage(frmGroup.get(formField.key)?.get([i])) : ''\"\r\n                    [style.cursor]=\"formField.linkCallback? 'pointer': 'default'\"\r\n                    (click)=\"formField.linkCallback? formField.linkCallback($event, opt) : null\"> <!-- || (formField.required && !(formField.displayKey ? opt[formField.displayKey] : opt)) -->\r\n                      {{formField.displayKey ? opt[formField.displayKey] : opt}} <mat-icon *ngIf=\"opt.toolTip\" [matTooltip]=\"opt.toolTip\" class=\"p-l-4\">info</mat-icon>\r\n                  </span>\r\n                  <!-- END -->\r\n                </div>\r\n              </mat-list-option>\r\n              <!-- </cdk-virtual-scroll-viewport> -->\r\n            </mat-selection-list>\r\n            <!-- END -->\r\n\r\n            <!-- BEGIN WHEN EDITING -->\r\n            <div *ngSwitchCase=\"true\" [ngStyle]=\"{'max-height': '400px', 'overflow-y': 'auto', 'padding': '5px'}\">\r\n              <span *ngFor=\"let opt of ll; let i=index; let iLast=last\">\r\n                <!-- BEGIN WHEN EDITING AND WITH ARRAYTEMPLATE -->\r\n                <ng-template [ngIf]=\"formField.arrayTemplate\">\r\n                  <div style=\"display: flex; width: 100%\" *ngIf=\"opt\" [formArrayName]=\"formField.key\">\r\n                    <span *ngFor=\"let oTpl of formField.arrayTemplate | filterBy: {field: 'excludeFromEdit', value: false}; let first=first; let last=last; let odd=odd\"\r\n                      [ngSwitch]=\"oTpl.controlType\" [ngClass]=\"{'p-x-4': !odd}\">\r\n                        <eagna-input *ngSwitchDefault [frmControl]=\"(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)\" [class]=\"formField.formClass\"\r\n                          [label]=\"''\" [placeholder]=\"oTpl.placeholder\" [type]=\"oTpl.type\" [dontFocus]=\"!first || !iLast || oTpl.dontFocus\"\r\n                          [required]=\"formField.required\" [readonly]=\"false\" [disabled]=\"oTpl.disabled\"\r\n                          [minlength]=\"oTpl.minlength.value\" [dontForceMinLength]=\"oTpl.minlength.dontForce || false\"\r\n                          [maxlength]=\"oTpl.maxlength.value\" [displayMaxLength]=\"oTpl.maxlength.display || false\" [dontForceMaxLength]=\"oTpl.maxlength.dontForce || false\" [hintLabel]=\"oTpl.hintLabel\"\r\n                          [classes]=\"oTpl.inputClass\" [appearance]=\"formField.appearance\" [codeMask]=\"oTpl.codeMask\"></eagna-input>\r\n\r\n                        <eagna-autocomplete *ngSwitchCase=\"'autocomplete'\" [appearance]=\"oTpl.appearance\" [dontFocus]=\"!first || !iLast || oTpl.dontFocus\"\r\n                          [placeholder]=\"oTpl.placeholder\" [frmControl]=\"(frmGroup.get(formField.key).get([i]).get(oTpl.key) | abstractToFormControl)\" [options]=\"oTpl.options\"\r\n                          [class]=\"oTpl.formClass\" [requireSelection]=\"oTpl.requireSelection\" [optionsAsyncParams]=\"oTpl.optionsAsyncParams\" [label]=\"oTpl.label\"\r\n                          [displayKey]=\"oTpl.displayKey\" [valueKey]=\"oTpl.valueKey\" [dontDisplaySearch]=\"!last\" [reduceOptionByQuery]=\"oTpl.reduceOptionByQuery\"\r\n                          [debounceTime]=\"oTpl.debounceTime\" [emitWhenEmpty]=\"oTpl.emitWhenEmpty\" [eraseParent]=\"oTpl.eraseParent\" [codeMask]=\"oTpl.codeMask\"\r\n                          (enterKeyFn)=\"oTpl.enterKeyFn ? oTpl.enterKeyFn($event) : null\" [minlength]=\"oTpl.minlength?.value\" [dontForceMinLength]=\"oTpl.minlength?.dontForce || false\"\r\n                          [maxlength]=\"oTpl.maxlength?.value\" [displayMaxLength]=\"oTpl.maxlength?.display || false\" [dontForceMaxLength]=\"oTpl.maxlength?.dontForce || false\" [hintLabel]=\"oTpl.hintLabel\" [classes]=\"oTpl.inputClass\"\r\n                          >\r\n                          <!--\r\n                            [searchTriggerLength]=\"formField.searchTriggerLength\"\r\n                            [displayFn]=\"formField.displayFn\"-->\r\n                        </eagna-autocomplete>\r\n                      </span>\r\n                      <mat-icon class=\"cursor-pointer font-danger\" style=\"float: right\" (click)=\"removeArray(formField, i)\" [matTooltip]=\"'Remove '\">\r\n                        remove\r\n                      </mat-icon>\r\n                  </div>\r\n                </ng-template>\r\n                <!-- END -->\r\n\r\n                <!-- BEGIN WHEN EDITING AND WITHOUT ARRAYTEMPLATE -->\r\n                <ng-template [ngIf]=\"!formField.arrayTemplate\">\r\n                  <div style=\"display: flex; width: 100%\">\r\n                      <eagna-input [frmControl]=\"frmGroup.get(formField.key).get([i]) | abstractToFormControl\" [class]=\"formField.formClass\"\r\n                      [label]=\"''\" [placeholder]=\"formField.placeholder\" [type]=\"formField.type\"\r\n                      [required]=\"formField.required\" [readonly]=\"false\" [disabled]=\"false\"\r\n                      [appearance]=\"formField.appearance\" [classes]=\"formField.inputClass\"\r\n                      [minlength]=\"formField.minlength?.value\" [dontForceMinLength]=\"formField.minlength?.dontForce || false\"\r\n                      [maxlength]=\"formField.maxlength?.value\" [displayMaxLength]=\"formField.maxlength?.display || false\" [dontForceMaxLength]=\"formField.maxlength?.dontForce || false\" [hintLabel]=\"formField.hintLabel\"\r\n                      [codeMask]=\"formField.codeMask\"></eagna-input>\r\n                    <mat-icon class=\"cursor-pointer font-danger\" style=\"float: right\" (click)=\"removeArray(formField, i)\" [matTooltip]=\"'Remove '\">\r\n                      remove\r\n                    </mat-icon>\r\n                  </div>\r\n                </ng-template>\r\n                <!-- END -->\r\n\r\n              </span>\r\n            </div>\r\n            <!-- END -->\r\n\r\n            <mat-label class=\"mat-form-field\" *ngIf=\"!formField.dontUseSearch && ll.length == 0\"><i>No\r\n                {{formField.placeholder + 's'}} to show.</i></mat-label>\r\n          </span>\r\n        </div>\r\n        <div *ngIf=\"formField.list.length == 0\"\r\n          [style]=\"{'background-color':(formField.disabled? 'transparent' : 'none')}\">\r\n          <!--         <div *ngIf=\"formField.list.length == 0\"\r\n            [style]=\"{'background-color': (formField.disabled? 'rgba(0, 0, 0, 0.02)' : 'none')}\"> -->\r\n          <span> <!-- style=\"display: flex;\" -->\r\n            <mat-label class=\"mat-subheading-1 pull-left font-eagna-secondary ls-1 fw-400 font-condensed\"\r\n              style=\"margin-bottom: 0px\" [innerHTML]=\"formField.label\"></mat-label><!-- <br /> -->\r\n\r\n            <span *ngIf=\"formField.limit\" class=\"align-end m-l-8 bold pull-left\"> <!-- style=\"display: flex;flex-basis: 30%;\" -->\r\n                <mat-label class=\"mat-form-field\" style=\"margin-right: 2px\"\r\n                  [innerHTML]=\"'(0 of ' + formField.limit + ')'\">\r\n                </mat-label>\r\n            </span>\r\n\r\n            <!-- <span *ngIf=\"formField.isDynamic\" class=\"align-end\">\r\n              <mat-icon *ngIf=\"!formField.editable\" class=\"cursor-pointer font-eagna-primary\" (click)=\"formField.editable=true; addArray(formField)\" [matTooltip]=\"'Edit'\">\r\n                edit\r\n              </mat-icon>\r\n\r\n              <mat-icon  *ngIf=\"formField.editable\"\r\n                class=\"cursor-pointer font-eagna-primary\" (click)=\"addArray(formField)\" [matTooltip]=\"'Add '\">\r\n                add\r\n              </mat-icon>\r\n            </span> -->\r\n\r\n            <a *ngIf=\"formField.isDynamic\" rbac [roles]=\"formField.rbacRoles || ['*']\" class=\"edit-icon\">\r\n              <mat-icon *ngIf=\"!formField.editable\" class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"startEditing(formField, frmGroup.get(formField.key), true)\" [matTooltip]=\"'Edit'\">\r\n                edit\r\n              </mat-icon>\r\n              <span *ngIf=\"formField.editable\">\r\n                <mat-icon\r\n                  class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"addArray(formField)\" [matTooltip]=\"'Add'\">\r\n                  add\r\n                </mat-icon>\r\n                <mat-icon *ngIf=\"formField.oldValue?.length > 0\"\r\n                  class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key), true)\" [matTooltip]=\"'Apply Changes'\">\r\n                  save\r\n                </mat-icon>\r\n                <mat-icon\r\n                  class=\"cursor-pointer font-eagna-primary fs-13\" (click)=\"stopEditing(formField, frmGroup.get(formField.key))\" [matTooltip]=\"'Cancel'\">\r\n                  cancel\r\n                </mat-icon>\r\n              </span>\r\n            </a>\r\n          </span>\r\n          <mat-label class=\"mat-form-field\">\r\n            <i>{{(formField.emptyMessage || 'No ' + formField.placeholder + 's' + ' to show.')}}</i></mat-label>\r\n        </div>\r\n      </div>\r\n      <ng-content select=\"div.list-content-projection\"></ng-content>\r\n    </ng-template>\r\n\r\n    <ng-template #default>\r\n      Unknown Control Type: {{ formField.controlType }}\r\n    </ng-template>\r\n  </div>\r\n\r\n  <ng-content mat-line></ng-content>\r\n</div>", styles: [".flex-content{display:flex;justify-content:space-between;flex-flow:row wrap}.flex-content-row{flex-direction:column;flex:1;justify-content:start}::ng-deep .mat-tooltip{white-space:pre-line!important}.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edit-icon{display:none}.eagna-form-list:hover,.eagna-form-list.is-active{background-color:#efeff4}.eagna-form-list:hover>div>span>a.edit-icon,.eagna-form-list.is-active>div>span>a.edit-icon,.eagna-form-list:hover>div>span>span>a.edit-icon,.eagna-form-list.is-active>div>span>span>a.edit-icon{cursor:pointer;display:block;float:right;font-size:10px}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { frmGroup: [{
                type: Input
            }], frmTemplate: [{
                type: Input
            }], flexContent: [{
                type: Input
            }], flexContentRow: [{
                type: Input
            }], isDynamic: [{
                type: Input
            }], els: [{
                type: ViewChildren,
                args: [ElementComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 