kwikid-forms 0.0.1 → 0.0.2

package/bundles/kwikid-forms.umd.js

@@ -0,0 +1,4056 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/drag-drop'), require('@angular/core'), require('@angular/forms'), require('kwikui'), require('lodash'), require('rxjs/operators'), require('jsonpath'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@angular/common'), require('@angular/animations'), require('@angular/common/http')) :
+    typeof define === 'function' && define.amd ? define('kwikid-forms', ['exports', '@angular/cdk/drag-drop', '@angular/core', '@angular/forms', 'kwikui', 'lodash', 'rxjs/operators', 'jsonpath', '@taiga-ui/cdk', '@taiga-ui/core', '@angular/common', '@angular/animations', '@angular/common/http'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-forms"] = {}, global.ng.cdk.dragDrop, global.ng.core, global.ng.forms, global.i2, global._, global.rxjs.operators, global.jp, global["@taiga-ui/cdk"], global["@taiga-ui/core"], global.ng.common, global.ng.animations, global.ng.common.http));
+})(this, (function (exports, dragDrop, i0, i5, i2, _, operators, jp, cdk, i3, i4, animations, http) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+    var jp__default = /*#__PURE__*/_interopDefaultLegacy(jp);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (g && (g = 0, op[0] && (_ = 0)), _)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
+
+    var KwikIDFormsBuilderComponent = /** @class */ (function () {
+        function KwikIDFormsBuilderComponent() {
+            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 i5.FormGroup({});
+            this.name = "Angular " + i0.VERSION.major;
+            this.menu = [
+                {
+                    title: "button",
+                    key: "button",
+                    component: i2.KwikUIButtonComponent,
+                    props: this.buttonComponent
+                },
+                {
+                    title: "progress-segmented",
+                    key: "progress_segmented",
+                    component: i2.KwikUIProgressSegmentedComponent,
+                    props: this.progressSegmentedComponent
+                },
+                {
+                    title: "input",
+                    key: "input",
+                    component: i2.KwikUIInputComponent,
+                    props: this.inputComponent
+                }
+            ];
+            this.table = [];
+        }
+        KwikIDFormsBuilderComponent.prototype.ngOnInit = function () {
+            var e_1, _a;
+            try {
+                for (var _b = __values(this.menu), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var m = _c.value;
+                    m.id = this.revisedRandId();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        KwikIDFormsBuilderComponent.prototype.revisedRandId = function () {
+            return Math.random()
+                .toString(36)
+                .replace(/[^a-z]+/g, "");
+        };
+        KwikIDFormsBuilderComponent.prototype.handleOnChange = function (event, id, key, idx) {
+            var _value = event.target.value;
+            this.formGroup.controls[id]["controls"][key].patchValue(_value);
+        };
+        KwikIDFormsBuilderComponent.prototype.toggleShow = function (id) {
+            console.log(id);
+        };
+        KwikIDFormsBuilderComponent.prototype.drop = function (event) {
+            // let item = JSON.parse(JSON.stringify(event));
+            if (event.previousContainer !== event.container) {
+                console.log("copying");
+                // Clone the item that was dropped.
+                var clone = _.cloneDeep(event.previousContainer.data[event.previousIndex]);
+                clone.id = clone.key + "__" + this.revisedRandId();
+                event.previousContainer.data[event.previousIndex] = clone;
+                var newFormGroup_1 = new i5.FormGroup({});
+                var props_1 = clone.props;
+                Object.keys(props_1).forEach(function (key) {
+                    newFormGroup_1.addControl(key, new i5.FormControl({ value: props_1[key], disabled: false }));
+                });
+                this.formGroup.addControl(clone.id, newFormGroup_1);
+                dragDrop.copyArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
+            }
+            else {
+                console.log("moving");
+                dragDrop.moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+            }
+            if (event.previousContainer.data) {
+                this.menu = this.menu.filter(function (f) { return !f.temp; });
+            }
+        };
+        KwikIDFormsBuilderComponent.prototype.exited = function (event) {
+            var currentIdx = event.container.data.findIndex(function (f) { return f.id === event.item.data.id; });
+            this.menu.splice(currentIdx + 1, 0, Object.assign(Object.assign({}, event.item.data), { temp: true }));
+        };
+        KwikIDFormsBuilderComponent.prototype.entered = function () {
+            this.menu = this.menu.filter(function (f) { return !f.temp; });
+        };
+        KwikIDFormsBuilderComponent.prototype.isNumber = function (val) {
+            return typeof val;
+        };
+        KwikIDFormsBuilderComponent.prototype.removeElement = function (idx, id) {
+            this.formGroup.removeControl(id);
+            this.table.splice(idx, 1);
+        };
+        KwikIDFormsBuilderComponent.prototype.getJSON = function () {
+            var e_2, _a;
+            try {
+                for (var _b = __values(this.table), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var t = _c.value;
+                    t.props = this.formGroup.getRawValue()[t.id];
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            console.log(this.table);
+        };
+        return KwikIDFormsBuilderComponent;
+    }());
+    /** @nocollapse */ KwikIDFormsBuilderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsBuilderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ KwikIDFormsBuilderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: KwikIDFormsBuilderComponent, selector: "kwikid-forms-builder", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsBuilderComponent, decorators: [{
+                type: i0.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
+        var originalMethod = descriptor.value;
+        // update the descriptor value with a new function that will log and execute the original method
+        descriptor.value = function () {
+            var args = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                args[_i] = arguments[_i];
+            }
+            console.group("Logging Method"); // start a new logging group
+            console.time("Execution Time:"); // start a timer
+            var 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(function (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(function (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);
+    }
+
+    var hasKey$2 = function (object, key) {
+        return object.hasOwnProperty(key);
+    };
+    var isEmpty$1 = function (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;
+        }
+    };
+    var isNotEmpty$1 = function (value) {
+        return !isEmpty$1(value);
+    };
+    var handleJPQueryResponse$1 = function (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;
+    };
+    var jpQueryWrapper$1 = function (obj, key) {
+        return handleJPQueryResponse$1(jp__default["default"].query(obj, key));
+    };
+    var isSingleForm = function (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 = {}));
+
+    var hasKey$1 = function (object, key) {
+        return object.hasOwnProperty(key);
+    };
+    var hasPath = function (object, path) {
+        return ___default["default"].has(object, path);
+    };
+    var isEmptyString = function (value) {
+        return value === "";
+    };
+    var isUndefined = function (value) {
+        return value === undefined;
+    };
+    var isNull = function (value) {
+        return value === null;
+    };
+    var isEmptyObject = function (object) {
+        return (object &&
+            Object.keys(object).length === 0 &&
+            Object.getPrototypeOf(object) === Object.prototype);
+    };
+    var isEmptyArray = function (arr) {
+        return arr.length === 0;
+    };
+    var isEmpty = function (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;
+        }
+    };
+    var isNotEmpty = function (value) {
+        return !isEmpty(value);
+    };
+    var isEmptyBrowserStorageValue = function (value) {
+        return isNull(value) && isUndefined(value);
+    };
+    var isNotEmptyBrowserStorageValue = function (value) {
+        return !isEmptyBrowserStorageValue(value);
+    };
+    var handleJPQueryResponse = function (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;
+    };
+    var jpQueryWrapper = function (obj, key) {
+        return handleJPQueryResponse(jp__default["default"].query(obj, key));
+    };
+    var replaceString = function (str, find, replace) {
+        return str.replace(new RegExp(find, "g"), replace);
+    };
+    var setFieldKeyValue = function (field, path, value) {
+        return ___default["default"].set(field, path, value);
+    };
+    var setValueToObject = function (object, path, value) {
+        return ___default["default"].set(object, path, value);
+    };
+    var formatValue = function (field, fieldValue) {
+        var fieldType = field.type;
+        var value;
+        if (isNotEmpty(fieldValue)) {
+            switch (fieldType) {
+                case EFieldType.DATE:
+                    var splitDate = fieldValue.split("-");
+                    value = new cdk.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:
+                    var fieldRadio = field;
+                    value = fieldRadio.options.find(function (item) {
+                        return item.label === fieldValue;
+                    });
+                    break;
+                case EFieldType.CHECKBOX:
+                    value = Boolean(fieldValue);
+                    break;
+                default:
+                    value = fieldValue;
+                    break;
+            }
+        }
+        else {
+            value = fieldValue;
+        }
+        return value;
+    };
+    var setEmptyValue = function (field) {
+        var fieldType = field.type;
+        var 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;
+    };
+
+    var Condition = /** @class */ (function () {
+        function Condition(condition, rulesMapping) {
+            this._condition = condition;
+            this._rulesMapping = rulesMapping;
+        }
+        Condition.prototype.parseKeys = function (condition, rulesEvaluationMapping) {
+            Object.keys(rulesEvaluationMapping).forEach(function (key) {
+                condition = replaceString(condition, key, rulesEvaluationMapping[key]);
+            });
+            return condition;
+        };
+        Condition.prototype.parseOperators = function (condition) {
+            return condition.replace(/AND|OR|NOT|XOR|NAND|NOR|XNOR/g, function (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;
+                }
+            });
+        };
+        Condition.prototype.evaluate = function () {
+            this._condition = this.parseKeys(this._condition, this._rulesMapping);
+            this._condition = this.parseOperators(this._condition);
+            return eval(this._condition);
+        };
+        return Condition;
+    }());
+    __decorate([
+        log
+    ], Condition.prototype, "evaluate", null);
+
+    var Actions = /** @class */ (function () {
+        function Actions(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;
+        }
+        Actions.prototype.execute = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var condition, actionSuccess;
+                return __generator(this, function (_a) {
+                    condition = new Condition(this._action.condition, this._ruleMapping);
+                    actionSuccess = condition.evaluate();
+                    if (actionSuccess) {
+                        return [2 /*return*/, this._takeAction(this._action, this._field, this._allFormsData, this._formData, this._previousFormData)];
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
+        return Actions;
+    }());
+    __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 = {}));
+
+    var Sources = /** @class */ (function () {
+        function Sources(field, formData, previousFormData, allFormsData) {
+            this._field = field;
+            this._formData = formData;
+            this._previousFormData = previousFormData;
+            this._allFormsData = allFormsData;
+        }
+        Object.defineProperty(Sources.prototype, "formData", {
+            get: function () {
+                return this._formData;
+            },
+            set: function (value) {
+                this._formData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Sources.prototype, "previousFormData", {
+            get: function () {
+                return this._previousFormData;
+            },
+            set: function (value) {
+                this._previousFormData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Sources.prototype, "allFormsData", {
+            get: function () {
+                return this._allFormsData;
+            },
+            set: function (value) {
+                this._allFormsData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Sources.prototype, "field", {
+            get: function () {
+                return this._field;
+            },
+            set: function (value) {
+                this._field = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Sources.prototype.getValueFromFieldConfig = function (path) {
+            var value = "";
+            if (isNotEmpty(path)) {
+                value = jpQueryWrapper(this._field, path);
+            }
+            else {
+                value = setEmptyValue(this._field);
+            }
+            return value;
+        };
+        Sources.prototype.getValueFromFormData = function (path) {
+            var value;
+            value = jpQueryWrapper(this._formData, path);
+            return value;
+        };
+        Sources.prototype.getValueFromPreviousFormData = function (path) {
+            var value;
+            value = jpQueryWrapper(this._previousFormData, path);
+            return value;
+        };
+        Sources.prototype.getValueFromAllFormsData = function (path) {
+            var value;
+            value = jpQueryWrapper(this._allFormsData, path);
+            return value;
+        };
+        Sources.prototype.getValueFromBrowserStorage = function (type, key) {
+            var 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;
+        };
+        Sources.prototype.getValueFromSource = function (source) {
+            var 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;
+        };
+        Sources.prototype.setValueToFieldConfig = function (path, value) {
+            this._field = setValueToObject(this._field, path, value);
+        };
+        Sources.prototype.setValueToFormData = function (path, value) {
+            this._formData = setValueToObject(this._formData, path, value);
+        };
+        Sources.prototype.setValueToAllFormsData = function (path, value) {
+            this._allFormsData = setValueToObject(this._allFormsData, path, value);
+        };
+        Sources.prototype.setValueToPreviousFromData = function (path, value) {
+            this._previousFormData = setValueToObject(this._previousFormData, path, value);
+        };
+        Sources.prototype.setValueToBrowserStorage = function (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;
+            }
+        };
+        Sources.prototype.setValueToSource = function (source, value) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = source.key;
+                            switch (_a) {
+                                case ESourceKey.FIELD_CONFIG: return [3 /*break*/, 1];
+                                case ESourceKey.FORM_DATA: return [3 /*break*/, 2];
+                                case ESourceKey.ALL_FORMS_DATA: return [3 /*break*/, 3];
+                                case ESourceKey.PREVIOUS_FORM_DATA: return [3 /*break*/, 4];
+                                case ESourceKey.BROWSER_STORAGE: return [3 /*break*/, 5];
+                            }
+                            return [3 /*break*/, 7];
+                        case 1:
+                            this._field = this.setValueToFieldConfig(source.props.path, value);
+                            return [3 /*break*/, 8];
+                        case 2:
+                            this._formData = this.setValueToFormData(source.props.path, value);
+                            return [3 /*break*/, 8];
+                        case 3:
+                            this._allFormsData = this.setValueToAllFormsData(source.props.path, value);
+                            return [3 /*break*/, 8];
+                        case 4:
+                            this._previousFormData = this.setValueToPreviousFromData(source.props.path, value);
+                            return [3 /*break*/, 8];
+                        case 5: return [4 /*yield*/, this.setValueToBrowserStorage(source.props.browserStorage.type, source.props.browserStorage.key, value)];
+                        case 6:
+                            _b.sent();
+                            return [3 /*break*/, 8];
+                        case 7: return [3 /*break*/, 8];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return Sources;
+    }());
+    __decorate([
+        log
+    ], Sources.prototype, "getValueFromSource", null);
+    __decorate([
+        log
+    ], Sources.prototype, "setValueToSource", null);
+
+    var Rules = /** @class */ (function () {
+        function Rules(rules, field, formData, previousFormData, allFormsData) {
+            this._field = field;
+            this._formData = formData;
+            this._previousFormData = previousFormData;
+            this._allFormsData = allFormsData;
+            this._rules = rules;
+        }
+        Rules.prototype.evaluate = function (rule) {
+            var ruleType = rule.key;
+            var ruleEvaluationStatus = false;
+            if (this._field.type === "radio") {
+                this._formData[this._field.key] = this._formData[this._field.key].label;
+            }
+            var source = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+            switch (ruleType) {
+                case ERuleKey.OBJECT_PATH_EXISTS:
+                    var ruleObjectPathExists = rule;
+                    var ruleObjectPathExistsObject = ruleObjectPathExists.props.object;
+                    var 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:
+                    var ruleValueCheck = rule;
+                    var ruleValueCheckSource = ruleValueCheck.props.value.source;
+                    var 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:
+                    var ruleValueChange = rule;
+                    var ruleValueChangeCurrentSource = ruleValueChange.props.value.current.source;
+                    var ruleValueChangePreviousSource = ruleValueChange.props.value.previous.source;
+                    var previousValue = source.getValueFromSource(ruleValueChangePreviousSource);
+                    var currentValue = source.getValueFromSource(ruleValueChangeCurrentSource);
+                    ruleEvaluationStatus = previousValue === currentValue;
+                    break;
+                default:
+                    break;
+            }
+            return ruleEvaluationStatus;
+        };
+        Rules.prototype.mapping = function () {
+            var e_1, _a, _b;
+            var rulesEvaluationMapping = {};
+            try {
+                for (var _c = __values(this._rules), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var rule = _d.value;
+                    var ruleEvaluationStatus = this.evaluate(rule);
+                    rulesEvaluationMapping = Object.assign(Object.assign({}, rulesEvaluationMapping), (_b = {}, _b[rule.id] = ruleEvaluationStatus, _b));
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return rulesEvaluationMapping;
+        };
+        return Rules;
+    }());
+    __decorate([
+        log
+    ], Rules.prototype, "evaluate", null);
+    __decorate([
+        log
+    ], Rules.prototype, "mapping", null);
+
+    var Defaults = /** @class */ (function () {
+        function Defaults(field, allFormsData, formData, previousFormData, takeAction) {
+            this._field = field;
+            this._allFormsData = allFormsData;
+            this._formData = formData;
+            this._previousFormData = previousFormData;
+            this._takeAction = takeAction;
+        }
+        Defaults.prototype.getDefaultValue = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var defaultValue, sources, sourceIndex, sources_1, sources_1_1, source, sources_2, value, validation, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_1_1, e_2_1;
+                var e_2, _a, e_1, _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            sources = this._field.default.value.sources;
+                            sourceIndex = 0;
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 13, 14, 15]);
+                            sources_1 = __values(sources), sources_1_1 = sources_1.next();
+                            _c.label = 2;
+                        case 2:
+                            if (!!sources_1_1.done) return [3 /*break*/, 12];
+                            source = sources_1_1.value;
+                            sources_2 = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+                            value = sources_2.getValueFromSource(source);
+                            // Set the Value of current source.
+                            this._field = setValueToObject(this._field, "default.value.sources.[" + sourceIndex + "].value", value);
+                            validation = source.validation;
+                            triggers = validation.triggers;
+                            rules = validation.rules;
+                            actions = validation.actions;
+                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            _c.label = 3;
+                        case 3:
+                            _c.trys.push([3, 8, 9, 10]);
+                            actions_1 = (e_1 = void 0, __values(actions)), actions_1_1 = actions_1.next();
+                            _c.label = 4;
+                        case 4:
+                            if (!!actions_1_1.done) return [3 /*break*/, 7];
+                            action = actions_1_1.value;
+                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionEvaluation) return [3 /*break*/, 6];
+                            actions_2 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            return [4 /*yield*/, actions_2.execute()];
+                        case 5:
+                            _c.sent();
+                            _c.label = 6;
+                        case 6:
+                            actions_1_1 = actions_1.next();
+                            return [3 /*break*/, 4];
+                        case 7: return [3 /*break*/, 10];
+                        case 8:
+                            e_1_1 = _c.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 10];
+                        case 9:
+                            try {
+                                if (actions_1_1 && !actions_1_1.done && (_b = actions_1.return)) _b.call(actions_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 10:
+                            sourceIndex++;
+                            _c.label = 11;
+                        case 11:
+                            sources_1_1 = sources_1.next();
+                            return [3 /*break*/, 2];
+                        case 12: return [3 /*break*/, 15];
+                        case 13:
+                            e_2_1 = _c.sent();
+                            e_2 = { error: e_2_1 };
+                            return [3 /*break*/, 15];
+                        case 14:
+                            try {
+                                if (sources_1_1 && !sources_1_1.done && (_a = sources_1.return)) _a.call(sources_1);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                            return [7 /*endfinally*/];
+                        case 15:
+                            defaultValue = this._field.default.value.value;
+                            if (isEmpty$1(defaultValue)) {
+                                defaultValue = setEmptyValue(this._field);
+                            }
+                            return [2 /*return*/, defaultValue];
+                    }
+                });
+            });
+        };
+        return Defaults;
+    }());
+    __decorate([
+        log
+    ], Defaults.prototype, "getDefaultValue", null);
+
+    var Validations = /** @class */ (function () {
+        function Validations(field, formData, previousFormData, allFormsData, takeAction) {
+            this._field = field;
+            this._formData = formData;
+            this._previousFormData = previousFormData;
+            this._allFormsData = allFormsData;
+            this._takeAction = takeAction;
+        }
+        Object.defineProperty(Validations.prototype, "formData", {
+            get: function () {
+                return this._formData;
+            },
+            set: function (value) {
+                this._formData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Validations.prototype, "previousFormData", {
+            get: function () {
+                return this._previousFormData;
+            },
+            set: function (value) {
+                this._previousFormData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Validations.prototype, "allFormsData", {
+            get: function () {
+                return this._allFormsData;
+            },
+            set: function (value) {
+                this._allFormsData = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(Validations.prototype, "field", {
+            get: function () {
+                return this._field;
+            },
+            set: function (value) {
+                this._field = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Validations.prototype.getFieldValidators = function (field) {
+            var validators = [];
+            if (hasKey$1(field, "validators") &&
+                hasKey$1(field.validators, "min") &&
+                isNotEmpty(field.validators.min)) {
+                validators.push(i5.Validators.min(field.validators.min));
+            }
+            if (hasKey$1(field, "validators") &&
+                hasKey$1(field.validators, "max") &&
+                isNotEmpty(field.validators.max)) {
+                validators.push(i5.Validators.max(field.validators.max));
+            }
+            if (hasKey$1(field, "required") ||
+                (hasKey$1(field, "validators") && hasKey$1(field.validators, "required"))) {
+                validators.push(i5.Validators.required);
+            }
+            if (hasKey$1(field, "validators") &&
+                hasKey$1(field.validators, "minLength") &&
+                isNotEmpty(field.validators.minLength)) {
+                validators.push(i5.Validators.minLength(field.validators.minLength));
+            }
+            if (hasKey$1(field, "validators") &&
+                hasKey$1(field.validators, "maxLength") &&
+                isNotEmpty(field.validators.maxLength)) {
+                validators.push(i5.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(i5.Validators.pattern(field.validators.pattern.pattern));
+                }
+                else {
+                    validators.push(i5.Validators.pattern(EPattern[field.validators.pattern.key]));
+                }
+            }
+            if (hasKey$1(field, "validators") &&
+                hasKey$1(field.validators, "nullValidator") &&
+                isNotEmpty(field.validators.nullValidator)) {
+                validators.push(i5.Validators.nullValidator(field.validators.nullValidator));
+            }
+            return validators;
+        };
+        Validations.prototype.getFormValidationErrors = function (control) {
+            var errors = [];
+            var _loop_1 = function (key) {
+                var controlErrors = control.controls[key].errors;
+                if (controlErrors !== null && controlErrors !== undefined) {
+                    Object.keys(controlErrors).forEach(function (keyError) {
+                        errors.push({
+                            name: keyError,
+                            value: controlErrors[keyError]
+                        });
+                    });
+                }
+            };
+            for (var key in control.controls) {
+                _loop_1(key);
+            }
+            return errors;
+        };
+        Validations.prototype.findInvalidControlsRecursive = function (formToInvestigate) {
+            var controls = [];
+            var recursiveFunc = function (form) {
+                Object.keys(form.controls).forEach(function (field) {
+                    var control = form.get(field);
+                    if (control.invalid) {
+                        controls.push({
+                            key: field,
+                            invalid: true
+                        });
+                    }
+                    else {
+                        controls.push({
+                            key: field,
+                            invalid: false
+                        });
+                    }
+                    if (control instanceof i5.FormGroup) {
+                        recursiveFunc(control);
+                    }
+                    else if (control instanceof i5.FormArray) {
+                        recursiveFunc(control);
+                    }
+                });
+            };
+            recursiveFunc(formToInvestigate);
+            return controls;
+        };
+        Validations.prototype.validateField = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var validations, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_1_1;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            validations = this._field.validation;
+                            triggers = validations.triggers;
+                            rules = validations.rules;
+                            actions = validations.actions;
+                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, 7, 8]);
+                            actions_1 = __values(actions), actions_1_1 = actions_1.next();
+                            _b.label = 2;
+                        case 2:
+                            if (!!actions_1_1.done) return [3 /*break*/, 5];
+                            action = actions_1_1.value;
+                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionEvaluation) return [3 /*break*/, 4];
+                            actions_2 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            return [4 /*yield*/, actions_2.execute()];
+                        case 3:
+                            _b.sent();
+                            _b.label = 4;
+                        case 4:
+                            actions_1_1 = actions_1.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_1_1 = _b.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (actions_1_1 && !actions_1_1.done && (_a = actions_1.return)) _a.call(actions_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return Validations;
+    }());
+    __decorate([
+        log
+    ], Validations.prototype, "getFieldValidators", null);
+    __decorate([
+        log
+    ], Validations.prototype, "getFormValidationErrors", null);
+    __decorate([
+        log
+    ], Validations.prototype, "findInvalidControlsRecursive", null);
+    __decorate([
+        log
+    ], Validations.prototype, "validateField", null);
+
+    var KwikIDFormViewService = /** @class */ (function () {
+        function KwikIDFormViewService() {
+        }
+        // 'init' stage of the form
+        KwikIDFormViewService.prototype.createFormGroup = function (fields, formData, previousFormData, allFormsData, takeAction) {
+            return __awaiter(this, void 0, void 0, function () {
+                var formGroup, fields_1, fields_1_1, field, defaults, value, validators, e_1_1;
+                var e_1, _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            formGroup = new i5.FormGroup({});
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 6, 7, 8]);
+                            fields_1 = __values(fields), fields_1_1 = fields_1.next();
+                            _b.label = 2;
+                        case 2:
+                            if (!!fields_1_1.done) return [3 /*break*/, 5];
+                            field = fields_1_1.value;
+                            if (!(field.type !== "title")) return [3 /*break*/, 4];
+                            defaults = new Defaults(field, allFormsData, formData, previousFormData, takeAction);
+                            return [4 /*yield*/, defaults.getDefaultValue()];
+                        case 3:
+                            value = _b.sent();
+                            validators = new Validations(field, formData, previousFormData, allFormsData, takeAction).getFieldValidators(field);
+                            formGroup.addControl(field.key, new i5.FormControl({ value: value, disabled: field.disabled }, { validators: validators }));
+                            _b.label = 4;
+                        case 4:
+                            fields_1_1 = fields_1.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_1_1 = _b.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/, formGroup];
+                    }
+                });
+            });
+        };
+        return KwikIDFormViewService;
+    }());
+    __decorate([
+        log
+    ], KwikIDFormViewService.prototype, "createFormGroup", null);
+
+    var Apis = /** @class */ (function () {
+        function Apis(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;
+        }
+        Apis.prototype.setRequestBodyParams = function () {
+            var _a, _b, _c;
+            return __awaiter(this, void 0, void 0, function () {
+                var params, paramIndex, params_1, params_1_1, param, sources, sourceIndex, sources_1, sources_1_1, source, sources_2, value, validation, triggers, rules, actions, rulesMapping, actions_1, actions_1_1, action, conditionEvaluation, actions_2, e_1_1, e_2_1, e_3_1;
+                var e_3, _d, e_2, _e, e_1, _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            params = this._request.body.params;
+                            paramIndex = 0;
+                            _g.label = 1;
+                        case 1:
+                            _g.trys.push([1, 20, 21, 22]);
+                            params_1 = __values(params), params_1_1 = params_1.next();
+                            _g.label = 2;
+                        case 2:
+                            if (!!params_1_1.done) return [3 /*break*/, 19];
+                            param = params_1_1.value;
+                            sources = param.sources;
+                            sourceIndex = 0;
+                            _g.label = 3;
+                        case 3:
+                            _g.trys.push([3, 15, 16, 17]);
+                            sources_1 = (e_2 = void 0, __values(sources)), sources_1_1 = sources_1.next();
+                            _g.label = 4;
+                        case 4:
+                            if (!!sources_1_1.done) return [3 /*break*/, 14];
+                            source = sources_1_1.value;
+                            sources_2 = new Sources(this._field, this._formData, this._previousFormData, this._allFormsData);
+                            value = sources_2.getValueFromSource(source);
+                            // Set the Value of current source.
+                            this._field = setValueToObject(this._field, "api.request.body.params[" + paramIndex + "].sources[" + sourceIndex + "].value", value);
+                            validation = source.validation;
+                            triggers = (_a = validation === null || validation === void 0 ? void 0 : validation.triggers) !== null && _a !== void 0 ? _a : [];
+                            rules = (_b = validation === null || validation === void 0 ? void 0 : validation.rules) !== null && _b !== void 0 ? _b : [];
+                            actions = (_c = validation === null || validation === void 0 ? void 0 : validation.actions) !== null && _c !== void 0 ? _c : [];
+                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            _g.label = 5;
+                        case 5:
+                            _g.trys.push([5, 10, 11, 12]);
+                            actions_1 = (e_1 = void 0, __values(actions)), actions_1_1 = actions_1.next();
+                            _g.label = 6;
+                        case 6:
+                            if (!!actions_1_1.done) return [3 /*break*/, 9];
+                            action = actions_1_1.value;
+                            conditionEvaluation = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionEvaluation) return [3 /*break*/, 8];
+                            actions_2 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            return [4 /*yield*/, actions_2.execute()];
+                        case 7:
+                            _g.sent();
+                            _g.label = 8;
+                        case 8:
+                            actions_1_1 = actions_1.next();
+                            return [3 /*break*/, 6];
+                        case 9: return [3 /*break*/, 12];
+                        case 10:
+                            e_1_1 = _g.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 12];
+                        case 11:
+                            try {
+                                if (actions_1_1 && !actions_1_1.done && (_f = actions_1.return)) _f.call(actions_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 12:
+                            sourceIndex++;
+                            _g.label = 13;
+                        case 13:
+                            sources_1_1 = sources_1.next();
+                            return [3 /*break*/, 4];
+                        case 14: return [3 /*break*/, 17];
+                        case 15:
+                            e_2_1 = _g.sent();
+                            e_2 = { error: e_2_1 };
+                            return [3 /*break*/, 17];
+                        case 16:
+                            try {
+                                if (sources_1_1 && !sources_1_1.done && (_e = sources_1.return)) _e.call(sources_1);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                            return [7 /*endfinally*/];
+                        case 17:
+                            paramIndex++;
+                            _g.label = 18;
+                        case 18:
+                            params_1_1 = params_1.next();
+                            return [3 /*break*/, 2];
+                        case 19: return [3 /*break*/, 22];
+                        case 20:
+                            e_3_1 = _g.sent();
+                            e_3 = { error: e_3_1 };
+                            return [3 /*break*/, 22];
+                        case 21:
+                            try {
+                                if (params_1_1 && !params_1_1.done && (_d = params_1.return)) _d.call(params_1);
+                            }
+                            finally { if (e_3) throw e_3.error; }
+                            return [7 /*endfinally*/];
+                        case 22: return [2 /*return*/, this._field];
+                    }
+                });
+            });
+        };
+        Apis.prototype.validateRequestBody = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var body, validation, triggers, rules, actions, rulesMapping, actions_3, actions_3_1, action, conditionSuccess, actions_4, e_4_1;
+                var e_4, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            body = this._request.body;
+                            validation = body.validation;
+                            triggers = validation.triggers;
+                            rules = validation.rules;
+                            actions = validation.actions;
+                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            _e.label = 1;
+                        case 1:
+                            _e.trys.push([1, 6, 7, 8]);
+                            actions_3 = __values(actions), actions_3_1 = actions_3.next();
+                            _e.label = 2;
+                        case 2:
+                            if (!!actions_3_1.done) return [3 /*break*/, 5];
+                            action = actions_3_1.value;
+                            conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionSuccess) return [3 /*break*/, 4];
+                            actions_4 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            return [4 /*yield*/, actions_4.execute()];
+                        case 3:
+                            _e.sent();
+                            _e.label = 4;
+                        case 4:
+                            actions_3_1 = actions_3.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_4_1 = _e.sent();
+                            e_4 = { error: e_4_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (actions_3_1 && !actions_3_1.done && (_d = actions_3.return)) _d.call(actions_3);
+                            }
+                            finally { if (e_4) throw e_4.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/, this._field];
+                    }
+                });
+            });
+        };
+        Apis.prototype.validateApiCallResponse = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var validation, triggers, rules, actions, rulesMapping, actions_5, actions_5_1, action, conditionSuccess, actions_6, e_5_1;
+                var e_5, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            validation = this._response.validation;
+                            triggers = validation.triggers;
+                            rules = validation.rules;
+                            actions = validation.actions;
+                            rulesMapping = new Rules(rules, this._field, this._formData, this._previousFormData, this._allFormsData).mapping();
+                            _e.label = 1;
+                        case 1:
+                            _e.trys.push([1, 6, 7, 8]);
+                            actions_5 = __values(actions), actions_5_1 = actions_5.next();
+                            _e.label = 2;
+                        case 2:
+                            if (!!actions_5_1.done) return [3 /*break*/, 5];
+                            action = actions_5_1.value;
+                            conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionSuccess) return [3 /*break*/, 4];
+                            actions_6 = new Actions(action, this._field, rulesMapping, this._allFormsData, this._formData, this._previousFormData, this._takeAction);
+                            return [4 /*yield*/, actions_6.execute()];
+                        case 3:
+                            _e.sent();
+                            _e.label = 4;
+                        case 4:
+                            actions_5_1 = actions_5.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_5_1 = _e.sent();
+                            e_5 = { error: e_5_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (actions_5_1 && !actions_5_1.done && (_d = actions_5.return)) _d.call(actions_5);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/, this._field];
+                    }
+                });
+            });
+        };
+        Apis.prototype.getPropsValues = function () {
+            return {
+                field: this._field,
+                formData: this._formData,
+                previousFormData: this._previousFormData,
+                allFormsData: this._allFormsData
+            };
+        };
+        return Apis;
+    }());
+    __decorate([
+        log
+    ], Apis.prototype, "setRequestBodyParams", null);
+    __decorate([
+        log
+    ], Apis.prototype, "validateRequestBody", null);
+    __decorate([
+        log
+    ], Apis.prototype, "validateApiCallResponse", null);
+
+    var findFieldFromKey = function (fields, key) {
+        var field = fields.find(function (field) {
+            if (field.key === key) {
+                return field;
+            }
+        });
+        return field;
+    };
+    var findFieldIndexFromKey = function (fields, key) {
+        var fieldIndex;
+        fieldIndex = fields.findIndex(function (_) {
+            return key === _.key;
+        });
+        return fieldIndex;
+    };
+    var getSearchTextOptionsFromRemoteFile = function (field, childField, formGroup) { return __awaiter(void 0, void 0, void 0, function () {
+        var parentFieldValue, fileUrl, fileKey, response, data;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    parentFieldValue = formGroup.controls[field.key].value;
+                    if (childField.regexToGetJsonRemoteUrlKey) {
+                        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 [2 /*return*/];
+                    return [4 /*yield*/, fetch(fileUrl)];
+                case 1:
+                    response = _a.sent();
+                    return [4 /*yield*/, response.json()];
+                case 2:
+                    data = _a.sent();
+                    // Return the data for the given parent field value
+                    return [2 /*return*/, data[parentFieldValue]];
+            }
+        });
+    }); };
+    var getSearchTextOptionsFromFieldConfig = function (field, childField, formGroup) {
+        var options;
+        var fieldValue = formGroup.controls[field.key].value;
+        if (isNotEmpty(childField["json"])) {
+            options = childField["json"][fieldValue];
+        }
+        return options;
+    };
+    var formatSearchTextOptions = function (options) {
+        return options.map(function (_a) {
+            var title = _a.title;
+            return title;
+        });
+    };
+    var formatDateToStandardFormat = function (date) {
+        var formattedDate;
+        var year = date.year;
+        var month = date.month;
+        var 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;
+    }
+    var addMessage = function (field, message) {
+        var isDuplicateMessage = function (messages, message) {
+            return messages.some(function (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;
+    };
+    var removeMessage = function (field, message) {
+        field["messages"] = field["messages"].filter(function (fieldMessage) {
+            return fieldMessage.type !== message.type;
+        });
+        return field;
+    };
+    function setFieldError(fields, errors, key, error) {
+        var fieldIndex = fields.findIndex(function (field) {
+            return field.key === key;
+        });
+        var setErrorMessages = function (field, errors) {
+            var getErrorMessage = function (fieldLabel, errorType) {
+                var 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(function (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;
+    }
+
+    var KwikIDFormViewComponent = /** @class */ (function () {
+        function KwikIDFormViewComponent(formViewService) {
+            this.formViewService = formViewService;
+            this.componentThis = this;
+            this.apiCallResponse = {};
+            this.isMobileView = false;
+            this.onClickViewForms = new i0.EventEmitter();
+            this.onClickSaveForm = new i0.EventEmitter();
+            this.onClickApiCall = new i0.EventEmitter();
+            this.getActiveFormData = new i0.EventEmitter();
+            this.formFields = [];
+            this.previousFormData = {};
+            this.loading = true;
+            this.viewFormsButton = {
+                disabled: false,
+                showLoader: false
+            };
+            this.saveFormButton = {
+                disabled: false,
+                showLoader: false
+            };
+            this.formGroup = new i5.FormGroup({});
+        }
+        KwikIDFormViewComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            (function () { return __awaiter(_this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.initFormConfig(this.formConfig)];
+                        case 1:
+                            _a.sent();
+                            this.loading = false;
+                            return [2 /*return*/];
+                    }
+                });
+            }); })();
+        };
+        KwikIDFormViewComponent.prototype.ngAfterViewInit = function () { };
+        KwikIDFormViewComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b;
+            var _this = this;
+            var verifyChange = function (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), (_a = {}, _a[this.apiCallResponse.key] = this.apiCallResponse.response, _a));
+                this.formGroup.patchValue((_b = {},
+                    _b[this.apiCallResponse.key] = this.apiCallResponse.response,
+                    _b), { emitEvent: false });
+                var field_1 = findFieldFromKey(this.formFields, this.apiCallResponse.key);
+                var apis_1 = new Apis(field_1, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                (function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, apis_1.validateApiCallResponse()];
+                            case 1:
+                                field_1 = _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); })();
+            }
+            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;
+                (function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, this.initFormConfig(this.formConfig)];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); })();
+            }
+        };
+        KwikIDFormViewComponent.prototype.initFormConfig = function (formConfig) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _loop_1, this_1, _b, _c, field, _loop_2, _d, _e, field;
+                var e_1, _f, e_2, _g;
+                var _this = this;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
+                        case 0:
+                            this.setFormFieldsFromFormConfig(formConfig);
+                            this.setFormDataFromAllFormsData();
+                            _a = this;
+                            return [4 /*yield*/, this.formViewService.createFormGroup(this.formFields, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this))];
+                        case 1:
+                            _a.formGroup = _h.sent();
+                            _loop_1 = function (field) {
+                                var _j;
+                                if (field.type !== "title") {
+                                    this_1.previousFormData = Object.assign(Object.assign({}, this_1.previousFormData), (_j = {}, _j[field.key] = this_1.formGroup.controls[field.key].value, _j));
+                                    this_1.formGroup.controls[field.key].valueChanges
+                                        .pipe(operators.pairwise())
+                                        .subscribe(function (_a) {
+                                        var _b, _c;
+                                        var _d = __read(_a, 2), previousValue = _d[0], currentValue = _d[1];
+                                        _this.previousFormData = Object.assign(Object.assign({}, _this.previousFormData), (_b = {}, _b[field.key] = previousValue, _b));
+                                        _this.formData = Object.assign(Object.assign({}, _this.formData), (_c = {}, _c[field.key] = currentValue, _c));
+                                    });
+                                }
+                            };
+                            this_1 = this;
+                            try {
+                                for (_b = __values(this.formFields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                    field = _c.value;
+                                    _loop_1(field);
+                                }
+                            }
+                            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                            finally {
+                                try {
+                                    if (_c && !_c.done && (_f = _b.return)) _f.call(_b);
+                                }
+                                finally { if (e_1) throw e_1.error; }
+                            }
+                            _loop_2 = function (field) {
+                                if (field.type !== "title") {
+                                    (function () { return __awaiter(_this, void 0, void 0, function () {
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0: return [4 /*yield*/, this.handleConnectedElements({
+                                                        key: field.key,
+                                                        value: this.formGroup.controls[field.key].value
+                                                    }, "ON_INIT")];
+                                                case 1:
+                                                    field = _a.sent();
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); })();
+                                }
+                            };
+                            try {
+                                for (_d = __values(this.formFields), _e = _d.next(); !_e.done; _e = _d.next()) {
+                                    field = _e.value;
+                                    _loop_2(field);
+                                }
+                            }
+                            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                            finally {
+                                try {
+                                    if (_e && !_e.done && (_g = _d.return)) _g.call(_d);
+                                }
+                                finally { if (e_2) throw e_2.error; }
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.setFormFieldsFromFormConfig = function (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;
+            }
+        };
+        KwikIDFormViewComponent.prototype.setFormDataFromAllFormsData = function () {
+            if (hasKey$1(this.allFormsData, this.formConfig.key)) {
+                this.formData = this.allFormsData[this.formConfig.key];
+            }
+            else {
+                this.formData = {};
+            }
+        };
+        KwikIDFormViewComponent.prototype.handleConnectedElementFieldActions = function (connectedFieldConfig, connectedField) {
+            return __awaiter(this, void 0, void 0, function () {
+                var rulesMapping, _a, _b, action, conditionSuccess, actions, e_3_1;
+                var e_3, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (!hasKey$1(connectedFieldConfig, "rules")) return [3 /*break*/, 8];
+                            rulesMapping = new Rules(connectedFieldConfig.rules, connectedField, this.formData, this.previousFormData, this.allFormsData).mapping();
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 6, 7, 8]);
+                            _a = __values(connectedFieldConfig.actions), _b = _a.next();
+                            _d.label = 2;
+                        case 2:
+                            if (!!_b.done) return [3 /*break*/, 5];
+                            action = _b.value;
+                            conditionSuccess = new Condition(action.condition, rulesMapping).evaluate();
+                            if (!conditionSuccess) return [3 /*break*/, 4];
+                            actions = new Actions(action, connectedField, rulesMapping, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
+                            return [4 /*yield*/, actions.execute()];
+                        case 3:
+                            _d.sent();
+                            _d.label = 4;
+                        case 4:
+                            _b = _a.next();
+                            return [3 /*break*/, 2];
+                        case 5: return [3 /*break*/, 8];
+                        case 6:
+                            e_3_1 = _d.sent();
+                            e_3 = { error: e_3_1 };
+                            return [3 /*break*/, 8];
+                        case 7:
+                            try {
+                                if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                            }
+                            finally { if (e_3) throw e_3.error; }
+                            return [7 /*endfinally*/];
+                        case 8: return [2 /*return*/, connectedField];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleConnectedElementFields = function (currentField, connectedFieldConfig, eventType) {
+            return __awaiter(this, void 0, void 0, function () {
+                var connectedField, _a, _b, _c, _d, _e, connectedFieldConfig_1;
+                var e_4, _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            connectedField = findFieldFromKey(this.formFields, connectedFieldConfig["key"]);
+                            _a = eventType;
+                            switch (_a) {
+                                case "INIT": return [3 /*break*/, 1];
+                                case "VALUE_CHANGE": return [3 /*break*/, 8];
+                                case "NESTED_LINK": return [3 /*break*/, 15];
+                            }
+                            return [3 /*break*/, 17];
+                        case 1:
+                            if (!(hasKey$1(connectedField, "triggers") &&
+                                connectedField.triggers.includes("INIT"))) return [3 /*break*/, 7];
+                            if (!this.isFieldEnabled(connectedField.key)) return [3 /*break*/, 5];
+                            if (!hasKey$1(connectedFieldConfig, "connectedParentFields")) return [3 /*break*/, 5];
+                            _b = connectedFieldConfig.type;
+                            switch (_b) {
+                                case "dropdown-with-search": return [3 /*break*/, 2];
+                            }
+                            return [3 /*break*/, 4];
+                        case 2: return [4 /*yield*/, this.handleFieldTypeSearchText(currentField, connectedField)];
+                        case 3:
+                            connectedField = _g.sent();
+                            return [3 /*break*/, 5];
+                        case 4: return [3 /*break*/, 5];
+                        case 5: return [4 /*yield*/, this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField)];
+                        case 6:
+                            connectedField = _g.sent();
+                            _g.label = 7;
+                        case 7: return [3 /*break*/, 20];
+                        case 8:
+                            if (!(hasKey$1(connectedFieldConfig, "triggers") &&
+                                connectedFieldConfig.triggers.includes("VALUE_CHANGE"))) return [3 /*break*/, 14];
+                            _c = connectedField.type;
+                            switch (_c) {
+                                case "dropdown-with-search": return [3 /*break*/, 9];
+                            }
+                            return [3 /*break*/, 11];
+                        case 9: return [4 /*yield*/, this.handleFieldTypeSearchText(currentField, connectedField)];
+                        case 10:
+                            connectedField = _g.sent();
+                            return [3 /*break*/, 12];
+                        case 11: return [3 /*break*/, 12];
+                        case 12: return [4 /*yield*/, this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField)];
+                        case 13:
+                            connectedField = _g.sent();
+                            _g.label = 14;
+                        case 14: return [3 /*break*/, 20];
+                        case 15:
+                            if (!(hasKey$1(connectedFieldConfig, "triggers") &&
+                                connectedFieldConfig.triggers.includes("NESTED_LINK"))) return [3 /*break*/, 17];
+                            return [4 /*yield*/, this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField)];
+                        case 16:
+                            connectedField = _g.sent();
+                            _g.label = 17;
+                        case 17:
+                            if (!hasKey$1(connectedFieldConfig, "triggers")) return [3 /*break*/, 19];
+                            return [4 /*yield*/, this.handleConnectedElementFieldActions(connectedFieldConfig, connectedField)];
+                        case 18:
+                            connectedField = _g.sent();
+                            _g.label = 19;
+                        case 19: return [3 /*break*/, 20];
+                        case 20:
+                            if (hasKey$1(connectedField, "connectedElements")) {
+                                try {
+                                    for (_d = __values(connectedField.connectedElements
+                                        .fields), _e = _d.next(); !_e.done; _e = _d.next()) {
+                                        connectedFieldConfig_1 = _e.value;
+                                        connectedField = this.handleConnectedElementFields(connectedField, connectedFieldConfig_1, "NESTED_LINK");
+                                    }
+                                }
+                                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                                finally {
+                                    try {
+                                        if (_e && !_e.done && (_f = _d.return)) _f.call(_d);
+                                    }
+                                    finally { if (e_4) throw e_4.error; }
+                                }
+                            }
+                            return [2 /*return*/, currentField];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleConnectedElements = function (e, eventType) {
+            var e_5, _a;
+            var currentField = findFieldFromKey(this.formFields, e.key);
+            if (hasKey$1(currentField, "connectedElements")) {
+                var connectedFields = currentField.connectedElements.connectedFields;
+                try {
+                    for (var connectedFields_1 = __values(connectedFields), connectedFields_1_1 = connectedFields_1.next(); !connectedFields_1_1.done; connectedFields_1_1 = connectedFields_1.next()) {
+                        var connectedFieldConfig = connectedFields_1_1.value;
+                        currentField = this.handleConnectedElementFields(currentField, connectedFieldConfig, eventType);
+                    }
+                }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                finally {
+                    try {
+                        if (connectedFields_1_1 && !connectedFields_1_1.done && (_a = connectedFields_1.return)) _a.call(connectedFields_1);
+                    }
+                    finally { if (e_5) throw e_5.error; }
+                }
+            }
+        };
+        // DOM Event Handlers
+        KwikIDFormViewComponent.prototype.handleGetKeyValue = function (e) {
+            var _a;
+            var _this = this;
+            this.formGroup.patchValue((_a = {},
+                _a[e.key] = e.value,
+                _a), { emitEvent: false });
+            // Currently set only for dropdown-with-search connected fields
+            var field = findFieldFromKey(this.formFields, e.key);
+            if (field.type !== "title" &&
+                field.validation.triggers.includes("ON_CHANGE")) {
+                var validations_1 = new Validations(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                (function () { return __awaiter(_this, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, validations_1.validateField()];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); })();
+                this.handleConnectedElements({
+                    key: field.key,
+                    value: this.formGroup.controls[field.key].value
+                }, "ON_CHANGE");
+            }
+        };
+        KwikIDFormViewComponent.prototype.handleOnClickResetFormFields = function (e, field) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, _b, f, _c, _d, a, resetField, actions, e_6_1, e_7_1;
+                var e_7, _e, e_6, _f;
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
+                        case 0:
+                            _g.trys.push([0, 11, 12, 13]);
+                            _a = __values(field.reset.fields), _b = _a.next();
+                            _g.label = 1;
+                        case 1:
+                            if (!!_b.done) return [3 /*break*/, 10];
+                            f = _b.value;
+                            _g.label = 2;
+                        case 2:
+                            _g.trys.push([2, 7, 8, 9]);
+                            _c = (e_6 = void 0, __values(f.actions)), _d = _c.next();
+                            _g.label = 3;
+                        case 3:
+                            if (!!_d.done) return [3 /*break*/, 6];
+                            a = _d.value;
+                            resetField = findFieldFromKey(this.formFields, a.props.fieldKey);
+                            actions = new Actions(a, resetField, {}, this.allFormsData, this.formData, this.previousFormData, this.takeAction.bind(this));
+                            return [4 /*yield*/, actions.execute()];
+                        case 4:
+                            _g.sent();
+                            _g.label = 5;
+                        case 5:
+                            _d = _c.next();
+                            return [3 /*break*/, 3];
+                        case 6: return [3 /*break*/, 9];
+                        case 7:
+                            e_6_1 = _g.sent();
+                            e_6 = { error: e_6_1 };
+                            return [3 /*break*/, 9];
+                        case 8:
+                            try {
+                                if (_d && !_d.done && (_f = _c.return)) _f.call(_c);
+                            }
+                            finally { if (e_6) throw e_6.error; }
+                            return [7 /*endfinally*/];
+                        case 9:
+                            _b = _a.next();
+                            return [3 /*break*/, 1];
+                        case 10: return [3 /*break*/, 13];
+                        case 11:
+                            e_7_1 = _g.sent();
+                            e_7 = { error: e_7_1 };
+                            return [3 /*break*/, 13];
+                        case 12:
+                            try {
+                                if (_b && !_b.done && (_e = _a.return)) _e.call(_a);
+                            }
+                            finally { if (e_7) throw e_7.error; }
+                            return [7 /*endfinally*/];
+                        case 13: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleOnClickApiCall = function (e) {
+            return __awaiter(this, void 0, void 0, function () {
+                var field, apis;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            field = findFieldFromKey(this.formFields, e.key);
+                            if (!(field.type === "api-call")) return [3 /*break*/, 3];
+                            // 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;
+                            apis = new Apis(field, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this));
+                            return [4 /*yield*/, apis.setRequestBodyParams()];
+                        case 1:
+                            field = _a.sent();
+                            return [4 /*yield*/, apis.validateRequestBody()];
+                        case 2:
+                            field = _a.sent();
+                            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(function () {
+                                    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;
+                            _a.label = 3;
+                        case 3: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleOnClickViewForms = function (e) {
+            this.onClickViewForms.emit({
+                clicked: true
+            });
+        };
+        KwikIDFormViewComponent.prototype.handleOnClickSaveForm = function (e) {
+            var e_8, _a, e_9, _b, e_10, _c;
+            var _this = this;
+            var formData = this.formGroup.getRawValue();
+            var _loop_3 = function (field) {
+                if (field.type !== "title" &&
+                    field.validation.triggers.includes("ON_SAVE")) {
+                    var validations_2 = new Validations(field, this_2.formData, this_2.previousFormData, this_2.allFormsData, this_2.takeAction.bind(this_2));
+                    (function () { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, validations_2.validateField()];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); })();
+                }
+            };
+            var this_2 = this;
+            try {
+                for (var _d = __values(this.formFields), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var field = _e.value;
+                    _loop_3(field);
+                }
+            }
+            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+                }
+                finally { if (e_8) throw e_8.error; }
+            }
+            if (this.formGroup.invalid) {
+                var controls = new Validations(undefined, this.formData, this.previousFormData, this.allFormsData, this.takeAction.bind(this)).findInvalidControlsRecursive(this.formGroup);
+                var firstFieldWithError = "";
+                try {
+                    for (var controls_1 = __values(controls), controls_1_1 = controls_1.next(); !controls_1_1.done; controls_1_1 = controls_1.next()) {
+                        var control = controls_1_1.value;
+                        if (control.invalid && isEmpty(firstFieldWithError)) {
+                            firstFieldWithError = control.key;
+                        }
+                        this.formFields = setFieldError(this.formFields, this.formGroup.controls[control.key].errors, control.key, control.invalid);
+                    }
+                }
+                catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                finally {
+                    try {
+                        if (controls_1_1 && !controls_1_1.done && (_b = controls_1.return)) _b.call(controls_1);
+                    }
+                    finally { if (e_9) throw e_9.error; }
+                }
+                return;
+            }
+            try {
+                // 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 (var _f = __values(this.formFields), _g = _f.next(); !_g.done; _g = _f.next()) {
+                    var field = _g.value;
+                    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;
+                    }
+                }
+            }
+            catch (e_10_1) { e_10 = { error: e_10_1 }; }
+            finally {
+                try {
+                    if (_g && !_g.done && (_c = _f.return)) _c.call(_f);
+                }
+                finally { if (e_10) throw e_10.error; }
+            }
+            Object.keys(formData).map(function (key) {
+                if (isEmpty(formData[key])) {
+                    formData[key] = "";
+                }
+            });
+            this.onClickSaveForm.emit({ data: formData });
+        };
+        // Component Helpers
+        KwikIDFormViewComponent.prototype.fieldHide = function (fieldKey) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            this.formFields[fieldIndex]["hidden"] = true;
+        };
+        KwikIDFormViewComponent.prototype.fieldShow = function (fieldKey) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            this.formFields[fieldIndex]["hidden"] = false;
+            this.formGroup.updateValueAndValidity();
+        };
+        KwikIDFormViewComponent.prototype.fieldDisable = function (fieldKey) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            this.formFields[fieldIndex]["disabled"] = true;
+            if (isNotEmpty(this.formGroup.controls)) {
+                this.formGroup.controls[field.key].disable({
+                    emitEvent: false
+                });
+            }
+        };
+        KwikIDFormViewComponent.prototype.fieldEnable = function (fieldKey) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            this.formFields[fieldIndex]["disabled"] = false;
+            if (isNotEmpty(this.formGroup.controls)) {
+                this.formGroup.controls[field.key].enable({
+                    emitEvent: false
+                });
+            }
+        };
+        KwikIDFormViewComponent.prototype.fieldReset = function (fieldKey) {
+            // Find the field and its index in the formFields array
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var 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":
+                    var 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;
+            }
+        };
+        KwikIDFormViewComponent.prototype.fieldErrorShow = function (fieldKey, message) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            field = highlightFieldError(field, true);
+            field = addMessage(field, message);
+            this.formFields[fieldIndex] = field;
+        };
+        KwikIDFormViewComponent.prototype.fieldErrorHide = function (fieldKey, message) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            field = highlightFieldError(field, false);
+            field = removeMessage(field, message);
+            this.formFields[fieldIndex] = field;
+        };
+        KwikIDFormViewComponent.prototype.fieldMessageShow = function (fieldKey, message) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            field = addMessage(field, message);
+            this.formFields[fieldIndex] = field;
+        };
+        KwikIDFormViewComponent.prototype.fieldMessageHide = function (fieldKey, message) {
+            var field = findFieldFromKey(this.formFields, fieldKey);
+            var fieldIndex = this.formFields.findIndex(function (_) {
+                return field.key === _.key;
+            });
+            field = removeMessage(field, message);
+            this.formFields[fieldIndex] = field;
+        };
+        KwikIDFormViewComponent.prototype.setObjectValue = function (field, path, value) { };
+        KwikIDFormViewComponent.prototype.patchFieldControlValue = function (key, value) {
+            var _a;
+            this.formGroup.patchValue((_a = {},
+                _a[key] = value,
+                _a), { emitEvent: false });
+        };
+        KwikIDFormViewComponent.prototype.isFieldValid = function (fieldKey) {
+            return this.formGroup.controls[fieldKey].valid;
+        };
+        KwikIDFormViewComponent.prototype.isFieldEnabled = function (fieldKey) {
+            return this.formGroup.controls[fieldKey].enabled;
+        };
+        KwikIDFormViewComponent.prototype.getFormGroupRawValues = function () {
+            return this.formGroup.getRawValue();
+        };
+        KwikIDFormViewComponent.prototype.handleFieldTypeSearchText = function (field, childField) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (hasKey$1(childField, "json")) {
+                                childField.options = getSearchTextOptionsFromFieldConfig(field, childField, this.formGroup);
+                            }
+                            if (!hasKey$1(childField, "fetchJsonFromRemote")) return [3 /*break*/, 2];
+                            _a = childField;
+                            return [4 /*yield*/, getSearchTextOptionsFromRemoteFile(field, childField, this.formGroup)];
+                        case 1:
+                            _a.options = _b.sent();
+                            _b.label = 2;
+                        case 2: return [2 /*return*/, childField];
+                    }
+                });
+            });
+        };
+        KwikIDFormViewComponent.prototype.takeAction = function (action, field, allFormsData, formData, previousFormData) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _a, sources, sourceValue;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _a = action.key;
+                            switch (_a) {
+                                case EActionKey.FIELD_HIDE: return [3 /*break*/, 1];
+                                case EActionKey.FIELD_SHOW: return [3 /*break*/, 2];
+                                case EActionKey.FIELD_DISABLE: return [3 /*break*/, 3];
+                                case EActionKey.FIELD_ENABLE: return [3 /*break*/, 4];
+                                case EActionKey.FIELD_RESET: return [3 /*break*/, 5];
+                                case EActionKey.FIELD_ERROR_SHOW: return [3 /*break*/, 6];
+                                case EActionKey.FIELD_ERROR_HIDE: return [3 /*break*/, 7];
+                                case EActionKey.FIELD_MESSAGE_SHOW: return [3 /*break*/, 8];
+                                case EActionKey.FIELD_MESSAGES_HIDE: return [3 /*break*/, 9];
+                                case EActionKey.SET_VALUE: return [3 /*break*/, 10];
+                                case EActionKey.HANDLE_CONNECTED_ELEMENTS: return [3 /*break*/, 12];
+                                case EActionKey.CUSTOM: return [3 /*break*/, 13];
+                            }
+                            return [3 /*break*/, 14];
+                        case 1:
+                            this.fieldHide(action.props.fieldKey);
+                            return [3 /*break*/, 15];
+                        case 2:
+                            this.fieldShow(action.props.fieldKey);
+                            return [3 /*break*/, 15];
+                        case 3:
+                            this.fieldDisable(action.props.fieldKey);
+                            return [3 /*break*/, 15];
+                        case 4:
+                            this.fieldEnable(action.props.fieldKey);
+                            return [3 /*break*/, 15];
+                        case 5:
+                            this.fieldReset(action.props.fieldKey);
+                            return [3 /*break*/, 15];
+                        case 6:
+                            this.fieldErrorShow(action.props.fieldKey, action.props.message);
+                            return [3 /*break*/, 15];
+                        case 7:
+                            this.fieldErrorHide(action.props.fieldKey, action.props.message);
+                            return [3 /*break*/, 15];
+                        case 8:
+                            this.fieldMessageShow(action.props.fieldKey, action.props.message);
+                            return [3 /*break*/, 15];
+                        case 9:
+                            this.fieldMessageHide(action.props.fieldKey, action.props.message);
+                            return [3 /*break*/, 15];
+                        case 10:
+                            sources = new Sources(field, this.formData, this.previousFormData, this.allFormsData);
+                            return [4 /*yield*/, sources.getValueFromSource(action.props.value.source)];
+                        case 11:
+                            sourceValue = _b.sent();
+                            sources.setValueToSource(action.props.value.destination, sourceValue);
+                            field = sources.field;
+                            this.formData = sources.formData;
+                            this.allFormsData = sources.allFormsData;
+                            this.previousFormData = sources.previousFormData;
+                            return [3 /*break*/, 15];
+                        case 12:
+                            this.handleConnectedElements({ key: field.key }, "ACTION");
+                            return [3 /*break*/, 15];
+                        case 13: return [3 /*break*/, 15];
+                        case 14: return [3 /*break*/, 15];
+                        case 15: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return KwikIDFormViewComponent;
+    }());
+    /** @nocollapse */ KwikIDFormViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewComponent, deps: [{ token: KwikIDFormViewService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ KwikIDFormViewComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIMessagesComponent, selector: "kwikui-messages", inputs: ["messages", "id"] }, { type: i2__namespace.KwikUICheckboxBlockComponent, selector: "kwikui-checkbox-block", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "contentAlign", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.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__namespace.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputPhoneComponent, selector: "kwikui-input-phone", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "countryCode", "phoneMaskAfterCountryCode", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i3__namespace.TuiLabelComponent, selector: "label[tuiLabel]", inputs: ["tuiLabel", "context"] }, { type: i2__namespace.KwikUIRadioListComponent, selector: "kwikui-radio-list", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "size", "items", "orientation", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUISelectComboboxComponent, selector: "kwikui-select-combobox", inputs: ["label", "id", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "options", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIButtonApiCallComponent, selector: "kwikui-button-api-call", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "shape", "size", "apiStatus"], outputs: ["onClick"] }, { type: i2__namespace.KwikUIInputOtpComponent, selector: "kwikui-input-otp", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }, { type: i2__namespace.KwikUIInputAadhaarComponent, selector: "kwikui-input-aadhaar", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "mask", "validators", "properties"], outputs: ["getKeyValue"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5__namespace.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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewComponent, decorators: [{
+                type: i0.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: i0.Input
+                }], formData: [{
+                    type: i0.Input
+                }], apiCallResponse: [{
+                    type: i0.Input
+                }], isMobileView: [{
+                    type: i0.Input
+                }], allFormsData: [{
+                    type: i0.Input
+                }], formsList: [{
+                    type: i0.Input
+                }], onClickViewForms: [{
+                    type: i0.Output
+                }], onClickSaveForm: [{
+                    type: i0.Output
+                }], onClickApiCall: [{
+                    type: i0.Output
+                }], getActiveFormData: [{
+                    type: i0.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: [] } });
+
+    var hasKey = function (object, key) {
+        return object.hasOwnProperty(key);
+    };
+
+    var KwikIDFormsListComponent = /** @class */ (function () {
+        function KwikIDFormsListComponent() {
+            this.formsList = [];
+            this.formsListCompleted = [];
+            this.isMobileView = false;
+            this.onClickSetActiveForm = new i0.EventEmitter();
+            this.onClickHideFormsList = new i0.EventEmitter();
+            this.onClickSubmitForms = new i0.EventEmitter();
+            this.selectedForm = "";
+        }
+        KwikIDFormsListComponent.prototype.ngOnInit = function () { };
+        KwikIDFormsListComponent.prototype.ngOnChanges = function (changes) {
+            var verifyChange = function (key) {
+                return hasKey(changes, key) && !changes[key].firstChange;
+            };
+            if (verifyChange("formsList")) {
+                this.formsList = changes.formsList.currentValue;
+            }
+            if (verifyChange("isMobileView")) {
+                this.isMobileView = changes.isMobileView.currentValue;
+            }
+        };
+        KwikIDFormsListComponent.prototype.handleOnClickSetActiveForm = function (selectedForm) {
+            if (this.selectedForm !== selectedForm) {
+                this.selectedForm = selectedForm;
+                this.onClickSetActiveForm.emit(selectedForm);
+            }
+        };
+        KwikIDFormsListComponent.prototype.handleOnSubmitForms = function (e) {
+            this.onClickSubmitForms.emit(e);
+        };
+        return KwikIDFormsListComponent;
+    }());
+    /** @nocollapse */ KwikIDFormsListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ KwikIDFormsListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.KwikUIProgressSegmentedComponent, selector: "kwikui-progress-segmented", inputs: ["value", "max", "size", "colors"] }, { type: i3__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: i2__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "kwikid-forms-list",
+                        templateUrl: "./forms-list.component.html",
+                        styleUrls: ["./forms-list.component.scss"]
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { formsList: [{
+                    type: i0.Input
+                }], formsListCompleted: [{
+                    type: i0.Input
+                }], isMobileView: [{
+                    type: i0.Input
+                }], onClickSetActiveForm: [{
+                    type: i0.Output
+                }], onClickHideFormsList: [{
+                    type: i0.Output
+                }], onClickSubmitForms: [{
+                    type: i0.Output
+                }] } });
+
+    var Converter = /** @class */ (function () {
+        function Converter() {
+            this.getFormFields = function (formConfig) {
+                var fields;
+                if (hasKey$2(formConfig, "multiForm")) {
+                    fields = formConfig.multiForm.fields;
+                }
+                else {
+                    fields = formConfig.fields;
+                }
+                return fields;
+            };
+            this.setMissingFieldKeyValue = function (field, key, value) {
+                if (!hasKey$2(field, key)) {
+                    field[key] = value;
+                }
+                return field;
+            };
+            this.setFieldKeyValue = function (field, key, value) {
+                field[key] = value;
+                return field;
+            };
+            this.removeFieldKey = function (field, key) {
+                if (hasKey$2(field, key)) {
+                    delete field[key];
+                }
+                return field;
+            };
+        }
+        Converter.prototype.convertFormConfig = function (formConfig) {
+            var e_1, _a;
+            var _this = this;
+            var updateOnFieldType = function (field) {
+                var formatFieldTypeTitle = function (field) {
+                    var fieldKey = field.type + "_" + field.label
+                        .split(" ")
+                        .join("_")
+                        .toLocaleLowerCase();
+                    field = _this.setFieldKeyValue(field, "key", fieldKey);
+                    field = _this.setFieldKeyValue(field, "hidden", false);
+                    return field;
+                };
+                var formatFieldTypeRadio = function (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(function (x) {
+                        return { label: x, disabled: false };
+                    });
+                    return field;
+                };
+                var formatFieldTypeOtp = function (field) {
+                    field.properties = _this.setMissingFieldKeyValue(field.properties, "mask", new Array(field.properties.otpLength).fill("#").join(" "));
+                    field = _this.setFieldKeyValue(field, "hidden", false);
+                    return field;
+                };
+                var formatFieldTypeDate = function (field) {
+                    var convertDateStringToTuiDayFormat = function (date) {
+                        var splitDate = date.split("-");
+                        var tuiDay = new cdk.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")) {
+                        var tuiDay = convertDateStringToTuiDayFormat(field["min"]);
+                        field.properties = _this.setFieldKeyValue(field.properties, "min", tuiDay);
+                    }
+                    else {
+                        field.properties = _this.setMissingFieldKeyValue(field.properties, "min", new cdk.TuiDay(0, 0, 1)); // Year - 0000, Month - 0 (0 Indexing), Day - 1
+                    }
+                    if (hasKey$2(field, "max")) {
+                        var tuiDay = convertDateStringToTuiDayFormat(field["max"]);
+                        field.properties = _this.setFieldKeyValue(field.properties, "max", tuiDay);
+                    }
+                    else {
+                        field.properties = _this.setMissingFieldKeyValue(field.properties, "max", new cdk.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;
+                };
+                var formatFieldTypeNumber = function (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;
+                };
+                var formatFieldTypeApiCall = function (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;
+                };
+                var formatFieldTypeSearchText = function (field) {
+                    if (hasKey$2(field, "type")) {
+                        if (field.type === "search-text") {
+                            field = _this.setFieldKeyValue(field, "type", "dropdown-with-search");
+                        }
+                    }
+                    return field;
+                };
+                var formatFieldTypeText = function (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;
+            };
+            var getConnectedElementKeyValueObject = function (key) {
+                var object = {
+                    key: key,
+                    conditions: { formula: "", rules: [] },
+                    actions: { success: [], failure: [] }
+                };
+                return object;
+            };
+            var formatFieldKeys = function (field) {
+                if (hasKey$2(field, "connectedTo")) {
+                    if (typeof field["connectedTo"] === "string") {
+                        field["connectedElements"] = [
+                            getConnectedElementKeyValueObject(field["connectedTo"])
+                        ];
+                    }
+                    else {
+                        field["connectedTo"] = field["connectedTo"].map(function (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;
+            };
+            var getConnectedElementFieldMapping = function (field, connectedFieldMapping) {
+                var getConnectedElementChildFieldMapping = function (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 };
+                };
+                var getConnectedElementParentFieldMapping = function (field, connectedFieldMapping) {
+                    var e_2, _a;
+                    console.log(field, connectedFieldMapping);
+                    if (hasKey$2(connectedFieldMapping["child"], field.key)) {
+                        try {
+                            for (var _b = __values(connectedFieldMapping["child"][field.key]), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                var connectedParentKey = _c.value;
+                                if (hasKey$2(connectedFieldMapping["parent"], connectedParentKey["key"])) {
+                                    connectedFieldMapping["parent"][connectedParentKey["key"]].push(field.key);
+                                }
+                                else {
+                                    connectedFieldMapping["parent"][connectedParentKey["key"]] = [
+                                        field.key
+                                    ];
+                                }
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                    }
+                    return { field: field, connectedFieldMapping: connectedFieldMapping };
+                };
+                var connectedChildFieldMapping = getConnectedElementChildFieldMapping(field, connectedFieldMapping);
+                field = connectedChildFieldMapping["field"];
+                connectedFieldMapping =
+                    connectedChildFieldMapping["connectedFieldMapping"];
+                var connectedParentFieldMapping = getConnectedElementParentFieldMapping(field, connectedFieldMapping);
+                field = connectedParentFieldMapping["field"];
+                connectedFieldMapping =
+                    connectedParentFieldMapping["connectedFieldMapping"];
+                return connectedFieldMapping;
+            };
+            var updateConnectedElementsKeyValue = function (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;
+            };
+            var updateFieldValidatorConfig = function (field) {
+                if (field.type !== "title") {
+                    var 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;
+            };
+            var updateFieldDefaultValueConfig = function (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;
+            };
+            var updateFieldMessages = function (field) {
+                if (field.type !== "title") {
+                    field = _this.setMissingFieldKeyValue(field, "messages", []);
+                }
+                return field;
+            };
+            var updateFieldResetButton = function (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;
+            };
+            var fields = this.getFormFields(formConfig);
+            var connectedFieldMapping = {
+                parent: {},
+                child: {}
+            };
+            var setFormFields = function (formConfig, fields) {
+                if (hasKey$2(formConfig, "multiForm")) {
+                    formConfig.multiForm["fields"] = fields;
+                }
+                else {
+                    formConfig["fields"] = fields;
+                }
+                return formConfig;
+            };
+            try {
+                for (var fields_1 = __values(fields), fields_1_1 = fields_1.next(); !fields_1_1.done; fields_1_1 = fields_1.next()) {
+                    var field = fields_1_1.value;
+                    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);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (fields_1_1 && !fields_1_1.done && (_a = fields_1.return)) _a.call(fields_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            formConfig = setFormFields(formConfig, fields);
+            return formConfig;
+        };
+        return Converter;
+    }());
+    __decorate([
+        log
+    ], Converter.prototype, "convertFormConfig", null);
+
+    var KwikIDRendererService = /** @class */ (function () {
+        function KwikIDRendererService() {
+            this.isMobileView = false;
+            this.allFormsData = {};
+        }
+        KwikIDRendererService.prototype.setIsMobileView = function (isMobileView) {
+            this.isMobileView = isMobileView;
+        };
+        KwikIDRendererService.prototype.setFormsList = function (formsList) {
+            this.formsList = formsList;
+        };
+        KwikIDRendererService.prototype.setFormsListCompleted = function (formsListCompleted) {
+            this.formsListCompleted = formsListCompleted;
+        };
+        KwikIDRendererService.prototype.setAllFormsData = function (allFormsData) {
+            this.allFormsData = allFormsData;
+        };
+        KwikIDRendererService.prototype.setActiveFormConfig = function (activeFormConfig) {
+            this.activeFormConfig = activeFormConfig;
+        };
+        KwikIDRendererService.prototype.setActiveFormFields = function (activeFormFields) {
+            this.activeFormFields = activeFormFields;
+        };
+        KwikIDRendererService.prototype.setActiveFormData = function (activeFormData) {
+            this.activeFormData = activeFormData;
+        };
+        KwikIDRendererService.prototype.fetchFormConfig = function (url) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, data;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, fetch(url, { method: "GET" })];
+                        case 1:
+                            response = _a.sent();
+                            return [4 /*yield*/, response.json()];
+                        case 2:
+                            data = _a.sent();
+                            return [2 /*return*/, data];
+                    }
+                });
+            });
+        };
+        KwikIDRendererService.prototype.findActiveFormConfig = function (formsList) {
+            var activeFormConfig = formsList.find(function (form) {
+                return form.status === "editable" && !form.disabled;
+            });
+            return activeFormConfig;
+        };
+        KwikIDRendererService.prototype.findCompletedFormsList = function (allFormsData) {
+            var formsListCompleted = [];
+            Object.keys(allFormsData).map(function (formKey) {
+                formsListCompleted.push(formKey);
+            });
+            return formsListCompleted;
+        };
+        KwikIDRendererService.prototype.markFormInFormsListAsCompleted = function (formsList, formsListCompleted) {
+            var e_1, _a;
+            try {
+                for (var formsList_1 = __values(formsList), formsList_1_1 = formsList_1.next(); !formsList_1_1.done; formsList_1_1 = formsList_1.next()) {
+                    var form = formsList_1_1.value;
+                    if (formsListCompleted.includes(form.key)) {
+                        form = setValueToObject(form, "status", "completed");
+                        form = setValueToObject(form, "disabled", false);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (formsList_1_1 && !formsList_1_1.done && (_a = formsList_1.return)) _a.call(formsList_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return formsList;
+        };
+        KwikIDRendererService.prototype.markFormInFormsListAsDisabled = function (formsList, formsListCompleted) {
+            var e_2, _a;
+            try {
+                for (var formsList_2 = __values(formsList), formsList_2_1 = formsList_2.next(); !formsList_2_1.done; formsList_2_1 = formsList_2.next()) {
+                    var form = formsList_2_1.value;
+                    if (form.status !== "completed") {
+                        if (hasKey$2(form, "dependentOn")) {
+                            var isDependent = form.dependentOn.every(function (r) { return 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", true);
+                            }
+                        }
+                        else {
+                            form = setValueToObject(form, "dependentOn", []);
+                            form = setValueToObject(form, "status", "editable");
+                            form = setValueToObject(form, "disabled", false);
+                        }
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (formsList_2_1 && !formsList_2_1.done && (_a = formsList_2.return)) _a.call(formsList_2);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            return formsList;
+        };
+        KwikIDRendererService.prototype.assignSequenceNoToForm = function (formsList) {
+            var e_3, _a;
+            var sequenceNo = 1;
+            try {
+                for (var formsList_3 = __values(formsList), formsList_3_1 = formsList_3.next(); !formsList_3_1.done; formsList_3_1 = formsList_3.next()) {
+                    var form = formsList_3_1.value;
+                    form.sequenceNo = sequenceNo++;
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (formsList_3_1 && !formsList_3_1.done && (_a = formsList_3.return)) _a.call(formsList_3);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            return formsList;
+        };
+        KwikIDRendererService.prototype.updateFormsList = function () {
+            var formsList = this.formsList;
+            var formsListCompleted;
+            var 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);
+        };
+        return KwikIDRendererService;
+    }());
+    /** @nocollapse */ KwikIDRendererService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDRendererService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    /** @nocollapse */ KwikIDRendererService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDRendererService, providedIn: "root" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDRendererService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: "root"
+                    }]
+            }], ctorParameters: function () { return []; } });
+
+    var KwikIDFormsRendererComponent = /** @class */ (function () {
+        function KwikIDFormsRendererComponent(rendererService, hostElement) {
+            this.rendererService = rendererService;
+            this.hostElement = hostElement;
+            this.formsData = {};
+            this.apiCallResponse = {};
+            this.getFormData = new i0.EventEmitter();
+            this.onClickApiCall = new i0.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
+        KwikIDFormsRendererComponent.prototype.windowResizeWatcher = function () {
+            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;
+            }
+        };
+        KwikIDFormsRendererComponent.prototype.ngOnInit = function () {
+            this.loading = true;
+            this.rendererService.setFormsList(this.userConfig.userFormFields);
+            this.initializeForms();
+        };
+        KwikIDFormsRendererComponent.prototype.ngOnChanges = function (changes) {
+            var verifyChange = function (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;
+            }
+        };
+        KwikIDFormsRendererComponent.prototype.initializeForms = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.rendererService.setAllFormsData(this.formsData);
+                            this.rendererService.updateFormsList();
+                            this.handleResize(this.rendererService.formsList);
+                            if (!(this.rendererService.formsList.length !==
+                                this.rendererService.formsListCompleted.length)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, this.handleOnClickSetActiveForm(this.rendererService.activeFormConfig.key)];
+                        case 1:
+                            _a.sent();
+                            return [3 /*break*/, 3];
+                        case 2:
+                            this.showForm = false;
+                            this.showFormFields = false;
+                            _a.label = 3;
+                        case 3:
+                            this.loading = false;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        KwikIDFormsRendererComponent.prototype.handleResize = function (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
+        KwikIDFormsRendererComponent.prototype.handleOnClickSetActiveForm = function (selectedForm) {
+            return __awaiter(this, void 0, void 0, function () {
+                var activeFormConfig, formConfig;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            activeFormConfig = this.rendererService.formsList.find(function (form) {
+                                if (form.key === selectedForm) {
+                                    return form;
+                                }
+                            });
+                            return [4 /*yield*/, this.rendererService.fetchFormConfig(activeFormConfig.formContent.url)];
+                        case 1:
+                            formConfig = _a.sent();
+                            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;
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        // forms-list listener
+        KwikIDFormsRendererComponent.prototype.handleOnClickSubmitForms = function (e) {
+            console.log(e);
+        };
+        // form-view listener
+        KwikIDFormsRendererComponent.prototype.handleOnClickApiCall = function (e) {
+            this.onClickApiCall.emit(e);
+        };
+        // form-view listener
+        KwikIDFormsRendererComponent.prototype.handleGetActiveFormData = function (e) {
+            var _a;
+            this.getFormData.emit((_a = {},
+                _a[this.rendererService.activeFormConfig.key] = e["data"],
+                _a));
+        };
+        // form-view listener
+        KwikIDFormsRendererComponent.prototype.handleOnClickSaveForm = function (e) {
+            var _a;
+            this.getFormData.emit((_a = {},
+                _a[this.rendererService.activeFormConfig.key] = e["data"],
+                _a));
+        };
+        // form-view listener
+        KwikIDFormsRendererComponent.prototype.handleOnClickViewForms = function (e) {
+            console.log(e);
+            this.showFormSections = true;
+            this.showForm = false;
+            this.showFormFields = false;
+        };
+        return KwikIDFormsRendererComponent;
+    }());
+    /** @nocollapse */ KwikIDFormsRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, deps: [{ token: KwikIDRendererService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ KwikIDFormsRendererComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            animations.trigger("panelInOut", [
+                animations.transition(":enter", [
+                    animations.style({ transform: "translateY(100%)" }),
+                    animations.animate(150)
+                ]),
+                animations.transition(":leave", [
+                    animations.animate(100, animations.style({ transform: "translateY(100%)" }))
+                ])
+            ])
+        ] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: "kwikid-forms-renderer",
+                        templateUrl: "./renderer.component.html",
+                        styleUrls: ["./renderer.component.scss"],
+                        animations: [
+                            animations.trigger("panelInOut", [
+                                animations.transition(":enter", [
+                                    animations.style({ transform: "translateY(100%)" }),
+                                    animations.animate(150)
+                                ]),
+                                animations.transition(":leave", [
+                                    animations.animate(100, animations.style({ transform: "translateY(100%)" }))
+                                ])
+                            ])
+                        ],
+                        providers: [KwikIDRendererService]
+                    }]
+            }], ctorParameters: function () { return [{ type: KwikIDRendererService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { windowResizeWatcher: [{
+                    type: i0.HostListener,
+                    args: ["window:resize", ["$event"]]
+                }], userConfig: [{
+                    type: i0.Input
+                }], formsData: [{
+                    type: i0.Input
+                }], apiCallResponse: [{
+                    type: i0.Input
+                }], getFormData: [{
+                    type: i0.Output
+                }], onClickApiCall: [{
+                    type: i0.Output
+                }] } });
+
+    var KwikIDFormBuilderModule = /** @class */ (function () {
+        function KwikIDFormBuilderModule() {
+        }
+        return KwikIDFormBuilderModule;
+    }());
+    /** @nocollapse */ KwikIDFormBuilderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ KwikIDFormBuilderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, declarations: [KwikIDFormsBuilderComponent], imports: [i4.CommonModule, i5.FormsModule, i5.ReactiveFormsModule, dragDrop.DragDropModule], exports: [KwikIDFormsBuilderComponent] });
+    /** @nocollapse */ KwikIDFormBuilderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, providers: [], imports: [[i4.CommonModule, i5.FormsModule, i5.ReactiveFormsModule, dragDrop.DragDropModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormBuilderModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [KwikIDFormsBuilderComponent],
+                        imports: [i4.CommonModule, i5.FormsModule, i5.ReactiveFormsModule, dragDrop.DragDropModule],
+                        providers: [],
+                        exports: [KwikIDFormsBuilderComponent]
+                    }]
+            }] });
+
+    var KwikIDFormViewModule = /** @class */ (function () {
+        function KwikIDFormViewModule() {
+        }
+        return KwikIDFormViewModule;
+    }());
+    /** @nocollapse */ KwikIDFormViewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ KwikIDFormViewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, declarations: [KwikIDFormViewComponent], imports: [i4.CommonModule,
+            i5.FormsModule,
+            i5.ReactiveFormsModule,
+            i3.TuiLabelModule,
+            i2.KwikUIModule], exports: [KwikIDFormViewComponent] });
+    /** @nocollapse */ KwikIDFormViewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, imports: [[
+                i4.CommonModule,
+                i5.FormsModule,
+                i5.ReactiveFormsModule,
+                i3.TuiLabelModule,
+                i2.KwikUIModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormViewModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [KwikIDFormViewComponent],
+                        imports: [
+                            i4.CommonModule,
+                            i5.FormsModule,
+                            i5.ReactiveFormsModule,
+                            i3.TuiLabelModule,
+                            i2.KwikUIModule
+                        ],
+                        exports: [KwikIDFormViewComponent]
+                    }]
+            }] });
+
+    var KwikIDFormsListModule = /** @class */ (function () {
+        function KwikIDFormsListModule() {
+        }
+        return KwikIDFormsListModule;
+    }());
+    /** @nocollapse */ KwikIDFormsListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ KwikIDFormsListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, declarations: [KwikIDFormsListComponent], imports: [i4.CommonModule,
+            i5.FormsModule,
+            i5.ReactiveFormsModule,
+            i2.KwikUIModule,
+            i3.TuiSvgModule], exports: [KwikIDFormsListComponent] });
+    /** @nocollapse */ KwikIDFormsListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, imports: [[
+                i4.CommonModule,
+                i5.FormsModule,
+                i5.ReactiveFormsModule,
+                i2.KwikUIModule,
+                i3.TuiSvgModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsListModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [KwikIDFormsListComponent],
+                        imports: [
+                            i4.CommonModule,
+                            i5.FormsModule,
+                            i5.ReactiveFormsModule,
+                            i2.KwikUIModule,
+                            i3.TuiSvgModule
+                        ],
+                        exports: [KwikIDFormsListComponent]
+                    }]
+            }] });
+
+    var KwikIDFormRendererModule = /** @class */ (function () {
+        function KwikIDFormRendererModule() {
+        }
+        return KwikIDFormRendererModule;
+    }());
+    /** @nocollapse */ KwikIDFormRendererModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ KwikIDFormRendererModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, declarations: [KwikIDFormsRendererComponent], imports: [i4.CommonModule,
+            http.HttpClientModule,
+            KwikIDFormViewModule,
+            KwikIDFormsListModule,
+            i2.KwikUIModule], exports: [KwikIDFormsRendererComponent] });
+    /** @nocollapse */ KwikIDFormRendererModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, providers: [], imports: [[
+                i4.CommonModule,
+                http.HttpClientModule,
+                KwikIDFormViewModule,
+                KwikIDFormsListModule,
+                i2.KwikUIModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormRendererModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [KwikIDFormsRendererComponent],
+                        imports: [
+                            i4.CommonModule,
+                            http.HttpClientModule,
+                            KwikIDFormViewModule,
+                            KwikIDFormsListModule,
+                            i2.KwikUIModule
+                        ],
+                        providers: [],
+                        exports: [KwikIDFormsRendererComponent]
+                    }]
+            }] });
+
+    var KwikIDFormsModule = /** @class */ (function () {
+        function KwikIDFormsModule() {
+        }
+        return KwikIDFormsModule;
+    }());
+    /** @nocollapse */ KwikIDFormsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ KwikIDFormsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, imports: [i4.CommonModule,
+            i5.FormsModule,
+            i5.ReactiveFormsModule,
+            KwikIDFormBuilderModule,
+            KwikIDFormRendererModule], exports: [KwikIDFormBuilderModule, KwikIDFormRendererModule] });
+    /** @nocollapse */ KwikIDFormsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, providers: [KwikIDRendererService], imports: [[
+                i4.CommonModule,
+                i5.FormsModule,
+                i5.ReactiveFormsModule,
+                KwikIDFormBuilderModule,
+                KwikIDFormRendererModule
+            ], KwikIDFormBuilderModule, KwikIDFormRendererModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: KwikIDFormsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [],
+                        imports: [
+                            i4.CommonModule,
+                            i5.FormsModule,
+                            i5.ReactiveFormsModule,
+                            KwikIDFormBuilderModule,
+                            KwikIDFormRendererModule
+                        ],
+                        exports: [KwikIDFormBuilderModule, KwikIDFormRendererModule],
+                        providers: [KwikIDRendererService]
+                    }]
+            }] });
+
+    /*
+     * Public API Surface of kwikid-forms
+     */
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.KwikIDFormBuilderModule = KwikIDFormBuilderModule;
+    exports.KwikIDFormRendererModule = KwikIDFormRendererModule;
+    exports.KwikIDFormViewComponent = KwikIDFormViewComponent;
+    exports.KwikIDFormViewModule = KwikIDFormViewModule;
+    exports.KwikIDFormsBuilderComponent = KwikIDFormsBuilderComponent;
+    exports.KwikIDFormsListComponent = KwikIDFormsListComponent;
+    exports.KwikIDFormsListModule = KwikIDFormsListModule;
+    exports.KwikIDFormsModule = KwikIDFormsModule;
+    exports.KwikIDFormsRendererComponent = KwikIDFormsRendererComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=kwikid-forms.umd.js.map