ngx-t-forms 2.0.9 → 2.0.10

package/fesm2022/ngx-t-forms-api-value-access-rules.component-Zg1ddSDb.mjs

@@ -1,813 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, Component, ViewChild, Output, Input, Optional, Self, HostBinding } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { e as TreeComponent, M as MatModulesModule } from './ngx-t-forms-ngx-t-forms-DaAFB-HX.mjs';
-import * as i3 from '@angular/material/core';
-import * as i2$1 from '@angular/material/button';
-import * as i3$1 from '@angular/material/checkbox';
-import * as i4 from '@angular/material/divider';
-import * as i5 from '@angular/material/expansion';
-import * as i6 from '@angular/material/icon';
-import * as i6$1 from '@angular/material/list';
-import * as i3$2 from '@angular/material/form-field';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import * as i7 from '@angular/material/select';
-import * as i9 from '@angular/material/toolbar';
-import * as i8 from '@angular/material/tooltip';
-import * as i3$3 from '@angular/material/tree';
-import * as i12 from '@angular/material/input';
-import { Subject, take, tap, catchError, throwError } from 'rxjs';
-import * as i1$1 from '@angular/common/http';
-import { HttpErrorResponse } from '@angular/common/http';
-import _ from 'lodash';
-import { f as flatApiList } from './ngx-t-forms-convertPostmanCollectionToTree-DktdVBeQ.mjs';
-
-function searchAndOrderArray(arr, searchTerm, filterBy) {
-    // Filter the array based on the search term
-    const filteredArr = arr.filter((obj) => searchTerm
-        ? obj[filterBy].toLowerCase().includes(searchTerm.toLowerCase())
-        : true);
-    // Order the filtered array alphabetically by name
-    const orderedArr = filteredArr.sort((a, b) => a[filterBy].localeCompare(b[filterBy]));
-    return orderedArr;
-}
-
-const _c0$1 = ["textarea"];
-function DataTreeComponent_mat_tree_node_15_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-tree-node", 15);
-    i0.ɵɵelement(1, "button", 16);
-    i0.ɵɵelementStart(2, "mat-checkbox", 17);
-    i0.ɵɵlistener("change", function DataTreeComponent_mat_tree_node_15_Template_mat_checkbox_change_2_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.update(node_r2)); });
-    i0.ɵɵelementStart(3, "span", 18);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 19);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const node_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("checked", ctx_r2.nodeIsChecked(node_r2))("matTooltip", "Map data field: " + node_r2.key);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", "Field name: " + node_r2.key);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", node_r2.key, ":");
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", ctx_r2.getNodeValueColor(node_r2.value));
-    i0.ɵɵattribute("aria-label", "Field value: " + node_r2.value);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", node_r2.value, " ");
-} }
-function DataTreeComponent_mat_tree_node_16_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-tree-node", 15)(1, "button", 20)(2, "mat-icon");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "mat-checkbox", 21);
-    i0.ɵɵlistener("change", function DataTreeComponent_mat_tree_node_16_Template_mat_checkbox_change_4_listener() { const node_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.update(node_r5)); });
-    i0.ɵɵelementStart(5, "span", 18);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const node_r5 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", "Toggle " + node_r5.key);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.treeClass.treeControl.isExpanded(node_r5) ? "expand_more" : "chevron_right", " ");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r2.nodeIsChecked(node_r5))("matTooltip", "Select " + node_r5.key);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r5.key);
-} }
-function DataTreeComponent_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4)(1, "mat-icon", 5);
-    i0.ɵɵtext(2, "info");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4, "Select a node from the tree above to begin mapping data");
-    i0.ɵɵelementEnd()();
-} }
-function DataTreeComponent_ng_container_28_button_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function DataTreeComponent_ng_container_28_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const path_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setupPath(path_r7)); });
-    i0.ɵɵelementStart(1, "mat-icon");
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const path_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("disabled", !path_r7.keyIsArrayIndex)("color", path_r7.functions.length > 0 ? "accent" : "");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(path_r7.keyIsArrayIndex ? "filter_none" : "folder");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(path_r7.key);
-} }
-function DataTreeComponent_ng_container_28_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function DataTreeComponent_ng_container_28_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const path_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.removeFunction(path_r7.key)); });
-    i0.ɵɵelementStart(1, "mat-icon");
-    i0.ɵɵtext(2, "check_circle");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const path_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(path_r7.key);
-} }
-function DataTreeComponent_ng_container_28_mat_icon_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 27);
-    i0.ɵɵtext(1, "chevron_right");
-    i0.ɵɵelementEnd();
-} }
-function DataTreeComponent_ng_container_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, DataTreeComponent_ng_container_28_button_1_Template, 5, 4, "button", 22)(2, DataTreeComponent_ng_container_28_button_2_Template, 5, 1, "button", 23)(3, DataTreeComponent_ng_container_28_mat_icon_3_Template, 2, 0, "mat-icon", 24);
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const path_r7 = ctx.$implicit;
-    const isLast_r9 = ctx.last;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !path_r7.inEdit);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !!path_r7.inEdit);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !isLast_r9);
-} }
-function DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_2_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-form-field", 44)(1, "mat-label");
-    i0.ɵɵtext(2, "Array function");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "mat-select", 45);
-    i0.ɵɵlistener("selectionChange", function DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_2_Template_mat_select_selectionChange_3_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.functionChanged($event)); });
-    i0.ɵɵelementStart(4, "mat-option", 46);
-    i0.ɵɵtext(5, "filter");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "mat-option", 47);
-    i0.ɵɵtext(7, "find");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "mat-option", 48);
-    i0.ɵɵtext(9, "map");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "mat-hint");
-    i0.ɵɵtext(11, " Choose a function to run on the array ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    let tmp_6_0;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", (tmp_6_0 = ctx_r2.getFunctionInEdit()) == null ? null : tmp_6_0.function);
-} }
-function DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_3_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-form-field", 49)(1, "mat-label");
-    i0.ɵɵtext(2, "Condition expression");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "textarea", 50, 0);
-    i0.ɵɵlistener("input", function DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_3_Template_textarea_input_3_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onTextChange($event)); })("focus", function DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_3_Template_textarea_focus_3_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFocus($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "mat-hint");
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    let tmp_7_0;
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("value", (tmp_7_0 = ctx_r2.getFunctionInEdit()) == null ? null : tmp_7_0.expression);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.showSuggestions ? "Suggestions are enabled" : "Enter a condition expression to transform the array", " ");
-} }
-function DataTreeComponent_div_29_ng_container_2_div_11_section_4_button_8_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 58);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_ng_container_2_div_11_section_4_button_8_Template_button_click_0_listener() { const method_r17 = i0.ɵɵrestoreView(_r16).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.selectSuggestionInput(method_r17.value)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "titlecase");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const method_r17 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, method_r17.label), " ");
-} }
-function DataTreeComponent_div_29_ng_container_2_div_11_section_4_button_13_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_ng_container_2_div_11_section_4_button_13_Template_button_click_0_listener() { const input_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.selectSuggestionInput(input_r19.formControlName)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "titlecase");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const input_r19 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, input_r19.label), " ");
-} }
-function DataTreeComponent_div_29_ng_container_2_div_11_section_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 51);
-    i0.ɵɵelement(1, "mat-divider");
-    i0.ɵɵelementStart(2, "div", 52)(3, "div", 53)(4, "div", 54)(5, "h5");
-    i0.ɵɵtext(6, "Logical Operators");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 55);
-    i0.ɵɵtemplate(8, DataTreeComponent_div_29_ng_container_2_div_11_section_4_button_8_Template, 3, 3, "button", 56);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 54)(10, "h5");
-    i0.ɵɵtext(11, "Add Input as a Variable");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 55);
-    i0.ɵɵtemplate(13, DataTreeComponent_div_29_ng_container_2_div_11_section_4_button_13_Template, 3, 3, "button", 57);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(14, "div", 53);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngForOf", ctx_r2.getMethods());
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", ctx_r2.getAllInputs());
-} }
-function DataTreeComponent_div_29_ng_container_2_div_11_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "mat-divider");
-    i0.ɵɵtemplate(2, DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_2_Template, 12, 1, "mat-form-field", 37)(3, DataTreeComponent_div_29_ng_container_2_div_11_mat_form_field_3_Template, 7, 2, "mat-form-field", 38)(4, DataTreeComponent_div_29_ng_container_2_div_11_section_4_Template, 15, 2, "section", 39);
-    i0.ɵɵelementStart(5, "mat-toolbar", 40);
-    i0.ɵɵelement(6, "span", 41);
-    i0.ɵɵelementStart(7, "button", 42);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_ng_container_2_div_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.reset()); });
-    i0.ɵɵtext(8, " reset ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 43);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_ng_container_2_div_11_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.saveNodeInEdit()); });
-    i0.ɵɵtext(10, " save ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const function_r12 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r2.treeClass.pathInEdit == null ? null : ctx_r2.treeClass.pathInEdit.functions);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.treeClass.pathInEdit == null ? null : ctx_r2.treeClass.pathInEdit.functions);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.showSuggestions);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("disabled", !function_r12.expression && !function_r12.function);
-} }
-function DataTreeComponent_div_29_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "mat-list-item", 30)(2, "span", 31)(3, "strong");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "a", 32);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_ng_container_2_Template_a_click_5_listener() { const function_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.editFunction(function_r12.id)); });
-    i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "titlecase");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 33);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_ng_container_2_Template_button_click_8_listener() { const function_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.removeFunction(function_r12.id)); });
-    i0.ɵɵelementStart(9, "mat-icon", 34);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(11, DataTreeComponent_div_29_ng_container_2_div_11_Template, 11, 4, "div", 35);
-    i0.ɵɵelement(12, "mat-divider");
-    i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const function_r12 = ctx.$implicit;
-    const i_r20 = ctx.index;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("activated", !!function_r12.inEdit);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i_r20 + 1, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 6, function_r12.function) || "Function configurations required", "");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("color", function_r12.function && function_r12.expression ? "" : "warn");
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(!function_r12.inEdit ? "close" : "check_circle");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", function_r12.inEdit);
-} }
-function DataTreeComponent_div_29_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "mat-nav-list");
-    i0.ɵɵtemplate(2, DataTreeComponent_div_29_ng_container_2_Template, 13, 8, "ng-container", 28);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "ol");
-    i0.ɵɵelementStart(4, "button", 29);
-    i0.ɵɵlistener("click", function DataTreeComponent_div_29_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addNewFunction()); });
-    i0.ɵɵtext(5, "+ Add function ");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.treeClass.pathInEdit == null ? null : ctx_r2.treeClass.pathInEdit.functions);
-} }
-;
-class DataTreeComponent {
-    constructor() {
-        this.value = [];
-        this.formInputs = [];
-        this.pathChanged = new EventEmitter();
-        this._value = [];
-        this.showSuggestions = false;
-        this.suggestions = ['$option1', '$option2', '$option3', '$custom'];
-        this.filteredSuggestions = [];
-        this.cursorPosition = 0;
-        this.methods = [
-            // Logical Operators
-            {
-                label: 'logical AND (&&)',
-                value: '&&'
-            },
-            {
-                label: 'logical OR (||)',
-                value: '||'
-            },
-            // Comparison Operators
-            {
-                label: 'strict equality (===)',
-                value: '==='
-            },
-            {
-                label: 'loose equality (==)',
-                value: '=='
-            },
-            {
-                label: 'strict inequality (!==)',
-                value: '!=='
-            },
-            {
-                label: 'loose inequality (!=)',
-                value: '!='
-            },
-            {
-                label: 'greater than (>)',
-                value: '>'
-            },
-            {
-                label: 'less than (<)',
-                value: '<'
-            },
-            {
-                label: 'greater than or equal to (>=)',
-                value: '>='
-            },
-            {
-                label: 'less than or equal to (<=)',
-                value: '<='
-            }
-        ];
-        this.showValue = false;
-        this.treeClass = new TreeComponent();
-    }
-    ngOnChanges(changes) {
-        if (changes['data']) {
-            if (JSON.stringify(this._data) !== JSON.stringify(changes['data'].currentValue)) {
-                this._data = changes['data'].currentValue;
-                this.treeClass.computeTreeData(changes['data'].currentValue);
-                if (this.value && Array.isArray(this.value) && this.value.length > 0 && 'functions' in (this.value?.[0] || {})) {
-                    this.treeClass.updateStateFromPath(this.value);
-                }
-            }
-        }
-        if (changes['value']) {
-            this.valueChangedSetPath(changes['value'].currentValue);
-        }
-    }
-    ngOnInit() {
-    }
-    valueChangedSetPath(newPath) {
-        const isSameAsNewPath = typeof newPath === typeof this._value && JSON.stringify(newPath) === JSON.stringify(this._value);
-        if (!isSameAsNewPath && Array.isArray(newPath)) {
-            this._value = newPath;
-            this.treeClass.updateStateFromPath(newPath);
-        }
-    }
-    async onTextChange(event) {
-        const newValue = event.target.value;
-        const functions = this.treeClass.pathInEdit.functions.find(f => f.inEdit);
-        functions.expression = newValue;
-        this.treeClass.pathInEdit.functions.map(f => {
-            if (f.inEdit) {
-                return functions;
-            }
-            return f;
-        });
-        const textarea = this.textareaElementRef.nativeElement;
-        this.cursorPosition = textarea.selectionStart || 0;
-        const lastChar = newValue[this.cursorPosition - 1];
-        if (lastChar === '$') {
-            this.showSuggestions = true;
-            this.filteredSuggestions = this.suggestions;
-        }
-        else {
-            this.showSuggestions = false;
-        }
-    }
-    functionChanged(event) {
-        this.treeClass.functionChanged(event.value);
-    }
-    addNewFunction() {
-        this.treeClass.addNewFunction();
-    }
-    editFunction(id) {
-        this.treeClass.pathInEdit.functions = this.treeClass.pathInEdit.functions?.map(f => {
-            if (f.id === id) {
-                return { ...f, inEdit: true };
-            }
-            return { ...f, inEdit: false };
-        });
-    }
-    selectSuggestionInput(suggestion) {
-        const functions = this.treeClass.pathInEdit.functions.find(f => f.inEdit) || {};
-        const value = functions?.expression || '';
-        const beforeCursor = value.slice(0, this.cursorPosition - 1);
-        const afterCursor = value.slice(this.cursorPosition);
-        functions.expression = beforeCursor + suggestion + ' ' + afterCursor;
-        this.treeClass.pathInEdit.functions.map(f => {
-            if (f.inEdit) {
-                return functions;
-            }
-            return f;
-        });
-        this.showSuggestions = false;
-        const textarea = this.textareaElementRef.nativeElement;
-        textarea.focus();
-        const newCursorPosition = this.cursorPosition + suggestion.length;
-        setTimeout(() => {
-            textarea.setSelectionRange(newCursorPosition, newCursorPosition);
-        }, 0);
-    }
-    onFocus(event) {
-        const textarea = this.textareaElementRef.nativeElement;
-        this.cursorPosition = textarea.selectionStart || 0;
-    }
-    nodeIsChecked(node) {
-        return this.treeClass.nodeIsChecked(node);
-    }
-    hasANodeInEdit() {
-        return this.treeClass.hasANodeInEdit();
-    }
-    showNode(node) {
-        return this.treeClass.showNode(node);
-    }
-    onSearchChange(event) {
-        this.optionsSearch = event.target.value;
-    }
-    getMethods() {
-        return searchAndOrderArray(this.methods, this.optionsSearch, 'label');
-    }
-    getNodeValueColor(v) {
-        const valueType = typeof v;
-        switch (valueType) {
-            case 'string':
-                return '#c56100';
-            case 'number':
-                return 'mediumblue';
-            case 'boolean':
-                return 'forestgreen';
-            case 'object':
-                return '#005959';
-            default:
-                return 'currentcolor';
-        }
-    }
-    setupPath(node) {
-        return this.treeClass.setupPath(node);
-    }
-    trackByFn(index, node) {
-        return node.path.join('.');
-    }
-    getAllInputs() {
-        const inputs = this.formInputs
-            .filter((inp) => !inp.multipleInputInEditId);
-        return searchAndOrderArray(inputs || [], this.optionsSearch, 'label');
-    }
-    getValueVariables() {
-        const isObject = typeof this.value === 'object';
-        if (!this.value) {
-            return [];
-        }
-        if (!isObject && !!this.value) {
-            return [this.value];
-        }
-        if (Array.isArray(this.value)) {
-            return this.value.map((v, i) => (i));
-        }
-        return Object.keys(this.value);
-    }
-    saveNodeInEdit() {
-        const newP = this.treeClass.saveNodeInEdit();
-        if (newP) {
-            this.pathChanged.emit(newP);
-        }
-    }
-    closeEdit() {
-        this.treeClass.closeEdit();
-    }
-    reset() {
-        this.treeClass.resetNode();
-    }
-    getFunctionInEdit() {
-        const node = this.treeClass.pathInEdit;
-        return node?.functions?.find(f => f.inEdit);
-    }
-    get getValue() {
-        return this.treeClass.getValue();
-    }
-    removeFunction(id) {
-        this.treeClass.removeFunction(id);
-    }
-    update(node) {
-        const path = this.treeClass.selectNode(node)?.map(p => ({
-            ...p,
-            children: undefined,
-            value: undefined
-        }));
-        this.pathChanged.emit(path);
-    }
-    static { this.ɵfac = function DataTreeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataTreeComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataTreeComponent, selectors: [["app-data-tree"]], viewQuery: function DataTreeComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1, 5, ElementRef);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textareaElementRef = _t.first);
-        } }, inputs: { data: "data", value: "value", formInputs: "formInputs" }, outputs: { pathChanged: "pathChanged" }, features: [i0.ɵɵNgOnChangesFeature], decls: 42, vars: 10, consts: [["textarea", ""], ["multi", ""], [1, "title-icon"], [1, "content"], [1, "tree-instructions"], ["color", "primary", 1, "info-icon"], [3, "dataSource", "treeControl"], ["matTreeNodePadding", "", 4, "matTreeNodeDef"], ["matTreeNodePadding", "", 4, "matTreeNodeDef", "matTreeNodeDefWhen"], ["class", "tree-instructions", 4, "ngIf"], [2, "height", "fit-content", "background", "inherit"], [1, "breadcrumb-container"], [4, "ngFor", "ngForOf", "ngForTrackBy"], [4, "ngIf"], [2, "padding", "16px", "background", "black", "color", "cadetblue", "border-radius", "8px", "min-width", "fit-content"], ["matTreeNodePadding", ""], ["disabled", "", "aria-hidden", "true", "mat-icon-button", "", 1, "node-spacer"], [1, "node-checkbox", 3, "change", "checked", "matTooltip"], [1, "node-key"], [1, "node-value", 2, "white-space", "nowrap"], ["mat-icon-button", "", "matTreeNodeToggle", "", 2, "padding", "0px", "width", "24px"], [3, "change", "checked", "matTooltip"], ["matTooltip", "Click to edit", "mat-button", "", "class", "breadcrumb-item", 3, "disabled", "color", "click", 4, "ngIf"], ["matTooltip", "Currently editing", "mat-raised-button", "", "color", "primary", "class", "breadcrumb-item", 3, "click", 4, "ngIf"], ["class", "breadcrumb-separator", 4, "ngIf"], ["matTooltip", "Click to edit", "mat-button", "", 1, "breadcrumb-item", 3, "click", "disabled", "color"], ["matTooltip", "Currently editing", "mat-raised-button", "", "color", "primary", 1, "breadcrumb-item", 3, "click"], [1, "breadcrumb-separator"], [4, "ngFor", "ngForOf"], ["mat-button", "", 3, "click"], [1, "functions", 2, "height", "fit-content", 3, "activated"], ["matListItemIcon", "", 1, "function-number"], ["matListItemTitle", "", 2, "font-size", "14px", "white-space", "nowrap", "overflow", "hidden", "text-overflow", "ellipsis", 3, "click"], ["mat-icon-button", "", "matListItemMeta", "", 3, "click"], [3, "color"], ["class", "function-edit-container", 4, "ngIf"], [1, "function-edit-container"], ["style", "  margin-bottom: 8px;", "appearance", "outline", 4, "ngIf"], ["appearance", "outline", 4, "ngIf"], ["class", "showSuggestionContainer", 4, "ngIf"], [2, "background", "none"], [1, "spacer"], ["mat-flat-button", "", 3, "click"], ["mat-flat-button", "", "color", "primary", 3, "click", "disabled"], ["appearance", "outline", 2, "margin-bottom", "8px"], ["matNativeControl", "", "placeholder", "ChooseFunctionToRun", 3, "selectionChange", "value"], ["value", "filter"], ["value", "find"], ["value", "map"], ["appearance", "outline"], ["matInput", "", "placeholder", "Enter a validation string for the function", 3, "input", "focus", "value"], [1, "showSuggestionContainer"], [1, "", 2, "padding", "8px"], [1, "suggestion-container"], [1, "suggestion-column"], [1, "button-container"], ["color", "primary", "mat-flat-button", "", "class", "suggestion-button", 3, "click", 4, "ngFor", "ngForOf"], ["mat-flat-button", "", "class", "suggestion-button", 3, "click", 4, "ngFor", "ngForOf"], ["color", "primary", "mat-flat-button", "", 1, "suggestion-button", 3, "click"], ["mat-flat-button", "", 1, "suggestion-button", 3, "click"]], template: function DataTreeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "mat-accordion", 1)(1, "mat-expansion-panel")(2, "mat-expansion-panel-header")(3, "mat-panel-title")(4, "mat-icon", 2);
-            i0.ɵɵtext(5, "dataset_linked");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtext(6, " Navigate and select data fields for mapping ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "div", 3)(8, "div", 4)(9, "mat-icon", 5);
-            i0.ɵɵtext(10, "info");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "span");
-            i0.ɵɵtext(12, "Click checkboxes to select fields for mapping. Selected paths will be highlighted.");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(13, "mat-divider");
-            i0.ɵɵelementStart(14, "mat-tree", 6);
-            i0.ɵɵtemplate(15, DataTreeComponent_mat_tree_node_15_Template, 7, 8, "mat-tree-node", 7)(16, DataTreeComponent_mat_tree_node_16_Template, 7, 5, "mat-tree-node", 8);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(17, "mat-expansion-panel")(18, "mat-expansion-panel-header")(19, "mat-panel-title")(20, "mat-icon", 2);
-            i0.ɵɵtext(21, "rebase_edit");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtext(22, " Configure and transform your data path ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(23, "div", 3);
-            i0.ɵɵtemplate(24, DataTreeComponent_div_24_Template, 5, 0, "div", 9);
-            i0.ɵɵelement(25, "mat-divider");
-            i0.ɵɵelementStart(26, "mat-toolbar", 10)(27, "div", 11);
-            i0.ɵɵtemplate(28, DataTreeComponent_ng_container_28_Template, 4, 3, "ng-container", 12);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(29, DataTreeComponent_div_29_Template, 6, 1, "div", 13);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(30, "mat-expansion-panel")(31, "mat-expansion-panel-header")(32, "mat-panel-title")(33, "mat-icon", 2);
-            i0.ɵɵtext(34, "dataset");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtext(35, " Mapped Data Value Based on the Active Path ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(36, "div", 3);
-            i0.ɵɵelement(37, "mat-divider");
-            i0.ɵɵelementStart(38, "div", 14)(39, "pre");
-            i0.ɵɵtext(40);
-            i0.ɵɵpipe(41, "json");
-            i0.ɵɵelementEnd()()()()();
-        } if (rf & 2) {
-            i0.ɵɵadvance(14);
-            i0.ɵɵproperty("dataSource", ctx.treeClass.dataSource)("treeControl", ctx.treeClass.treeControl);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("matTreeNodeDefWhen", ctx.treeClass.hasChild);
-            i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngIf", ctx.treeClass.activePath.length === 0);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngForOf", ctx.treeClass.activePath)("ngForTrackBy", ctx.trackByFn);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !!ctx.hasANodeInEdit());
-            i0.ɵɵadvance(11);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(41, 8, ctx.getValue));
-        } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf, i2.JsonPipe, i2.TitleCasePipe, MatModulesModule, i3.MatOption, i2$1.MatButton, i2$1.MatIconButton, i3$1.MatCheckbox, i4.MatDivider, i5.MatAccordion, i5.MatExpansionPanel, i5.MatExpansionPanelHeader, i5.MatExpansionPanelTitle, i6.MatIcon, i6$1.MatNavList, i6$1.MatListItem, i6$1.MatListItemIcon, i6$1.MatListItemTitle, i6$1.MatListItemMeta, i3$2.MatFormField, i3$2.MatLabel, i3$2.MatHint, i7.MatSelect, i9.MatToolbar, i8.MatTooltip, i3$3.MatTreeNodeDef, i3$3.MatTreeNodePadding, i3$3.MatTreeNodeToggle, i3$3.MatTree, i3$3.MatTreeNode, i12.MatInput, FormsModule], styles: ["mat-tree[_ngcontent-%COMP%]{min-width:fit-content;background:azure}mat-tree-node[_ngcontent-%COMP%]{min-height:28px!important;height:32px!important}.breadcrumb-container[_ngcontent-%COMP%]{display:flex;align-items:center;flex-wrap:wrap;padding:8px 0}.breadcrumb-item[_ngcontent-%COMP%]{display:inline-flex;align-items:center;margin:0;transition:background-color .3s ease}.breadcrumb-separator[_ngcontent-%COMP%]{margin:0}.breadcrumb-separator[_ngcontent-%COMP%]   .mat-icon[_ngcontent-%COMP%]{font-size:16px;width:16px;height:16px}.info-icon[_ngcontent-%COMP%]{width:38px}mat-expansion-panel-header[_ngcontent-%COMP%]{padding-left:16px;padding-right:16px}mat-expansion-panel[_ngcontent-%COMP%]{background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))}.tree-instructions[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px;padding:12px;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));border-radius:4px;margin-bottom:16px}.node-spacer[_ngcontent-%COMP%]{width:24px;padding:0}.node-checkbox[_ngcontent-%COMP%]{width:100%}.node-key[_ngcontent-%COMP%]{font-weight:500;color:#2c2c2c}.node-value[_ngcontent-%COMP%]{font-family:monospace;padding:2px 6px;background:#f8f9fa;border-radius:3px;font-size:.9em}.suggestion-container[_ngcontent-%COMP%]{display:flex;width:100%;gap:14px}.suggestion-column[_ngcontent-%COMP%]{flex:1;min-width:0}.button-container[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap}.suggestion-button[_ngcontent-%COMP%]{height:auto;text-transform:capitalize;margin:2px;padding:8px;line-height:normal;text-align:left;font-size:.8em}h5[_ngcontent-%COMP%]{margin-bottom:8px;font-size:1em}.title-icon[_ngcontent-%COMP%]{margin-right:8px;vertical-align:middle}mat-form-field[_ngcontent-%COMP%]{width:100%;background:azure}.functions[_ngcontent-%COMP%]{color:var(--mat-full-pseudo-checkbox-selected-icon-color)}.function-number[_ngcontent-%COMP%]{font-size:smaller;display:flex;align-items:center;justify-content:center;margin-right:8px;margin-left:8px}.search-field[_ngcontent-%COMP%]{width:100%;padding:8px;border:1px solid var(--mat-divider-color, var(--mat-app-outline));border-radius:4px;margin-left:0}.search-container[_ngcontent-%COMP%]{padding-left:8px;padding-right:8px;height:48px;background:inherit;margin-top:0;height:fit-content}.showSuggestionContainer[_ngcontent-%COMP%]{background:azure}"] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataTreeComponent, [{
-        type: Component,
-        args: [{ selector: 'app-data-tree', standalone: true, imports: [CommonModule, MatModulesModule, FormsModule], template: "<mat-accordion multi>\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset_linked</mat-icon>\n        Navigate and select data fields for mapping\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <div class=\"tree-instructions\">\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n        <span>Click checkboxes to select fields for mapping. Selected paths will be highlighted.</span>\n      </div>\n      <mat-divider></mat-divider>\n\n      <mat-tree [dataSource]=\"treeClass.dataSource\" \n      [treeControl]=\"treeClass.treeControl\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n          <button disabled class=\"node-spacer\" aria-hidden=\"true\" mat-icon-button>\n\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" class=\"node-checkbox\"\n            [matTooltip]=\"'Map data field: ' + node.key\">\n            <span class=\"node-key\" [attr.aria-label]=\"'Field name: ' + node.key\">{{ node.key }}:</span>\n            <span [attr.aria-label]=\"'Field value: ' + node.value\" style=\"    white-space: nowrap;\" class=\"node-value\"\n              [style.color]=\"getNodeValueColor(node.value)\">\n              {{ node.value }}\n            </span>\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\n          <button style=\"padding: 0px;    \n      width: 24px;\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\n            <mat-icon>\n              {{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" [matTooltip]=\"'Select ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-expansion-panel>\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">rebase_edit</mat-icon>\n        Configure and transform your data path\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <div class=\"tree-instructions\" *ngIf=\"treeClass.activePath.length === 0\">\n        <mat-icon class=\"info-icon\" color=\"primary\">info</mat-icon>\n        <span>Select a node from the tree above to begin mapping data</span>\n      </div>\n      <mat-divider></mat-divider>\n      <mat-toolbar style=\"    height: fit-content; background: inherit;\">\n        <div class=\"breadcrumb-container\">\n\n          <ng-container *ngFor=\"let path of treeClass.activePath; trackBy: trackByFn; last as isLast; index as i\">\n            <button *ngIf=\"!path.inEdit\" matTooltip=\"Click to edit\" (click)=\"setupPath(path)\" mat-button\n              [disabled]=\"!path.keyIsArrayIndex\" [color]=\"path.functions.length> 0 ? 'accent' : ''\"\n              class=\"breadcrumb-item\">\n              <mat-icon>{{ path.keyIsArrayIndex ? 'filter_none' : 'folder' }}</mat-icon>\n              <span>{{ path.key }}</span>\n            </button>\n\n\n            <button *ngIf=\"!!path.inEdit\" matTooltip=\"Currently editing\" (click)=\"removeFunction(path.key)\"\n              mat-raised-button color=\"primary\" class=\"breadcrumb-item\">\n              <mat-icon>check_circle</mat-icon>\n              <span>{{ path.key }}</span>\n            </button>\n            <mat-icon *ngIf=\"!isLast\" class=\"breadcrumb-separator\">chevron_right</mat-icon>\n          </ng-container>\n        </div>\n      </mat-toolbar>\n      <div *ngIf=\"!!hasANodeInEdit()\">\n\n        <mat-nav-list>\n\n          <ng-container *ngFor=\"let function of this.treeClass.pathInEdit?.functions;index as i\">\n            <mat-list-item \n               [activated]=\"!!function.inEdit\"\n            class=\"functions\" style=\"height: fit-content;\">\n              <span matListItemIcon class=\"function-number\" > \n                <strong> {{i+1}} </strong>\n                </span>\n              <a \n\n              (click)=\"editFunction(function.id)\"\n           \n              style=\"font-size: 14px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\"\n               matListItemTitle>  {{ (function.function |titlecase) ||\n                'Function configurations required'}}</a>\n              <button  mat-icon-button \n              (click)=\"removeFunction(function.id)\" matListItemMeta>\n\n                <mat-icon [color]=\"function.function && function.expression?'':'warn'\">{{!function.inEdit? 'close':'check_circle'}}</mat-icon>\n              </button>\n       \n          \n            </mat-list-item>\n   \n            <div class=\"function-edit-container\" *ngIf=\"function.inEdit\">\n              <mat-divider></mat-divider>\n              <mat-form-field style=\"  margin-bottom: 8px;\" appearance=\"outline\" *ngIf=\"this.treeClass.pathInEdit?.functions\">\n                <mat-label>Array function</mat-label>\n                <mat-select matNativeControl [value]=\"getFunctionInEdit()?.function\"\n                  (selectionChange)=\"functionChanged($event)\" placeholder=\"ChooseFunctionToRun\">\n                  <mat-option value=\"filter\">filter</mat-option>\n                  <mat-option value=\"find\">find</mat-option>\n                  <mat-option value=\"map\">map</mat-option>\n                </mat-select>\n                <mat-hint>\n                  Choose a function to run on the array\n                </mat-hint>\n              </mat-form-field>\n              <mat-form-field  appearance=\"outline\" *ngIf=\"this.treeClass.pathInEdit?.functions\">\n                <mat-label >Condition expression</mat-label>\n                <textarea matInput #textarea \n                [value]=\"getFunctionInEdit()?.expression\"\n                  (input)=\"onTextChange($event)\" (focus)=\"onFocus($event)\"\n                 \n                  placeholder=\"Enter a validation string for the function\"></textarea>\n                    <mat-hint>\n                    {{ showSuggestions ? 'Suggestions are enabled' : 'Enter a condition expression to transform the array' }}\n                    </mat-hint>\n              </mat-form-field>\n              <section *ngIf=\"showSuggestions\" \n              class=\"showSuggestionContainer\">\n                <!-- <mat-toolbar class=\"search-container\"  style=\"background: inherit;\">\n                \n           \n                  <input type=\"search\" \n                  placeholder=\"Search api\" \n                  class=\"search-field\"\n                  (change)=\"onSearchChange($event)\"> \n  \n                  <mat-icon>\n                    search\n                  </mat-icon>\n                </mat-toolbar> -->\n                <mat-divider></mat-divider>\n                <div  style=\"padding: 8px;\" class=\"\">\n                  <div class=\"suggestion-container\">\n                    <div class=\"suggestion-column\">\n                      <h5>Logical Operators</h5>\n                      <div class=\"button-container\">\n                        <button \n                        color=\"primary\" \n                        mat-flat-button *ngFor=\"let method of getMethods()\"\n                          (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\n                          {{ method.label | titlecase }}\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"suggestion-column\">\n                      <h5>Add Input as a Variable</h5>\n                      <div class=\"button-container\">\n                        <button *ngFor=\"let input of getAllInputs()\"\n                        mat-flat-button\n                          (click)=\"selectSuggestionInput(input.formControlName)\" class=\"suggestion-button\">\n                          {{ input.label | titlecase }}\n                        </button>\n                      </div>\n                    </div>\n                    <!-- <div class=\"suggestion-column\">\n                      <h5>Array path Object </h5>\n                      <div class=\"button-container\">\n                        <button *ngFor=\"let input of getValueVariables()\"\n                        color=\"accent\"\n                        mat-flat-button\n                          (click)=\"selectSuggestionInput(input)\" class=\"suggestion-button\">\n                          {{ input}}\n                        </button>\n                      </div>\n                    </div> -->\n                  </div>\n                  <div class=\"suggestion-container\">\n               \n                  </div>\n  \n                </div>\n              </section>\n           \n\n              <mat-toolbar style=\"background:none\">\n                <span class=\"spacer\"></span>\n\n                <button (click)=\"reset()\" mat-flat-button>\n                  reset\n                </button>\n                <button (click)=\"saveNodeInEdit()\" [disabled]=\"!function.expression && !function.function\" mat-flat-button\n                  color=\"primary\">\n                  save\n                </button>\n\n              </mat-toolbar>\n            </div>\n            <mat-divider></mat-divider>\n          </ng-container>\n\n        </mat-nav-list>\n        <ol>\n\n        </ol>\n        <button (click)=\"addNewFunction()\" mat-button>+ Add function </button>\n      </div>\n    </div>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset</mat-icon>\n        Mapped Data Value Based on the Active Path\n      </mat-panel-title>\n\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <mat-divider></mat-divider>\n\n      <div style=\"padding: 16px;background: black;\n      color: cadetblue; border-radius:8px;min-width:fit-content\">\n        <pre>{{getValue|json}}</pre>\n      </div>\n    </div>\n  </mat-expansion-panel>\n\n\n</mat-accordion>", styles: ["mat-tree{min-width:fit-content;background:azure}mat-tree-node{min-height:28px!important;height:32px!important}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;padding:8px 0}.breadcrumb-item{display:inline-flex;align-items:center;margin:0;transition:background-color .3s ease}.breadcrumb-separator{margin:0}.breadcrumb-separator .mat-icon{font-size:16px;width:16px;height:16px}.info-icon{width:38px}mat-expansion-panel-header{padding-left:16px;padding-right:16px}mat-expansion-panel{background:var(--mat-toolbar-container-background-color, var(--mat-app-surface))}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));border-radius:4px;margin-bottom:16px}.node-spacer{width:24px;padding:0}.node-checkbox{width:100%}.node-key{font-weight:500;color:#2c2c2c}.node-value{font-family:monospace;padding:2px 6px;background:#f8f9fa;border-radius:3px;font-size:.9em}.suggestion-container{display:flex;width:100%;gap:14px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-transform:capitalize;margin:2px;padding:8px;line-height:normal;text-align:left;font-size:.8em}h5{margin-bottom:8px;font-size:1em}.title-icon{margin-right:8px;vertical-align:middle}mat-form-field{width:100%;background:azure}.functions{color:var(--mat-full-pseudo-checkbox-selected-icon-color)}.function-number{font-size:smaller;display:flex;align-items:center;justify-content:center;margin-right:8px;margin-left:8px}.search-field{width:100%;padding:8px;border:1px solid var(--mat-divider-color, var(--mat-app-outline));border-radius:4px;margin-left:0}.search-container{padding-left:8px;padding-right:8px;height:48px;background:inherit;margin-top:0;height:fit-content}.showSuggestionContainer{background:azure}\n"] }]
-    }], () => [], { data: [{
-            type: Input
-        }], value: [{
-            type: Input
-        }], formInputs: [{
-            type: Input
-        }], pathChanged: [{
-            type: Output
-        }], textareaElementRef: [{
-            type: ViewChild,
-            args: ['textarea', { read: ElementRef, static: false }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataTreeComponent, { className: "DataTreeComponent", filePath: "lib/components/t-dynamic-data-edit/elements/api-value-access-rules/elements/data-tree/data-tree.component.ts", lineNumber: 25 }); })();
-
-const _c0 = () => [];
-function ApiValueAccessRulesComponent_section_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section")(1, "label", 2);
-    i0.ɵɵtext(2, "Map ");
-    i0.ɵɵelementStart(3, "strong");
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "app-data-tree", 3);
-    i0.ɵɵlistener("pathChanged", function ApiValueAccessRulesComponent_section_0_Template_app_data_tree_pathChanged_5_listener($event) { const controlName_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.pathChanged($event, controlName_r2)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const controlName_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("for", controlName_r2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(controlName_r2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("formInputs", ctx_r2.formInputs)("data", ctx_r2.postmanResponseBody)("value", ctx_r2.computedValue[controlName_r2] || "");
-} }
-function ApiValueAccessRulesComponent_app_data_tree_1_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "app-data-tree", 3);
-    i0.ɵɵlistener("pathChanged", function ApiValueAccessRulesComponent_app_data_tree_1_Template_app_data_tree_pathChanged_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.pathChanged($event)); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("formInputs", ctx_r2.formInputs)("data", ctx_r2.postmanResponseBody)("value", ctx_r2.computedValue);
-} }
-class ApiValueAccessRulesComponent {
-    static { this.nextId = 0; }
-    constructor(ngControl, _elementRef, httpClient) {
-        this.ngControl = ngControl;
-        this._elementRef = _elementRef;
-        this.httpClient = httpClient;
-        this.stateChanges = new Subject();
-        this.id = `app-api-value-access-rules-${ApiValueAccessRulesComponent.nextId++}`;
-        this.placeholder = '';
-        this.focused = false;
-        this.required = false;
-        this.disabled = false;
-        this.touched = false;
-        this.onTouched = () => { };
-        this.errors = [];
-        this.value = [];
-        this.formInputs = [];
-        this.valueChanged = new EventEmitter();
-        this.reload = new EventEmitter();
-        this.loading = false;
-        this.postManFolderItems = [];
-    }
-    get empty() {
-        return !this.value;
-    }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty;
-    }
-    get errorState() {
-        const hasError = !!this.ngControl?.control?.errors || (this.errors || []).length > 0 && this.touched;
-        return !this.value && !!this.required || hasError;
-    }
-    setDescribedByIds(ids) {
-        // Ensure the component view is initialized
-        if (this._elementRef && this._elementRef.nativeElement) {
-            const controlElement = this._elementRef.nativeElement.querySelector('.app-api-value-access-rules');
-            // Check if the controlElement exists before attempting to set its attribute
-            if (controlElement) {
-                controlElement.setAttribute('aria-describedby', ids.join(' '));
-            }
-        }
-    }
-    onContainerClick(event) {
-        this.markAsTouched();
-        this.stateChanges.next();
-    }
-    markAsTouched() {
-        console.log('markAsTouched');
-        if (!this.touched) {
-            this.onTouched();
-            this.touched = true;
-        }
-    }
-    set postmanCollectionConfig(postmanCollectionConfig) {
-        if (!_.isEqual(this._postManCollectionConfig, postmanCollectionConfig)) {
-            this._postManCollectionConfig = postmanCollectionConfig;
-            this.initializePostmanService();
-        }
-    }
-    get postmanCollectionConfig() {
-        return this._postManCollectionConfig;
-    }
-    get computedValue() {
-        const invalidType = this.value instanceof Array || typeof this.value === 'string';
-        if (this.multipleBind && invalidType && !this.value) {
-            return {};
-        }
-        return this.value;
-    }
-    pathChanged(path, control) {
-        if (!Array.isArray(path)) {
-            return;
-        }
-        if (!control) {
-            this.valueChanged.emit(path);
-            return;
-        }
-        if (this.value instanceof Array || typeof this.value === 'string') {
-            this.value = {};
-        }
-        const newValue = { ...this.value };
-        newValue[control] = path;
-        this.valueChanged.emit(newValue);
-    }
-    isValidConfig(config) {
-        return Boolean(config?.collectionUrl && config?.collectionKey);
-    }
-    initializePostmanService() {
-        8;
-        const isValidConfig = this.isValidConfig(this.postmanCollectionConfig);
-        if (!isValidConfig) {
-            this.error = new HttpErrorResponse({
-                error: 'Invalid Postman Collection Config',
-            });
-            return;
-        }
-        const { collectionUrl, collectionKey } = this.postmanCollectionConfig;
-        const requestOptions = {
-            params: {
-                apikey: collectionKey,
-                clearSystemHeaders: true
-            },
-            headers: {
-                'Content-Type': 'application/json',
-            }
-        };
-        this.loading = true;
-        this.httpClient.get(collectionUrl, requestOptions).pipe(take(1), tap((data) => {
-            // To ensure the data can be shown as a tree
-            this.postManFolderItems = flatApiList(data.collection.item);
-            this.error = undefined;
-            this.loading = false;
-        }), catchError((err) => {
-            this.loading = false;
-            this.error = err;
-            console.error(err);
-            return throwError(err);
-        })).subscribe();
-    }
-    get postmanResponseBody() {
-        const { response } = this.postManFolderItems.find((item) => item.id === this.mapToData) || {};
-        let responseBody = JSON.parse(response?.[0]?.body || '{}');
-        return responseBody;
-    }
-    static { this.ɵfac = function ApiValueAccessRulesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApiValueAccessRulesComponent)(i0.ɵɵdirectiveInject(i1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.HttpClient)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApiValueAccessRulesComponent, selectors: [["app-api-value-access-rules"]], hostVars: 1, hostBindings: function ApiValueAccessRulesComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵhostProperty("id", ctx.id);
-        } }, inputs: { multipleBind: "multipleBind", errors: "errors", value: "value", mapToData: "mapToData", formInputs: "formInputs", postmanCollectionConfig: "postmanCollectionConfig" }, outputs: { valueChanged: "valueChanged", reload: "reload" }, features: [i0.ɵɵProvidersFeature([{ provide: MatFormFieldControl, useExisting: ApiValueAccessRulesComponent }])], decls: 2, vars: 3, consts: [[4, "ngFor", "ngForOf"], [3, "formInputs", "data", "value", "pathChanged", 4, "ngIf"], [3, "for"], [3, "pathChanged", "formInputs", "data", "value"]], template: function ApiValueAccessRulesComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ApiValueAccessRulesComponent_section_0_Template, 6, 5, "section", 0)(1, ApiValueAccessRulesComponent_app_data_tree_1_Template, 1, 3, "app-data-tree", 1);
-        } if (rf & 2) {
-            i0.ɵɵproperty("ngForOf", ctx.multipleBind || i0.ɵɵpureFunction0(2, _c0));
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.multipleBind);
-        } }, dependencies: [CommonModule, i2.NgForOf, i2.NgIf, DataTreeComponent], styles: [".labelM[_ngcontent-%COMP%]{font-size:13px}"] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApiValueAccessRulesComponent, [{
-        type: Component,
-        args: [{ selector: 'app-api-value-access-rules', standalone: true, imports: [CommonModule, DataTreeComponent], providers: [{ provide: MatFormFieldControl, useExisting: ApiValueAccessRulesComponent }], template: "\r\n\r\n\r\n<section *ngFor=\"let controlName of multipleBind||[]\">\r\n    <label [for]=\"controlName\">Map <strong>{{controlName}}</strong></label>\r\n    <app-data-tree \r\n    [formInputs]=\"formInputs\"\r\n    (pathChanged)=\"pathChanged($event,controlName)\" \r\n    [data]=\"postmanResponseBody\"  [value]=\"computedValue[controlName]||''\" ></app-data-tree>\r\n</section>\r\n\r\n\r\n<app-data-tree \r\n*ngIf=\"!multipleBind\"\r\n(pathChanged)=\"pathChanged($event)\" \r\n    [formInputs]=\"formInputs\"\r\n[data]=\"postmanResponseBody\" [value]=\"computedValue\"></app-data-tree>\r\n\r\n", styles: [".labelM{font-size:13px}\n"] }]
-    }], () => [{ type: i1.NgControl, decorators: [{
-                type: Optional
-            }, {
-                type: Self
-            }] }, { type: i0.ElementRef }, { type: i1$1.HttpClient }], { id: [{
-            type: HostBinding
-        }], multipleBind: [{
-            type: Input
-        }], errors: [{
-            type: Input
-        }], value: [{
-            type: Input
-        }], mapToData: [{
-            type: Input
-        }], formInputs: [{
-            type: Input
-        }], valueChanged: [{
-            type: Output
-        }], reload: [{
-            type: Output
-        }], postmanCollectionConfig: [{
-            type: Input
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApiValueAccessRulesComponent, { className: "ApiValueAccessRulesComponent", filePath: "lib/components/t-dynamic-data-edit/elements/api-value-access-rules/api-value-access-rules.component.ts", lineNumber: 38 }); })();
-
-export { ApiValueAccessRulesComponent };
-//# sourceMappingURL=ngx-t-forms-api-value-access-rules.component-Zg1ddSDb.mjs.map