import { Component, EventEmitter, Input, Output, Renderer2, ViewChildren, QueryList } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { FormPermissionService } from '../form-permission.service';
import { CommonLibConfigurationService } from '../common-lib-configuration.service';
import { CommonService } from '../common.service';
import { HttpClient } from '@angular/common/http';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "../form-permission.service";
import * as i3 from "../common-lib-configuration.service";
import * as i4 from "../common.service";
import * as i5 from "@angular/common/http";
import * as i6 from "@angular/common";
import * as i7 from "@angular/cdk/drag-drop";
import * as i8 from "@angular/material/select";
import * as i9 from "@angular/material/core";
import * as i10 from "@angular/material/input";
const _c0 = ["keyNameInput"];
function FieldMapComponent_div_4_mat_select_1_mat_option_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mat-option", 20);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const widget_r8 = ctx.$implicit;
    i0.ɵɵproperty("value", widget_r8.identifier);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(widget_r8.prompt);
} }
function FieldMapComponent_div_4_mat_select_1_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "mat-select", 17);
    i0.ɵɵlistener("selectionChange", function FieldMapComponent_div_4_mat_select_1_Template_mat_select_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const i_r3 = i0.ɵɵnextContext().index; const ctx_r9 = i0.ɵɵnextContext(); return ctx_r9.onFieldSelected($event, i_r3); });
    i0.ɵɵelementStart(1, "mat-option", 18);
    i0.ɵɵtext(2, "Select a field");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, FieldMapComponent_div_4_mat_select_1_mat_option_3_Template, 2, 2, "mat-option", 19);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const i_r3 = i0.ɵɵnextContext().index;
    const ctx_r4 = i0.ɵɵnextContext();
    i0.ɵɵproperty("disableOptionCentering", true);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngForOf", ctx_r4.getAvailableWidgets(i_r3));
} }
function FieldMapComponent_div_4_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵelement(1, "input", 22, 23);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r14 = ctx.$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("value", item_r14);
} }
function FieldMapComponent_div_4_div_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵtemplate(1, FieldMapComponent_div_4_div_2_div_1_Template, 3, 1, "div", 21);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const data_r2 = i0.ɵɵnextContext().$implicit;
    const ctx_r5 = i0.ɵɵnextContext();
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngForOf", ctx_r5.getKeys(data_r2));
} }
function FieldMapComponent_div_4_div_5_Template(rf, ctx) { if (rf & 1) {
    const _r21 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 24);
    i0.ɵɵtext(1);
    i0.ɵɵelementStart(2, "button", 25);
    i0.ɵɵlistener("click", function FieldMapComponent_div_4_div_5_Template_button_click_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r21); const j_r18 = restoredCtx.index; const data_r2 = i0.ɵɵnextContext().$implicit; const ctx_r19 = i0.ɵɵnextContext(); return ctx_r19.removeDroppedItem(data_r2, j_r18); });
    i0.ɵɵelement(3, "img", 26);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r17 = ctx.$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", item_r17, " ");
} }
function FieldMapComponent_div_4_Template(rf, ctx) { if (rf & 1) {
    const _r23 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵtemplate(1, FieldMapComponent_div_4_mat_select_1_Template, 4, 2, "mat-select", 10);
    i0.ɵɵtemplate(2, FieldMapComponent_div_4_div_2_Template, 2, 1, "div", 11);
    i0.ɵɵelementStart(3, "div", 12);
    i0.ɵɵelementStart(4, "div", 13);
    i0.ɵɵlistener("input", function FieldMapComponent_div_4_Template_div_input_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r23); const data_r2 = restoredCtx.$implicit; const ctx_r22 = i0.ɵɵnextContext(); return ctx_r22.updateFormControlValue($event, data_r2); })("cdkDropListDropped", function FieldMapComponent_div_4_Template_div_cdkDropListDropped_4_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r23); const data_r2 = restoredCtx.$implicit; const ctx_r24 = i0.ɵɵnextContext(); return ctx_r24.drop($event, data_r2); });
    i0.ɵɵtemplate(5, FieldMapComponent_div_4_div_5_Template, 4, 1, "div", 14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "button", 15);
    i0.ɵɵlistener("click", function FieldMapComponent_div_4_Template_button_click_6_listener() { const restoredCtx = i0.ɵɵrestoreView(_r23); const i_r3 = restoredCtx.index; const ctx_r25 = i0.ɵɵnextContext(); return ctx_r25.removeDataSection(i_r3); });
    i0.ɵɵelementStart(7, "img", 16);
    i0.ɵɵlistener("click", function FieldMapComponent_div_4_Template_img_click_7_listener() { const restoredCtx = i0.ɵɵrestoreView(_r23); const i_r3 = restoredCtx.index; const ctx_r26 = i0.ɵɵnextContext(); return ctx_r26.removeDataSection(i_r3); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const data_r2 = ctx.$implicit;
    const i_r3 = ctx.index;
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("formGroup", data_r2);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.mapType === "QR");
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", ctx_r0.mapType === "restapi");
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("id", ctx_r0.getDropListId(i_r3))("cdkDropListConnectedTo", ctx_r0.getConnectedDropLists());
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngForOf", ctx_r0.getDroppedItems(data_r2));
} }
function FieldMapComponent_div_9_div_3__svg_svg_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(0, "svg", 36);
    i0.ɵɵelement(1, "path", 37);
    i0.ɵɵelementEnd();
} }
function FieldMapComponent_div_9_div_3__svg_svg_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(0, "svg", 36);
    i0.ɵɵelement(1, "path", 38);
    i0.ɵɵelementEnd();
} }
const _c1 = function (a0, a1) { return { item: a0, formId: a1, origin: "source" }; };
function FieldMapComponent_div_9_div_3_div_9_div_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 41);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r33 = ctx.$implicit;
    const form_r28 = i0.ɵɵnextContext(2).$implicit;
    i0.ɵɵproperty("cdkDragData", i0.ɵɵpureFunction2(2, _c1, item_r33, form_r28.formId));
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate(item_r33.prompt);
} }
function FieldMapComponent_div_9_div_3_div_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 39);
    i0.ɵɵtemplate(1, FieldMapComponent_div_9_div_3_div_9_div_1_Template, 2, 5, "div", 40);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const form_r28 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngForOf", form_r28.widgets);
} }
function FieldMapComponent_div_9_div_3_Template(rf, ctx) { if (rf & 1) {
    const _r37 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div");
    i0.ɵɵelementStart(1, "div", 29);
    i0.ɵɵelementStart(2, "div", 30);
    i0.ɵɵelementStart(3, "div", 31);
    i0.ɵɵlistener("click", function FieldMapComponent_div_9_div_3_Template_div_click_3_listener() { const restoredCtx = i0.ɵɵrestoreView(_r37); const form_r28 = restoredCtx.$implicit; const ctx_r36 = i0.ɵɵnextContext(2); return ctx_r36.toggleItemsVisibility(form_r28); });
    i0.ɵɵelementStart(4, "span", 32);
    i0.ɵɵtemplate(5, FieldMapComponent_div_9_div_3__svg_svg_5_Template, 2, 0, "svg", 33);
    i0.ɵɵtemplate(6, FieldMapComponent_div_9_div_3__svg_svg_6_Template, 2, 0, "svg", 33);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "span", 34);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(9, FieldMapComponent_div_9_div_3_div_9_Template, 2, 1, "div", 35);
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const form_r28 = ctx.$implicit;
    const ctx_r27 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("cdkDropListData", form_r28.widgets)("cdkDropListConnectedTo", ctx_r27.getConnectedDropLists());
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngIf", form_r28.isExpanded);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", !form_r28.isExpanded);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(form_r28.name);
    i0.ɵɵadvance(1);
    i0.ɵɵproperty("ngIf", form_r28.isExpanded);
} }
function FieldMapComponent_div_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27);
    i0.ɵɵelementStart(1, "h3", 28);
    i0.ɵɵtext(2, "Form Fields");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, FieldMapComponent_div_9_div_3_Template, 10, 6, "div", 21);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngForOf", ctx_r1.sourceForms);
} }
export class FieldMapComponent {
    constructor(formBuilder, formService, commonLibConfig, commonService, httpClient, renderer) {
        this.formBuilder = formBuilder;
        this.formService = formService;
        this.commonLibConfig = commonLibConfig;
        this.commonService = commonService;
        this.httpClient = httpClient;
        this.renderer = renderer;
        this.filteredWidgets = [];
        this.sourceForms = [];
        this.fieldMapData = [];
        this.fieldmap = new EventEmitter();
        this.forms = [];
        this.done = ['Email', 'First_Name', 'Last_Name', 'meta_header_354022', 'Serial Number', 'Model'];
    }
    ngOnInit() {
        console.log("MAPTYPE:", this.mapType);
        console.log("filtered widgets:", this.filteredWidgets);
        this.initializeFormGroup();
        if (this.mapType === 'restapi') {
            this.populateFormGroup();
            this.logMapObject();
        }
    }
    initializeFormGroup() {
        if (this.mapType === 'restapi') {
            this.formGroup = this.formBuilder.group({
                data: this.formBuilder.array([])
            });
        }
        else if (this.mapType === 'QR') {
            this.formGroup = this.formBuilder.group({
                data: this.formBuilder.array([this.createDataSection()])
            });
        }
    }
    populateFormGroup() {
        this.fieldMapData.forEach(mapping => {
            const newSection = this.createDataSection();
            newSection.patchValue({
                field_id: mapping.destination,
                value: mapping.source
            });
            this.data.push(newSection);
        });
    }
    loadFormDetails() {
        this.forms.forEach((form, index) => {
            this.commonService.getFormDetails(form.fid)
                .then(response => {
                if (response?.fd?.form?.flat_fields) {
                    this.forms[index] = { ...form, flat_fields: response.fd.form.flat_fields };
                }
                else {
                    console.warn(`No flat_fields found for form ID ${form.fid}`);
                }
            })
                .catch(error => {
                console.error('Error fetching form details for form ID', form.fid, ':', error);
            });
        });
    }
    get data() {
        return this.formGroup.get('data');
    }
    toggleItemsVisibility(form) {
        form.isExpanded = !form.isExpanded;
    }
    createDataSection() {
        return this.formBuilder.group({
            field_id: ['', Validators.required],
            value: ['', Validators.required]
        });
    }
    addDataSection() {
        this.data.push(this.createDataSection());
    }
    removeDataSection(index) {
        this.data.removeAt(index);
        this.logMapObject();
    }
    getAvailableWidgets(index) {
        const selectedFields = this.data.controls
            .filter((control, i) => i !== index)
            .map(control => control.value.field_id);
        return this.filteredWidgets.filter(widget => !selectedFields.includes(widget.identifier));
    }
    onFieldSelected(event, index) {
        const selectedValue = event.value;
        const control = this.data.at(index);
        control.get('field_id').setValue(`{{${this.actionFormId}.${selectedValue}}}`);
        this.logMapObject();
    }
    updateFormControlValue(event, control) {
        const valueControl = control.get('value');
        const updatedText = event.target.innerText.replace(/\n/g, '');
        valueControl.setValue(updatedText);
        this.logMapObject();
    }
    drop(event, control) {
        if (control) {
            const valueControl = control.get('value');
            let currentValue = valueControl.value || '';
            const draggedData = event.item.data;
            const wrappedItem = `{{${draggedData.formId}.${draggedData.item.identifier}}}`;
            const safePosition = this.findSafeInsertionPoint(currentValue);
            let newValue = '';
            if (draggedData.origin === 'source') {
                newValue = safePosition === null ? currentValue + wrappedItem : currentValue.slice(0, safePosition) + wrappedItem + currentValue.slice(safePosition);
            }
            valueControl.setValue(newValue);
            this.logMapObject();
        }
    }
    findSafeInsertionPoint(text) {
        const placeholderPattern = /{{\d+\.[a-zA-Z0-9_]+}}/g;
        let lastSafeIndex = 0;
        let match;
        while ((match = placeholderPattern.exec(text)) !== null) {
            lastSafeIndex = placeholderPattern.lastIndex;
        }
        return lastSafeIndex >= text.length ? null : lastSafeIndex;
    }
    getDroppedItems(control) {
        const value = control.get('value').value || '';
        const regex = /{{(\w+)\.(\w+)}}/g;
        const matches = [];
        let match;
        while ((match = regex.exec(value)) !== null) {
            matches.push(match[0]);
        }
        return matches;
    }
    getKeys(control) {
        const value = control.get('field_id').value || '';
        return [value];
    }
    removeDroppedItem(control, index) {
        const valueControl = control.get('value');
        const droppedItems = this.getDroppedItems(control);
        droppedItems.splice(index, 1);
        const updatedValue = droppedItems.join('').replace(/\n/g, '');
        valueControl.setValue(updatedValue);
        this.logMapObject();
    }
    getDropListId(index) {
        return `destinationList_${index}`;
    }
    getConnectedDropLists() {
        return this.data.controls.map((_, i) => this.getDropListId(i));
    }
    buildMapObject() {
        // Update all key values before building the map object
        if (this.mapType === 'restapi' && this.keyNameInputs && this.keyNameInputs.length) {
            this.keyNameInputs.forEach((input, index) => {
                const control = this.data.at(index);
                const updatedValue = input.nativeElement.value;
                control.get('field_id').setValue(updatedValue, { emitEvent: false });
            });
        }
        const map = this.data.controls.map(control => ({
            source: control.get('value').value,
            destination: control.get('field_id').value
        }));
        return {
            maptype: this.mapType,
            map: JSON.stringify(map, null, 2),
            appVersionId: this.appVersionId
        };
    }
    getUserDetail() {
        return this.httpClient.get(`${this.commonLibConfig.axonatorX1Url}getUserDetails/`);
    }
    logMapObject() {
        const fieldMap = this.buildMapObject();
        console.log(fieldMap);
        this.fieldmap.emit(fieldMap);
    }
}
FieldMapComponent.ɵfac = function FieldMapComponent_Factory(t) { return new (t || FieldMapComponent)(i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i2.FormPermissionService), i0.ɵɵdirectiveInject(i3.CommonLibConfigurationService), i0.ɵɵdirectiveInject(i4.CommonService), i0.ɵɵdirectiveInject(i5.HttpClient), i0.ɵɵdirectiveInject(i0.Renderer2)); };
FieldMapComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FieldMapComponent, selectors: [["lib-field-map"]], viewQuery: function FieldMapComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 5);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.keyNameInputs = _t);
    } }, inputs: { appVersionId: "appVersionId", filteredWidgets: "filteredWidgets", mapType: "mapType", actionFormId: "actionFormId", sourceForms: "sourceForms", source: "source", fieldMapData: "fieldMapData" }, outputs: { fieldmap: "fieldmap" }, decls: 10, vars: 2, consts: [[1, "parameter-mapper-container"], [1, "content"], [1, "destination"], [1, "flex", "flex-col", "w-full", "gap-2"], ["class", "data-section", 3, "formGroup", 4, "ngFor", "ngForOf"], ["type", "button", 1, "add-btn", 3, "click"], [1, "additional-fields", "m-0"], [1, "vertical-line"], ["class", "source", 4, "ngIf"], [1, "data-section", 3, "formGroup"], ["class", "field-select", "placeholder", "Select Field", 3, "disableOptionCentering", "selectionChange", 4, "ngIf"], [4, "ngIf"], [1, "destination-container"], ["contenteditable", "true", "cdkDropList", "", "placeholder", "form field", 1, "destination-list", 3, "id", "cdkDropListConnectedTo", "input", "cdkDropListDropped"], ["contenteditable", "false", "class", "dropped-item", 4, "ngFor", "ngForOf"], [1, "data-section-delete", 3, "click"], ["src", "https://ax-static.s3.us-west-2.amazonaws.com/static/img/doc-designer-assets/axo_delete.svg", "alt", "", 3, "click"], ["placeholder", "Select Field", 1, "field-select", 3, "disableOptionCentering", "selectionChange"], ["value", "", "disabled", "", "selected", ""], [3, "value", 4, "ngFor", "ngForOf"], [3, "value"], [4, "ngFor", "ngForOf"], ["matInput", "", "placeholder", "Key Name", 1, "key-name-input", 3, "value"], ["keyNameInput", ""], ["contenteditable", "false", 1, "dropped-item"], [1, "delete-btn", 3, "click"], ["src", "https://ax-static.s3.us-west-2.amazonaws.com/static/img/doc-designer-assets/removeItem.svg"], [1, "source"], [1, "source-heading"], [1, "source-container"], ["cdkDropList", "", 1, "source-list", 3, "cdkDropListData", "cdkDropListConnectedTo"], [1, "toggle-header", 3, "click"], [1, "dropdownarrow"], ["xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 24 24", "width", "24", "height", "24", 4, "ngIf"], [1, "header-text"], ["class", "source-items", 4, "ngIf"], ["xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 24 24", "width", "24", "height", "24"], ["d", "M7 14l5-5 5 5z"], ["d", "M7 10l5 5 5-5z"], [1, "source-items"], ["class", "source-box", "cdkDrag", "", 3, "cdkDragData", 4, "ngFor", "ngForOf"], ["cdkDrag", "", 1, "source-box", 3, "cdkDragData"]], template: function FieldMapComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵelementStart(1, "div", 1);
        i0.ɵɵelementStart(2, "div", 2);
        i0.ɵɵelementStart(3, "div", 3);
        i0.ɵɵtemplate(4, FieldMapComponent_div_4_Template, 8, 6, "div", 4);
        i0.ɵɵelementStart(5, "button", 5);
        i0.ɵɵlistener("click", function FieldMapComponent_Template_button_click_5_listener() { return ctx.addDataSection(); });
        i0.ɵɵtext(6, "+add field");
        i0.ɵɵelementEnd();
        i0.ɵɵelement(7, "div", 6);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
        i0.ɵɵelement(8, "div", 7);
        i0.ɵɵtemplate(9, FieldMapComponent_div_9_Template, 4, 1, "div", 8);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵadvance(4);
        i0.ɵɵproperty("ngForOf", ctx.data.controls);
        i0.ɵɵadvance(5);
        i0.ɵɵproperty("ngIf", ctx.source && ctx.sourceForms && ctx.sourceForms[0] !== null && ctx.sourceForms.length > 0);
    } }, directives: [i6.NgForOf, i6.NgIf, i1.NgControlStatusGroup, i7.CdkDropList, i8.MatSelect, i9.MatOption, i10.MatInput, i7.CdkDrag], styles: [".parameter-mapper-container[_ngcontent-%COMP%]{min-width:600px;height:fit-content;max-height:80vh;overflow:auto}.parameter-mapper-container[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%]{color:#64748b}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]{display:flex;flex-direction:row;width:100%;font-size:.875rem}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]{padding:.5rem;margin:0;width:60%}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%]{padding:10px 8px;width:30%;border:1px solid #ccc;border-radius:.375rem}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .destination-container[_ngcontent-%COMP%]{width:60%}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .destination-container[_ngcontent-%COMP%]   .destination-list[_ngcontent-%COMP%]{margin:.25rem 0;border-radius:.375rem;overflow:hidden;position:relative;padding:0 .5rem;cursor:text;border:2px dotted #DCD4FF;min-height:44px;background:white;max-width:100%}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .destination-container[_ngcontent-%COMP%]   .destination-list[_ngcontent-%COMP%]:empty:before{content:attr(placeholder);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;margin-left:.5rem;color:#ccc}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .data-section-delete[_ngcontent-%COMP%]{border-radius:.125rem;padding:.25rem;width:fit-content}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .data-section-delete[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{height:1rem;width:2rem}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .data-section[_ngcontent-%COMP%]   .data-section-delete[_ngcontent-%COMP%]:hover{background-color:#f3f2f2}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .add-btn[_ngcontent-%COMP%]{padding:.25rem .5rem;border-radius:.375rem;width:fit-content;border:1px solid #D0D5DD;color:#1e293b}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .destination[_ngcontent-%COMP%]   .add-btn[_ngcontent-%COMP%]:hover{background-color:#f3f2f2}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .vertical-line[_ngcontent-%COMP%]{border:1px solid #ccc;min-height:100%}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .source[_ngcontent-%COMP%]{padding:.5rem;margin:0;width:40%;max-height:300px;overflow:scroll}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .source[_ngcontent-%COMP%]   .source-heading[_ngcontent-%COMP%]{margin:0;font-size:15px;font-weight:500;color:#1e293b}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .source[_ngcontent-%COMP%]   .source-container[_ngcontent-%COMP%]{width:calc(100% - .5rem)}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .source[_ngcontent-%COMP%]   .source-container[_ngcontent-%COMP%]   .source-list[_ngcontent-%COMP%]{display:flex;flex-direction:column;width:100%;gap:.25rem;padding:.25rem;border-radius:.375rem;overflow:hidden;border:solid 1px #ccc;margin:.5rem}.parameter-mapper-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .source[_ngcontent-%COMP%]   .source-container[_ngcontent-%COMP%]   .source-list[_ngcontent-%COMP%]   .toggle-header[_ngcontent-%COMP%]{display:flex;justify-content:start;align-items:center;cursor:pointer}.parameter-mapper-container[_ngcontent-%COMP%]   .source-box[_ngcontent-%COMP%]{display:inline-block;padding:.25rem;margin:.25rem;border-radius:.375rem;box-sizing:border-box;cursor:grab;text-align:center;font-size:.75rem;font-weight:500;width:fit-content;border:2px solid #6147e1;background-color:#dcd4ff}.parameter-mapper-container[_ngcontent-%COMP%]   .dropped-item[_ngcontent-%COMP%]{border-radius:.375rem;box-sizing:border-box;cursor:grab;text-align:center;font-size:.75rem;font-weight:500;width:fit-content;display:inline-flex;align-items:center;padding:5px;margin:3px;border:2px solid #6147e1;background-color:#dcd4ff}.parameter-mapper-container[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%]{background-color:transparent;cursor:pointer;margin-left:5px;display:flex;padding:0}.parameter-mapper-container[_ngcontent-%COMP%]   .key-name-input[_ngcontent-%COMP%]{background-color:#fff;border:1px solid #c2c2c2;border-radius:4px;padding:8px 16px;font-size:14px;color:#888;width:80%}.parameter-mapper-container[_ngcontent-%COMP%]   .key-name-input[_ngcontent-%COMP%]::placeholder{color:#888;opacity:1}.parameter-mapper-container[_ngcontent-%COMP%]   .mat-form-field-appearance-fill[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%]{padding-bottom:0}.parameter-mapper-container[_ngcontent-%COMP%]   .mat-form-field.mat-focused[_ngcontent-%COMP%]   .key-name-input[_ngcontent-%COMP%]{border-color:#4285f4;box-shadow:0 0 8px #4285f480}.parameter-mapper-container[_ngcontent-%COMP%]   .mat-form-field.mat-focused[_ngcontent-%COMP%]   .mat-form-field-ripple[_ngcontent-%COMP%]{background-color:transparent}.parameter-mapper-container[_ngcontent-%COMP%]   .key-name-input-clear[_ngcontent-%COMP%]{cursor:pointer;color:#888;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.cdk-drag-preview[_ngcontent-%COMP%]{display:flex;padding:.25rem;margin:.25rem;border-radius:.375rem;box-sizing:border-box;cursor:grabbing;text-align:center;font-size:.75rem;font-weight:500;justify-content:center;align-items:center;width:fit-content;min-height:32px;border:2px solid #6147e1;background-color:#dcd4ff}.cdk-drag-preview[_ngcontent-%COMP%]:active{cursor:grabbing}.input-drop-list[_ngcontent-%COMP%]{display:inline-block;width:calc(100% - 40px);padding:0;border-radius:4px;background-color:#f9f9f9;transition:background-color .3s}.input-drop-list.cdk-drop-list-dragging[_ngcontent-%COMP%]{background-color:#e0e0e0}.form-field-drop-list[_ngcontent-%COMP%]{display:inline-block;width:100%;min-height:30px;padding:5px;border:1px dashed #ccc;border-radius:4px;background-color:#f9f9f9;transition:background-color .3s}.form-field-drop-list.cdk-drop-list-dragging[_ngcontent-%COMP%]{background-color:#e0e0e0}.cdk-overlay-container[_ngcontent-%COMP%]{z-index:9998!important}.destination-box[_ngcontent-%COMP%]{padding:10px 5px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:12px}.cdk-drag-placeholder[_ngcontent-%COMP%]{opacity:.5;background-color:#e0e0e0;border:2px dashed #ab47bc;border-radius:8px;height:100%;box-sizing:border-box}.cdk-drag-animating[_ngcontent-%COMP%]{transition:transform .25s cubic-bezier(0,0,.2,1)}.destination-box[_ngcontent-%COMP%]:last-child{border:none}.destination-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .destination-box[_ngcontent-%COMP%]:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.destination-box.small[_ngcontent-%COMP%]{padding:10px 5px;background:#dbdbdb;font-size:12px;color:#000;height:20px;width:150px}.dropdownarrow[_ngcontent-%COMP%]{display:inline-block;width:24px;height:24px;margin-right:5px}"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FieldMapComponent, [{
        type: Component,
        args: [{ selector: 'lib-field-map', template: "<div class=\"parameter-mapper-container\">\n  <div class=\"content\">\n    <!-- Left Side Section -->\n    <div class=\"destination\">\n      <div  class=\"flex flex-col w-full gap-2\">\n        <div class=\"data-section\" *ngFor=\"let data of data.controls; let i = index\" [formGroup]=\"data\">\n          <mat-select *ngIf=\"mapType === 'QR'\" class=\"field-select\" [disableOptionCentering]=\"true\"\n            placeholder=\"Select Field\" (selectionChange)=\"onFieldSelected($event, i)\">\n            <mat-option value=\"\" disabled selected>Select a field</mat-option>\n            <mat-option *ngFor=\"let widget of getAvailableWidgets(i)\" [value]=\"widget.identifier\">{{ widget.prompt}}</mat-option>\n          </mat-select>\n          <div *ngIf=\"mapType === 'restapi'\">\n            <div *ngFor=\"let item of getKeys(data);\">\n              <input\n                matInput\n                class=\"key-name-input\"\n                placeholder=\"Key Name\"\n                [value]=\"item\"\n                #keyNameInput\n              >\n            </div>\n          </div>\n          \n          <div class=\"destination-container\">\n            <div contenteditable=\"true\" \n                (input)=\"updateFormControlValue($event, data)\" \n                cdkDropList\n                [id]=\"getDropListId(i)\" \n                [cdkDropListConnectedTo]=\"getConnectedDropLists()\" \n                class=\"destination-list\"\n                (cdkDropListDropped)=\"drop($event, data)\" \n                placeholder=\"form field\">\n                <div contenteditable=\"false\" *ngFor=\"let item of getDroppedItems(data); let j = index\" class=\"dropped-item\">\n                  {{ item }}\n                  <button class=\"delete-btn\"(click)=\"removeDroppedItem(data, j)\">\n                    <img src=\"https://ax-static.s3.us-west-2.amazonaws.com/static/img/doc-designer-assets/removeItem.svg\">\n                  </button>\n                </div>\n            </div>\n          </div>\n          <button class=\"data-section-delete\" (click)=\"removeDataSection(i)\">\n            <img src=\"https://ax-static.s3.us-west-2.amazonaws.com/static/img/doc-designer-assets/axo_delete.svg\" alt=\"\" (click)=\"removeDataSection(i)\">\n          </button>\n        </div>\n        <button type=\"button\" class=\"add-btn\" (click)=\"addDataSection()\">+add field</button>\n        <div class=\"additional-fields m-0\">\n          <!-- Additional fields will be dynamically added here -->\n        </div>\n      </div>\n    </div>\n    <div class=\"vertical-line\"></div>\n    <!-- Right Side Section -->\n    <div *ngIf=\"source && sourceForms && sourceForms[0]!==null && sourceForms.length > 0\" class=\"source\">\n      <h3 class=\"source-heading\">Form Fields</h3>\n      <div *ngFor=\"let form of sourceForms\">\n        <div class=\"source-container\">\n          <div cdkDropList [cdkDropListData]=\"form.widgets\" [cdkDropListConnectedTo]=\"getConnectedDropLists()\"\n            class=\"source-list\">\n            <div class=\"toggle-header\" (click)=\"toggleItemsVisibility(form)\">\n              <span class=\"dropdownarrow\">\n                <svg *ngIf=\"form.isExpanded\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\"\n                  height=\"24\">\n                  <path d=\"M7 14l5-5 5 5z\" />\n                </svg>\n                <svg *ngIf=\"!form.isExpanded\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\"\n                  height=\"24\">\n                  <path d=\"M7 10l5 5 5-5z\" />\n                </svg>\n              </span>\n              <span class=\"header-text\">{{ form.name }}</span>\n            </div>\n            <div *ngIf=\"form.isExpanded\" class=\"source-items\">\n              <div *ngFor=\"let item of form.widgets\" class=\"source-box\" cdkDrag\n                [cdkDragData]=\"{item: item, formId: form.formId, origin: 'source'}\">{{ item.prompt }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".parameter-mapper-container{min-width:600px;height:fit-content;max-height:80vh;overflow:auto}.parameter-mapper-container .text{color:#64748b}.parameter-mapper-container .content{display:flex;flex-direction:row;width:100%;font-size:.875rem}.parameter-mapper-container .content .destination{padding:.5rem;margin:0;width:60%}.parameter-mapper-container .content .destination .data-section{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.parameter-mapper-container .content .destination .data-section .field-select{padding:10px 8px;width:30%;border:1px solid #ccc;border-radius:.375rem}.parameter-mapper-container .content .destination .data-section .destination-container{width:60%}.parameter-mapper-container .content .destination .data-section .destination-container .destination-list{margin:.25rem 0;border-radius:.375rem;overflow:hidden;position:relative;padding:0 .5rem;cursor:text;border:2px dotted #DCD4FF;min-height:44px;background:white;max-width:100%}.parameter-mapper-container .content .destination .data-section .destination-container .destination-list:empty:before{content:attr(placeholder);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;margin-left:.5rem;color:#ccc}.parameter-mapper-container .content .destination .data-section .data-section-delete{border-radius:.125rem;padding:.25rem;width:fit-content}.parameter-mapper-container .content .destination .data-section .data-section-delete img{height:1rem;width:2rem}.parameter-mapper-container .content .destination .data-section .data-section-delete:hover{background-color:#f3f2f2}.parameter-mapper-container .content .destination .add-btn{padding:.25rem .5rem;border-radius:.375rem;width:fit-content;border:1px solid #D0D5DD;color:#1e293b}.parameter-mapper-container .content .destination .add-btn:hover{background-color:#f3f2f2}.parameter-mapper-container .content .vertical-line{border:1px solid #ccc;min-height:100%}.parameter-mapper-container .content .source{padding:.5rem;margin:0;width:40%;max-height:300px;overflow:scroll}.parameter-mapper-container .content .source .source-heading{margin:0;font-size:15px;font-weight:500;color:#1e293b}.parameter-mapper-container .content .source .source-container{width:calc(100% - .5rem)}.parameter-mapper-container .content .source .source-container .source-list{display:flex;flex-direction:column;width:100%;gap:.25rem;padding:.25rem;border-radius:.375rem;overflow:hidden;border:solid 1px #ccc;margin:.5rem}.parameter-mapper-container .content .source .source-container .source-list .toggle-header{display:flex;justify-content:start;align-items:center;cursor:pointer}.parameter-mapper-container .source-box{display:inline-block;padding:.25rem;margin:.25rem;border-radius:.375rem;box-sizing:border-box;cursor:grab;text-align:center;font-size:.75rem;font-weight:500;width:fit-content;border:2px solid #6147e1;background-color:#dcd4ff}.parameter-mapper-container .dropped-item{border-radius:.375rem;box-sizing:border-box;cursor:grab;text-align:center;font-size:.75rem;font-weight:500;width:fit-content;display:inline-flex;align-items:center;padding:5px;margin:3px;border:2px solid #6147e1;background-color:#dcd4ff}.parameter-mapper-container .delete-btn{background-color:transparent;cursor:pointer;margin-left:5px;display:flex;padding:0}.parameter-mapper-container .key-name-input{background-color:#fff;border:1px solid #c2c2c2;border-radius:4px;padding:8px 16px;font-size:14px;color:#888;width:80%}.parameter-mapper-container .key-name-input::placeholder{color:#888;opacity:1}.parameter-mapper-container .mat-form-field-appearance-fill .mat-form-field-wrapper{padding-bottom:0}.parameter-mapper-container .mat-form-field.mat-focused .key-name-input{border-color:#4285f4;box-shadow:0 0 8px #4285f480}.parameter-mapper-container .mat-form-field.mat-focused .mat-form-field-ripple{background-color:transparent}.parameter-mapper-container .key-name-input-clear{cursor:pointer;color:#888;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.cdk-drag-preview{display:flex;padding:.25rem;margin:.25rem;border-radius:.375rem;box-sizing:border-box;cursor:grabbing;text-align:center;font-size:.75rem;font-weight:500;justify-content:center;align-items:center;width:fit-content;min-height:32px;border:2px solid #6147e1;background-color:#dcd4ff}.cdk-drag-preview:active{cursor:grabbing}.input-drop-list{display:inline-block;width:calc(100% - 40px);padding:0;border-radius:4px;background-color:#f9f9f9;transition:background-color .3s}.input-drop-list.cdk-drop-list-dragging{background-color:#e0e0e0}.form-field-drop-list{display:inline-block;width:100%;min-height:30px;padding:5px;border:1px dashed #ccc;border-radius:4px;background-color:#f9f9f9;transition:background-color .3s}.form-field-drop-list.cdk-drop-list-dragging{background-color:#e0e0e0}.cdk-overlay-container{z-index:9998!important}.destination-box{padding:10px 5px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:12px}.cdk-drag-placeholder{opacity:.5;background-color:#e0e0e0;border:2px dashed #ab47bc;border-radius:8px;height:100%;box-sizing:border-box}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.destination-box:last-child{border:none}.destination-list.cdk-drop-list-dragging .destination-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.destination-box.small{padding:10px 5px;background:#dbdbdb;font-size:12px;color:#000;height:20px;width:150px}.dropdownarrow{display:inline-block;width:24px;height:24px;margin-right:5px}\n"] }]
    }], function () { return [{ type: i1.FormBuilder }, { type: i2.FormPermissionService }, { type: i3.CommonLibConfigurationService }, { type: i4.CommonService }, { type: i5.HttpClient }, { type: i0.Renderer2 }]; }, { appVersionId: [{
            type: Input
        }], filteredWidgets: [{
            type: Input
        }], mapType: [{
            type: Input
        }], actionFormId: [{
            type: Input
        }], sourceForms: [{
            type: Input
        }], source: [{
            type: Input
        }], fieldMapData: [{
            type: Input
        }], fieldmap: [{
            type: Output
        }], keyNameInputs: [{
            type: ViewChildren,
            args: ['keyNameInput']
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 