kwikid-forms 0.0.0-watch

package/fesm2015/kwikid-forms.js

@@ -0,0 +1,2970 @@
+import { copyArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i0 from '@angular/core';
+import { VERSION, Component, EventEmitter, Input, Output, Injectable, HostListener, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from 'kwikui';
+import { KwikUIButtonComponent, KwikUIProgressSegmentedComponent, KwikUIInputComponent, KwikUIModule } from 'kwikui';
+import _, { cloneDeep } from 'lodash';
+import { __decorate, __awaiter } from 'tslib';
+import { pairwise } from 'rxjs/operators';
+import jp from 'jsonpath';
+import { TuiDay } from '@taiga-ui/cdk';
+import * as i3 from '@taiga-ui/core';
+import { TuiLabelModule, TuiSvgModule, TuiRootModule, TuiAlertModule } from '@taiga-ui/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+class KwikIDFormsBuilderComponent {
+    constructor() {
+        this.buttonComponent = {
+            disabled: false,
+            id: "",
+            label: "Button",
+            showLoader: false,
+            styles: "",
+            class: "tui-space_right-3 tui-space_bottom-3",
+            type: "button",
+            appearance: "primary",
+            icon: "",
+            iconRight: "",
+            shape: null,
+            size: "m"
+        };
+        this.progressSegmentedComponent = {
+            colors: "tui(--tui-primary)",
+            max: "5",
+            size: "m",
+            value: "2"
+        };
+        this.inputComponent = {
+            case: "default",
+            disabled: false,
+            focus: false,
+            id: "id",
+            invalid: false,
+            label: "label",
+            placeholder: "placeholder",
+            type: "text",
+            validators: {
+                required: true
+            }
+        };
+        this.formGroup = new FormGroup({});
+        this.name = "Angular " + VERSION.major;
+        this.menu = [
+            {
+                title: "button",
+                key: "button",
+                component: KwikUIButtonComponent,
+                props: this.buttonComponent
+            },
+            {
+                title: "progress-segmented",
+                key: "progress_segmented",
+                component: KwikUIProgressSegmentedComponent,
+                props: this.progressSegmentedComponent
+            },
+            {
+                title: "input",
+                key: "input",
+                component: KwikUIInputComponent,
+                props: this.inputComponent
+            }
+        ];
+        this.table = [];
+    }
+    ngOnInit() {
+        for (let m of this.menu) {
+            m.id = this.revisedRandId();
+        }
+    }
+    revisedRandId() {
+        return Math.random()
+            .toString(36)
+            .replace(/[^a-z]+/g, "");
+    }
+    handleOnChange(event, id, key, idx) {
+        const _value = event.target.value;
+        this.formGroup.controls[id]["controls"][key].patchValue(_value);
+    }
+    toggleShow(id) {
+        console.log(id);
+    }
+    drop(event) {
+        // let item = JSON.parse(JSON.stringify(event));
+        if (event.previousContainer !== event.container) {
+            console.log("copying");
+            // Clone the item that was dropped.
+            let clone = cloneDeep(event.previousContainer.data[event.previousIndex]);
+            clone.id = clone.key + "__" + this.revisedRandId();
+            event.previousContainer.data[event.previousIndex] = clone;
+            let newFormGroup = new FormGroup({});
+            const props = clone.props;
+            Object.keys(props).forEach((key) => {
+                newFormGroup.addControl(key, new FormControl({ value: props[key], disabled: false }));
+            });
+            this.formGroup.addControl(clone.id, newFormGroup);
+            copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+        }
+        else {
+            console.log("moving");
+            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+        }
+        if (event.previousContainer.data) {
+            this.menu = this.menu.filter((f) => !f.temp);
+        }
+    }
+    exited(event) {
+        const currentIdx = event.container.data.findIndex((f) => f.id === event.item.data.id);
+        this.menu.splice(currentIdx + 1, 0, Object.assign(Object.assign({}, event.item.data), { temp: true }));
+    }
+    entered() {
+        this.menu = this.menu.filter((f) => !f.temp);
+    }
+    isNumber(val) {
+        return typeof val;
+    }
+    removeElement(idx, id) {
+        this.formGroup.removeControl(id);
+        this.table.splice(idx, 1);
+    }
+    getJSON() {
+        for (let t of this.table) {
+            t.props = this.formGroup.getRawValue()[t.id];
+        }
+        console.log(this.table);
+    }
+}
+/** @nocollapse */ KwikIDFormsBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", ngImport: i0, template: "<!-- <div>{{ name }}</div>\r\n<p>Start editing to see some magic happen :)</p>\r\n\r\n<button (click)=\"getJSON()\">Get JSON</button>\r\n\r\n<div class=\"drap-copy\">\r\n  <div>\r\n    <ul\r\n      class=\"menu\"\r\n      cdkDropList\r\n      #menuList=\"cdkDropList\"\r\n      [cdkDropListData]=\"menu\"\r\n      cdkDropListSortingDisabled\r\n      [cdkDropListConnectedTo]=\"[tableList]\"\r\n      (cdkDropListDropped)=\"drop($event)\"\r\n      (cdkDropListExited)=\"exited($event)\"\r\n      (cdkDropListEntered)=\"entered()\"\r\n    >\r\n      <li class=\"item\" *ngFor=\"let item of menu\" cdkDrag [cdkDragData]=\"item\">\r\n        <div class=\"item\" *cdkDragPlaceholder>\r\n          <a>{{ item.title }}</a>\r\n        </div>\r\n        <ng-container *ngComponentOutlet=\"item.component\"> </ng-container>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n\r\n  <div\r\n    class=\"table\"\r\n    cdkDropList\r\n    #tableList=\"cdkDropList\"\r\n    [cdkDropListData]=\"table\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n  >\r\n    <div class=\"content\">\r\n      <div>\r\n        <div class=\"item\" *ngFor=\"let item of table; let idx = index\" cdkDrag>\r\n          <ng-container *ngComponentOutlet=\"item.component\"> </ng-container>\r\n          <div class=\"item-header\">\r\n            <p>{{ idx }}--{{ item.title }}</p>\r\n            <button (click)=\"removeElement(idx, item.id)\">Remove</button>\r\n          </div>\r\n          <div class=\"desc\">\r\n            <div>id - {{ item.id }}</div>\r\n            <div>key - {{ item.key }}</div>\r\n          </div>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"formModal; context: item\"\r\n          ></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<ng-template #formModal let-component=\"component\" let-props=\"props\" let-id=\"id\">\r\n  <div class=\"field_editor\">\r\n    <div *ngFor=\"let i of props | keyvalue; let idx = index\">\r\n      <div class=\"formModalInputGroup\">\r\n        <label>{{ i.key }}</label>\r\n        <input\r\n          value=\"{{ i.value }}\"\r\n          (keyup)=\"handleOnChange($event, id, i.key, idx)\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template> -->\r\n", styles: [":host{--padding: 1rem;--border: 1px solid #e8e8e8}ul,li{list-style:none}*{margin:0;padding:0}p{font-family:Lato}.item{margin-bottom:12px;padding:var(--padding);border:var(--border);background:#fff;cursor:move;display:flex;flex-direction:column;grid-row-gap:.5rem;row-gap:.5rem}.item-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;grid-column-gap:.5rem;column-gap:.5rem}.table,.menu{padding:var(--padding)}.drap-copy{display:flex;border:var(--border)}.drap-copy>div{flex:1}.drap-copy>div:first-child{border-right:var(--border)}.desc{display:flex;justify-content:space-between;font-size:1em;color:#00000073}.field_editor{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-content:center;grid-row-gap:.5rem;row-gap:.5rem}.formModalInputGroup{display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;grid-column-gap:.5rem;column-gap:.5rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsBuilderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-forms-builder",
+                    templateUrl: "./builder.component.html",
+                    styleUrls: ["./builder.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; } });
+
+var EActionKey;
+(function (EActionKey) {
+    EActionKey["SET_VALUE"] = "SET_VALUE";
+    EActionKey["FIELD_MESSAGE_SHOW"] = "FIELD_MESSAGE_SHOW";
+    EActionKey["FIELD_MESSAGES_HIDE"] = "FIELD_MESSAGES_HIDE";
+    EActionKey["FIELD_ERROR_SHOW"] = "FIELD_ERROR_SHOW";
+    EActionKey["FIELD_ERROR_HIDE"] = "FIELD_ERROR_HIDE";
+    EActionKey["FIELD_SHOW"] = "FIELD_SHOW";
+    EActionKey["FIELD_HIDE"] = "FIELD_HIDE";
+    EActionKey["FIELD_ENABLE"] = "FIELD_ENABLE";
+    EActionKey["FIELD_DISABLE"] = "FIELD_DISABLE";
+    EActionKey["FIELD_RESET"] = "FIELD_RESET";
+    EActionKey["HANDLE_CONNECTED_ELEMENTS"] = "HANDLE_CONNECTED_ELEMENTS";
+    EActionKey["CUSTOM"] = "CUSTOM";
+})(EActionKey || (EActionKey = {}));
+
+var EApiStatusType;
+(function (EApiStatusType) {
+    EApiStatusType["DEFAULT"] = "default";
+    EApiStatusType["LOADING"] = "loading";
+    EApiStatusType["SUCCESS"] = "success";
+    EApiStatusType["FAILED"] = "failed";
+})(EApiStatusType || (EApiStatusType = {}));
+
+var EPatternKey;
+(function (EPatternKey) {
+    EPatternKey["CUSTOM"] = "CUSTOM";
+    EPatternKey["IS_PAN_NUMBER"] = "IS_PAN_NUMBER";
+    EPatternKey["IS_AADHAAR_NUMBER"] = "IS_AADHAAR_NUMBER";
+    EPatternKey["IS_EMPTY"] = "IS_EMPTY";
+    EPatternKey["IS_NOT_EMPTY"] = "IS_NOT_EMPTY";
+    EPatternKey["IS_EMAIL"] = "IS_EMAIL";
+    EPatternKey["IS_NUMBER"] = "IS_NUMBER";
+    EPatternKey["IS_INTEGER"] = "IS_INTEGER";
+    EPatternKey["IS_URL"] = "IS_URL";
+    EPatternKey["IS_ALPHA"] = "IS_ALPHA";
+    EPatternKey["IS_ALPHANUMERIC"] = "IS_ALPHANUMERIC";
+    EPatternKey["IS_UPPERCASE"] = "IS_UPPERCASE";
+    EPatternKey["IS_LOWERCASE"] = "IS_LOWERCASE";
+    EPatternKey["IS_IP_ADDRESS"] = "IS_IP_ADDRESS";
+    EPatternKey["IS_JSON"] = "IS_JSON";
+    EPatternKey["IS_HTML"] = "IS_HTML";
+    EPatternKey["IS_TRUE"] = "IS_TRUE";
+})(EPatternKey || (EPatternKey = {}));
+var EPattern;
+(function (EPattern) {
+    EPattern["IS_EMPTY"] = "^$";
+    EPattern["IS_PAN_NUMBER"] = "^[A-Z]{5}[[0-9]{4}[A-Z]{1}$";
+    EPattern["IS_AADHAAR_NUMBER"] = "^[0-9]{12}$";
+    EPattern["IS_NOT_EMPTY"] = "^.+$";
+    EPattern["IS_EMAIL"] = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$";
+    EPattern["IS_NUMBER"] = "^[+-]?d+(.d+)?$";
+    EPattern["IS_INTEGER"] = "^[+-]?d+$";
+    EPattern["IS_URL"] = "^(?:http(s)?://)?[w.-]+(?:.[w.-]+)+[w-._~:/?#[]@!$&'()*+,;=.]+$";
+    EPattern["IS_ALPHA"] = "^[a-zA-Z]+$";
+    EPattern["IS_ALPHANUMERIC"] = "^[a-zA-Z0-9]+$";
+    EPattern["IS_UPPERCASE"] = "^[A-Z]+$";
+    EPattern["IS_LOWERCASE"] = "^[a-z]+$";
+    EPattern["IS_IP_ADDRESS"] = "^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$";
+    EPattern["IS_JSON"] = "^\\s*({(.|\\s)}|[(.|\\s)])\\s*$";
+    EPattern["IS_HTML"] = "^<([a-z]+)([^<]+)(?:>(.)</\\1>|\\s+/>)$";
+    EPattern["IS_TRUE"] = "true";
+})(EPattern || (EPattern = {}));
+var EMessageType;
+(function (EMessageType) {
+    EMessageType["DEFAULT"] = "default";
+    EMessageType["ERROR"] = "error";
+    EMessageType["SUCCESS"] = "success";
+    EMessageType["WARNING"] = "warning";
+})(EMessageType || (EMessageType = {}));
+
+/**
+ * A function that logs the execution of a method.
+ * @param {any} target - The object the method belongs to.
+ * @param {string} propertyKey - The name of the method.
+ * @param {PropertyDescriptor} descriptor - The property descriptor for the method.
+ */
+function log(target, propertyKey, descriptor) {
+    // save a reference to the original method
+    const originalMethod = descriptor.value;
+    // update the descriptor value with a new function that will log and execute the original method
+    descriptor.value = function (...args) {
+        console.group("Logging Method"); // start a new logging group
+        console.time("Execution Time:"); // start a timer
+        let result; // declare result variable
+        try {
+            // execute the original method and save the result
+            result = originalMethod.apply(this, args);
+        }
+        catch (error) {
+            // if an error is thrown, log the error and throw it again
+            logSyncMethodError(target.constructor.name, propertyKey, args, error);
+            console.timeEnd(`Execution Time:`); // stop the timer
+            console.groupEnd(); // end the logging group
+            throw error;
+        }
+        // if the result is a Promise, handle it as an async method
+        if (result instanceof Promise) {
+            result = result
+                .then((resolvedValue) => {
+                // on success, log the resolved value and return it
+                logAsyncMethod(target.constructor.name, propertyKey, args, resolvedValue);
+                console.timeEnd(`Execution Time:`); // stop the timer
+                console.groupEnd(); // end the logging group
+                return resolvedValue;
+            })
+                .catch((error) => {
+                // on error, log the error and throw it again
+                logAsyncMethodError(target.constructor.name, propertyKey, args, error);
+                console.timeEnd(`Execution Time:`); // stop the timer
+                console.groupEnd(); // end the logging group
+                throw error;
+            });
+        }
+        else {
+            // if the result is not a Promise, handle it as a sync method
+            logSyncMethod(target.constructor.name, propertyKey, args, result);
+            console.timeEnd("Execution Time:");
+            console.groupEnd();
+        }
+        return result;
+    };
+}
+/**
+ * This function logs a sync method's information to the console.
+ * @param {string} className - The name of the class where the method belongs.
+ * @param {string} methodName - The name of the method being called.
+ * @param {any[]} args - An array of arguments passed to the method.
+ * @param {any} result - The result of the method.
+ */
+function logSyncMethod(className, methodName, args, result) {
+    console.log("%cType: Sync Method -", "color: #0d47a1; font-weight: bold;", "\nClass:", className, "\nMethod:", methodName, "\nArgs:", args, "\nReturn:", result);
+}
+/**
+ * Logs an error that occurred during the execution of a synchronous method.
+ * @param {string} className - The name of the class the method belongs to.
+ * @param {string} methodName - The name of the method.
+ * @param {any[]} args - The arguments passed to the method.
+ * @param {Error} error - The error that occurred.
+ */
+function logSyncMethodError(className, methodName, args, error) {
+    console.log("%cType: Sync Method -", "color: #0d47a1; font-weight: bold;", "\nClass:", className, "\nMethod:", methodName, "\nArgs:", args, "\nError:", error);
+}
+/**
+ * Logs the result of the execution of an asynchronous method.
+ * @param {string} className - The name of the class the method belongs to.
+ * @param {string} methodName - The name of the method.
+ * @param {any[]} args - The arguments passed to the method.
+ * @param {any} result - The result of the method execution.
+ */
+function logAsyncMethod(className, methodName, args, result) {
+    console.log("%cType: Async Method -", "color: #1565c0; font-weight: bold;", "\nClass:", className, "\nMethod:", methodName, "\nArgs:", args, "\nReturn:", result);
+}
+/**
+ * Logs an error that occurred during the execution of an asynchronous method.
+ * @param {string} className - The name of the class the method belongs to.
+ * @param {string} methodName - The name of the method.
+ * @param {any[]} args - The arguments passed to the method.
+ * @param {Error} error - The error that occurred.
+ */
+function logAsyncMethodError(className, methodName, args, error) {
+    console.log("%cType: Async Method -", "color: #1565c0; font-weight: bold;", "\nClass:", className, "\nMethod:", methodName, "\nArgs:", args, "\nError:", error);
+}
+
+const hasKey$2 = (object, key) => {
+    return object.hasOwnProperty(key);
+};
+const isEmpty$1 = (value) => {
+    if (value === "" || value === undefined || value === null) {
+        return true;
+    }
+    else if (value &&
+        Object.keys(value).length === 0 &&
+        Object.getPrototypeOf(value) === Object.prototype) {
+        return true;
+    }
+    else if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    else {
+        return false;
+    }
+};
+const isNotEmpty$1 = (value) => {
+    return !isEmpty$1(value);
+};
+const handleJPQueryResponse$1 = (value) => {
+    /**
+     * jp.query doesn't always return an array with one element
+     * so directly can't access with [0], need to check conditionally
+     */
+    if (Array.isArray(value)) {
+        if (value.length > 0) {
+            value = value[0];
+        }
+        else if (value.length === 0) {
+            value = "";
+        }
+    }
+    return value;
+};
+const jpQueryWrapper$1 = (obj, key) => {
+    return handleJPQueryResponse$1(jp.query(obj, key));
+};
+const isSingleForm = (formsList) => {
+    return formsList.length === 1;
+};
+
+var EFieldType;
+(function (EFieldType) {
+    EFieldType["TITLE"] = "title";
+    EFieldType["TEXT"] = "text";
+    EFieldType["CHECKBOX"] = "checkbox";
+    EFieldType["NUMBER"] = "number";
+    EFieldType["DATE"] = "date";
+    EFieldType["PHONE"] = "phone";
+    EFieldType["RADIO"] = "radio";
+    EFieldType["DROPDOWN_WITH_SEARCH"] = "dropdown-with-search";
+    EFieldType["API_CALL"] = "api-call";
+    EFieldType["OTP"] = "otp";
+    EFieldType["AADHAAR_NUMBER"] = "aadhaar-number";
+})(EFieldType || (EFieldType = {}));
+
+const hasKey$1 = (object, key) => {
+    return object.hasOwnProperty(key);
+};
+const hasPath = (object, path) => {
+    return _.has(object, path);
+};
+const isEmptyString = (value) => {
+    return value === "";
+};
+const isUndefined = (value) => {
+    return value === undefined;
+};
+const isNull = (value) => {
+    return value === null;
+};
+const isEmptyObject = (object) => {
+    return (object &&
+        Object.keys(object).length === 0 &&
+        Object.getPrototypeOf(object) === Object.prototype);
+};
+const isEmptyArray = (arr) => {
+    return arr.length === 0;
+};
+const isEmpty = (value) => {
+    if (isEmptyString(value) || isUndefined(value) || isNull(value)) {
+        return true;
+    }
+    else if (isEmptyObject(value)) {
+        return true;
+    }
+    else if (Array.isArray(value)) {
+        if (isEmptyArray(value)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    else {
+        return false;
+    }
+};
+const isNotEmpty = (value) => {
+    return !isEmpty(value);
+};
+const isEmptyBrowserStorageValue = (value) => {
+    return isNull(value) && isUndefined(value);
+};
+const isNotEmptyBrowserStorageValue = (value) => {
+    return !isEmptyBrowserStorageValue(value);
+};
+const handleJPQueryResponse = (value) => {
+    /**
+     * jp.query doesn't always return an array with one element
+     * so directly can't access with [0], need to check conditionally
+     */
+    if (Array.isArray(value)) {
+        if (value.length > 0) {
+            value = value[0];
+        }
+        else if (value.length === 0) {
+            value = "";
+        }
+    }
+    else {
+        value = "";
+    }
+    return value;
+};
+const jpQueryWrapper = (obj, key) => {
+    return handleJPQueryResponse(jp.query(obj, key));
+};
+const replaceString = (str, find, replace) => {
+    return str.replace(new RegExp(find, "g"), replace);
+};
+const setFieldKeyValue = (field, path, value) => {
+    return _.set(field, path, value);
+};
+const setValueToObject = (object, path, value) => {
+    return _.set(object, path, value);
+};
+const formatValue = (field, fieldValue) => {
+    const fieldType = field.type;
+    let value;
+    if (isNotEmpty(fieldValue)) {
+        switch (fieldType) {
+            case EFieldType.DATE:
+                const splitDate = fieldValue.split("-");
+                value = new TuiDay(Number(splitDate[2]), // Year
+                Number(splitDate[1]) - 1, // Month, Why '-1' => Because Taiga-UI Required It, So...
+                Number(splitDate[0]) // Day
+                );
+                break;
+            case EFieldType.RADIO:
+                const fieldRadio = field;
+                value = fieldRadio.options.find((item) => {
+                    return item.label === fieldValue;
+                });
+                break;
+            case EFieldType.CHECKBOX:
+                value = Boolean(fieldValue);
+                break;
+            default:
+                value = fieldValue;
+                break;
+        }
+    }
+    else {
+        value = fieldValue;
+    }
+    return value;
+};
+const setEmptyValue = (field) => {
+    const fieldType = field.type;
+    let value;
+    switch (fieldType) {
+        case EFieldType.CHECKBOX:
+            value = false;
+            break;
+        case EFieldType.NUMBER:
+            value = null;
+            break;
+        case EFieldType.DATE:
+            value = null;
+            break;
+        default:
+            value = "";
+            break;
+    }
+    return value;
+};
+
+class Condition {
+    constructor(condition, rulesMapping) {
+        this._condition = condition;
+        this._rulesMapping = rulesMapping;
+    }
+    parseKeys(condition, rulesEvaluationMapping) {
+        Object.keys(rulesEvaluationMapping).forEach((key) => {
+            condition = replaceString(condition, key, rulesEvaluationMapping[key]);
+        });
+        return condition;
+    }
+    parseOperators(condition) {
+        return condition.replace(/AND|OR|NOT|XOR|NAND|NOR|XNOR/g, (match) => {
+            switch (match) {
+                case "AND":
+                    return "&&";
+                case "OR":
+                    return "||";
+                case "NOT":
+                    return "!";
+                case "XOR":
+                    return "^";
+                case "NAND":
+                    return "!&";
+                case "NOR":
+                    return "!|";
+                case "XNOR":
+                    return "!^";
+                default:
+                    return match;
+            }
+        });
+    }
+    evaluate() {
+        this._condition = this.parseKeys(this._condition, this._rulesMapping);
+        this._condition = this.parseOperators(this._condition);
+        return eval(this._condition);
+    }
+}
+__decorate([
+    log
+], Condition.prototype, "evaluate", null);
+
+class Actions {
+    constructor(action, field, ruleMapping, allFormsData, formData, previousFormData, takeAction) {
+        this._action = action;
+        this._field = field;
+        this._ruleMapping = ruleMapping;
+        this._allFormsData = allFormsData;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._takeAction = takeAction;
+    }
+    execute() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const condition = new Condition(this._action.condition, this._ruleMapping);
+            const actionSuccess = condition.evaluate();
+            if (actionSuccess) {
+                return this._takeAction(this._action, this._field, this._allFormsData, this._formData, this._previousFormData);
+            }
+        });
+    }
+}
+__decorate([
+    log
+], Actions.prototype, "execute", null);
+
+var ERuleKey;
+(function (ERuleKey) {
+    ERuleKey["OBJECT_PATH_EXISTS"] = "OBJECT_PATH_EXISTS";
+    ERuleKey["VALUE_CHECK"] = "VALUE_CHECK";
+    ERuleKey["VALUE_CHANGE"] = "VALUE_CHANGE";
+})(ERuleKey || (ERuleKey = {}));
+
+var ESourceKey;
+(function (ESourceKey) {
+    ESourceKey["FIELD_CONFIG"] = "FIELD_CONFIG";
+    ESourceKey["FORM_DATA"] = "FORM_DATA";
+    ESourceKey["PREVIOUS_FORM_DATA"] = "PREVIOUS_FORM_DATA";
+    ESourceKey["ALL_FORMS_DATA"] = "ALL_FORMS_DATA";
+    ESourceKey["BROWSER_STORAGE"] = "BROWSER_STORAGE";
+    ESourceKey["PREDEFINED"] = "PREDEFINED";
+    ESourceKey["CUSTOM"] = "CUSTOM";
+})(ESourceKey || (ESourceKey = {}));
+var EBrowserStorageType;
+(function (EBrowserStorageType) {
+    EBrowserStorageType["LOCAL_STORAGE"] = "LOCAL_STORAGE";
+    EBrowserStorageType["SESSION_STORAGE"] = "SESSION_STORAGE";
+})(EBrowserStorageType || (EBrowserStorageType = {}));
+
+class Sources {
+    constructor(field, formData, previousFormData, allFormsData) {
+        this._field = field;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._allFormsData = allFormsData;
+    }
+    get formData() {
+        return this._formData;
+    }
+    set formData(value) {
+        this._formData = value;
+    }
+    get previousFormData() {
+        return this._previousFormData;
+    }
+    set previousFormData(value) {
+        this._previousFormData = value;
+    }
+    get allFormsData() {
+        return this._allFormsData;
+    }
+    set allFormsData(value) {
+        this._allFormsData = value;
+    }
+    get field() {
+        return this._field;
+    }
+    set field(value) {
+        this._field = value;
+    }
+    getValueFromFieldConfig(path) {
+        let value = "";
+        if (isNotEmpty(path)) {
+            value = jpQueryWrapper(this._field, path);
+        }
+        else {
+            value = setEmptyValue(this._field);
+        }
+        return value;
+    }
+    getValueFromFormData(path) {
+        let value;
+        value = jpQueryWrapper(this._formData, path);
+        return value;
+    }
+    getValueFromPreviousFormData(path) {
+        let value;
+        value = jpQueryWrapper(this._previousFormData, path);
+        return value;
+    }
+    getValueFromAllFormsData(path) {
+        let value;
+        value = jpQueryWrapper(this._allFormsData, path);
+        return value;
+    }
+    getValueFromBrowserStorage(type, key) {
+        let value = "";
+        switch (type) {
+            case EBrowserStorageType.LOCAL_STORAGE:
+                value = isNotEmptyBrowserStorageValue(localStorage.getItem(key))
+                    ? localStorage.getItem(key)
+                    : "";
+                break;
+            case EBrowserStorageType.SESSION_STORAGE:
+                value = isNotEmptyBrowserStorageValue(sessionStorage.getItem(key))
+                    ? sessionStorage.getItem(key)
+                    : "";
+                break;
+            default:
+                value = "";
+                break;
+        }
+        return value;
+    }
+    getValueFromSource(source) {
+        let value = "";
+        switch (source.key) {
+            case ESourceKey.FIELD_CONFIG:
+                value = this.getValueFromFieldConfig(source.props.path);
+                break;
+            case ESourceKey.FORM_DATA:
+                value = this.getValueFromFormData(source.props.path);
+                break;
+            case ESourceKey.ALL_FORMS_DATA:
+                value = this.getValueFromAllFormsData(source.props.path);
+                break;
+            case ESourceKey.PREVIOUS_FORM_DATA:
+                value = this.getValueFromPreviousFormData(source.props.path);
+                break;
+            case ESourceKey.BROWSER_STORAGE:
+                value = this.getValueFromBrowserStorage(source.props.browserStorage.type, source.props.browserStorage.key);
+                break;
+            case ESourceKey.PREDEFINED:
+                value = source.value;
+                break;
+            default:
+                value = "";
+                break;
+        }
+        return value;
+    }
+    setValueToFieldConfig(path, value) {
+        this._field = setValueToObject(this._field, path, value);
+    }
+    setValueToFormData(path, value) {
+        this._formData = setValueToObject(this._formData, path, value);
+    }
+    setValueToAllFormsData(path, value) {
+        this._allFormsData = setValueToObject(this._allFormsData, path, value);
+    }
+    setValueToPreviousFromData(path, value) {
+        this._previousFormData = setValueToObject(this._previousFormData, path, value);
+    }
+    setValueToBrowserStorage(type, key, value) {
+        switch (type) {
+            case EBrowserStorageType.LOCAL_STORAGE:
+                localStorage.setItem(key, value);
+                break;
+            case EBrowserStorageType.SESSION_STORAGE:
+                sessionStorage.setItem(key, value);
+                break;
+            default:
+                break;
+        }
+    }
+    setValueToSource(source, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (source.key) {
+                case ESourceKey.FIELD_CONFIG:
+                    this._field = this.setValueToFieldConfig(source.props.path, value);
+                    break;
+                case ESourceKey.FORM_DATA:
+                    this._formData = this.setValueToFormData(source.props.path, value);
+                    break;
+                case ESourceKey.ALL_FORMS_DATA:
+                    this._allFormsData = this.setValueToAllFormsData(source.props.path, value);
+                    break;
+                case ESourceKey.PREVIOUS_FORM_DATA:
+                    this._previousFormData = this.setValueToPreviousFromData(source.props.path, value);
+                    break;
+                case ESourceKey.BROWSER_STORAGE:
+                    yield this.setValueToBrowserStorage(source.props.browserStorage.type, source.props.browserStorage.key, value);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+__decorate([
+    log
+], Sources.prototype, "getValueFromSource", null);
+__decorate([
+    log
+], Sources.prototype, "setValueToSource", null);
+
+class Rules {
+    constructor(rules, field, formData, previousFormData, allFormsData) {
+        this._field = field;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._allFormsData = allFormsData;
+        this._rules = rules;
+    }
+    evaluate(rule) {
+        let ruleType = rule.key;
+        let ruleEvaluationStatus = false;
+        if (this._field.type === "radio") {
+            this._formData[this._field.key] = this._formData[this._field.key].label;
+        }
+        const source = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+        switch (ruleType) {
+            case ERuleKey.OBJECT_PATH_EXISTS:
+                const ruleObjectPathExists = rule;
+                const ruleObjectPathExistsObject = ruleObjectPathExists.props.object;
+                const ruleObjectPathExistsPath = ruleObjectPathExists.props.path;
+                switch (ruleObjectPathExistsObject) {
+                    case ESourceKey.ALL_FORMS_DATA:
+                        ruleEvaluationStatus = hasPath(this._allFormsData, ruleObjectPathExistsPath);
+                        break;
+                    case ESourceKey.FORM_DATA:
+                        ruleEvaluationStatus = hasPath(this._formData, ruleObjectPathExistsPath);
+                        break;
+                    case ESourceKey.PREVIOUS_FORM_DATA:
+                        ruleEvaluationStatus = hasPath(this._previousFormData, ruleObjectPathExistsPath);
+                        break;
+                    case ESourceKey.FIELD_CONFIG:
+                        ruleEvaluationStatus = hasPath(this._field, ruleObjectPathExistsPath);
+                        break;
+                    default:
+                        ruleEvaluationStatus = false;
+                        break;
+                }
+                break;
+            case ERuleKey.VALUE_CHECK:
+                const ruleValueCheck = rule;
+                const ruleValueCheckSource = ruleValueCheck.props.value.source;
+                const ruleValueCheckValue = source.getValueFromSource(ruleValueCheckSource);
+                if (ruleValueCheck.props.pattern.key === EPatternKey.CUSTOM) {
+                    var re = new RegExp(ruleValueCheck.props.pattern.pattern);
+                }
+                else {
+                    var re = new RegExp(EPattern[ruleValueCheck.props.pattern.key]);
+                }
+                ruleEvaluationStatus = re.test(ruleValueCheckValue);
+                break;
+            case ERuleKey.VALUE_CHANGE:
+                const ruleValueChange = rule;
+                const ruleValueChangeCurrentSource = ruleValueChange.props.value.current.source;
+                const ruleValueChangePreviousSource = ruleValueChange.props.value.previous.source;
+                const previousValue = source.getValueFromSource(ruleValueChangePreviousSource);
+                const currentValue = source.getValueFromSource(ruleValueChangeCurrentSource);
+                ruleEvaluationStatus = previousValue === currentValue;
+                break;
+            default:
+                break;
+        }
+        return ruleEvaluationStatus;
+    }
+    mapping() {
+        let rulesEvaluationMapping = {};
+        for (const rule of this._rules) {
+            const ruleEvaluationStatus = this.evaluate(rule);
+            rulesEvaluationMapping = Object.assign(Object.assign({}, rulesEvaluationMapping), { [rule.id]: ruleEvaluationStatus });
+        }
+        return rulesEvaluationMapping;
+    }
+}
+__decorate([
+    log
+], Rules.prototype, "evaluate", null);
+__decorate([
+    log
+], Rules.prototype, "mapping", null);
+
+class Defaults {
+    constructor(field, allFormsData, formData, previousFormData, takeAction) {
+        this._field = field;
+        this._allFormsData = allFormsData;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._takeAction = takeAction;
+    }
+    getDefaultValue() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let defaultValue;
+            const sources = this._field.default.value.sources;
+            let sourceIndex = 0;
+            for (let source of sources) {
+                const sources = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+                const value = sources.getValueFromSource(source);
+                // Set the Value of current source.
+                this._field = setValueToObject(this._field, `default.value.sources.[${sourceIndex}].value`, value);
+                const validation = source.validation;
+                const triggers = validation.triggers;
+                const rules = validation.rules;
+                const actions = validation.actions;
+                const rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                for (let action of actions) {
+                    const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                    if (conditionEvaluation) {
+                        const actions = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                        yield actions.execute();
+                    }
+                }
+                sourceIndex++;
+            }
+            defaultValue = this._field.default.value.value;
+            if (isEmpty$1(defaultValue)) {
+                defaultValue = setEmptyValue(this._field);
+            }
+            return defaultValue;
+        });
+    }
+}
+__decorate([
+    log
+], Defaults.prototype, "getDefaultValue", null);
+
+class Validations {
+    constructor(field, formData, previousFormData, allFormsData, takeAction) {
+        this._field = field;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._allFormsData = allFormsData;
+        this._takeAction = takeAction;
+    }
+    get formData() {
+        return this._formData;
+    }
+    set formData(value) {
+        this._formData = value;
+    }
+    get previousFormData() {
+        return this._previousFormData;
+    }
+    set previousFormData(value) {
+        this._previousFormData = value;
+    }
+    get allFormsData() {
+        return this._allFormsData;
+    }
+    set allFormsData(value) {
+        this._allFormsData = value;
+    }
+    get field() {
+        return this._field;
+    }
+    set field(value) {
+        this._field = value;
+    }
+    getFieldValidators(field) {
+        let validators = [];
+        if (hasKey$1(field, "validators") &&
+            hasKey$1(field.validators, "min") &&
+            isNotEmpty(field.validators.min)) {
+            validators.push(Validators.min(field.validators.min));
+        }
+        if (hasKey$1(field, "validators") &&
+            hasKey$1(field.validators, "max") &&
+            isNotEmpty(field.validators.max)) {
+            validators.push(Validators.max(field.validators.max));
+        }
+        if (hasKey$1(field, "required") ||
+            (hasKey$1(field, "validators") && hasKey$1(field.validators, "required"))) {
+            validators.push(Validators.required);
+        }
+        if (hasKey$1(field, "validators") &&
+            hasKey$1(field.validators, "minLength") &&
+            isNotEmpty(field.validators.minLength)) {
+            validators.push(Validators.minLength(field.validators.minLength));
+        }
+        if (hasKey$1(field, "validators") &&
+            hasKey$1(field.validators, "maxLength") &&
+            isNotEmpty(field.validators.maxLength)) {
+            validators.push(Validators.maxLength(field.validators.maxLength));
+        }
+        if (hasKey$1(field, "validators") &&
+            hasKey$1(field.validators, "pattern") &&
+            isNotEmpty(field.validators.pattern)) {
+            if (field.validators.pattern.key === EPatternKey.CUSTOM) {
+                validators.push(Validators.pattern(field.validators.pattern.pattern));
+            }
+            else {
+                validators.push(Validators.pattern(EPattern[field.validators.pattern.key]));
+            }
+        }
+        if (hasKey$1(field, "validators") &&
+            hasKey$1(field.validators, "nullValidator") &&
+            isNotEmpty(field.validators.nullValidator)) {
+            validators.push(Validators.nullValidator(field.validators.nullValidator));
+        }
+        return validators;
+    }
+    getFormValidationErrors(control) {
+        let errors = [];
+        for (const key in control.controls) {
+            const controlErrors = control.controls[key].errors;
+            if (controlErrors !== null && controlErrors !== undefined) {
+                Object.keys(controlErrors).forEach((keyError) => {
+                    errors.push({
+                        name: keyError,
+                        value: controlErrors[keyError]
+                    });
+                });
+            }
+        }
+        return errors;
+    }
+    findInvalidControlsRecursive(formToInvestigate) {
+        var controls = [];
+        let recursiveFunc = (form) => {
+            Object.keys(form.controls).forEach((field) => {
+                const control = form.get(field);
+                if (control.invalid) {
+                    controls.push({
+                        key: field,
+                        invalid: true
+                    });
+                }
+                else {
+                    controls.push({
+                        key: field,
+                        invalid: false
+                    });
+                }
+                if (control instanceof FormGroup) {
+                    recursiveFunc(control);
+                }
+                else if (control instanceof FormArray) {
+                    recursiveFunc(control);
+                }
+            });
+        };
+        recursiveFunc(formToInvestigate);
+        return controls;
+    }
+    validateField() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const validations = this._field.validation;
+            const triggers = validations.triggers;
+            const rules = validations.rules;
+            const actions = validations.actions;
+            const rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+            for (let action of actions) {
+                const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                if (conditionEvaluation) {
+                    const actions = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                    yield actions.execute();
+                }
+            }
+        });
+    }
+}
+__decorate([
+    log
+], Validations.prototype, "getFieldValidators", null);
+__decorate([
+    log
+], Validations.prototype, "getFormValidationErrors", null);
+__decorate([
+    log
+], Validations.prototype, "findInvalidControlsRecursive", null);
+__decorate([
+    log
+], Validations.prototype, "validateField", null);
+
+class KwikIDFormViewService {
+    constructor() { }
+    // 'init' stage of the form
+    createFormGroup(fields, formData, previousFormData, allFormsData, takeAction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let formGroup = new FormGroup({});
+            for (let field of fields) {
+                if (field.type !== "title") {
+                    const defaults = new Defaults(field, allFormsData, formData, previousFormData, takeAction);
+                    const value = yield defaults.getDefaultValue();
+                    const validators = new Validations(field, formData, previousFormData, allFormsData, takeAction).getFieldValidators(field);
+                    formGroup.addControl(field.key, new FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
+                }
+            }
+            return formGroup;
+        });
+    }
+}
+__decorate([
+    log
+], KwikIDFormViewService.prototype, "createFormGroup", null);
+
+class Apis {
+    constructor(field, formData, previousFormData, allFormsData, takeAction) {
+        this._field = field;
+        this._formData = formData;
+        this._previousFormData = previousFormData;
+        this._allFormsData = allFormsData;
+        this._takeAction = takeAction;
+        this._api = field.api;
+        this._request = field.api.request;
+        this._response = field.api.response;
+        this._status = field.api.status;
+    }
+    setRequestBodyParams() {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            let params = this._request.body.params;
+            let paramIndex = 0;
+            for (let param of params) {
+                let sources = param.sources;
+                let sourceIndex = 0;
+                for (let source of sources) {
+                    const sources = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+                    const value = sources.getValueFromSource(source);
+                    // Set the Value of current source.
+                    this._field = setValueToObject(this._field, `api.request.body.params[${paramIndex}].sources[${sourceIndex}].value`, value);
+                    const validation = source.validation;
+                    const triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
+                    const rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
+                    const actions = (_c = validation === null || validation === void 0 ? void 0 : validation.actions) !== null && _c !== void 0 ? _c : [];
+                    const rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                    for (let action of actions) {
+                        const conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                        if (conditionEvaluation) {
+                            const actions = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            yield actions.execute();
+                        }
+                    }
+                    sourceIndex++;
+                }
+                paramIndex++;
+            }
+            return this._field;
+        });
+    }
+    validateRequestBody() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const body = this._request.body;
+            const validation = body.validation;
+            const triggers = validation.triggers;
+            const rules = validation.rules;
+            const actions = validation.actions;
+            const rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+            for (let action of actions) {
+                const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                if (conditionSuccess) {
+                    const actions = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                    yield actions.execute();
+                }
+            }
+            return this._field;
+        });
+    }
+    validateApiCallResponse() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const validation = this._response.validation;
+            const triggers = validation.triggers;
+            const rules = validation.rules;
+            const actions = validation.actions;
+            const rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+            for (let action of actions) {
+                const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                if (conditionSuccess) {
+                    const actions = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                    yield actions.execute();
+                }
+            }
+            return this._field;
+        });
+    }
+    getPropsValues() {
+        return {
+            field: this._field,
+            formData: this._formData,
+            previousFormData: this._previousFormData,
+            allFormsData: this._allFormsData
+        };
+    }
+}
+__decorate([
+    log
+], Apis.prototype, "setRequestBodyParams", null);
+__decorate([
+    log
+], Apis.prototype, "validateRequestBody", null);
+__decorate([
+    log
+], Apis.prototype, "validateApiCallResponse", null);
+
+const findFieldFromKey = (fields, key) => {
+    const field = fields.find((field) => {
+        if (field.key === key) {
+            return field;
+        }
+    });
+    return field;
+};
+const findFieldIndexFromKey = (fields, key) => {
+    let fieldIndex;
+    fieldIndex = fields.findIndex((_) => {
+        return key === _.key;
+    });
+    return fieldIndex;
+};
+const getSearchTextOptionsFromRemoteFile = (field, childField, formGroup) => __awaiter(void 0, void 0, void 0, function* () {
+    const parentFieldValue = formGroup.controls[field.key].value;
+    // Determine the URL of the remote file to fetch
+    let fileUrl;
+    if (childField.regexToGetJsonRemoteUrlKey) {
+        const fileKey = parentFieldValue.match(childField.regexToGetJsonRemoteUrlKey)[0];
+        fileUrl = childField.jsonRemoteUrlMapping[fileKey];
+    }
+    else {
+        fileUrl = childField.fileUrl;
+    }
+    // Return early if there is no file URL
+    if (!fileUrl)
+        return;
+    // Fetch the remote file and parse its JSON data
+    const response = yield fetch(fileUrl);
+    const data = yield response.json();
+    // Return the data for the given parent field value
+    return data[parentFieldValue];
+});
+const getSearchTextOptionsFromFieldConfig = (field, childField, formGroup) => {
+    let options;
+    const fieldValue = formGroup.controls[field.key].value;
+    if (isNotEmpty(childField["json"])) {
+        options = childField["json"][fieldValue];
+    }
+    return options;
+};
+const formatSearchTextOptions = (options) => {
+    return options.map(({ title }) => title);
+};
+const formatDateToStandardFormat = (date) => {
+    let formattedDate;
+    let year = date.year;
+    let month = date.month;
+    let day = date.day;
+    formattedDate = `${day}-${month + 1}-${year}`;
+    return formattedDate;
+};
+function highlightFieldError(field, error) {
+    field.invalid = error;
+    field.focus = error;
+    // if (!error) {
+    //   field["messages"] = field["messages"].filter(function (fieldMessage: {
+    //     type: string;
+    //     message: string;
+    //   }) {
+    //     return fieldMessage.type === "error";
+    //   });
+    // }
+    return field;
+}
+const addMessage = (field, message) => {
+    const isDuplicateMessage = (messages, message) => {
+        return messages.some((fieldMessage) => {
+            return (fieldMessage.type === message.type &&
+                fieldMessage.message === message.message);
+        });
+    };
+    field["messages"] = [];
+    if (hasKey$1(field, "messages")) {
+        if (!isDuplicateMessage(field["messages"], message)) {
+            field["messages"].push({
+                type: message.type,
+                message: message.message
+            });
+        }
+    }
+    else {
+        field["messages"] = [{ type: message.type, message: message.message }];
+    }
+    return field;
+};
+const removeMessage = (field, message) => {
+    field["messages"] = field["messages"].filter(function (fieldMessage) {
+        return fieldMessage.type !== message.type;
+    });
+    return field;
+};
+function setFieldError(fields, errors, key, error) {
+    const fieldIndex = fields.findIndex((field) => {
+        return field.key === key;
+    });
+    const setErrorMessages = (field, errors) => {
+        const getErrorMessage = (fieldLabel, errorType) => {
+            let errorMessage = "";
+            switch (errorType) {
+                case "required":
+                    errorMessage = `${fieldLabel} is required!`;
+                    break;
+                case "pattern":
+                    errorMessage = `${fieldLabel} has wrong pattern!`;
+                    break;
+                case "email":
+                    errorMessage = `${fieldLabel} has wrong email format!`;
+                    break;
+                case "minlength":
+                    errorMessage = `${fieldLabel} has wrong length! Required minimum length: ${field.validators.minLength}`;
+                    break;
+                case "maxlength":
+                    errorMessage = `${fieldLabel} has wrong length! Required maximum length: ${field.validators.maxLength}`;
+                    break;
+                case "areEqual":
+                    errorMessage = `${fieldLabel} must be equal!`;
+                    break;
+                default:
+                    errorMessage = `${fieldLabel}: ${"error.error_name"}: ${"error.error_value"}`;
+                    break;
+            }
+            return errorMessage;
+        };
+        Object.keys(errors).forEach((error) => {
+            field = addMessage(field, {
+                type: "error",
+                message: getErrorMessage(field.label, error)
+            });
+        });
+        return field;
+    };
+    if (error) {
+        fields[fieldIndex] = setErrorMessages(fields[fieldIndex], errors);
+    }
+    else {
+        fields[fieldIndex]["messages"] = [];
+    }
+    fields[fieldIndex] = highlightFieldError(fields[fieldIndex], error);
+    return fields;
+}
+
+class KwikIDFormViewComponent {
+    constructor(formViewService) {
+        this.formViewService = formViewService;
+        this.componentThis = this;
+        this.apiCallResponse = {};
+        this.isMobileView = false;
+        this.onClickViewForms = new EventEmitter();
+        this.onClickSaveForm = new EventEmitter();
+        this.onClickApiCall = new EventEmitter();
+        this.getActiveFormData = new EventEmitter();
+        this.formFields = [];
+        this.previousFormData = {};
+        this.loading = true;
+        this.viewFormsButton = {
+            disabled: false,
+            showLoader: false
+        };
+        this.saveFormButton = {
+            disabled: false,
+            showLoader: false
+        };
+        this.formGroup = new FormGroup({});
+    }
+    ngOnInit() {
+        (() => __awaiter(this, void 0, void 0, function* () {
+            yield this.initFormConfig(this.formConfig);
+            this.loading = false;
+        }))();
+    }
+    ngAfterViewInit() { }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return hasKey$1(changes, key) && !changes[key].firstChange;
+        };
+        if (verifyChange("formData")) {
+            this.formData = Object.assign(Object.assign({}, this.formData), changes.formData.currentValue);
+        }
+        if (verifyChange("apiCallResponse")) {
+            this.apiCallResponse = changes.apiCallResponse.currentValue;
+            this.formData = Object.assign(Object.assign({}, this.formData), { [this.apiCallResponse.key]: this.apiCallResponse.response });
+            this.formGroup.patchValue({
+                [this.apiCallResponse.key]: this.apiCallResponse.response
+            }, { emitEvent: false });
+            let field = findFieldFromKey(this.formFields, this.apiCallResponse.key);
+            const apis = new Apis(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+            (() => __awaiter(this, void 0, void 0, function* () {
+                field = yield apis.validateApiCallResponse();
+            }))();
+        }
+        if (verifyChange("isMobileView")) {
+            this.isMobileView = changes.isMobileView.currentValue;
+        }
+        if (verifyChange("allFormsData")) {
+            this.allFormsData = changes.allFormsData.currentValue;
+        }
+        if (verifyChange("formsList")) {
+            this.formsList = changes.formsList.currentValue;
+        }
+        if (verifyChange("formConfig")) {
+            this.formConfig = changes.formConfig.currentValue;
+            (() => __awaiter(this, void 0, void 0, function* () {
+                yield this.initFormConfig(this.formConfig);
+            }))();
+        }
+    }
+    initFormConfig(formConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.setFormFieldsFromFormConfig(formConfig);
+            this.setFormDataFromAllFormsData();
+            this.formGroup = yield this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+            for (let field of this.formFields) {
+                if (field.type !== "title") {
+                    this.previousFormData = Object.assign(Object.assign({}, this.previousFormData), { [field.key]: this.formGroup.controls[field.key].value });
+                    this.formGroup.controls[field.key].valueChanges
+                        .pipe(pairwise())
+                        .subscribe(([previousValue, currentValue]) => {
+                        this.previousFormData = Object.assign(Object.assign({}, this.previousFormData), { [field.key]: previousValue });
+                        this.formData = Object.assign(Object.assign({}, this.formData), { [field.key]: currentValue });
+                    });
+                }
+            }
+            for (let field of this.formFields) {
+                if (field.type !== "title") {
+                    (() => __awaiter(this, void 0, void 0, function* () {
+                        field = yield this.handleConnectedElements({
+                            key: field.key,
+                            value: this.formGroup.controls[field.key].value
+                        }, "ON_INIT");
+                    }))();
+                }
+            }
+        });
+    }
+    setFormFieldsFromFormConfig(formConfig) {
+        if (hasKey$1(formConfig, "fields")) {
+            this.formFields = formConfig.fields;
+        }
+        else if (hasKey$1(formConfig, "multiForm") &&
+            hasKey$1(formConfig.multiForm, "fields")) {
+            this.formFields = formConfig.multiForm.fields;
+        }
+    }
+    setFormDataFromAllFormsData() {
+        if (hasKey$1(this.allFormsData, this.formConfig.key)) {
+            this.formData = this.allFormsData[this.formConfig.key];
+        }
+        else {
+            this.formData = {};
+        }
+    }
+    handleConnectedElementFieldActions(connectedFieldConfig, connectedField) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (hasKey$1(connectedFieldConfig, "rules")) {
+                const rulesMapping = new Rules(connectedFieldConfig.rules, connectedField, this.formData, this.previousFormData, this.allFormsData).mapping();
+                for (let action of connectedFieldConfig.actions) {
+                    const conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                    if (conditionSuccess) {
+                        const actions = new Actions(action, connectedField, rulesMapping, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
+                        yield actions.execute();
+                    }
+                }
+            }
+            return connectedField;
+        });
+    }
+    handleConnectedElementFields(currentField, connectedFieldConfig, eventType) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let connectedField = findFieldFromKey(this.formFields, connectedFieldConfig["key"]);
+            switch (eventType) {
+                case "INIT":
+                    if (hasKey$1(connectedField, "triggers") &&
+                        connectedField.triggers.includes("INIT")) {
+                        if (this.isFieldEnabled(connectedField.key)) {
+                            if (hasKey$1(connectedFieldConfig, "connectedParentFields")) {
+                                switch (connectedFieldConfig.type) {
+                                    case "dropdown-with-search":
+                                        connectedField = yield this.handleFieldTypeSearchText(currentField, connectedField);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            }
+                        }
+                        connectedField = yield this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
+                    }
+                    break;
+                case "VALUE_CHANGE":
+                    if (hasKey$1(connectedFieldConfig, "triggers") &&
+                        connectedFieldConfig.triggers.includes("VALUE_CHANGE")) {
+                        switch (connectedField.type) {
+                            case "dropdown-with-search":
+                                connectedField = yield this.handleFieldTypeSearchText(currentField, connectedField);
+                                break;
+                            default:
+                                break;
+                        }
+                        connectedField = yield this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
+                    }
+                    break;
+                case "NESTED_LINK":
+                    if (hasKey$1(connectedFieldConfig, "triggers") &&
+                        connectedFieldConfig.triggers.includes("NESTED_LINK")) {
+                        connectedField = yield this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
+                    }
+                default:
+                    if (hasKey$1(connectedFieldConfig, "triggers")) {
+                        connectedField = yield this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
+                    }
+                    break;
+            }
+            if (hasKey$1(connectedField, "connectedElements")) {
+                for (const connectedFieldConfig of connectedField.connectedElements
+                    .fields) {
+                    connectedField = this.handleConnectedElementFields(connectedField, connectedFieldConfig, "NESTED_LINK");
+                }
+            }
+            return currentField;
+        });
+    }
+    handleConnectedElements(e, eventType) {
+        let currentField = findFieldFromKey(this.formFields, e.key);
+        if (hasKey$1(currentField, "connectedElements")) {
+            let connectedFields = currentField.connectedElements.connectedFields;
+            for (let connectedFieldConfig of connectedFields) {
+                currentField = this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType);
+            }
+        }
+    }
+    // DOM Event Handlers
+    handleGetKeyValue(e) {
+        this.formGroup.patchValue({
+            [e.key]: e.value
+        }, { emitEvent: false });
+        // Currently set only for dropdown-with-search connected fields
+        let field = findFieldFromKey(this.formFields, e.key);
+        if (field.type !== "title" &&
+            field.validation.triggers.includes("ON_CHANGE")) {
+            const validations = new Validations(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+            (() => __awaiter(this, void 0, void 0, function* () {
+                yield validations.validateField();
+            }))();
+            this.handleConnectedElements({
+                key: field.key,
+                value: this.formGroup.controls[field.key].value
+            }, "ON_CHANGE");
+        }
+    }
+    handleOnClickResetFormFields(e, field) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (let f of field.reset.fields) {
+                for (let a of f.actions) {
+                    const resetField = findFieldFromKey(this.formFields, a.props.fieldKey);
+                    const actions = new Actions(a, resetField, {}, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
+                    yield actions.execute();
+                }
+            }
+        });
+    }
+    handleOnClickApiCall(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let field = findFieldFromKey(this.formFields, e.key);
+            if (field.type === "api-call") {
+                // set button status to loading
+                field["api"]["status"]["value"] = EApiStatusType.LOADING;
+                field["showLoader"] = true;
+                this.viewFormsButton["disabled"] = true;
+                this.viewFormsButton["showLoader"] = true;
+                this.saveFormButton["disabled"] = true;
+                this.saveFormButton["showLoader"] = true;
+                const apis = new Apis(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                field = yield apis.setRequestBodyParams();
+                field = yield apis.validateRequestBody();
+                if (field.api.request.body.validation.is_valid) {
+                    // Call API Here
+                    this.onClickApiCall.emit({
+                        key: e.key,
+                        request: {
+                            mode: "POST",
+                            body: field.api.request.body.value,
+                            headers: {}
+                        }
+                    });
+                }
+                else {
+                    // Request Body Validation Failed
+                    // Highlight Error in UI to User to Retry After Sometime.
+                    // Take Actions based on Validation
+                    setTimeout(() => {
+                        field["api"]["status"]["value"] = EApiStatusType.FAILED;
+                        field["showLoader"] = false;
+                    }, 500);
+                }
+                this.viewFormsButton["disabled"] = false;
+                this.viewFormsButton["showLoader"] = false;
+                this.saveFormButton["disabled"] = false;
+                this.saveFormButton["showLoader"] = false;
+            }
+        });
+    }
+    handleOnClickViewForms(e) {
+        this.onClickViewForms.emit({
+            clicked: true
+        });
+    }
+    handleOnClickSaveForm(e) {
+        let formData = this.formGroup.getRawValue();
+        for (let field of this.formFields) {
+            if (field.type !== "title" &&
+                field.validation.triggers.includes("ON_SAVE")) {
+                const validations = new Validations(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                (() => __awaiter(this, void 0, void 0, function* () {
+                    yield validations.validateField();
+                }))();
+            }
+        }
+        if (this.formGroup.invalid) {
+            const controls = new Validations(undefined, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
+            let firstFieldWithError = "";
+            for (let control of controls) {
+                if (control.invalid && isEmpty(firstFieldWithError)) {
+                    firstFieldWithError = control.key;
+                }
+                this.formFields = setFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
+            }
+            return;
+        }
+        // Need to have an API Validator as well here.
+        // if(apiCallSuccess()) { then only proceed further, else highlight the button to click to call api}
+        for (let field of this.formFields) {
+            switch (field.type) {
+                case "radio":
+                    if (hasKey$1(formData[field.key], "label")) {
+                        formData[field.key] = formData[field.key].label;
+                    }
+                    else {
+                        formData[field.key] = "";
+                    }
+                    break;
+                case "date":
+                    if (isNull(formData[field.key])) {
+                        formData[field.key] = "";
+                    }
+                    else {
+                        formData[field.key] = formatDateToStandardFormat(formData[field.key]);
+                    }
+                    break;
+                case "title":
+                    break;
+                default:
+                    if (isEmpty(formData[field.key])) {
+                        formData[field.key] = "";
+                    }
+                    break;
+            }
+        }
+        Object.keys(formData).map((key) => {
+            if (isEmpty(formData[key])) {
+                formData[key] = "";
+            }
+        });
+        this.onClickSaveForm.emit({ data: formData });
+    }
+    // Component Helpers
+    fieldHide(fieldKey) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        this.formFields[fieldIndex]["hidden"] = true;
+    }
+    fieldShow(fieldKey) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        this.formFields[fieldIndex]["hidden"] = false;
+        this.formGroup.updateValueAndValidity();
+    }
+    fieldDisable(fieldKey) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        this.formFields[fieldIndex]["disabled"] = true;
+        if (isNotEmpty(this.formGroup.controls)) {
+            this.formGroup.controls[field.key].disable({
+                emitEvent: false
+            });
+        }
+    }
+    fieldEnable(fieldKey) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        this.formFields[fieldIndex]["disabled"] = false;
+        if (isNotEmpty(this.formGroup.controls)) {
+            this.formGroup.controls[field.key].enable({
+                emitEvent: false
+            });
+        }
+    }
+    fieldReset(fieldKey) {
+        // Find the field and its index in the formFields array
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = findFieldIndexFromKey(this.formFields, fieldKey);
+        // Delete the field from the formData object
+        delete this.formData[fieldKey];
+        // Reset the value of the field in the formGroup
+        this.formGroup.controls[field.key].reset(setEmptyValue(field), {
+            emitEvent: false
+        });
+        // Reset the messages and errors for the field
+        field = removeMessage(field, {
+            type: EMessageType.WARNING,
+            message: ""
+        });
+        field = removeMessage(field, {
+            type: EMessageType.SUCCESS,
+            message: ""
+        });
+        this.fieldErrorHide(fieldKey, {
+            type: EMessageType.ERROR,
+            message: ""
+        });
+        // Reset the value of the field in the formFields array
+        switch (field.type) {
+            case "api-call":
+                const fieldApiCall = field;
+                fieldApiCall.api.status.value = EApiStatusType.DEFAULT;
+                this.formFields[fieldIndex] = fieldApiCall;
+                break;
+            default:
+                field.focus = false;
+                field.invalid = false;
+                this.formFields[fieldIndex] = field;
+                break;
+        }
+    }
+    fieldErrorShow(fieldKey, message) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = highlightFieldError(field, true);
+        field = addMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    fieldErrorHide(fieldKey, message) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = highlightFieldError(field, false);
+        field = removeMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    fieldMessageShow(fieldKey, message) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = addMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    fieldMessageHide(fieldKey, message) {
+        let field = findFieldFromKey(this.formFields, fieldKey);
+        let fieldIndex = this.formFields.findIndex((_) => {
+            return field.key === _.key;
+        });
+        field = removeMessage(field, message);
+        this.formFields[fieldIndex] = field;
+    }
+    setObjectValue(field, path, value) { }
+    patchFieldControlValue(key, value) {
+        this.formGroup.patchValue({
+            [key]: value
+        }, { emitEvent: false });
+    }
+    isFieldValid(fieldKey) {
+        return this.formGroup.controls[fieldKey].valid;
+    }
+    isFieldEnabled(fieldKey) {
+        return this.formGroup.controls[fieldKey].enabled;
+    }
+    getFormGroupRawValues() {
+        return this.formGroup.getRawValue();
+    }
+    handleFieldTypeSearchText(field, childField) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (hasKey$1(childField, "json")) {
+                childField.options = getSearchTextOptionsFromFieldConfig(field, childField, this.formGroup);
+            }
+            if (hasKey$1(childField, "fetchJsonFromRemote")) {
+                childField.options = yield getSearchTextOptionsFromRemoteFile(field, childField, this.formGroup);
+            }
+            return childField;
+        });
+    }
+    takeAction(action, field, allFormsData, formData, previousFormData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (action.key) {
+                case EActionKey.FIELD_HIDE:
+                    this.fieldHide(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_SHOW:
+                    this.fieldShow(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_DISABLE:
+                    this.fieldDisable(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_ENABLE:
+                    this.fieldEnable(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_RESET:
+                    this.fieldReset(action.props.fieldKey);
+                    break;
+                case EActionKey.FIELD_ERROR_SHOW:
+                    this.fieldErrorShow(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.FIELD_ERROR_HIDE:
+                    this.fieldErrorHide(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.FIELD_MESSAGE_SHOW:
+                    this.fieldMessageShow(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.FIELD_MESSAGES_HIDE:
+                    this.fieldMessageHide(action.props.fieldKey, action.props.message);
+                    break;
+                case EActionKey.SET_VALUE:
+                    const sources = new Sources(field, this.formData, this.previousFormData, this.allFormsData);
+                    const sourceValue = yield sources.getValueFromSource(action.props.value.source);
+                    sources.setValueToSource(action.props.value.destination, sourceValue);
+                    field = sources.field;
+                    this.formData = sources.formData;
+                    this.allFormsData = sources.allFormsData;
+                    this.previousFormData = sources.previousFormData;
+                    break;
+                case EActionKey.HANDLE_CONNECTED_ELEMENTS:
+                    this.handleConnectedElements({ key: field.key }, "ACTION");
+                    break;
+                case EActionKey.CUSTOM:
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+/** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewComponent, deps: [{ token: KwikIDFormViewService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: { formConfig: "formConfig", formData: "formData", apiCallResponse: "apiCallResponse", isMobileView: "isMobileView", allFormsData: "allFormsData", formsList: "formsList" }, outputs: { onClickViewForms: "onClickViewForms", onClickSaveForm: "onClickSaveForm", onClickApiCall: "onClickApiCall", getActiveFormData: "getActiveFormData" }, providers: [KwikIDFormViewService], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"kwikid-form-container\"\r\n  *ngIf=\"!this.loading\"\r\n>\r\n  <div id=\"uf-form-fields-header-container\">\r\n    <div id=\"uf-form-fields-title\">\r\n      {{ this.formConfig.title }}\r\n    </div>\r\n    <div id=\"uf-form-fields-steps\">\r\n      Step {{ this.formConfig.sequenceNo }} of {{ this.formsList.length }}\r\n    </div>\r\n  </div>\r\n  <form\r\n    class=\"kwikid-form show\"\r\n    [formGroup]=\"this.formGroup\"\r\n  >\r\n    <ng-container *ngFor=\"let field of this.formFields; let i = index\">\r\n      <ng-container [ngSwitch]=\"field.type\">\r\n        <!-- Form Title -->\r\n        <ng-container *ngSwitchCase=\"'title'\">\r\n          <div class=\"title\">\r\n            <div>\r\n              {{ field.label }}\r\n            </div>\r\n            <kwikui-button\r\n              *ngIf=\"field?.reset\"\r\n              appearance=\"whiteblock\"\r\n              size=\"s\"\r\n              label=\"Reset\"\r\n              (onClick)=\"this.handleOnClickResetFormFields($event, field)\"\r\n            ></kwikui-button>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Text -->\r\n        <ng-container *ngSwitchCase=\"'text'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-input\r\n              [case]=\"field?.properties?.case\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [type]=\"'text'\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Checkbox -->\r\n        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-checkbox-block\r\n              [contentAlign]=\"field?.properties?.contentAlign ?? 'left'\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.properties?.placeholder\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [size]=\"field?.properties?.size ?? 'l'\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-checkbox-block\r\n            ><kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Number -->\r\n        <ng-container *ngSwitchCase=\"'number'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-input-number\r\n              [decimal]=\"field?.properties?.decimal\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [max]=\"field?.properties?.max\"\r\n              [min]=\"field?.properties?.min\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [postfix]=\"field?.properties?.postfix ?? ''\"\r\n              [precision]=\"field?.properties?.precision\"\r\n              [prefix]=\"field?.properties?.prefix ?? ''\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-number\r\n            ><kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Date -->\r\n        <ng-container *ngSwitchCase=\"'date'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-input-date\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [max]=\"field?.properties?.max\"\r\n              [min]=\"field?.properties?.min\"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-date>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Phone -->\r\n        <ng-container *ngSwitchCase=\"'phone'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-input-phone\r\n              [countryCode]=\"field?.properties?.countryCode\"\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [phoneMaskAfterCountryCode]=\"\r\n                field?.properties?.phoneMaskAfterCountryCode\r\n              \"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-phone>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Input Radio -->\r\n        <ng-container *ngSwitchCase=\"'radio'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <label\r\n              [tuiLabel]=\"labelTemplate\"\r\n              style=\"min-height: auto\"\r\n            >\r\n              <kwikui-radio-list\r\n                [disabled]=\"field?.disabled\"\r\n                [focus]=\"field?.focus\"\r\n                [formControl]=\"formGroup.controls[field.key]\"\r\n                [formControlName]=\"field.key\"\r\n                [id]=\"field.key\"\r\n                [invalid]=\"field?.invalid\"\r\n                [items]=\"field?.options\"\r\n                [label]=\"field?.label\"\r\n                [orientation]=\"field?.properties?.orientation\"\r\n                [placeholder]=\"field?.placeholder\"\r\n                [properties]=\"field?.properties\"\r\n                [size]=\"field?.properties?.size\"\r\n                [validators]=\"field?.validators\"\r\n                (getKeyValue)=\"handleGetKeyValue($event)\"\r\n              ></kwikui-radio-list>\r\n            </label>\r\n            <ng-template #labelTemplate>\r\n              <p\r\n                class=\"tui-space_bottom-2\"\r\n                [hidden]=\"field?.hidden\"\r\n              >\r\n                <b>\r\n                  {{ field.label }}\r\n                  <span *ngIf=\"field.validators?.required\"></span>\r\n                </b>\r\n              </p>\r\n            </ng-template>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Dropdown -->\r\n        <ng-container *ngSwitchCase=\"'dropdown-with-search'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-select-combobox\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field.label\"\r\n              [options]=\"field.options\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-select-combobox>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- API Call -->\r\n        <ng-container *ngSwitchCase=\"'api-call'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-button-api-call\r\n              [apiStatus]=\"field?.api?.status?.value\"\r\n              [class]=\"field?.class\"\r\n              [disabled]=\"field?.disabled\"\r\n              [id]=\"field.key\"\r\n              [label]=\"field?.api?.status?.labels[field?.api?.status?.value]\"\r\n              [showLoader]=\"field?.disabled === 'loading'\"\r\n              shape=\"null\"\r\n              size=\"m\"\r\n              styles=\"width: fit-content\"\r\n              (onClick)=\"this.handleOnClickApiCall($event)\"\r\n            ></kwikui-button-api-call>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Mobile OTP -->\r\n        <ng-container *ngSwitchCase=\"'otp'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-input-otp\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [mask]=\"field?.properties?.mask\"\r\n              [placeholder]=\"field?.properties?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-otp>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Aadhaar Number -->\r\n        <ng-container *ngSwitchCase=\"'aadhaar-number'\">\r\n          <div [hidden]=\"field?.hidden\">\r\n            <kwikui-input-aadhaar\r\n              [disabled]=\"field?.disabled\"\r\n              [focus]=\"field?.focus\"\r\n              [formControl]=\"formGroup.controls[field.key]\"\r\n              [formControlName]=\"field.key\"\r\n              [id]=\"field.key\"\r\n              [invalid]=\"field?.invalid\"\r\n              [label]=\"field?.label\"\r\n              [placeholder]=\"field?.placeholder\"\r\n              [properties]=\"field?.properties\"\r\n              [validators]=\"field?.validators\"\r\n              (getKeyValue)=\"handleGetKeyValue($event)\"\r\n            ></kwikui-input-aadhaar>\r\n            <kwikui-messages\r\n              [messages]=\"field.messages\"\r\n              [id]=\"field.key\"\r\n            ></kwikui-messages>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </form>\r\n  <div class=\"kwikid-form-buttons\">\r\n    <kwikui-button\r\n      *ngIf=\"this.isMobileView\"\r\n      [disabled]=\"viewFormsButton.disabled\"\r\n      id=\"\"\r\n      label=\"View Forms\"\r\n      [showLoader]=\"viewFormsButton.showLoader\"\r\n      styles=\"\"\r\n      class=\"\"\r\n      type=\"button\"\r\n      appearance=\"secondary\"\r\n      icon=\"\"\r\n      iconRight=\"\"\r\n      shape=\"null\"\r\n      size=\"m\"\r\n      styles=\"width: 100%\"\r\n      (onClick)=\"this.handleOnClickViewForms($event)\"\r\n    ></kwikui-button>\r\n    <kwikui-button\r\n      [disabled]=\"saveFormButton.disabled\"\r\n      id=\"\"\r\n      label=\"Save\"\r\n      [showLoader]=\"saveFormButton.showLoader\"\r\n      styles=\"\"\r\n      class=\"\"\r\n      type=\"button\"\r\n      appearance=\"primary\"\r\n      icon=\"\"\r\n      iconRight=\"\"\r\n      shape=\"null\"\r\n      size=\"m\"\r\n      styles=\"width: 100%\"\r\n      (onClick)=\"this.handleOnClickSaveForm($event)\"\r\n    ></kwikui-button>\r\n  </div>\r\n</div>\r\n<div\r\n  class=\"kwikid-form-container-loading\"\r\n  *ngIf=\"this.loading\"\r\n>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n  <div\r\n    class=\"large-wrapper\"\r\n    [class.tui-skeleton]=\"this.loading\"\r\n    [class.tui-skeleton_rounded]=\"this.loading\"\r\n  ></div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.kwikid-form-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}.kwikid-form.show{width:100%;height:100%;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch;grid-row-gap:1rem;row-gap:1rem}.kwikid-form-buttons{width:100%;bottom:0px;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-column-gap:10px;column-gap:10px}.kwikid-form-buttons *{flex-grow:1}#uf-form-fields-header-container{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:flex-start;grid-row-gap:.5rem;row-gap:.5rem;padding:1rem}#uf-form-fields-title{color:#000;font-size:1.75em;font-weight:bold}#uf-form-fields-steps{color:var(--color-on-secondary-container);font-size:1em}.title{border-left:.25rem solid var(--tui-primary);padding:.75rem;font-size:1.4em;font-weight:bold;background-color:var(--tui-secondary);display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-gap:.5rem;gap:.5rem}.title:not(:first-child){margin-top:.5rem}.large-wrapper{width:100%;height:60px}.large-wrapper:first-child{margin-bottom:auto}.large-wrapper:last-child{margin-top:auto}.kwikid-form-container-loading{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;grid-row-gap:1rem;row-gap:1rem;padding:1rem}\n"], components: [{ type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputNumberComponent, selector: "kwikui-input-number", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "prefix", "postfix", "precision", "decimal", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "countryCode", "phoneMaskAfterCountryCode", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "items", "orientation", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }] });
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "ngOnInit", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "ngAfterViewInit", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "ngOnChanges", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "initFormConfig", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "setFormFieldsFromFormConfig", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "setFormDataFromAllFormsData", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleConnectedElementFieldActions", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleConnectedElementFields", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleConnectedElements", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleGetKeyValue", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleOnClickResetFormFields", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleOnClickApiCall", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleOnClickViewForms", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleOnClickSaveForm", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldHide", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldShow", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldDisable", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldEnable", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldReset", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldErrorShow", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldErrorHide", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldMessageShow", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "fieldMessageHide", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "setObjectValue", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "patchFieldControlValue", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "isFieldValid", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "isFieldEnabled", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "getFormGroupRawValues", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "handleFieldTypeSearchText", null);
+__decorate([
+    log
+], KwikIDFormViewComponent.prototype, "takeAction", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-form-view",
+                    templateUrl: "./form-view.component.html",
+                    styleUrls: ["./form-view.component.scss"],
+                    providers: [KwikIDFormViewService]
+                }]
+        }], ctorParameters: function () { return [{ type: KwikIDFormViewService }]; }, propDecorators: { formConfig: [{
+                type: Input
+            }], formData: [{
+                type: Input
+            }], apiCallResponse: [{
+                type: Input
+            }], isMobileView: [{
+                type: Input
+            }], allFormsData: [{
+                type: Input
+            }], formsList: [{
+                type: Input
+            }], onClickViewForms: [{
+                type: Output
+            }], onClickSaveForm: [{
+                type: Output
+            }], onClickApiCall: [{
+                type: Output
+            }], getActiveFormData: [{
+                type: Output
+            }], ngOnInit: [], ngAfterViewInit: [], ngOnChanges: [], initFormConfig: [], setFormFieldsFromFormConfig: [], setFormDataFromAllFormsData: [], handleConnectedElementFieldActions: [], handleConnectedElementFields: [], handleConnectedElements: [], handleGetKeyValue: [], handleOnClickResetFormFields: [], handleOnClickApiCall: [], handleOnClickViewForms: [], handleOnClickSaveForm: [], fieldHide: [], fieldShow: [], fieldDisable: [], fieldEnable: [], fieldReset: [], fieldErrorShow: [], fieldErrorHide: [], fieldMessageShow: [], fieldMessageHide: [], setObjectValue: [], patchFieldControlValue: [], isFieldValid: [], isFieldEnabled: [], getFormGroupRawValues: [], handleFieldTypeSearchText: [], takeAction: [] } });
+
+const hasKey = (object, key) => {
+    return object.hasOwnProperty(key);
+};
+
+class KwikIDFormsListComponent {
+    constructor() {
+        this.formsList = [];
+        this.formsListCompleted = [];
+        this.isMobileView = false;
+        this.onClickSetActiveForm = new EventEmitter();
+        this.onClickHideFormsList = new EventEmitter();
+        this.onClickSubmitForms = new EventEmitter();
+        this.selectedForm = "";
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return hasKey(changes, key) && !changes[key].firstChange;
+        };
+        if (verifyChange("formsList")) {
+            this.formsList = changes.formsList.currentValue;
+        }
+        if (verifyChange("isMobileView")) {
+            this.isMobileView = changes.isMobileView.currentValue;
+        }
+    }
+    handleOnClickSetActiveForm(selectedForm) {
+        if (this.selectedForm !== selectedForm) {
+            this.selectedForm = selectedForm;
+            this.onClickSetActiveForm.emit(selectedForm);
+        }
+    }
+    handleOnSubmitForms(e) {
+        this.onClickSubmitForms.emit(e);
+    }
+}
+/** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: { formsList: "formsList", formsListCompleted: "formsListCompleted", isMobileView: "isMobileView" }, outputs: { onClickSetActiveForm: "onClickSetActiveForm", onClickHideFormsList: "onClickHideFormsList", onClickSubmitForms: "onClickSubmitForms" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"sidebar-container\">\r\n  <div id=\"sidebar\">\r\n    <div id=\"uf-progress\">\r\n      <div id=\"uf-progress-steps\">\r\n        {{ this.formsListCompleted.length }} / {{ this.formsList.length }} Steps\r\n        Completed\r\n      </div>\r\n      <kwikui-progress-segmented\r\n        [max]=\"this.formsList.length\"\r\n        size=\"m\"\r\n        [value]=\"this.formsListCompleted.length\"\r\n      ></kwikui-progress-segmented>\r\n    </div>\r\n    <div id=\"uf-sections-container\">\r\n      <div\r\n        *ngFor=\"let form of formsList; let i = index\"\r\n        [class]=\"'uf-section-item'\"\r\n        [class.completed]=\"form.status === 'completed' && !form.disabled\"\r\n        [class.edit]=\"form.status !== 'completed' && !form.disabled\"\r\n        [class.locked]=\"form.status !== 'completed' && form.disabled\"\r\n        (click)=\"\r\n          form.status !== 'completed' && form.disabled\r\n            ? undefined\r\n            : handleOnClickSetActiveForm(form.key)\r\n        \"\r\n      >\r\n        <div class=\"uf-form-section-card-title\">\r\n          {{ form.title }}\r\n        </div>\r\n        <div class=\"uf-form-section-card-action\">\r\n          <div\r\n            *ngIf=\"form.status === 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img completed\"\r\n          >\r\n            <tui-svg src=\"tuiIconCheckLarge\"></tui-svg>\r\n            <!-- <img class=\"completed\" src=\"assets/done1.png\" /> -->\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && !form.disabled\"\r\n            class=\"uf-form-section-card-action-img edit\"\r\n          >\r\n            <tui-svg src=\"tuiIconEdit\"></tui-svg>\r\n            <!-- <img class=\"active\" src=\"assets/edit.png\" /> -->\r\n          </div>\r\n          <div\r\n            *ngIf=\"form.status !== 'completed' && form.disabled\"\r\n            class=\"uf-form-section-card-action-img locked\"\r\n          >\r\n            <tui-svg src=\"tuiIconLock\"></tui-svg>\r\n            <!-- <img class=\"disabled\" src=\"assets/lock.png\" /> -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div id=\"submit-sidebar-btn-container\">\r\n      <kwikui-button\r\n        [disabled]=\"false\"\r\n        id=\"\"\r\n        label=\"Submit\"\r\n        [showLoader]=\"false\"\r\n        styles=\"\"\r\n        class=\"\"\r\n        type=\"button\"\r\n        appearance=\"primary\"\r\n        icon=\"\"\r\n        iconRight=\"\"\r\n        shape=\"null\"\r\n        size=\"m\"\r\n        styles=\"width: 100%\"\r\n        (onClick)=\"handleOnSubmitForms($event)\"\r\n      ></kwikui-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}#sidebar-container{width:100%;height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center}#sidebar{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:stretch}.uf-section-item{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-content:center;padding:1rem;grid-gap:1rem;gap:1rem;cursor:pointer;box-shadow:0 .1rem .5rem -.25rem gray;border-radius:.5rem;background-color:var(--tui-base-02)}.uf-section-item:hover{box-shadow:0 .2rem .75rem -.5rem #656565}#submit-sidebar-btn-container{width:100%;bottom:0px;z-index:1;padding:1rem;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;grid-gap:1rem;gap:1rem}#submit-sidebar-btn-container *{flex-grow:1}#uf-sections-container{display:flex;flex-direction:column;height:100%;grid-row-gap:20px;row-gap:20px;padding:1rem;overflow-y:auto}.uf-form-section-card{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:10px;column-gap:10px;border:none;border-radius:8px;background-color:#e9e9e9;height:-moz-fit-content;height:fit-content;min-height:60px;padding:10px 15px;width:100%;max-width:350px;margin:0 auto}.uf-section-item.locked{-webkit-user-select:none;user-select:none;cursor:not-allowed}.uf-form-section-card .uf-form-section-card-title{font-size:1.2em;text-align:left;line-height:1.25em}.uf-form-section-card .uf-form-section-card-action{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}.uf-form-section-card .uf-form-section-card-action .uf-form-section-card-action-img{width:30px;height:30px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;border-radius:100%;color:#fff;font-weight:bold}.uf-form-section-card-action-img.completed{background-color:#228b22;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.edit{background-color:#dc143c;padding:.25rem;border-radius:50%;color:#fff}.uf-form-section-card-action-img.locked{background-color:gray;padding:.25rem;border-radius:50%;color:#fff}#uf-progress{display:flex;padding:1rem;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;grid-gap:.5rem;gap:.5rem}#uf-progress-steps{font-size:1em;text-align:right;color:#3d3d3d}.uf-form-section-card-title{font-size:1em;font-weight:bold;color:#121212}@media screen and (max-width: 600px){#sidebar-container{max-width:unset}}\n"], components: [{ type: i2.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-forms-list",
+                    templateUrl: "./forms-list.component.html",
+                    styleUrls: ["./forms-list.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { formsList: [{
+                type: Input
+            }], formsListCompleted: [{
+                type: Input
+            }], isMobileView: [{
+                type: Input
+            }], onClickSetActiveForm: [{
+                type: Output
+            }], onClickHideFormsList: [{
+                type: Output
+            }], onClickSubmitForms: [{
+                type: Output
+            }] } });
+
+class Converter {
+    constructor() {
+        this.getFormFields = (formConfig) => {
+            let fields;
+            if (hasKey$2(formConfig, "multiForm")) {
+                fields = formConfig.multiForm.fields;
+            }
+            else {
+                fields = formConfig.fields;
+            }
+            return fields;
+        };
+        this.setMissingFieldKeyValue = (field, key, value) => {
+            if (!hasKey$2(field, key)) {
+                field[key] = value;
+            }
+            return field;
+        };
+        this.setFieldKeyValue = (field, key, value) => {
+            field[key] = value;
+            return field;
+        };
+        this.removeFieldKey = (field, key) => {
+            if (hasKey$2(field, key)) {
+                delete field[key];
+            }
+            return field;
+        };
+    }
+    convertFormConfig(formConfig) {
+        const updateOnFieldType = (field) => {
+            const formatFieldTypeTitle = (field) => {
+                const fieldKey = `${field.type}_${field.label
+                    .split(" ")
+                    .join("_")
+                    .toLocaleLowerCase()}`;
+                field = this.setFieldKeyValue(field, "key", fieldKey);
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypeRadio = (field) => {
+                field.properties = this.setMissingFieldKeyValue(field.properties, "size", "m");
+                field.properties = this.setMissingFieldKeyValue(field.properties, "orientation", "vertical");
+                field = this.setFieldKeyValue(field, "hidden", false);
+                field.options = field.options.map((x) => {
+                    return { label: x, disabled: false };
+                });
+                return field;
+            };
+            const formatFieldTypeOtp = (field) => {
+                field.properties = this.setMissingFieldKeyValue(field.properties, "mask", new Array(field.properties.otpLength).fill("#").join(" "));
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypeDate = (field) => {
+                const convertDateStringToTuiDayFormat = (date) => {
+                    const splitDate = date.split("-");
+                    const tuiDay = new TuiDay(Number(splitDate[2]), // Year
+                    Number(splitDate[1]) - 1, // Month, Why '-1' => Because Taiga-UI Required It, So...
+                    Number(splitDate[0]) // Day
+                    );
+                    return tuiDay;
+                };
+                if (hasKey$2(field, "min")) {
+                    const tuiDay = convertDateStringToTuiDayFormat(field["min"]);
+                    field.properties = this.setFieldKeyValue(field.properties, "min", tuiDay);
+                }
+                else {
+                    field.properties = this.setMissingFieldKeyValue(field.properties, "min", new TuiDay(0, 0, 1)); // Year - 0000, Month - 0 (0 Indexing), Day - 1
+                }
+                if (hasKey$2(field, "max")) {
+                    const tuiDay = convertDateStringToTuiDayFormat(field["max"]);
+                    field.properties = this.setFieldKeyValue(field.properties, "max", tuiDay);
+                }
+                else {
+                    field.properties = this.setMissingFieldKeyValue(field.properties, "max", new TuiDay(new Date().getFullYear(), // Year - 9999
+                    new Date().getMonth(), // Month - 11 (0 Indexing)
+                    new Date().getDate() // Day - 31
+                    ));
+                }
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypeNumber = (field) => {
+                if (hasKey$2(field, "key")) {
+                    if (field.key === "aadhaar_number") {
+                        field = this.setFieldKeyValue(field, "type", "aadhaar_number");
+                    }
+                    if (field.key === "contact_number") {
+                        field = this.setFieldKeyValue(field, "type", "phone");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "countryCode", "+91");
+                        field.properties = this.setMissingFieldKeyValue(field.properties, "phoneMaskAfterCountryCode", "####-######");
+                        field.properties = this.setFieldKeyValue(field.properties, "decimal", "not-zero");
+                        field.properties = this.setFieldKeyValue(field.properties, "min", -Infinity);
+                        field.properties = this.setFieldKeyValue(field.properties, "max", Infinity);
+                        field.properties = this.setFieldKeyValue(field.properties, "precision", 0);
+                    }
+                }
+                field = this.setFieldKeyValue(field, "hidden", false);
+                return field;
+            };
+            const formatFieldTypeApiCall = (field) => {
+                if (!hasKey$2(field.properties, "shape")) {
+                    field.properties = this.setFieldKeyValue(field.properties, "shape", null);
+                }
+                if (!hasKey$2(field, "showLoader")) {
+                    field = this.setFieldKeyValue(field, "showLoader", false);
+                }
+                if (!hasKey$2(field.properties, "size")) {
+                    field.properties = this.setFieldKeyValue(field.properties, "size", "m");
+                }
+                if (!hasKey$2(field, "api")) {
+                    field = this.setFieldKeyValue(field, "api", {});
+                    field.api = this.setMissingFieldKeyValue(field.api, "url", "");
+                    field.api = this.setMissingFieldKeyValue(field.api, "request", "");
+                    field.api = this.setMissingFieldKeyValue(field.api, "response", "");
+                    field.api = this.setMissingFieldKeyValue(field.api, "status", "");
+                    field.api.status = this.setMissingFieldKeyValue(field.api.status, "value", "default");
+                    field.api.status = this.setMissingFieldKeyValue(field.api.status, "labels", {
+                        default: "Call API",
+                        loading: "Call API",
+                        success: "API Success",
+                        failed: "API Failed"
+                    });
+                }
+                return field;
+            };
+            const formatFieldTypeSearchText = (field) => {
+                if (hasKey$2(field, "type")) {
+                    if (field.type === "search-text") {
+                        field = this.setFieldKeyValue(field, "type", "dropdown-with-search");
+                    }
+                }
+                return field;
+            };
+            const formatFieldTypeText = (field) => {
+                return field;
+            };
+            switch (field.type) {
+                case "title":
+                    field = formatFieldTypeTitle(field);
+                    break;
+                case "radio":
+                    field = formatFieldTypeRadio(field);
+                    break;
+                case "otp":
+                    field = formatFieldTypeOtp(field);
+                    break;
+                case "date":
+                    field = formatFieldTypeDate(field);
+                    break;
+                case "number":
+                    field = formatFieldTypeNumber(field);
+                    break;
+                case "api-call":
+                    field = formatFieldTypeApiCall(field);
+                    break;
+                case "search-text":
+                    field = formatFieldTypeSearchText(field);
+                    break;
+                default:
+                    break;
+            }
+            return field;
+        };
+        const getConnectedElementKeyValueObject = (key) => {
+            const object = {
+                key: key,
+                conditions: { formula: "", rules: [] },
+                actions: { success: [], failure: [] }
+            };
+            return object;
+        };
+        const formatFieldKeys = (field) => {
+            if (hasKey$2(field, "connectedTo")) {
+                if (typeof field["connectedTo"] === "string") {
+                    field["connectedElements"] = [
+                        getConnectedElementKeyValueObject(field["connectedTo"])
+                    ];
+                }
+                else {
+                    field["connectedTo"] = field["connectedTo"].map((key) => {
+                        return getConnectedElementKeyValueObject(key);
+                    });
+                    field["connectedElements"] = field["connectedTo"];
+                }
+            }
+            this.removeFieldKey(field, "connectedTo");
+            if (hasKey$2(field, "connectedToParent")) {
+                if (typeof field["connectedToParent"] === "string") {
+                    field["connectedParentFields"] = [
+                        getConnectedElementKeyValueObject(field["connectedToParent"])
+                    ];
+                }
+                else {
+                    field["connectedParentFields"] = getConnectedElementKeyValueObject(field["connectedToParent"]);
+                }
+            }
+            this.removeFieldKey(field, "connectedToParent");
+            this.removeFieldKey(field, "sideEffect");
+            return field;
+        };
+        const getConnectedElementFieldMapping = (field, connectedFieldMapping) => {
+            const getConnectedElementChildFieldMapping = (field, connectedFieldMapping) => {
+                if (hasKey$2(field, "connectedElements")) {
+                    connectedFieldMapping["child"][field.key] = field.connectedElements;
+                }
+                else if (hasKey$2(connectedFieldMapping["child"], field.key)) {
+                    field["connectedElements"] =
+                        connectedFieldMapping["child"][field.key];
+                }
+                return { field: field, connectedFieldMapping: connectedFieldMapping };
+            };
+            const getConnectedElementParentFieldMapping = (field, connectedFieldMapping) => {
+                console.log(field, connectedFieldMapping);
+                if (hasKey$2(connectedFieldMapping["child"], field.key)) {
+                    for (let connectedParentKey of connectedFieldMapping["child"][field.key]) {
+                        if (hasKey$2(connectedFieldMapping["parent"], connectedParentKey["key"])) {
+                            connectedFieldMapping["parent"][connectedParentKey["key"]].push(field.key);
+                        }
+                        else {
+                            connectedFieldMapping["parent"][connectedParentKey["key"]] = [
+                                field.key
+                            ];
+                        }
+                    }
+                }
+                return { field: field, connectedFieldMapping: connectedFieldMapping };
+            };
+            const connectedChildFieldMapping = getConnectedElementChildFieldMapping(field, connectedFieldMapping);
+            field = connectedChildFieldMapping["field"];
+            connectedFieldMapping =
+                connectedChildFieldMapping["connectedFieldMapping"];
+            const connectedParentFieldMapping = getConnectedElementParentFieldMapping(field, connectedFieldMapping);
+            field = connectedParentFieldMapping["field"];
+            connectedFieldMapping =
+                connectedParentFieldMapping["connectedFieldMapping"];
+            return connectedFieldMapping;
+        };
+        const updateConnectedElementsKeyValue = (field, connectedFieldMapping) => {
+            if (hasKey$2(connectedFieldMapping["child"], field.key)) {
+                field["connectedElements"] = connectedFieldMapping["child"][field.key];
+            }
+            if (hasKey$2(connectedFieldMapping["parent"], field.key)) {
+                field["connectedParentFields"] =
+                    connectedFieldMapping["parent"][field.key];
+            }
+            return field;
+        };
+        const updateFieldValidatorConfig = (field) => {
+            if (field.type !== "title") {
+                const validators = hasKey$2(field, "validators") ? field.validators : {};
+                field = this.setMissingFieldKeyValue(field, "validators", {});
+                field = this.setFieldKeyValue(field, "validators", Object.assign(Object.assign({}, field["validators"]), { min: hasKey$2(validators, "min")
+                        ? validators.min
+                        : hasKey$2(field, "min")
+                            ? field.min
+                            : undefined, max: hasKey$2(validators, "max")
+                        ? validators.max
+                        : hasKey$2(field, "max")
+                            ? field.max
+                            : undefined, required: hasKey$2(validators, "required")
+                        ? validators.required
+                        : hasKey$2(field, "required")
+                            ? field.required
+                            : undefined, minLength: hasKey$2(validators, "minLength")
+                        ? validators.minLength
+                        : hasKey$2(field, "minLength")
+                            ? field.minLength
+                            : undefined, maxLength: hasKey$2(validators, "maxLength")
+                        ? validators.maxLength
+                        : hasKey$2(field, "length")
+                            ? field.length
+                            : hasKey$2(field, "maxLength")
+                                ? field.maxLength
+                                : undefined, pattern: hasKey$2(field.validators, "pattern")
+                        ? field.validators.pattern
+                        : hasKey$2(field, "pattern")
+                            ? field.pattern
+                            : hasKey$2(field, "regex")
+                                ? field.regex
+                                : undefined }));
+                delete field.min;
+                delete field.max;
+                delete field.required;
+                delete field.minLength;
+                delete field.length;
+                delete field.maxLength;
+                delete field.pattern;
+                delete field.regex;
+            }
+            return field;
+        };
+        const updateFieldDefaultValueConfig = (field) => {
+            if (field.type !== "title") {
+                if (hasKey$2(field, "defaultValue")) {
+                    return field;
+                }
+                else if (hasKey$2(field, "default")) {
+                    return field;
+                }
+                else {
+                    if (hasKey$2(field, "defaultVal")) {
+                        // Currently below line is commented because it caused issues in setting Default Value.
+                        // field["defaultValue"] = field["defaultVal"];
+                        // delete field["defaultVal"];
+                    }
+                    // TODO: Condition for all_forms_data is not considered yet.
+                    if (field.autoPopulateFromSummaryData) {
+                        field["defaultValue"] = {
+                            is_found: false,
+                            value: "",
+                            sources: [
+                                {
+                                    source: "summary_data",
+                                    summary_data: {
+                                        path: `$.${field.key}`,
+                                        validation: {
+                                            rules: [
+                                                {
+                                                    key: "1",
+                                                    type: "is_not_empty",
+                                                    is_not_empty: {
+                                                        value: true
+                                                    }
+                                                }
+                                            ],
+                                            actions: [
+                                                {
+                                                    type: "set_default_value_found",
+                                                    condition: "1",
+                                                    set_default_value_found: {
+                                                        value: true
+                                                    }
+                                                },
+                                                {
+                                                    type: "enable_field",
+                                                    condition: "1 OR NOT(1)",
+                                                    enable_field: { value: true }
+                                                }
+                                            ]
+                                        }
+                                    }
+                                }
+                            ]
+                        };
+                    }
+                    else if (hasKey$2(field, "autofill")) {
+                        if (hasKey$2(field.autofill, "type")) {
+                            if (field.autofill.type === "storage") {
+                                field["defaultValue"] = {
+                                    is_found: false,
+                                    value: "",
+                                    sources: [
+                                        {
+                                            source: "browser_storage",
+                                            browser_storage: {
+                                                path: `$.${field.key}`,
+                                                validation: {
+                                                    rules: [
+                                                        {
+                                                            key: "1",
+                                                            type: "is_not_empty",
+                                                            is_not_empty: {
+                                                                value: true
+                                                            }
+                                                        }
+                                                    ],
+                                                    actions: [
+                                                        {
+                                                            type: "set_default_value_found",
+                                                            condition: "1",
+                                                            set_default_value_found: {
+                                                                value: true
+                                                            }
+                                                        },
+                                                        {
+                                                            type: "enable_field",
+                                                            condition: "1 OR NOT(1)",
+                                                            enable_field: { value: true }
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        }
+                                    ]
+                                };
+                            }
+                            else if (field.autofill.type === "config") {
+                                field["defaultValue"] = {
+                                    is_found: false,
+                                    value: "",
+                                    sources: [
+                                        {
+                                            source: "field_config",
+                                            field_config: {
+                                                path: `$.${field.key}`,
+                                                validation: {
+                                                    rules: [
+                                                        {
+                                                            key: "1",
+                                                            type: "is_not_empty",
+                                                            is_not_empty: {
+                                                                value: true
+                                                            }
+                                                        }
+                                                    ],
+                                                    actions: [
+                                                        {
+                                                            type: "set_default_value_found",
+                                                            condition: "1",
+                                                            set_default_value_found: {
+                                                                value: true
+                                                            }
+                                                        },
+                                                        {
+                                                            type: "enable_field",
+                                                            condition: "1 OR NOT(1)",
+                                                            enable_field: { value: true }
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        }
+                                    ]
+                                };
+                            }
+                        }
+                    }
+                    else {
+                        field["defaultValue"] = {
+                            is_found: false,
+                            value: "",
+                            sources: [
+                                {
+                                    source: "form_data",
+                                    form_data: {
+                                        path: `$.${field.key}`,
+                                        validation: {
+                                            rules: [
+                                                {
+                                                    key: "1",
+                                                    type: "is_not_empty",
+                                                    is_not_empty: {
+                                                        value: true
+                                                    }
+                                                }
+                                            ],
+                                            actions: [
+                                                {
+                                                    type: "set_default_value_found",
+                                                    condition: "1",
+                                                    set_default_value_found: {
+                                                        value: true
+                                                    }
+                                                },
+                                                {
+                                                    type: "enable_field",
+                                                    condition: "1 OR NOT(1)",
+                                                    enable_field: { value: true }
+                                                }
+                                            ]
+                                        }
+                                    }
+                                }
+                            ]
+                        };
+                    }
+                }
+                delete field["defaultVal"];
+            }
+            return field;
+        };
+        const updateFieldMessages = (field) => {
+            if (field.type !== "title") {
+                field = this.setMissingFieldKeyValue(field, "messages", []);
+            }
+            return field;
+        };
+        const updateFieldResetButton = (field) => {
+            if (field.type === "title") {
+                if (hasKey$2(field, "action") &&
+                    field.action === "reset" &&
+                    hasKey$2(field, "fields")) {
+                    field = this.setFieldKeyValue(field, "reset", {
+                        fields: field.fields
+                    });
+                }
+            }
+            return field;
+        };
+        let fields = this.getFormFields(formConfig);
+        let connectedFieldMapping = {
+            parent: {},
+            child: {}
+        };
+        const setFormFields = (formConfig, fields) => {
+            if (hasKey$2(formConfig, "multiForm")) {
+                formConfig.multiForm["fields"] = fields;
+            }
+            else {
+                formConfig["fields"] = fields;
+            }
+            return formConfig;
+        };
+        for (let field of fields) {
+            field = updateOnFieldType(field);
+            field = formatFieldKeys(field);
+            // connectedFieldMapping = getConnectedElementFieldMapping(
+            //   field,
+            //   connectedFieldMapping
+            // );
+            // field = updateConnectedElementsKeyValue(field, connectedFieldMapping);
+            field = updateFieldDefaultValueConfig(field);
+            field = updateFieldValidatorConfig(field);
+            field = updateFieldResetButton(field);
+            field = updateFieldMessages(field);
+        }
+        formConfig = setFormFields(formConfig, fields);
+        return formConfig;
+    }
+}
+__decorate([
+    log
+], Converter.prototype, "convertFormConfig", null);
+
+class KwikIDRendererService {
+    constructor() {
+        this.isMobileView = false;
+        this.allFormsData = {};
+    }
+    setIsMobileView(isMobileView) {
+        this.isMobileView = isMobileView;
+    }
+    setFormsList(formsList) {
+        this.formsList = formsList;
+    }
+    setFormsListCompleted(formsListCompleted) {
+        this.formsListCompleted = formsListCompleted;
+    }
+    setAllFormsData(allFormsData) {
+        this.allFormsData = allFormsData;
+    }
+    setActiveFormConfig(activeFormConfig) {
+        this.activeFormConfig = activeFormConfig;
+    }
+    setActiveFormFields(activeFormFields) {
+        this.activeFormFields = activeFormFields;
+    }
+    setActiveFormData(activeFormData) {
+        this.activeFormData = activeFormData;
+    }
+    fetchFormConfig(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield fetch(url, { method: "GET" });
+            const data = yield response.json();
+            return data;
+        });
+    }
+    findActiveFormConfig(formsList) {
+        const activeFormConfig = formsList.find((form) => {
+            return form.status === "editable" && !form.disabled;
+        });
+        return activeFormConfig;
+    }
+    findCompletedFormsList(allFormsData) {
+        let formsListCompleted = [];
+        Object.keys(allFormsData).map((formKey) => {
+            formsListCompleted.push(formKey);
+        });
+        return formsListCompleted;
+    }
+    markFormInFormsListAsCompleted(formsList, formsListCompleted) {
+        for (let form of formsList) {
+            if (formsListCompleted.includes(form.key)) {
+                form = setValueToObject(form, "status", "completed");
+                form = setValueToObject(form, "disabled", false);
+            }
+        }
+        return formsList;
+    }
+    markFormInFormsListAsDisabled(formsList, formsListCompleted) {
+        for (let form of formsList) {
+            if (form.status !== "completed") {
+                if (hasKey$2(form, "dependentOn")) {
+                    const isDependent = form.dependentOn.every((r) => formsListCompleted.includes(r));
+                    if (isDependent) {
+                        form = setValueToObject(form, "status", "editable");
+                        form = setValueToObject(form, "disabled", false);
+                    }
+                    else {
+                        form = setValueToObject(form, "status", "locked");
+                        form = setValueToObject(form, "disabled", false);
+                    }
+                }
+                else {
+                    form = setValueToObject(form, "dependentOn", []);
+                    form = setValueToObject(form, "status", "editable");
+                    form = setValueToObject(form, "disabled", false);
+                }
+            }
+        }
+        return formsList;
+    }
+    assignSequenceNoToForm(formsList) {
+        let sequenceNo = 1;
+        for (let form of formsList) {
+            form.sequenceNo = sequenceNo++;
+        }
+        return formsList;
+    }
+    updateFormsList() {
+        let formsList = this.formsList;
+        let formsListCompleted;
+        let activeFormConfig;
+        formsList = this.assignSequenceNoToForm(formsList);
+        formsListCompleted = this.findCompletedFormsList(this.allFormsData);
+        formsList = this.markFormInFormsListAsCompleted(formsList, formsListCompleted);
+        formsList = this.markFormInFormsListAsDisabled(formsList, formsListCompleted);
+        if (formsList.length !== formsListCompleted.length) {
+            activeFormConfig = this.findActiveFormConfig(formsList);
+            this.setActiveFormConfig(activeFormConfig);
+        }
+        this.setFormsList(formsList);
+        this.setFormsListCompleted(formsListCompleted);
+    }
+}
+/** @nocollapse */ KwikIDRendererService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDRendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ KwikIDRendererService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDRendererService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDRendererService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class KwikIDFormsRendererComponent {
+    constructor(rendererService, hostElement) {
+        this.rendererService = rendererService;
+        this.hostElement = hostElement;
+        this.formsData = {};
+        this.apiCallResponse = {};
+        this.getFormData = new EventEmitter();
+        this.onClickApiCall = new EventEmitter();
+        this.loading = false;
+        // display forms and list conditionally
+        this.showForm = false;
+        this.showFormFields = true;
+        this.showFormSections = true;
+    }
+    // The final value should be provided to service, so that it can be used in all components
+    windowResizeWatcher() {
+        if (this.hostElement.nativeElement.offsetWidth < 600) {
+            if (this.showForm) {
+                this.showFormSections = false;
+                this.showFormFields = true;
+            }
+            else {
+                this.showFormSections = true;
+                this.showFormFields = false;
+            }
+            this.rendererService.isMobileView = true;
+        }
+        else {
+            if (this.showForm) {
+                this.showFormSections = true;
+                this.showFormFields = true;
+            }
+            else {
+                this.showFormSections = true;
+                this.showFormFields = false;
+            }
+            this.rendererService.isMobileView = false;
+        }
+    }
+    ngOnInit() {
+        this.loading = true;
+        this.rendererService.setFormsList(this.userConfig.userFormFields);
+        this.initializeForms();
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (prop) => {
+            return changes.hasOwnProperty(prop) && !changes[prop].firstChange;
+        };
+        if (verifyChange("userConfig")) {
+            this.userConfig = changes.userConfig.currentValue;
+        }
+        if (verifyChange("formsData")) {
+            this.formsData = changes.formsData.currentValue;
+            this.initializeForms();
+        }
+        if (verifyChange("apiCallResponse")) {
+            this.apiCallResponse = changes.apiCallResponse.currentValue;
+        }
+    }
+    initializeForms() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.rendererService.setAllFormsData(this.formsData);
+            this.rendererService.updateFormsList();
+            this.handleResize(this.rendererService.formsList);
+            if (this.rendererService.formsList.length !==
+                this.rendererService.formsListCompleted.length) {
+                yield this.handleOnClickSetActiveForm(this.rendererService.activeFormConfig.key);
+            }
+            else {
+                this.showForm = false;
+                this.showFormFields = false;
+            }
+            this.loading = false;
+        });
+    }
+    handleResize(formsList) {
+        if (this.hostElement.nativeElement.offsetWidth < 600) {
+            if (!isSingleForm(formsList)) {
+                this.showFormSections = true;
+                this.showFormFields = false;
+                this.showForm = false;
+            }
+            else {
+                this.showFormSections = true;
+                this.showFormFields = false;
+                this.showForm = false;
+            }
+            this.rendererService.isMobileView = true;
+        }
+        else {
+            this.rendererService.isMobileView = false;
+        }
+    }
+    // forms-list listener
+    handleOnClickSetActiveForm(selectedForm) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const activeFormConfig = this.rendererService.formsList.find((form) => {
+                if (form.key === selectedForm) {
+                    return form;
+                }
+            });
+            let formConfig = yield this.rendererService.fetchFormConfig(activeFormConfig.formContent.url);
+            formConfig = new Converter().convertFormConfig(formConfig);
+            this.rendererService.setActiveFormData(this.rendererService.allFormsData[formConfig.key]);
+            this.rendererService.setActiveFormConfig(Object.assign(Object.assign({}, activeFormConfig), formConfig));
+            if (this.hostElement.nativeElement.offsetWidth < 600) {
+                this.showFormSections = false;
+                this.showFormFields = true;
+            }
+            else if (this.hostElement.nativeElement.offsetWidth >= 600) {
+                this.showFormSections = true;
+                this.showFormFields = true;
+            }
+            this.showForm = true;
+        });
+    }
+    // forms-list listener
+    handleOnClickSubmitForms(e) {
+        console.log(e);
+    }
+    // form-view listener
+    handleOnClickApiCall(e) {
+        this.onClickApiCall.emit(e);
+    }
+    // form-view listener
+    handleGetActiveFormData(e) {
+        this.getFormData.emit({
+            [this.rendererService.activeFormConfig.key]: e["data"]
+        });
+    }
+    // form-view listener
+    handleOnClickSaveForm(e) {
+        this.getFormData.emit({
+            [this.rendererService.activeFormConfig.key]: e["data"]
+        });
+    }
+    // form-view listener
+    handleOnClickViewForms(e) {
+        console.log(e);
+        this.showFormSections = true;
+        this.showForm = false;
+        this.showFormFields = false;
+    }
+}
+/** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsRendererComponent, deps: [{ token: KwikIDRendererService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsRendererComponent, selector: "kwikid-forms-renderer", inputs: { userConfig: "userConfig", formsData: "formsData", apiCallResponse: "apiCallResponse" }, outputs: { getFormData: "getFormData", onClickApiCall: "onClickApiCall" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, providers: [KwikIDRendererService], usesOnChanges: true, ngImport: i0, template: "<div ngClass=\"kwikid-renderer\">\r\n  <div ngClass=\"kwikid-form-header\">\r\n    <div id=\"uf-header\">\r\n      <div id=\"uf-header-logo-container\">\r\n        <img\r\n          id=\"uf-header-logo\"\r\n          src=\"https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/assets/logo/kwikid/kwikid-logo-favicon-32x32.png\"\r\n          [ngClass]=\"showForm ? 'small-icon' : 'large-icon'\"\r\n        />\r\n      </div>\r\n      <div id=\"uf-header-title-container\">\r\n        <div id=\"uf-header-title\">Customer Registration</div>\r\n        <div id=\"uf-header-subtitle\">\r\n          {{ \"Central Bank of India\" }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    ngClass=\"kwikid-layout-container\"\r\n    *ngIf=\"!loading\"\r\n  >\r\n    <div\r\n      ngClass=\"kwikid-sections-container\"\r\n      *ngIf=\"showFormSections\"\r\n      class=\"active\"\r\n      [class.active]=\"showFormSections\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n    >\r\n      <kwikid-forms-list\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [formsListCompleted]=\"this.rendererService.formsListCompleted\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickSetActiveForm)=\"this.handleOnClickSetActiveForm($event)\"\r\n        (onClickSubmitForms)=\"this.handleOnClickSubmitForms($event)\"\r\n      ></kwikid-forms-list>\r\n    </div>\r\n    <div\r\n      ngClass=\"kwikid-forms-container\"\r\n      *ngIf=\"this.showForm && this.showFormFields\"\r\n      [class.active]=\"showFormFields\"\r\n      [class.mobile]=\"rendererService.isMobileView\"\r\n      [@panelInOut]\r\n    >\r\n      <kwikid-form-view\r\n        [formConfig]=\"this.rendererService.activeFormConfig\"\r\n        [formData]=\"this.rendererService.activeFormData\"\r\n        [apiCallResponse]=\"this.apiCallResponse\"\r\n        [formsList]=\"this.rendererService.formsList\"\r\n        [allFormsData]=\"this.rendererService.allFormsData\"\r\n        [isMobileView]=\"this.rendererService.isMobileView\"\r\n        (onClickApiCall)=\"this.handleOnClickApiCall($event)\"\r\n        (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\r\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\r\n        (getActiveFormData)=\"this.handleGetActiveFormData($event)\"\r\n      ></kwikid-form-view>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".kwikid-root{width:100%;height:100%}.kwikid-renderer{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-form-header{height:70px;box-shadow:0 0 12px -8px var(--tui-primary);z-index:6}#uf-header{display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:flex-start;grid-column-gap:10px;column-gap:10px;padding:10px 20px;width:100%;max-width:calc(400px + 50vw + 2rem);margin:0 auto;height:70px;z-index:1}#uf-header #uf-header-goback-container{display:none}#uf-header #uf-header-goback-container:hover{border-radius:50%;background-color:#d3d3d3}#uf-header #uf-header-goback-container #uf-header-goback{width:100%;height:auto}#uf-header #uf-header-logo-container{display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center}#uf-header #uf-header-logo-container #uf-header-logo.small-icon{width:50px;height:50px}#uf-header #uf-header-logo-container #uf-header-logo.large-icon{width:50px;height:50px}#uf-header #uf-header-title-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;grid-row-gap:4px;row-gap:4px}#uf-header #uf-header-title-container #uf-header-title{font-size:1.4em;color:#121212}#uf-header #uf-header-title-container #uf-header-subtitle{font-size:1.2em;color:#121212}.kwikid-layout-container{display:flex;flex-direction:row;padding:0 1rem;height:calc(100% - 70px);justify-content:center;align-items:stretch;background:var(--tui-secondary);position:relative}.kwikid-sections-container{display:block;width:100%;max-width:400px;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);margin:auto 1rem auto 0;box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-sections-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s}.kwikid-forms-container{display:block;width:100%;max-width:50vw;margin:auto 0;height:calc(100% - 2rem);padding:.25rem .5rem 0;border-radius:1rem;background-color:var(--tui-base-01);box-shadow:0 0 12px -8px var(--tui-primary)}.kwikid-forms-container.mobile{position:absolute;top:0;left:0;z-index:5;opacity:1;visibility:visible;transition:all 1s}@media screen and (max-width: 600px){.kwikid-layout-container{padding:0;background:transparent}.kwikid-sections-container{position:absolute;max-width:100%;bottom:-10000px;left:-10000px;opacity:0;padding:0;visibility:hidden}.kwikid-sections-container.active{visibility:visible}.kwikid-sections-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container{display:none;max-width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}.kwikid-forms-container.mobile{height:100%;opacity:1;visibility:visible;transition:all 2s;border-radius:0;box-shadow:none;top:0px;margin:0;position:absolute}.kwikid-forms-container.active{display:block}}\n"], components: [{ type: KwikIDFormsListComponent, selector: "kwikid-forms-list", inputs: ["formsList", "formsListCompleted", "isMobileView"], outputs: ["onClickSetActiveForm", "onClickHideFormsList", "onClickSubmitForms"] }, { type: KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["formConfig", "formData", "apiCallResponse", "isMobileView", "allFormsData", "formsList"], outputs: ["onClickViewForms", "onClickSaveForm", "onClickApiCall", "getActiveFormData"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+        trigger("panelInOut", [
+            transition(":enter", [
+                style({ transform: "translateY(100%)" }),
+                animate(150)
+            ]),
+            transition(":leave", [
+                animate(100, style({ transform: "translateY(100%)" }))
+            ])
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-forms-renderer",
+                    templateUrl: "./renderer.component.html",
+                    styleUrls: ["./renderer.component.scss"],
+                    animations: [
+                        trigger("panelInOut", [
+                            transition(":enter", [
+                                style({ transform: "translateY(100%)" }),
+                                animate(150)
+                            ]),
+                            transition(":leave", [
+                                animate(100, style({ transform: "translateY(100%)" }))
+                            ])
+                        ])
+                    ],
+                    providers: [KwikIDRendererService]
+                }]
+        }], ctorParameters: function () { return [{ type: KwikIDRendererService }, { type: i0.ElementRef }]; }, propDecorators: { windowResizeWatcher: [{
+                type: HostListener,
+                args: ["window:resize", ["$event"]]
+            }], userConfig: [{
+                type: Input
+            }], formsData: [{
+                type: Input
+            }], apiCallResponse: [{
+                type: Input
+            }], getFormData: [{
+                type: Output
+            }], onClickApiCall: [{
+                type: Output
+            }] } });
+
+class KwikIDFormBuilderModule {
+}
+/** @nocollapse */ KwikIDFormBuilderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDFormBuilderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormBuilderModule, declarations: [KwikIDFormsBuilderComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule], exports: [KwikIDFormsBuilderComponent] });
+/** @nocollapse */ KwikIDFormBuilderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormBuilderModule, providers: [], imports: [[CommonModule, FormsModule, ReactiveFormsModule, DragDropModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KwikIDFormsBuilderComponent],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, DragDropModule],
+                    providers: [],
+                    exports: [KwikIDFormsBuilderComponent]
+                }]
+        }] });
+
+class KwikIDFormViewModule {
+}
+/** @nocollapse */ KwikIDFormViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDFormViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiLabelModule,
+        KwikUIModule], exports: [KwikIDFormViewComponent] });
+/** @nocollapse */ KwikIDFormViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TuiLabelModule,
+            KwikUIModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KwikIDFormViewComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiLabelModule,
+                        KwikUIModule
+                    ],
+                    exports: [KwikIDFormViewComponent]
+                }]
+        }] });
+
+class KwikIDFormsListModule {
+}
+/** @nocollapse */ KwikIDFormsListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDFormsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListModule, declarations: [KwikIDFormsListComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        TuiSvgModule], exports: [KwikIDFormsListComponent] });
+/** @nocollapse */ KwikIDFormsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            TuiSvgModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KwikIDFormsListComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        TuiSvgModule
+                    ],
+                    exports: [KwikIDFormsListComponent]
+                }]
+        }] });
+
+class KwikIDFormRendererModule {
+}
+/** @nocollapse */ KwikIDFormRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDFormRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormRendererModule, declarations: [KwikIDFormsRendererComponent], imports: [CommonModule,
+        HttpClientModule,
+        KwikIDFormViewModule,
+        KwikIDFormsListModule,
+        KwikUIModule], exports: [KwikIDFormsRendererComponent] });
+/** @nocollapse */ KwikIDFormRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormRendererModule, providers: [], imports: [[
+            CommonModule,
+            HttpClientModule,
+            KwikIDFormViewModule,
+            KwikIDFormsListModule,
+            KwikUIModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormRendererModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KwikIDFormsRendererComponent],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        KwikIDFormViewModule,
+                        KwikIDFormsListModule,
+                        KwikUIModule
+                    ],
+                    providers: [],
+                    exports: [KwikIDFormsRendererComponent]
+                }]
+        }] });
+
+class KwikIDFormsModule {
+}
+/** @nocollapse */ KwikIDFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsModule, imports: [CommonModule,
+        BrowserModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikIDFormBuilderModule,
+        KwikIDFormRendererModule,
+        TuiRootModule,
+        TuiAlertModule], exports: [KwikIDFormBuilderModule, KwikIDFormRendererModule] });
+/** @nocollapse */ KwikIDFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsModule, providers: [KwikIDRendererService], imports: [[
+            CommonModule,
+            BrowserModule,
+            BrowserAnimationsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikIDFormBuilderModule,
+            KwikIDFormRendererModule,
+            TuiRootModule,
+            TuiAlertModule
+        ], KwikIDFormBuilderModule, KwikIDFormRendererModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KwikIDFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        BrowserModule,
+                        BrowserAnimationsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikIDFormBuilderModule,
+                        KwikIDFormRendererModule,
+                        TuiRootModule,
+                        TuiAlertModule
+                    ],
+                    exports: [KwikIDFormBuilderModule, KwikIDFormRendererModule],
+                    providers: [KwikIDRendererService]
+                }]
+        }] });
+
+/*
+ * Public API Surface of kwikid-forms
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KwikIDFormBuilderModule, KwikIDFormRendererModule, KwikIDFormViewComponent, KwikIDFormViewModule, KwikIDFormsBuilderComponent, KwikIDFormsListComponent, KwikIDFormsListModule, KwikIDFormsModule, KwikIDFormsRendererComponent };
+//# sourceMappingURL=kwikid-forms.js.map