import { Component, Input } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
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/icon";
import * as i4 from "@angular/material/progress-spinner";
import * as i5 from "@angular/material/tooltip";
import * as i6 from "../autocomplete/autocomplete.component";
import * as i7 from "../input/input.component";
import * as i8 from "../textarea/textarea.component";
export class ElementComponent {
    constructor() {
        this.editing = false;
        this.rbacResult = {};
    }
    isObject(objectValue) {
        return typeof objectValue === 'object';
    }
    ngOnInit() {
        if (this.params.type == null) {
            this.params.type = "input";
        }
        if (this.params.formControl == null) {
            this.params.formControl = new UntypedFormControl();
        }
        if (this.isObject(this.params.formControl.value)) {
            this.internalFormControl = this.params.formControl;
        }
        else {
            if (this.params.formControl == null) {
                this.params.formControl = new UntypedFormControl(this.params.value);
            }
            this.internalFormControl = new UntypedFormControl(this.params.value);
            if (this.params.value != null) {
                this.params.formControl.setValue(this.params.value);
            }
        }
        this.internalFormControl.setValidators(this.params.formControl.validator);
        this.internalFormControl.setAsyncValidators(this.params.formControl.asyncValidator);
        if ( /* this.params.editable && */this.params.editByDefault) {
            this.editing = true;
        }
        if (this.params.classes) {
            if (Array.isArray(this.params.classes)) {
                this.params.classes.push("white-space-prewrap");
            }
            else {
                this.params.classes += ` white-space-prewrap`;
            }
        }
        else {
            this.params.classes = `white-space-prewrap`;
        }
        this.internalFormControl.updateValueAndValidity({ emitEvent: false });
    }
    toggleEditing(cancel) {
        this.editing = this.editing == true ? false : true;
        if (cancel) {
            this.internalFormControl.setValue(this.params.formControl.value);
        }
        if (this.editing) {
            this.internalFormControl.markAsTouched();
        }
    }
    onExit(isSaving) {
        if (isSaving) {
            this.save();
        }
        else {
            this.toggleEditing(true);
        }
    }
    ngOnChanges(changes) {
        if (changes['params'] != null) {
            this.params = changes['params'].currentValue;
            this.ngOnInit();
        }
    }
    save(bypassValue) {
        let val = (bypassValue == true) ? '' : this.internalFormControl.value;
        this.params.formControl.setValue(val);
        this.toggleEditing();
    }
}
ElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ElementComponent, selector: "element", inputs: { params: "params" }, usesOnChanges: true, ngImport: i0, template: "<!--\r\n    How this component works\r\n\r\n    <element [params]={...}</element>\r\n\r\n    or\r\n    <element>\r\n        <span headerTemplate> Custom Header</span>\r\n        <span iconTemplate><span>\r\n        <span valueTemplate> Custom Value</span>\r\n\r\n    </element>\r\n\r\n\r\n-->\r\n<ng-container *ngIf=\"params.type !== 'wysiwig' \">\r\n    <!-- params.type !== 'textarea' && -->\r\n    <div class=\"element\" #elementsMenuTrigger [ngClass]=\"{'element-na': (!rbacResult[params.key] || !params.editable), 'bg-eagna-grey':editing}\"\r\n        rbac [roles]=\"params.rbacRoles\" [mode]=\"'replace'\" (onCheckAuth)=\"rbacResult[params.key]=$event\">\r\n        <!-- If No Icon -->\r\n        <ng-container *ngIf=\"!params.iconOnly\">\r\n            <!-- Content Injection for header -->\r\n            <span #headerTemplate>\r\n                <ng-content select=\"[headerTemplate]\"></ng-content>\r\n            </span>\r\n            <!-- If no header provided -->\r\n            <ng-container *ngIf=\"headerTemplate.children.length == 0\">\r\n                <span [class]=\"params.headerClass || 'mat-subheading-1 font-eagna-secondary ls-1 fw-400 font-condensed'\">{{params.header}}\r\n                    <!-- <sup *ngIf=\"!internalFormControl.valid\" class=\"bold cursor-help font-danger\" title=\"Invalid Data\">!</sup> -->&nbsp;\r\n                    <a *ngIf=\"params.hasAssignment\" [class]=\"{'cursor-pointer': true}\" [title]=\"params.hasAssignment.complete? 'Complete' :\r\n                        (params.hasAssignment.in_progress ? 'Pending Completion' :\r\n                            (params.hasAssignment.no_required? 'No Action Required' : 'Completion Required'))\"\r\n                        (click)=\"params.hasAssignment.callback? params.hasAssignment.callback(params.key) : null\">\r\n                        <mat-icon [class]=\"{'font-true': params.hasAssignment.complete, 'font-warning': params.hasAssignment.in_progress, 'font-danger': !params.hasAssignment.in_progress, 'font-false': params.hasAssignment.no_required}\">{{params.hasAssignment.complete? 'check_circle' : (params.hasAssignment.in_progress ? 'edit' : 'error')}}</mat-icon>\r\n                    </a>\r\n                </span>\r\n\r\n                <a *ngIf=\"!params.triggerOutsideEvent && rbacResult[params.key] && params.editable\" class=\"edit-icon\">\r\n                    <mat-icon *ngIf=\"(!editing || (editing && internalFormControl.valid))\" class=\"fs-13\" [matTooltip]=\"params.subTooltip || (editing? 'Save': 'Edit')\" (click)=\"save()\">\r\n                        {{editing == true ? 'save' : 'edit'}}</mat-icon>\r\n                    <mat-icon *ngIf=\"editing == true\" class=\"fs-13\" matTooltip=\"Cancel\"\r\n                        (click)=\"toggleEditing(true)\">cancel</mat-icon>\r\n                    <mat-icon *ngIf=\"editing == true && params.allowSaveBlank\" class=\"fs-13\" matTooltip=\"Delete\"\r\n                        (click)=\"save(true)\">delete</mat-icon>\r\n                    <!-- <mat-icon *ngIf=\"params.editable == false\" style=\"font-size:13px;\" matTooltip=\"edit\">lock</mat-icon> -->\r\n                    <!-- <ng-content></ng-content> --> <!-- important as this replaces this edit header with outside template projection (in form group level) -->\r\n                </a>\r\n                <a *ngIf=\"params.triggerOutsideEvent && rbacResult[params.key]\" class=\"edit-icon\">\r\n                    <ng-content></ng-content>\r\n                </a>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- If Icon Only -->\r\n        <ng-container *ngIf=\"params.iconOnly\">\r\n            <!-- Content Injection for Icon -->\r\n            <span #iconTemplate>\r\n                <ng-content select=\"[iconTemplate]\"></ng-content>\r\n            </span>\r\n            <!-- If no Icon Content Injection -->\r\n            <ng-container *ngIf=\"iconTemplate.children.length == 0\">\r\n                <span>\r\n                    <mat-icon style=\"font-size:13px;\" matTooltip=\"edit\">{{params.icon}}</mat-icon>\r\n                </span>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- Displayed value -->\r\n        <div class=\"caption mat-typography fw-400\" [class]=\"!editing ? params.classes : ''\">\r\n            <!-- Caption Content Injection -->\r\n            <ng-container *ngIf=\"params.editable == false || params.editable == null\">\r\n                <span #valueTemplate>\r\n                    <ng-content select=\"[valueTemplate]\"></ng-content>\r\n                </span>\r\n                <!-- If not Caption Content Injection -->\r\n                <ng-container *ngIf=\"valueTemplate.children.length == 0\" [ngSwitch]=\"true\">\r\n                    <ng-container *ngSwitchDefault>\r\n                        <span [innerHTML]=\"params.formControl != null ? ((isObject(params.formControl.value) && params.displayKey) ? params.formControl.value[params.displayKey] : params.formControl.value) : params.placeholder != null ? params.placeholder : ''\"\r\n                            (click)=\"!!params.linkCallback ? params.linkCallback() : null\" class=\"p-r-4\"\r\n                            [class.pull-left]=\"!!params.loadingIcon\"\r\n                            [class.font-eagna-accent]=\"!!params.linkCallback\"\r\n                            [style.font-weight]=\"!!params.linkCallback? 'bold': ''\"\r\n                            [style.font-style]=\"!!params.linkCallback? 'italic': ''\"\r\n                            [style.cursor]=\"!!params.linkCallback? 'pointer': ''\"\r\n                            [title]=\"!!params.linkCallback? (params.linkTooltop || 'Open Link'): (!internalFormControl.valid ? 'Invalid Data' : '')\"\r\n                            [class.font-danger]=\"!internalFormControl.valid || params.strikeWithNew !== null\"\r\n                            [style.text-decoration]=\"!internalFormControl.valid ? 'underline dotted': (params.strikeWithNew !== null ? 'line-through' : 'unset')\"\r\n                        ></span>\r\n                        <span *ngIf=\"params.strikeWithNew !== null\" [innerHTML]=\"params.strikeWithNew\"></span>\r\n                        <span *ngIf=\"params.loadingIcon\" class=\"pull-left m-l-4\" [title]=\"params.loadingMessage\">\r\n                            <mat-spinner [diameter]=\"20\" [color]=\"'accent'\"></mat-spinner>\r\n                        </span>\r\n                        <mat-icon *ngIf=\"params.toolTip\" [matTooltip]=\"params.toolTip\" class=\"m-l-4\">info</mat-icon>\r\n                    </ng-container>\r\n                    <span *ngSwitchCase=\"params.displayHtml != null\" [innerHTML]=\"params.displayHtml(params)\"></span>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"params.editable == true\">\r\n                <ng-container *ngIf=\"editing == null || editing == false\">\r\n                    <span #valueTemplate>\r\n                        <ng-content select=\"[valueTemplate]\"></ng-content>\r\n                    </span>\r\n                    <!-- If not Caption Content Injection -->\r\n                    <ng-container *ngIf=\"valueTemplate.children.length == 0\" [ngSwitch]=\"true\">\r\n                        <ng-container *ngSwitchDefault>\r\n                            <span [innerHTML]=\"params.formControl != null ? ((isObject(params.formControl.value) && params.displayKey) ? params.formControl.value[params.displayKey] : params.formControl.value) : params.placeholder != null ? params.placeholder : ''\"\r\n                                (click)=\"!!params.linkCallback ? params.linkCallback() : null\" class=\"p-r-4\"\r\n                                [class.pull-left]=\"!!params.loadingIcon\"\r\n                                [class.font-eagna-accent]=\"!!params.linkCallback\"\r\n                                [style.font-weight]=\"!!params.linkCallback? 'bold': ''\"\r\n                                [style.font-style]=\"!!params.linkCallback? 'italic': ''\"\r\n                                [style.cursor]=\"!!params.linkCallback? 'pointer': ''\"\r\n                                [title]=\"!!params.linkCallback? (params.linkTooltop || 'Open Link'): (!internalFormControl.valid ? 'Invalid Data' : '')\"\r\n                                [class.font-danger]=\"!internalFormControl.valid || params.strikeWithNew !== null\"\r\n                                [style.text-decoration]=\"!internalFormControl.valid ? 'underline dotted': (params.strikeWithNew !== null ? 'line-through' : 'unset')\"\r\n                            ></span>\r\n                            <span *ngIf=\"params.strikeWithNew !== null\" [innerHTML]=\"params.strikeWithNew\"></span>\r\n                            <span *ngIf=\"params.loadingIcon\" class=\"pull-left\" [title]=\"params.loadingMessage\">\r\n                                <mat-spinner [diameter]=\"20\" [color]=\"'accent'\"></mat-spinner>\r\n                            </span>\r\n                            <mat-icon *ngIf=\"params.toolTip\" [matTooltip]=\"params.toolTip\" class=\"m-l-4\">info</mat-icon>\r\n                            <span *ngIf=\"params.additionalText != null\" [innerHTML]=\"params.additionalText\"></span>\r\n                        </ng-container>\r\n                        <span *ngSwitchCase=\"params.displayHtml != null\" [innerHTML]=\"params.displayHtml(params)\"></span>\r\n\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"editing == true\">\r\n                    <div [ngSwitch]=\"params.type\" style=\"width: 96%\">\r\n                        <eagna-input *ngSwitchDefault [label]=\"''\" [textTooltip]=\"'Hit Enter to apply changes'\" [type]=\"params.type\" [frmControl]=\"internalFormControl\"\r\n                            [class]=\"params.classes\" [minlength]=\"params.minlength\" [dontForceMinLength]=\"params.dontForceMinLength || false\"\r\n                            [maxlength]=\"params.maxlength\" [displayMaxLength]=\"params.displayMaxLength || false\" [dontForceMaxLength]=\"params.dontForceMaxLength || false\" [hintLabel]=\"params.hintLabel\"\r\n                            (onExit)=\"onExit($event)\" [codeMask]=\"params.codeMask\"></eagna-input>\r\n\r\n                        <eagna-autocomplete *ngSwitchCase=\"'autocomplete'\" [appearance]=\"params.appearance\"\r\n                            [placeholder]=\"params.placeholder\" [frmControl]=\"internalFormControl\" [options]=\"params.options\" [label]=\"params.label\"\r\n                            [displayKey]=\"params.displayKey\" [valueKey]=\"params.valueKey\"\r\n                            [class]=\"params.classes\" [optionsAsyncParams]=\"params.optionsAsyncParams\"\r\n                            [requireSelection]=\"params.requireSelection\" [emitWhenEmpty]=\"params.emitWhenEmpty\" [eraseParent]=\"params.eraseParent\"\r\n                            [reduceOptionByQuery]=\"params.reduceOptionByQuery\" [codeMask]=\"params.codeMask\"\r\n                            [minlength]=\"params.minlength\" [dontForceMinLength]=\"params.dontForceMinLength || false\"\r\n                            [maxlength]=\"params.maxlength\" [displayMaxLength]=\"params.displayMaxLength || false\" [dontForceMaxLength]=\"params.dontForceMaxLength || false\"\r\n                            [hintLabel]=\"params.hintLabel\" [emptyLabel]=\"params.emptyLabel\"\r\n                            (enterKeyFn)=\"params.enterKeyFn ? params.enterKeyFn($event) : null\">\r\n                          </eagna-autocomplete>\r\n\r\n                        <eagna-textarea *ngSwitchCase=\"'textarea'\" [label]=\"''\" [frmControl]=\"internalFormControl\">\r\n                        </eagna-textarea>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- <ng-container *ngIf=\"fieldType === 'textarea'\">\r\n    <div class=\"task-element\" (click)=\"toggleEditorView()\">\r\n        <span class=\"mat-subheading-1 font-eagna-secondary font-condensed bold\">{{fnMenuHeader}}</span>\r\n        <a class=\"task-element-editable font-eagna-magenta\">\r\n            <mat-icon style=\"font-size:13px;\" matTooltip=\"edit\">edit</mat-icon>\r\n        </a>\r\n\r\n\r\n        <ng-container *ngIf=\"showEditor\" [ngTemplateOutlet]=\"editor\"></ng-container>\r\n        <ng-container *ngIf=\"!showEditor\" [ngTemplateOutlet]=\"default\"></ng-container>\r\n\r\n        <ng-template #editor>\r\n            <div (click)=\"$event.stopPropagation();\">\r\n                <tasker-forms [fieldType]=\"fieldType\" [appearance]=\"appearance\" [color]=\"color\" [fnType]=\"fnType\"\r\n                    [fnLabel]=\"fnLabel\" [fnPlaceholder]=\"'Start Typing Here'\" [fnIcon]=\"fnIcon\"\r\n                    (callbackFn)=\"setCallback($event)\" [fnData]=\"fnData\" [fnParameters]=\"fnParameters\"\r\n                    [fnDisabled]=\"fnDisabled\">\r\n                </tasker-forms>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #default>\r\n            <div class=\"caption\">\r\n                {{fnData.description}}\r\n            </div>\r\n        </ng-template>\r\n\r\n    </div>\r\n</ng-container> -->", styles: [".element{padding:4px}.element ::ng-deep .mat-form-field-infix{border-top:0px!important}.edit-icon{display:none}.dark .element{background-color:#424242}.dark .element:hover{background-color:#0c0c0c}.element:hover{background-color:#efeff4}.element:hover .edit-icon{cursor:pointer;display:block;float:right;font-size:10px}.element:active{background-color:#f1f1f1}.element:active .edit-icon{cursor:pointer;display:block;float:right;font-size:10px}.element-na{background-color:inherit!important;cursor:context-menu}.elements-menu{width:272px!important;min-height:300px!important;margin:4px}.menu-header{width:100%!important;text-align:center;padding:4px 0;border-bottom:1px solid #f1f1f1}.menu-body{width:100%!important;padding:2px;font-size:13px!important}.menu-icons{float:right}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.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: i7.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: i8.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"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ElementComponent, decorators: [{
            type: Component,
            args: [{ selector: 'element', template: "<!--\r\n    How this component works\r\n\r\n    <element [params]={...}</element>\r\n\r\n    or\r\n    <element>\r\n        <span headerTemplate> Custom Header</span>\r\n        <span iconTemplate><span>\r\n        <span valueTemplate> Custom Value</span>\r\n\r\n    </element>\r\n\r\n\r\n-->\r\n<ng-container *ngIf=\"params.type !== 'wysiwig' \">\r\n    <!-- params.type !== 'textarea' && -->\r\n    <div class=\"element\" #elementsMenuTrigger [ngClass]=\"{'element-na': (!rbacResult[params.key] || !params.editable), 'bg-eagna-grey':editing}\"\r\n        rbac [roles]=\"params.rbacRoles\" [mode]=\"'replace'\" (onCheckAuth)=\"rbacResult[params.key]=$event\">\r\n        <!-- If No Icon -->\r\n        <ng-container *ngIf=\"!params.iconOnly\">\r\n            <!-- Content Injection for header -->\r\n            <span #headerTemplate>\r\n                <ng-content select=\"[headerTemplate]\"></ng-content>\r\n            </span>\r\n            <!-- If no header provided -->\r\n            <ng-container *ngIf=\"headerTemplate.children.length == 0\">\r\n                <span [class]=\"params.headerClass || 'mat-subheading-1 font-eagna-secondary ls-1 fw-400 font-condensed'\">{{params.header}}\r\n                    <!-- <sup *ngIf=\"!internalFormControl.valid\" class=\"bold cursor-help font-danger\" title=\"Invalid Data\">!</sup> -->&nbsp;\r\n                    <a *ngIf=\"params.hasAssignment\" [class]=\"{'cursor-pointer': true}\" [title]=\"params.hasAssignment.complete? 'Complete' :\r\n                        (params.hasAssignment.in_progress ? 'Pending Completion' :\r\n                            (params.hasAssignment.no_required? 'No Action Required' : 'Completion Required'))\"\r\n                        (click)=\"params.hasAssignment.callback? params.hasAssignment.callback(params.key) : null\">\r\n                        <mat-icon [class]=\"{'font-true': params.hasAssignment.complete, 'font-warning': params.hasAssignment.in_progress, 'font-danger': !params.hasAssignment.in_progress, 'font-false': params.hasAssignment.no_required}\">{{params.hasAssignment.complete? 'check_circle' : (params.hasAssignment.in_progress ? 'edit' : 'error')}}</mat-icon>\r\n                    </a>\r\n                </span>\r\n\r\n                <a *ngIf=\"!params.triggerOutsideEvent && rbacResult[params.key] && params.editable\" class=\"edit-icon\">\r\n                    <mat-icon *ngIf=\"(!editing || (editing && internalFormControl.valid))\" class=\"fs-13\" [matTooltip]=\"params.subTooltip || (editing? 'Save': 'Edit')\" (click)=\"save()\">\r\n                        {{editing == true ? 'save' : 'edit'}}</mat-icon>\r\n                    <mat-icon *ngIf=\"editing == true\" class=\"fs-13\" matTooltip=\"Cancel\"\r\n                        (click)=\"toggleEditing(true)\">cancel</mat-icon>\r\n                    <mat-icon *ngIf=\"editing == true && params.allowSaveBlank\" class=\"fs-13\" matTooltip=\"Delete\"\r\n                        (click)=\"save(true)\">delete</mat-icon>\r\n                    <!-- <mat-icon *ngIf=\"params.editable == false\" style=\"font-size:13px;\" matTooltip=\"edit\">lock</mat-icon> -->\r\n                    <!-- <ng-content></ng-content> --> <!-- important as this replaces this edit header with outside template projection (in form group level) -->\r\n                </a>\r\n                <a *ngIf=\"params.triggerOutsideEvent && rbacResult[params.key]\" class=\"edit-icon\">\r\n                    <ng-content></ng-content>\r\n                </a>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- If Icon Only -->\r\n        <ng-container *ngIf=\"params.iconOnly\">\r\n            <!-- Content Injection for Icon -->\r\n            <span #iconTemplate>\r\n                <ng-content select=\"[iconTemplate]\"></ng-content>\r\n            </span>\r\n            <!-- If no Icon Content Injection -->\r\n            <ng-container *ngIf=\"iconTemplate.children.length == 0\">\r\n                <span>\r\n                    <mat-icon style=\"font-size:13px;\" matTooltip=\"edit\">{{params.icon}}</mat-icon>\r\n                </span>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- Displayed value -->\r\n        <div class=\"caption mat-typography fw-400\" [class]=\"!editing ? params.classes : ''\">\r\n            <!-- Caption Content Injection -->\r\n            <ng-container *ngIf=\"params.editable == false || params.editable == null\">\r\n                <span #valueTemplate>\r\n                    <ng-content select=\"[valueTemplate]\"></ng-content>\r\n                </span>\r\n                <!-- If not Caption Content Injection -->\r\n                <ng-container *ngIf=\"valueTemplate.children.length == 0\" [ngSwitch]=\"true\">\r\n                    <ng-container *ngSwitchDefault>\r\n                        <span [innerHTML]=\"params.formControl != null ? ((isObject(params.formControl.value) && params.displayKey) ? params.formControl.value[params.displayKey] : params.formControl.value) : params.placeholder != null ? params.placeholder : ''\"\r\n                            (click)=\"!!params.linkCallback ? params.linkCallback() : null\" class=\"p-r-4\"\r\n                            [class.pull-left]=\"!!params.loadingIcon\"\r\n                            [class.font-eagna-accent]=\"!!params.linkCallback\"\r\n                            [style.font-weight]=\"!!params.linkCallback? 'bold': ''\"\r\n                            [style.font-style]=\"!!params.linkCallback? 'italic': ''\"\r\n                            [style.cursor]=\"!!params.linkCallback? 'pointer': ''\"\r\n                            [title]=\"!!params.linkCallback? (params.linkTooltop || 'Open Link'): (!internalFormControl.valid ? 'Invalid Data' : '')\"\r\n                            [class.font-danger]=\"!internalFormControl.valid || params.strikeWithNew !== null\"\r\n                            [style.text-decoration]=\"!internalFormControl.valid ? 'underline dotted': (params.strikeWithNew !== null ? 'line-through' : 'unset')\"\r\n                        ></span>\r\n                        <span *ngIf=\"params.strikeWithNew !== null\" [innerHTML]=\"params.strikeWithNew\"></span>\r\n                        <span *ngIf=\"params.loadingIcon\" class=\"pull-left m-l-4\" [title]=\"params.loadingMessage\">\r\n                            <mat-spinner [diameter]=\"20\" [color]=\"'accent'\"></mat-spinner>\r\n                        </span>\r\n                        <mat-icon *ngIf=\"params.toolTip\" [matTooltip]=\"params.toolTip\" class=\"m-l-4\">info</mat-icon>\r\n                    </ng-container>\r\n                    <span *ngSwitchCase=\"params.displayHtml != null\" [innerHTML]=\"params.displayHtml(params)\"></span>\r\n                </ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"params.editable == true\">\r\n                <ng-container *ngIf=\"editing == null || editing == false\">\r\n                    <span #valueTemplate>\r\n                        <ng-content select=\"[valueTemplate]\"></ng-content>\r\n                    </span>\r\n                    <!-- If not Caption Content Injection -->\r\n                    <ng-container *ngIf=\"valueTemplate.children.length == 0\" [ngSwitch]=\"true\">\r\n                        <ng-container *ngSwitchDefault>\r\n                            <span [innerHTML]=\"params.formControl != null ? ((isObject(params.formControl.value) && params.displayKey) ? params.formControl.value[params.displayKey] : params.formControl.value) : params.placeholder != null ? params.placeholder : ''\"\r\n                                (click)=\"!!params.linkCallback ? params.linkCallback() : null\" class=\"p-r-4\"\r\n                                [class.pull-left]=\"!!params.loadingIcon\"\r\n                                [class.font-eagna-accent]=\"!!params.linkCallback\"\r\n                                [style.font-weight]=\"!!params.linkCallback? 'bold': ''\"\r\n                                [style.font-style]=\"!!params.linkCallback? 'italic': ''\"\r\n                                [style.cursor]=\"!!params.linkCallback? 'pointer': ''\"\r\n                                [title]=\"!!params.linkCallback? (params.linkTooltop || 'Open Link'): (!internalFormControl.valid ? 'Invalid Data' : '')\"\r\n                                [class.font-danger]=\"!internalFormControl.valid || params.strikeWithNew !== null\"\r\n                                [style.text-decoration]=\"!internalFormControl.valid ? 'underline dotted': (params.strikeWithNew !== null ? 'line-through' : 'unset')\"\r\n                            ></span>\r\n                            <span *ngIf=\"params.strikeWithNew !== null\" [innerHTML]=\"params.strikeWithNew\"></span>\r\n                            <span *ngIf=\"params.loadingIcon\" class=\"pull-left\" [title]=\"params.loadingMessage\">\r\n                                <mat-spinner [diameter]=\"20\" [color]=\"'accent'\"></mat-spinner>\r\n                            </span>\r\n                            <mat-icon *ngIf=\"params.toolTip\" [matTooltip]=\"params.toolTip\" class=\"m-l-4\">info</mat-icon>\r\n                            <span *ngIf=\"params.additionalText != null\" [innerHTML]=\"params.additionalText\"></span>\r\n                        </ng-container>\r\n                        <span *ngSwitchCase=\"params.displayHtml != null\" [innerHTML]=\"params.displayHtml(params)\"></span>\r\n\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"editing == true\">\r\n                    <div [ngSwitch]=\"params.type\" style=\"width: 96%\">\r\n                        <eagna-input *ngSwitchDefault [label]=\"''\" [textTooltip]=\"'Hit Enter to apply changes'\" [type]=\"params.type\" [frmControl]=\"internalFormControl\"\r\n                            [class]=\"params.classes\" [minlength]=\"params.minlength\" [dontForceMinLength]=\"params.dontForceMinLength || false\"\r\n                            [maxlength]=\"params.maxlength\" [displayMaxLength]=\"params.displayMaxLength || false\" [dontForceMaxLength]=\"params.dontForceMaxLength || false\" [hintLabel]=\"params.hintLabel\"\r\n                            (onExit)=\"onExit($event)\" [codeMask]=\"params.codeMask\"></eagna-input>\r\n\r\n                        <eagna-autocomplete *ngSwitchCase=\"'autocomplete'\" [appearance]=\"params.appearance\"\r\n                            [placeholder]=\"params.placeholder\" [frmControl]=\"internalFormControl\" [options]=\"params.options\" [label]=\"params.label\"\r\n                            [displayKey]=\"params.displayKey\" [valueKey]=\"params.valueKey\"\r\n                            [class]=\"params.classes\" [optionsAsyncParams]=\"params.optionsAsyncParams\"\r\n                            [requireSelection]=\"params.requireSelection\" [emitWhenEmpty]=\"params.emitWhenEmpty\" [eraseParent]=\"params.eraseParent\"\r\n                            [reduceOptionByQuery]=\"params.reduceOptionByQuery\" [codeMask]=\"params.codeMask\"\r\n                            [minlength]=\"params.minlength\" [dontForceMinLength]=\"params.dontForceMinLength || false\"\r\n                            [maxlength]=\"params.maxlength\" [displayMaxLength]=\"params.displayMaxLength || false\" [dontForceMaxLength]=\"params.dontForceMaxLength || false\"\r\n                            [hintLabel]=\"params.hintLabel\" [emptyLabel]=\"params.emptyLabel\"\r\n                            (enterKeyFn)=\"params.enterKeyFn ? params.enterKeyFn($event) : null\">\r\n                          </eagna-autocomplete>\r\n\r\n                        <eagna-textarea *ngSwitchCase=\"'textarea'\" [label]=\"''\" [frmControl]=\"internalFormControl\">\r\n                        </eagna-textarea>\r\n                    </div>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</ng-container>\r\n\r\n<!-- <ng-container *ngIf=\"fieldType === 'textarea'\">\r\n    <div class=\"task-element\" (click)=\"toggleEditorView()\">\r\n        <span class=\"mat-subheading-1 font-eagna-secondary font-condensed bold\">{{fnMenuHeader}}</span>\r\n        <a class=\"task-element-editable font-eagna-magenta\">\r\n            <mat-icon style=\"font-size:13px;\" matTooltip=\"edit\">edit</mat-icon>\r\n        </a>\r\n\r\n\r\n        <ng-container *ngIf=\"showEditor\" [ngTemplateOutlet]=\"editor\"></ng-container>\r\n        <ng-container *ngIf=\"!showEditor\" [ngTemplateOutlet]=\"default\"></ng-container>\r\n\r\n        <ng-template #editor>\r\n            <div (click)=\"$event.stopPropagation();\">\r\n                <tasker-forms [fieldType]=\"fieldType\" [appearance]=\"appearance\" [color]=\"color\" [fnType]=\"fnType\"\r\n                    [fnLabel]=\"fnLabel\" [fnPlaceholder]=\"'Start Typing Here'\" [fnIcon]=\"fnIcon\"\r\n                    (callbackFn)=\"setCallback($event)\" [fnData]=\"fnData\" [fnParameters]=\"fnParameters\"\r\n                    [fnDisabled]=\"fnDisabled\">\r\n                </tasker-forms>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #default>\r\n            <div class=\"caption\">\r\n                {{fnData.description}}\r\n            </div>\r\n        </ng-template>\r\n\r\n    </div>\r\n</ng-container> -->", styles: [".element{padding:4px}.element ::ng-deep .mat-form-field-infix{border-top:0px!important}.edit-icon{display:none}.dark .element{background-color:#424242}.dark .element:hover{background-color:#0c0c0c}.element:hover{background-color:#efeff4}.element:hover .edit-icon{cursor:pointer;display:block;float:right;font-size:10px}.element:active{background-color:#f1f1f1}.element:active .edit-icon{cursor:pointer;display:block;float:right;font-size:10px}.element-na{background-color:inherit!important;cursor:context-menu}.elements-menu{width:272px!important;min-height:300px!important;margin:4px}.menu-header{width:100%!important;text-align:center;padding:4px 0;border-bottom:1px solid #f1f1f1}.menu-body{width:100%!important;padding:2px;font-size:13px!important}.menu-icons{float:right}.disable-backdrop-click .cdk-overlay-backdrop.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{pointer-events:none!important}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { params: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 