@veloceapps/sdk 5.0.13-0

package/bundles/veloceapps-sdk-runtime.umd.js

@@ -0,0 +1,4349 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@veloceapps/core'), require('@veloceapps/sdk/core'), require('rxjs'), require('lodash'), require('rxjs/operators'), require('@veloceapps/components'), require('@veloceapps/api'), require('primeng/dynamicdialog'), require('primeng/api'), require('@angular/cdk-experimental/scrolling'), require('@angular/cdk/scrolling'), require('@angular/common'), require('@angular/compiler'), require('@veloce/elements'), require('ngx-bootstrap/popover'), require('@angular/cdk/portal'), require('@angular/cdk/overlay'), require('moment'), require('@angular/common/http')) :
+    typeof define === 'function' && define.amd ? define('@veloceapps/sdk/runtime', ['exports', '@angular/core', '@angular/forms', '@veloceapps/core', '@veloceapps/sdk/core', 'rxjs', 'lodash', 'rxjs/operators', '@veloceapps/components', '@veloceapps/api', 'primeng/dynamicdialog', 'primeng/api', '@angular/cdk-experimental/scrolling', '@angular/cdk/scrolling', '@angular/common', '@angular/compiler', '@veloce/elements', 'ngx-bootstrap/popover', '@angular/cdk/portal', '@angular/cdk/overlay', 'moment', '@angular/common/http'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.veloceapps = global.veloceapps || {}, global.veloceapps.sdk = global.veloceapps.sdk || {}, global.veloceapps.sdk.runtime = {}), global.ng.core, global.ng.forms, global["@veloceapps/core"], global.veloceapps.sdk.core, global.rxjs, global.lodash, global.rxjs.operators, global["@veloceapps/components"], global["@veloceapps/api"], global["primeng/dynamicdialog"], global["primeng/api"], global.ng.cdkExperimental.scrolling, global.ng.cdk.scrolling, global.ng.common, global.ng.compiler, global["@veloce/elements"], global["ngx-bootstrap/popover"], global.ng.cdk.portal, global.ng.cdk.overlay, global.moment, global.ng.common.http));
+})(this, (function (exports, i0, i4, i7, i2, rxjs, _, rxjsOperators, i8, i1, i3, i3$1, scrolling$1, scrolling, i5, compiler, elements, i5$1, portal, i1$1, moment, http) { 'use strict';
+
+    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 i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var rxjs__namespace = /*#__PURE__*/_interopNamespace(rxjs);
+    var ___namespace = /*#__PURE__*/_interopNamespace(_);
+    var rxjsOperators__namespace = /*#__PURE__*/_interopNamespace(rxjsOperators);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var moment__namespace = /*#__PURE__*/_interopNamespace(moment);
+
+    var CollapsibleStateService = /** @class */ (function () {
+        function CollapsibleStateService() {
+            this._collapsedSections = {}; // By Line Item Id
+            this.collapseSectionSubject = new rxjs.Subject();
+            this.collapseSectionEvent = this.collapseSectionSubject.asObservable();
+        }
+        CollapsibleStateService.prototype.toggleCollapse = function (sectionId, silently) {
+            this._collapsedSections[sectionId] = !this.isCollapsedSection(sectionId);
+            if (!silently) {
+                this.collapseSectionSubject.next([sectionId, this._collapsedSections[sectionId]]);
+            }
+        };
+        CollapsibleStateService.prototype.collapse = function (sectionId) {
+            this._collapsedSections[sectionId] = true;
+        };
+        CollapsibleStateService.prototype.expand = function (sectionId) {
+            this._collapsedSections[sectionId] = false;
+        };
+        CollapsibleStateService.prototype.clearState = function (sectionId) {
+            delete this._collapsedSections[sectionId];
+        };
+        CollapsibleStateService.prototype.isCollapsedSection = function (sectionId) {
+            return this._collapsedSections[sectionId];
+        };
+        return CollapsibleStateService;
+    }());
+    CollapsibleStateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CollapsibleStateService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    CollapsibleStateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CollapsibleStateService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CollapsibleStateService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return []; } });
+
+    var ScriptRegistry = /** @class */ (function () {
+        function ScriptRegistry() {
+            this.store = new Map();
+            this.scope = new Map();
+        }
+        ScriptRegistry.prototype.exists = function (scriptId) {
+            var sectionIds = this.store.get(scriptId);
+            return !i7.EntityUtil.isEmpty(sectionIds);
+        };
+        ScriptRegistry.prototype.isRegistered = function (scriptId, sectionId) {
+            var sectionIds = this.store.get(scriptId);
+            return !i7.EntityUtil.isEmpty(sectionIds) && (sectionIds === null || sectionIds === void 0 ? void 0 : sectionIds.findIndex(function (entryId) { return entryId === sectionId; })) !== -1;
+        };
+        ScriptRegistry.prototype.doRegister = function (scriptId, sectionId) {
+            var sectionIds = this.store.get(scriptId);
+            if (!i7.EntityUtil.isPresent(sectionIds)) {
+                this.store.set(scriptId, [sectionId]);
+            }
+            else if ((sectionIds === null || sectionIds === void 0 ? void 0 : sectionIds.findIndex(function (entryId) { return entryId === sectionId; })) === -1) {
+                sectionIds.push(sectionId);
+            }
+        };
+        ScriptRegistry.prototype.unRegister = function (scriptId, sectionId) {
+            var sectionIds = this.store.get(scriptId);
+            if (!sectionIds) {
+                return;
+            }
+            var index = sectionIds === null || sectionIds === void 0 ? void 0 : sectionIds.findIndex(function (entryId) { return entryId === sectionId; });
+            if (index !== -1) {
+                sectionIds.splice(index, 1);
+                // Remove orphan
+                if (sectionIds.length < 1) {
+                    this.store.delete(scriptId);
+                }
+            }
+        };
+        ScriptRegistry.prototype.hasGlobalForScript = function (globalId) {
+            return this.scope.has(globalId);
+        };
+        ScriptRegistry.prototype.getGlobalForScript = function (globalId) {
+            return this.scope.get(globalId);
+        };
+        ScriptRegistry.prototype.setGlobalForScript = function (globalId, globalVariable) {
+            this.scope.set(globalId, globalVariable);
+        };
+        ScriptRegistry.prototype.removeGlobalForScript = function (globalId) {
+            this.scope.delete(globalId);
+        };
+        return ScriptRegistry;
+    }());
+
+    // TODO ALE RENAME TO SESSION SCOPE
+    var FormScopeService = /** @class */ (function () {
+        function FormScopeService() {
+            this.scriptRegistry = new ScriptRegistry();
+            this.scriptSessionScope = {};
+            this.formSubmitSubject = new rxjs.Subject();
+            this._form = new i4.FormGroup({});
+            this.formSubmitEvent = this.formSubmitSubject.asObservable();
+        }
+        Object.defineProperty(FormScopeService.prototype, "form", {
+            get: function () {
+                return this._form;
+            },
+            set: function (value) {
+                this._form = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FormScopeService.prototype.publishFormUpdate = function (value) {
+            this.formSubmitSubject.next(value);
+        };
+        return FormScopeService;
+    }());
+    FormScopeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FormScopeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FormScopeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FormScopeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FormScopeService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return []; } });
+
+    var BoundDataType;
+    (function (BoundDataType) {
+        BoundDataType[BoundDataType["TYPE"] = 0] = "TYPE";
+        BoundDataType[BoundDataType["ATTRIBUTE"] = 1] = "ATTRIBUTE";
+        BoundDataType[BoundDataType["PORT"] = 2] = "PORT";
+    })(BoundDataType || (BoundDataType = {}));
+
+    /*! *****************************************************************************
+    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 (_)
+                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;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (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;
+    }
+
+    var LineItemPath = /** @class */ (function () {
+        function LineItemPath(path) {
+            this._relativePath = '';
+            this._relativeAbstractPath = '';
+            this._abstractPath = '';
+            this.path = path.toLowerCase();
+        }
+        Object.defineProperty(LineItemPath.prototype, "relativePath", {
+            get: function () {
+                return this._relativePath;
+            },
+            set: function (relativePath) {
+                this._relativePath = relativePath.toLowerCase();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LineItemPath.prototype, "abstractPath", {
+            get: function () {
+                return this._abstractPath || this.path;
+            },
+            set: function (abstractPath) {
+                this._abstractPath = abstractPath.toLowerCase();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(LineItemPath.prototype, "relativeAbstractPath", {
+            set: function (relativeAbstractPath) {
+                this._relativeAbstractPath = relativeAbstractPath.toLowerCase();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        LineItemPath.prototype.isEqualTo = function (sectionPath) {
+            if (!sectionPath || !this.path || !sectionPath.path) {
+                return false;
+            }
+            var otherPath = sectionPath.path.toLowerCase();
+            var isEqual = this.path === otherPath || this._relativePath === otherPath || this._relativeAbstractPath === otherPath;
+            //TODO ALE SORT OUT SEARCH
+            if (!isEqual) {
+                var abstractPathMatch = this._abstractPath === sectionPath.abstractPath.toLowerCase();
+                var relativePathMatch = this._relativePath
+                    ? this._relativePath === sectionPath.relativePath.toLowerCase()
+                    : false;
+                var relativeAbstractPathMatch = this._relativeAbstractPath && sectionPath.relativeAbstractPath
+                    ? sectionPath.relativeAbstractPath.toLowerCase() === sectionPath.relativePath.toLowerCase() &&
+                        this._relativeAbstractPath === sectionPath.relativePath.toLowerCase()
+                    : false;
+                return abstractPathMatch && (relativePathMatch || relativeAbstractPathMatch);
+            }
+            return isEqual;
+        };
+        return LineItemPath;
+    }());
+    var LineItemUtil = /** @class */ (function () {
+        function LineItemUtil() {
+        }
+        LineItemUtil.removeDeletedItems = function (original) {
+            var _a;
+            var root = i7.EntityUtil.clone(original);
+            if (root) {
+                var items = [root];
+                for (var i = 0; i < items.length; i++) {
+                    var item = items[i];
+                    item.lineItems = ((_a = item.lineItems) !== null && _a !== void 0 ? _a : []).filter(function (l) { return l.actionCode !== 'DELETE'; });
+                    items = items.concat(item.lineItems);
+                }
+            }
+            return root;
+        };
+        LineItemUtil.replaceLineItemKeys = function (rootLineItem) {
+            var replaceFn = function (item) {
+                item.id = item.id ? 'DUMMY-' + item.id : item.id;
+                item.rootId = item.rootId ? 'DUMMY-' + item.rootId : item.rootId;
+                item.parentId = item.parentId ? 'DUMMY-' + item.parentId : item.parentId;
+                item.offeringInstanceId = item.offeringInstanceId ? 'DUMMY-' + item.offeringInstanceId : void 0;
+                item.offeringItemId = item.offeringItemId ? 'DUMMY-' + item.offeringItemId : void 0;
+                item.rampInstanceId = item.rampInstanceId ? 'DUMMY-' + item.rampInstanceId : void 0;
+            };
+            var traverseFn = function (lineItem, callbackFn) {
+                if (lineItem.lineItems && lineItem.lineItems.length > 0) {
+                    lineItem.lineItems.forEach(function (childLineItem) {
+                        callbackFn.apply(null, [childLineItem]);
+                        traverseFn.apply(null, [childLineItem, callbackFn]);
+                    });
+                }
+            };
+            replaceFn.apply(null, [rootLineItem]);
+            // rootLineItem.rootId = rootLineItem.id;
+            traverseFn.apply(null, [rootLineItem, replaceFn]);
+        };
+        LineItemUtil.enrichPricingInfo = function (source, pricingDto) {
+            var _a;
+            var result = Object.assign({}, source);
+            if (pricingDto) {
+                result.productName = ((_a = pricingDto.properties) === null || _a === void 0 ? void 0 : _a.displayName) || pricingDto.productName;
+                result.type = pricingDto.type;
+                result.rootId = pricingDto.rootId;
+                result.assetId = pricingDto.assetId;
+                result.openOrderLineItemId = pricingDto.openOrderLineItemId;
+                result.activated = pricingDto.activated;
+                result.actionCode = pricingDto.actionCode;
+                result.serviceStartDate = pricingDto.serviceStartDate;
+                result.effectiveDate = pricingDto.effectiveDate;
+                result.startDate = pricingDto.startDate;
+                result.endDate = pricingDto.endDate;
+                result.offeringId = pricingDto.offeringId;
+                result.offeringItemId = pricingDto.offeringItemId;
+                result.offeringInstanceId = pricingDto.offeringInstanceId;
+                result.rampInstanceId = pricingDto.rampInstanceId;
+                result.planId = pricingDto.planId;
+                if (!result.chargeItems) {
+                    result.chargeItems = pricingDto.chargeItems;
+                }
+                result.chargeGroupItems = [];
+            }
+            if (source.lineItems && source.lineItems.length > 0) {
+                result.lineItems = [];
+                source.lineItems.forEach(function (childSource) {
+                    var childDto = pricingDto && pricingDto.lineItems && pricingDto.lineItems.find(function (c) { return childSource.id === c.id; });
+                    var childItem = LineItemUtil.enrichPricingInfo(childSource, childDto);
+                    result.lineItems.push(childItem);
+                });
+            }
+            return result;
+        };
+        LineItemUtil.getLineItemPath = function (lineItem, rootLineItem) {
+            var path;
+            if (!lineItem.parentId) {
+                path = new LineItemPath('/' + lineItem.type);
+                path.abstractPath = path.path;
+                path.relativePath = path.path;
+                path.relativeAbstractPath = path.path;
+            }
+            else {
+                //TOODO ALE SORT OUT PATENT ITEM
+                var parentItem = i7.EntityUtil.findByFieldHierarchically('id', lineItem.parentId, [rootLineItem], 'lineItems');
+                var portType = lineItem.port && (parentItem === null || parentItem === void 0 ? void 0 : parentItem.portDomains[lineItem.port].type);
+                var parentPath = parentItem && LineItemUtil.getLineItemPath(parentItem, rootLineItem);
+                if (parentPath) {
+                    path = new LineItemPath(parentPath.path + '/ports/' + lineItem.port + '/' + lineItem.type);
+                    path.abstractPath = parentPath.abstractPath + '/ports/' + (lineItem.port + '/' + portType);
+                    path.relativePath = '/' + lineItem.type;
+                    path.relativeAbstractPath = '/' + portType;
+                }
+                else {
+                    throw 'Could not construct line item path';
+                }
+            }
+            return path;
+        };
+        LineItemUtil.findById = function (parentId, lineItems) {
+            return i7.EntityUtil.findByFieldHierarchically('id', parentId, lineItems, 'lineItems');
+        };
+        LineItemUtil.countAttributeValues = function (scale, attributeDomain) {
+            var precision = LineItemUtil.precision(scale);
+            var count = 0;
+            attributeDomain.forEach(function (d) { return (count += d.max - d.min + precision); });
+            return count;
+        };
+        LineItemUtil.precision = function (scale) {
+            if (!scale) {
+                return 1;
+            }
+            var s = '1';
+            while (s.length < scale) {
+                s = '0' + s;
+            }
+            return Number('0.' + s);
+        };
+        LineItemUtil.splitDomainToValues = function (scale, attributeDomain) {
+            var precision = this.precision(scale);
+            var values = [];
+            attributeDomain.forEach(function (interval) { return (values = values.concat(LineItemUtil.splitIntervalToValues(precision, interval))); });
+            return values;
+        };
+        LineItemUtil.splitIntervalToValues = function (precision, interval) {
+            var values = [];
+            for (var i = interval.min; i <= interval.max; i += precision) {
+                values.push(i);
+            }
+            return values;
+        };
+        LineItemUtil.findLineItemsByPath = function (runtimeModel, lineItem, path) {
+            if (!runtimeModel.isEquals(lineItem.type, path.types[0])) {
+                return [];
+            }
+            var lineItems = [lineItem];
+            for (var i = 1; i < path.types.length; i++) {
+                var portName = path.ports[i - 1];
+                var typeName = path.types[i];
+                lineItems = LineItemUtil.findLineItemChildren(runtimeModel, lineItems, portName, typeName);
+            }
+            return lineItems;
+        };
+        LineItemUtil.findLineItemChildren = function (runtimeModel, lineItems, portName, typeName) {
+            var e_1, _c, e_2, _d;
+            var _a;
+            var result = [];
+            try {
+                for (var lineItems_1 = __values(lineItems), lineItems_1_1 = lineItems_1.next(); !lineItems_1_1.done; lineItems_1_1 = lineItems_1.next()) {
+                    var lineItem = lineItems_1_1.value;
+                    try {
+                        for (var _e = (e_2 = void 0, __values(lineItem.lineItems)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                            var childItem = _f.value;
+                            if (((_a = childItem.port) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === portName.toLowerCase() &&
+                                runtimeModel.isEquals(childItem.type, typeName)) {
+                                result.push(childItem);
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (lineItems_1_1 && !lineItems_1_1.done && (_c = lineItems_1.return)) _c.call(lineItems_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return result;
+        };
+        LineItemUtil.findLineItemsByType = function (runtimeModel, lineItem, typeName) {
+            var result = [];
+            var lineItems = [lineItem];
+            for (var i = 0; i < lineItems.length; i++) {
+                var lineItem_1 = lineItems[i];
+                if (runtimeModel.isEquals(lineItem_1.type, typeName)) {
+                    result.push(lineItem_1);
+                }
+                lineItems = lineItems.concat(lineItem_1.lineItems);
+            }
+            return result;
+        };
+        LineItemUtil.findLineItemForValue = function (model, valueOption) {
+            if (!i7.EntityUtil.isPresent(model) || !i7.EntityUtil.isPresent(model.lineItems)) {
+                return;
+            }
+            return model.lineItems.find(function (li) { return li.type && li.type.toLowerCase() === valueOption.toLowerCase(); });
+        };
+        // TODO: add Product typings
+        LineItemUtil.create = function (product, qty) {
+            var _a;
+            return {
+                id: i7.UUID.UUID(),
+                type: product.typeName,
+                name: ((_a = product.properties) === null || _a === void 0 ? void 0 : _a.displayName) || product.name,
+                productName: product.name,
+                productId: product.id,
+                cfgStatus: 'User',
+                actionCode: 'ADD',
+                qty: qty || 1,
+            };
+        };
+        LineItemUtil.upsert = function (value, collection) {
+            var index = collection.findIndex(function (item) { return item.id === value.id; });
+            if (index > -1) {
+                collection[index] = value;
+            }
+            else {
+                collection.push(value);
+            }
+        };
+        LineItemUtil.compareSortOrder = function (a, b) {
+            var orderA = Number(a.properties['SortOrder']);
+            var orderB = Number(b.properties['SortOrder']);
+            if (!orderA && !orderB) {
+                return LineItemUtil.compareProductName(a, b);
+            }
+            if (!orderA) {
+                return 1;
+            }
+            else if (!orderB) {
+                return -1;
+            }
+            var result = orderA - orderB;
+            if (result === 0) {
+                return LineItemUtil.compareProductName(a, b);
+            }
+            return result;
+        };
+        LineItemUtil.sort = function (lineItems) {
+            if (lineItems) {
+                lineItems.sort(function (a, b) { return LineItemUtil.compareSortOrder(a, b); });
+                lineItems.forEach(function (i) { return LineItemUtil.sort(i.lineItems); });
+            }
+        };
+        LineItemUtil.compareProductName = function (a, b) {
+            var _a, _b;
+            if (a.productName) {
+                return ((_a = a.productName) !== null && _a !== void 0 ? _a : '').localeCompare((_b = b.productName) !== null && _b !== void 0 ? _b : '');
+            }
+            else if (b.productName) {
+                return 1;
+            }
+            return 0;
+        };
+        return LineItemUtil;
+    }());
+
+    var SectionsBinderHelper = /** @class */ (function () {
+        function SectionsBinderHelper() {
+        }
+        SectionsBinderHelper.setLineItemsPath = function (runtimeModel, rootLineItem, sections, sourceSections, filterFn, pricingEnabled) {
+            var filtered = sections.filter(filterFn);
+            filtered.forEach(function (section) {
+                var path = section.boundData.path;
+                var foundLineItems;
+                if (path.relative) {
+                    foundLineItems = LineItemUtil.findLineItemsByType(runtimeModel, rootLineItem, path.types[0]);
+                }
+                else {
+                    var remainder = rootLineItem.path ? i7.SectionPathUtil.cut(runtimeModel, path, rootLineItem.path) : undefined;
+                    if (!remainder) {
+                        return [];
+                    }
+                    foundLineItems = LineItemUtil.findLineItemsByPath(runtimeModel, rootLineItem, remainder);
+                }
+                if (section.boundData.entityType === BoundDataType[BoundDataType.TYPE]) {
+                    SectionsBinderHelper.bindMatchingLineItems(runtimeModel, foundLineItems, section, sections, sourceSections, pricingEnabled);
+                }
+                else if (section.boundData.entityType === BoundDataType[BoundDataType.ATTRIBUTE]) {
+                    foundLineItems = foundLineItems.filter(function (item) { return item.attributes &&
+                        item.attributes.findIndex(function (a) { return a.name.toLowerCase() === section.boundData.name.toLowerCase(); }) !== -1; });
+                    foundLineItems.forEach(function (lineItem) {
+                        SectionsBinderHelper.bindLineItem(section, sections, sourceSections, lineItem, pricingEnabled);
+                    });
+                }
+                else if (section.boundData.entityType === BoundDataType[BoundDataType.PORT]) {
+                    foundLineItems = foundLineItems.filter(function (item) { return item.portDomains && item.portDomains[section.boundData.name]; });
+                    SectionsBinderHelper.bindMatchingLineItems(runtimeModel, foundLineItems, section, sections, sourceSections, pricingEnabled);
+                }
+                return;
+            });
+            return sections;
+        };
+        SectionsBinderHelper.isAddAllowed = function (model, portName, quantityToAdd) {
+            if (quantityToAdd === void 0) { quantityToAdd = 1; }
+            var quantity = this.getQuantity(model, portName);
+            return quantity + quantityToAdd <= +this.getPortMax(model, portName);
+        };
+        SectionsBinderHelper.isRemoveAllowed = function (model, portName, quantityToRemove) {
+            if (quantityToRemove === void 0) { quantityToRemove = 1; }
+            var quantity = this.getQuantity(model, portName);
+            return quantity - quantityToRemove >= +this.getPortMin(model, portName);
+        };
+        SectionsBinderHelper.getMaxAllowed = function (lineItem, portName) {
+            return +this.getPortMax(lineItem, portName) - this.getQuantity(lineItem, portName);
+        };
+        SectionsBinderHelper.getQuantityGroupByValue = function (model, portName) {
+            var quantities = {};
+            if (model && portName) {
+                model.lineItems
+                    .filter(function (li) { return li.port === portName; })
+                    .forEach(function (li) {
+                    var quantity = (i7.EntityUtil.isPresent(li.qty) && li.qty) || 1;
+                    if (i7.EntityUtil.isPresent(quantities[li.type])) {
+                        quantity += quantities[li.type];
+                    }
+                    quantities[li.type] = quantity;
+                });
+            }
+            return quantities;
+        };
+        SectionsBinderHelper.bindMatchingLineItems = function (runtimeModel, foundLineItems, section, sections, sourceSections, pricingEnabled) {
+            foundLineItems.forEach(function (lineItem) {
+                var boundSection = SectionsBinderHelper.bindLineItem(section, sections, sourceSections, lineItem, pricingEnabled);
+                SectionsBinderHelper.setLineItemsPath(runtimeModel, lineItem, sections, sourceSections, function (sec) {
+                    return sec.boundData && sec.parentId === boundSection.id;
+                }, pricingEnabled);
+            });
+        };
+        SectionsBinderHelper.bindLineItem = function (section, sections, sourceSections, lineItem, pricingEnabled) {
+            var boundSection = section.model ? SectionsBinderHelper.doClone(section, sections, sourceSections) : section;
+            boundSection.model = lineItem;
+            boundSection.pricingEnabled = pricingEnabled;
+            return boundSection;
+        };
+        SectionsBinderHelper.doClone = function (source, sections, sourceSections, parent) {
+            var sourceClass = sourceSections.find(function (s) { return s.classId === source.classId; });
+            var clone = i7.EntityUtil.clone(sourceClass);
+            clone.id = i7.UUID.UUID();
+            clone.parentId = parent ? parent.id : source.parentId;
+            sections.splice(sections.findIndex(function (s) { return s.id === source.id; }) + 1, 0, clone);
+            sourceSections
+                .filter(function (s) { return s.parentId === sourceClass.id; })
+                .forEach(function (s) { return SectionsBinderHelper.doClone(s, sections, sourceSections, clone); });
+            return clone;
+        };
+        SectionsBinderHelper.getQuantity = function (model, portName) {
+            var quantity = 0;
+            model.lineItems
+                .filter(function (li) { return li.port === portName; })
+                .forEach(function (li) {
+                quantity += li.qty;
+            });
+            return quantity;
+        };
+        SectionsBinderHelper.getPortMax = function (model, portName) {
+            return model.portDomains[portName].maxCard;
+        };
+        SectionsBinderHelper.getPortMin = function (model, portName) {
+            return model.portDomains[portName].minCard;
+        };
+        return SectionsBinderHelper;
+    }());
+
+    var RuntimeFormService = /** @class */ (function () {
+        function RuntimeFormService() {
+            this.sections = [];
+        }
+        RuntimeFormService.prototype.initForm = function (sections, solutionLineItem) {
+            var _this = this;
+            this.sections = sections;
+            this.solutionLineItem = solutionLineItem;
+            var form = new i4.FormGroup({});
+            sections
+                .filter(function (section) { return section.model && section.template && section.boundData; })
+                .forEach(function (section) {
+                _this.populateSectionValue(section);
+                _this.populateSectionPrice(section);
+                _this.populateFormControls(section, form);
+            });
+            return form;
+        };
+        RuntimeFormService.prototype.populateSectionValue = function (section) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            var value;
+            var valueOptions = [];
+            var displayValues = {};
+            var properties = {};
+            if (FormServiceUtils.isPortSection(section)) {
+                var portDomain = (_a = section.model) === null || _a === void 0 ? void 0 : _a.portDomains[section.boundData.name];
+                valueOptions = (_b = portDomain === null || portDomain === void 0 ? void 0 : portDomain.domainTypes.map(function (dt) { return dt.name; })) !== null && _b !== void 0 ? _b : [];
+                properties =
+                    (_c = portDomain === null || portDomain === void 0 ? void 0 : portDomain.domainTypes.reduce(function (map, dt) {
+                        map[dt.name] = dt.properties;
+                        return map;
+                    }, {})) !== null && _c !== void 0 ? _c : {};
+                displayValues =
+                    (_d = portDomain === null || portDomain === void 0 ? void 0 : portDomain.domainTypes.reduce(function (map, dt) {
+                        map[dt.name] = dt.displayName;
+                        return map;
+                    }, {})) !== null && _d !== void 0 ? _d : {};
+                value = (_e = section.model) === null || _e === void 0 ? void 0 : _e.lineItems.map(function (li) { return li.type; });
+            }
+            if (FormServiceUtils.isAttributeSection(section)) {
+                var attribute = (_f = section.model) === null || _f === void 0 ? void 0 : _f.attributes.find(function (attr) { return attr.name.toLowerCase() === section.boundData.name.toLowerCase(); });
+                if (attribute) {
+                    value = attribute.value;
+                }
+                var attributeDomain = (_g = section.model) === null || _g === void 0 ? void 0 : _g.attributeDomains[section.boundData.name];
+                if (!(attribute === null || attribute === void 0 ? void 0 : attribute.type.match('GENERIC|BOOLEAN')) && attributeDomain) {
+                    var count = attribute && attribute.scale != null
+                        ? LineItemUtil.countAttributeValues(attribute.scale, attributeDomain)
+                        : undefined;
+                    if (attribute && attribute.scale != null && count && count <= 100) {
+                        valueOptions = LineItemUtil.splitDomainToValues(attribute.scale, attributeDomain);
+                    }
+                    else {
+                        valueOptions = attributeDomain;
+                    }
+                }
+                else if (attributeDomain) {
+                    valueOptions = attributeDomain;
+                }
+            }
+            if (!i7.EntityUtil.isPresent(value)) {
+                value = '';
+            }
+            section.sectionValue = {
+                value: value,
+                valueOptions: valueOptions,
+                displayValues: displayValues,
+                properties: properties,
+            };
+        };
+        RuntimeFormService.prototype.populateSectionPrice = function (section) {
+            var _a;
+            var priceValue = { priceOptions: {} };
+            if (FormServiceUtils.isPortSection(section)) {
+                var portDomain = (_a = section.model) === null || _a === void 0 ? void 0 : _a.portDomains[section.boundData.name];
+                if (portDomain) {
+                    portDomain.domainTypes.forEach(function (dt) {
+                        if (dt.recommendedPrices && dt.recommendedPrices.length > 0) {
+                            priceValue.priceOptions[dt.name] = dt.recommendedPrices;
+                        }
+                        else {
+                            delete priceValue.priceOptions[dt.name];
+                        }
+                    });
+                }
+            }
+            section.priceValue = priceValue;
+        };
+        RuntimeFormService.prototype.populateFormControls = function (section, form) {
+            form.controls[section.id] = this.createFormControl(section);
+            if (FormServiceUtils.isPortSection(section) || FormServiceUtils.isTypeSection(section)) {
+                form.controls[section.id.concat('qty')] = this.createQtyControl(section);
+            }
+        };
+        RuntimeFormService.prototype.createFormControl = function (section) {
+            var _a;
+            var value = FormServiceUtils.isPortSection(section) ? void 0 : (_a = section.sectionValue) === null || _a === void 0 ? void 0 : _a.value;
+            return new i4.FormControl(value, this.getFormControlValidators(section));
+        };
+        RuntimeFormService.prototype.createQtyControl = function (section) {
+            var _a, _b, _c;
+            var isTypeSection = FormServiceUtils.isTypeSection(section);
+            var validators = [];
+            var maxAllowed = this.getMaxAllowed(section);
+            //TODO TEMPORARY SOLUTION (WILL BE DISABLED ONCE RADIO CONTROLS IMPLEMENTED)
+            if (maxAllowed > 0) {
+                validators.push(this.getQuantityValidator(maxAllowed, isTypeSection ? (_b = (_a = section.model) === null || _a === void 0 ? void 0 : _a.qty) !== null && _b !== void 0 ? _b : 0 : 0));
+            }
+            var qtyValue = isTypeSection ? (_c = section.model) === null || _c === void 0 ? void 0 : _c.qty : 1;
+            return new i4.FormControl(qtyValue, validators);
+        };
+        RuntimeFormService.prototype.getMaxAllowed = function (section) {
+            var lineItem = section.model;
+            var portName = section.boundData.name;
+            if (FormServiceUtils.isTypeSection(section)) {
+                if (section.model && i7.EntityUtil.isPresent(section.model.parentId) && this.solutionLineItem) {
+                    if (section.model.parentId) {
+                        lineItem = LineItemUtil.findById(section.model.parentId, [this.solutionLineItem]);
+                    }
+                    portName = section.model.port;
+                }
+                else {
+                    return 0;
+                }
+            }
+            if (!lineItem) {
+                return 0;
+            }
+            return SectionsBinderHelper.getMaxAllowed(lineItem, portName);
+        };
+        //TODO ALE TO SUPPORT EMPTY VALUES FOR INTERVAL ATTRIBUTES OUT OF DOMAIN
+        RuntimeFormService.prototype.getFormControlValidators = function (section) {
+            if (!FormServiceUtils.isAttributeSection(section)) {
+                return null;
+            }
+            var validators = [];
+            var parentLineItem = section.model && this.solutionLineItem && FormServiceUtils.findParent(section.model.id, [this.solutionLineItem]);
+            var attribute = parentLineItem &&
+                parentLineItem.attributes.find(function (attr) { return attr.name.toLowerCase() === section.boundData.name.toLowerCase(); });
+            if (!attribute || !attribute.type) {
+                return null;
+            }
+            var primitiveTypesValidators = {
+                INT: i7.TypeValidators.integerValidator(),
+                'DOUBLE|DECIMAL': i7.TypeValidators.decimalValidator(10),
+            };
+            _.keys(primitiveTypesValidators).forEach(function (types) {
+                if (types.match(attribute.type)) {
+                    var validator = primitiveTypesValidators[types];
+                    validators.push(validator);
+                }
+            });
+            if (!attribute.type.match('GENERIC|BOOLEAN|MULTIPLE')) {
+                var sectionLabel_1 = section.label;
+                var intervalValidator = function (control) {
+                    var _a;
+                    if (_.isUndefined(control.value) || _.isNull(control.value) || isNaN(+control.value)) {
+                        return { interval: { message: sectionLabel_1 + ' is not in domain' } };
+                    }
+                    if (!_.isUndefined(control.value) && _.isString(control.value) && control.value.length === 0) {
+                        return null;
+                    }
+                    var attributeDomain = (_a = section.model) === null || _a === void 0 ? void 0 : _a.attributeDomains[section.boundData.name];
+                    var valid = attributeDomain === null || attributeDomain === void 0 ? void 0 : attributeDomain.some(function (valueOption) {
+                        var min = +valueOption.min;
+                        var max = +valueOption.max;
+                        return +control.value <= max && +control.value >= min;
+                    });
+                    if (!valid) {
+                        return { interval: { message: sectionLabel_1 + ' is not in domain' } };
+                    }
+                    return null;
+                };
+                validators.push(intervalValidator);
+            }
+            if (section.required) {
+                validators.push(i7.TypeValidators.requiredValidator(section.label + ' is required '));
+            }
+            return validators.length !== 0 ? validators : null;
+        };
+        RuntimeFormService.prototype.getQuantityValidator = function (max, originalQty) {
+            return function (control) {
+                if (!control.value) {
+                    return { quantity: { message: 'Required' } };
+                }
+                else if (isNaN(+control.value) || +control.value < 1) {
+                    return { quantity: { message: 'Invalid value' } };
+                }
+                else if (+control.value > max + originalQty) {
+                    return { quantity: { message: 'Max quantity  ' + (max + originalQty) } };
+                }
+                else {
+                    return null;
+                }
+            };
+        };
+        return RuntimeFormService;
+    }());
+    RuntimeFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RuntimeFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeFormService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeFormService, decorators: [{
+                type: i0.Injectable
+            }] });
+    var FormServiceUtils = /** @class */ (function () {
+        function FormServiceUtils() {
+        }
+        FormServiceUtils.isPortSection = function (section) {
+            return section && section.boundData && section.boundData.entityType === BoundDataType[BoundDataType.PORT];
+        };
+        FormServiceUtils.isTypeSection = function (section) {
+            return section && section.boundData && section.boundData.entityType === BoundDataType[BoundDataType.TYPE];
+        };
+        FormServiceUtils.isAttributeSection = function (section) {
+            return section && section.boundData && section.boundData.entityType === BoundDataType[BoundDataType.ATTRIBUTE];
+        };
+        FormServiceUtils.findParent = function (parentId, lineItems) {
+            return i7.EntityUtil.findByFieldHierarchically('id', parentId, lineItems, 'lineItems');
+        };
+        return FormServiceUtils;
+    }());
+
+    var ConfigurationService = /** @class */ (function () {
+        function ConfigurationService(configurationApiService, contextService, dialogService) {
+            this.configurationApiService = configurationApiService;
+            this.contextService = contextService;
+            this.dialogService = dialogService;
+        }
+        ConfigurationService.prototype.configure = function (runtimeContext, states, resolve) {
+            var _this = this;
+            var _a;
+            var lineItem = (states && states.configurableRamp) || this.getDefaultLineItem(runtimeContext);
+            var configurationMode = resolve ? i7.ConfigurationMode.RESOLVE : i7.ConfigurationMode.SEARCH;
+            var configurationRequest = this.createRequest(lineItem, runtimeContext, configurationMode);
+            configurationRequest.lineItems = states.currentState || [];
+            configurationRequest.asset = states.asset;
+            var runtimeModel = runtimeContext.runtimeModel;
+            var pricingEnabled = (_a = runtimeContext.uiDefinition) === null || _a === void 0 ? void 0 : _a.pricingEnabled;
+            return this.configurationApiService
+                .configureLineItem({
+                configurationRequest: configurationRequest,
+                runtimeModel: runtimeModel,
+                pricingEnabled: pricingEnabled,
+            })
+                .pipe(rxjsOperators.map(function (_f) {
+                var lineItem = _f.lineItem, context = _f.context, deletedLineItems = _f.deletedLineItems;
+                if (context) {
+                    _this.contextService.update({ properties: context.properties });
+                }
+                if (deletedLineItems === null || deletedLineItems === void 0 ? void 0 : deletedLineItems.length) {
+                    _this.showInactiveProductsConfirmation();
+                }
+                return lineItem;
+            }));
+        };
+        ConfigurationService.prototype.createRequest = function (lineItem, runtimeContext, configurationMode) {
+            var _a, _b, _c, _d, _e;
+            if (runtimeContext.runtimeMode === i2.RuntimeMode.TEST) {
+                var properties = Object.assign(Object.assign({}, runtimeContext.properties), { ModelId: runtimeContext.modelId, RuntimeMode: 'TEST', PricingEnabled: String((_a = runtimeContext.uiDefinition) === null || _a === void 0 ? void 0 : _a.pricingEnabled), StartDate: (_c = (_b = runtimeContext.properties) === null || _b === void 0 ? void 0 : _b.StartDate) !== null && _c !== void 0 ? _c : new Date().toISOString().substring(0, 10), PriceListId: (_d = runtimeContext.uiDefinition) === null || _d === void 0 ? void 0 : _d.priceList });
+                this.contextService.update({ properties: properties });
+            }
+            else {
+                var context = this.contextService.resolve();
+                if (context.properties && ((_e = runtimeContext.properties) === null || _e === void 0 ? void 0 : _e.StartDate)) {
+                    this.contextService.update({
+                        properties: Object.assign(Object.assign({}, context.properties), runtimeContext.properties),
+                    });
+                }
+            }
+            return {
+                lineItem: lineItem,
+                mode: configurationMode,
+                step: runtimeContext.invocationContext && runtimeContext.invocationContext.runtimeStep,
+                attributeDomainMode: 'ALL',
+                context: this.contextService.resolve(),
+            };
+        };
+        ConfigurationService.prototype.getDefaultLineItem = function (context) {
+            var _a, _b, _c, _d;
+            var id = i7.UUID.UUID();
+            var lineItem = Object.assign({ id: id, type: (_b = (_a = context.uiDefinition) === null || _a === void 0 ? void 0 : _a.rootType) !== null && _b !== void 0 ? _b : '', cfgStatus: 'Default', qty: 1, productName: ((_c = context.properties) === null || _c === void 0 ? void 0 : _c.displayName) || context.productName, productId: (_d = context.productId) !== null && _d !== void 0 ? _d : '', offeringId: context.offeringId }, (context.offeringId
+                ? { offeringId: context.offeringId, offeringInstanceId: context.offeringInstanceId || id }
+                : {}));
+            return lineItem;
+        };
+        ConfigurationService.prototype.showInactiveProductsConfirmation = function () {
+            var _this = this;
+            this.dialogService
+                .open(i8.ConfirmationComponent, {
+                dismissableMask: false,
+                closeOnEscape: false,
+                closable: false,
+                showHeader: true,
+                header: "Inactive Products in Quote",
+                width: '440px',
+                data: {
+                    confirmationConfig: {
+                        title: ' ',
+                        description: 'This quote contains inactive products. Do you want to remove them?',
+                        submitBtn: 'Remove products',
+                        cancelBtn: 'Back to Quote',
+                    },
+                },
+            })
+                .onClose.subscribe(function (result) {
+                if (!result) {
+                    var context = _this.contextService.resolve();
+                    window['VELO_BACK_FN'].apply(null, [context.headerId]);
+                }
+            });
+        };
+        return ConfigurationService;
+    }());
+    ConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.ContextService }, { token: i3__namespace.DialogService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ConfigurationService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.ContextService }, { type: i3__namespace.DialogService }]; } });
+
+    var RuntimeService = /** @class */ (function () {
+        function RuntimeService(configurationService, contextService, messageService) {
+            this.configurationService = configurationService;
+            this.contextService = contextService;
+            this.messageService = messageService;
+            this.solutionReadySubject = new rxjs.Subject();
+            this.onSolutionReadyEvent = this.solutionReadySubject.asObservable();
+            this.solutionUpdateStartedSubject = new rxjs.Subject();
+            this.onSolutionUpdateStartedEvent = this.solutionUpdateStartedSubject.asObservable();
+            this.solutionUpdatedSubject = new rxjs.Subject();
+            this.onSolutionUpdatedEvent = this.solutionUpdatedSubject.asObservable();
+            this.solutionProcessedSubject = new rxjs.Subject();
+            this.onSolutionProcessed = this.solutionProcessedSubject.asObservable();
+            this.solutionStopSubject = new rxjs.Subject();
+            this.onSolutionStopEvent = this.solutionStopSubject.asObservable();
+            this.solutionCancelSubject = new rxjs.Subject();
+            this.onSolutionCancelEvent = this.solutionCancelSubject.asObservable();
+            this.uiRefreshSubject = new rxjs.Subject();
+            this.onUIRefreshEvent = this.uiRefreshSubject.asObservable();
+        }
+        RuntimeService.prototype.displayErrorMessage = function (error) {
+            var _a;
+            this.messageService.add({
+                severity: 'error',
+                summary: ((_a = error.error) === null || _a === void 0 ? void 0 : _a.message) || error.message || JSON.stringify(error),
+            });
+        };
+        RuntimeService.prototype.startRuntime = function (context, states, resolve) {
+            var _this = this;
+            this.setRuntimeContext(context);
+            this.setRuntimeStep(i2.RuntimeStep.START);
+            this.configurationService
+                .configure(context, states, resolve)
+                .pipe(rxjsOperators.take(1))
+                .subscribe(function (lineItem) {
+                _this.solutionReadySubject.next(lineItem);
+            }, function (error) {
+                _this.displayErrorMessage(error);
+                _this.solutionUpdatedSubject.next(error);
+            });
+        };
+        RuntimeService.prototype.updateRuntime = function (states, configurationContextProperties) {
+            var _this = this;
+            if (!this.runtimeContext) {
+                return;
+            }
+            this.solutionUpdateStartedSubject.next();
+            this.setRuntimeStep(i2.RuntimeStep.UPDATE);
+            this.updateRuntimeContext(configurationContextProperties);
+            this.configurationService
+                .configure(this.runtimeContext, states)
+                .pipe(rxjsOperators.take(1))
+                .subscribe(function (lineItem) {
+                var context = _this.contextService.resolve();
+                _this.updateRuntimeContext(context.properties);
+                _this.solutionUpdatedSubject.next(lineItem);
+            }, function (error) {
+                _this.displayErrorMessage(error);
+                _this.solutionUpdatedSubject.next(error);
+            });
+        };
+        RuntimeService.prototype.stopRuntime = function (solutionLineItem) {
+            this.solutionStopSubject.next(solutionLineItem);
+        };
+        RuntimeService.prototype.cancelRuntime = function () {
+            this.solutionCancelSubject.next();
+        };
+        RuntimeService.prototype.setRuntimeContext = function (runtimeContext) {
+            this.runtimeContext = runtimeContext;
+        };
+        RuntimeService.prototype.getRuntimeContext = function () {
+            return this.runtimeContext;
+        };
+        RuntimeService.prototype.solutionProcessed = function (lineItem) {
+            this.solutionProcessedSubject.next(lineItem);
+        };
+        RuntimeService.prototype.refreshUI = function (uiDefinition) {
+            if (!this.runtimeContext) {
+                return;
+            }
+            this.runtimeContext = Object.assign(Object.assign({}, this.runtimeContext), { uiDefinition: uiDefinition });
+            this.uiRefreshSubject.next();
+        };
+        RuntimeService.prototype.updateRuntimeContext = function (configurationContextProperties) {
+            if (!this.runtimeContext || !configurationContextProperties) {
+                return;
+            }
+            this.runtimeContext = Object.assign(Object.assign({}, this.runtimeContext), { properties: configurationContextProperties });
+        };
+        RuntimeService.prototype.setRuntimeStep = function (runtimeStep) {
+            if (!this.runtimeContext) {
+                return;
+            }
+            this.runtimeContext.invocationContext = Object.assign(Object.assign({}, this.runtimeContext.invocationContext), { runtimeStep: runtimeStep });
+        };
+        return RuntimeService;
+    }());
+    RuntimeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeService, deps: [{ token: ConfigurationService }, { token: i2__namespace.ContextService }, { token: i3__namespace$1.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RuntimeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: i2__namespace.ContextService }, { type: i3__namespace$1.MessageService }]; } });
+
+    var ShoppingCartService = /** @class */ (function () {
+        function ShoppingCartService(priceApiService, contextService, quoteService) {
+            this.priceApiService = priceApiService;
+            this.contextService = contextService;
+            this.quoteService = quoteService;
+        }
+        ShoppingCartService.prototype.setCartExternally = function (currentState) {
+            var _this = this;
+            var context = this.contextService.resolve();
+            return this.priceApiService.calculate({ context: context, currentState: currentState }).pipe(rxjsOperators.take(1), rxjsOperators.tap(function (_a) {
+                var lineItems = _a.lineItems;
+                _this.quoteService.setCurrentLineItemState(lineItems);
+            }));
+        };
+        ShoppingCartService.prototype.getCurrentState = function () {
+            return this.quoteService.currentState;
+        };
+        return ShoppingCartService;
+    }());
+    ShoppingCartService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ShoppingCartService, deps: [{ token: i1__namespace.PriceApiService }, { token: i2__namespace.ContextService }, { token: i2__namespace.QuoteDraftService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ShoppingCartService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ShoppingCartService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ShoppingCartService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.PriceApiService }, { type: i2__namespace.ContextService }, { type: i2__namespace.QuoteDraftService }]; } });
+
+    var CurrentStateService = /** @class */ (function () {
+        function CurrentStateService() {
+            this.currentState = [];
+        }
+        CurrentStateService.prototype.update = function (state) {
+            this.currentState = state;
+        };
+        return CurrentStateService;
+    }());
+    CurrentStateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CurrentStateService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    CurrentStateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CurrentStateService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: CurrentStateService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }] });
+
+    var ProductModelCacheService = /** @class */ (function () {
+        function ProductModelCacheService(productModelApiService) {
+            this.productModelApiService = productModelApiService;
+            this.cachedModel = new Map();
+        }
+        ProductModelCacheService.prototype.getProductModel = function (currentModelId, version) {
+            if (!this.cachedModel.has(currentModelId) || version) {
+                this.clearCache();
+                this.cachedModel.set(currentModelId, this.productModelApiService.load(currentModelId, version).pipe(rxjsOperators.shareReplay(1)));
+            }
+            return this.cachedModel.get(currentModelId);
+        };
+        ProductModelCacheService.prototype.getCachedModel = function () {
+            var ids = Array.from(this.cachedModel.keys());
+            return this.cachedModel.get(ids[0]);
+        };
+        ProductModelCacheService.prototype.clearCache = function () {
+            this.cachedModel.clear();
+        };
+        return ProductModelCacheService;
+    }());
+    ProductModelCacheService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ProductModelCacheService, deps: [{ token: i1__namespace.ProductModelApiService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ProductModelCacheService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ProductModelCacheService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ProductModelCacheService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.ProductModelApiService }]; } });
+
+    var RuntimeContextService = /** @class */ (function () {
+        function RuntimeContextService(configurationApiService, messageService, contextService) {
+            this.configurationApiService = configurationApiService;
+            this.messageService = messageService;
+            this.contextService = contextService;
+        }
+        RuntimeContextService.prototype.getRuntimeContext = function (productId, offeringId) {
+            var _this = this;
+            return this.configurationApiService.getRuntimeDataByProductId(productId, offeringId).pipe(rxjsOperators.map(function (runtimeData) {
+                var _a;
+                var uiDefinition = _this.getUIDefinition(runtimeData.uiDefinitions);
+                var runtimeModel = i7.RuntimeModel.create(runtimeData.types, runtimeData.products);
+                var _b = (_a = Array.from(runtimeModel.components.values()).find(function (c) { return c.productId === productId; })) !== null && _a !== void 0 ? _a : {}, productName = _b.productName, properties = _b.properties;
+                return {
+                    modelId: runtimeData.modelId,
+                    uiDefinition: uiDefinition,
+                    runtimeModel: runtimeModel,
+                    runtimeMode: i2.RuntimeMode.PROD,
+                    productId: productId,
+                    productType: (properties === null || properties === void 0 ? void 0 : properties.displayName) || productName,
+                    offeringId: offeringId,
+                    properties: {
+                        PricingEnabled: uiDefinition.pricingEnabled ? 'true' : 'false',
+                    },
+                };
+            }));
+        };
+        RuntimeContextService.prototype.getUIDefinition = function (uiDefinitions) {
+            if (uiDefinitions === void 0) { uiDefinitions = []; }
+            var uiDefinitionId = this.contextService.resolve().uiDefinitionId;
+            var findByFn = function (uiDef) { return (uiDefinitionId ? uiDefinitionId === uiDef.id : uiDef.primary); };
+            var uiDefinition = uiDefinitions.find(findByFn) || (uiDefinitions.length === 1 && Object.assign({}, uiDefinitions[0]));
+            if (!uiDefinition) {
+                var errMsg = "Unable to find " + (uiDefinitionId ? uiDefinitionId : 'Default') + " UI";
+                this.messageService.add({
+                    severity: 'error',
+                    summary: 'ERROR',
+                });
+                throw new Error(errMsg);
+            }
+            i7.SectionPathUtil.updateSectionsPath(uiDefinition.sections);
+            return uiDefinition;
+        };
+        return RuntimeContextService;
+    }());
+    RuntimeContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeContextService, deps: [{ token: i1__namespace.ConfigurationApiService }, { token: i3__namespace$1.MessageService }, { token: i2__namespace.ContextService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RuntimeContextService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeContextService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeContextService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i3__namespace$1.MessageService }, { type: i2__namespace.ContextService }]; } });
+
+    var SectionStoreService = /** @class */ (function () {
+        function SectionStoreService() {
+            this._componentFactories = [];
+        }
+        Object.defineProperty(SectionStoreService.prototype, "componentFactories", {
+            get: function () {
+                return this._componentFactories;
+            },
+            set: function (data) {
+                this._componentFactories = data;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SectionStoreService.prototype.getComponentFactory = function (section) {
+            return this.componentFactories.find(function (f) { return f.selector === section.dynamicSelector; });
+        };
+        return SectionStoreService;
+    }());
+    SectionStoreService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionStoreService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionStoreService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionStoreService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionStoreService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var SectionScopeService = /** @class */ (function () {
+        function SectionScopeService() {
+            this.indent = 1;
+            this.templates = new rxjs.BehaviorSubject([]);
+        }
+        Object.defineProperty(SectionScopeService.prototype, "section", {
+            get: function () {
+                return this._section;
+            },
+            set: function (value) {
+                this._section = value;
+                this.indent = this.getIndent(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SectionScopeService.prototype.getIndent = function (section) {
+            if (!section || !section.parentId) {
+                return 1;
+            }
+            else {
+                var current = section;
+                var indent = 1;
+                while (current && current.parent) {
+                    current = current.parent;
+                    indent++;
+                }
+                return indent;
+            }
+        };
+        return SectionScopeService;
+    }());
+    SectionScopeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionScopeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionScopeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionScopeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionScopeService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var ExecutionSectionRendererComponent = /** @class */ (function () {
+        function ExecutionSectionRendererComponent(_injector, _m, sectionScope, sectionStore) {
+            this._injector = _injector;
+            this._m = _m;
+            this.sectionScope = sectionScope;
+            this.sectionStore = sectionStore;
+            this.componentRef = null;
+        }
+        Object.defineProperty(ExecutionSectionRendererComponent.prototype, "section", {
+            get: function () {
+                return this._section;
+            },
+            set: function (value) {
+                this._section = value;
+                this.sectionScope.section = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ExecutionSectionRendererComponent.prototype.ngOnInit = function () {
+            this.renderSection();
+        };
+        ExecutionSectionRendererComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            if (this.componentRef) {
+                this.sectionScope.templates.next((_b = (_a = this.componentRef.instance['templates']) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : []);
+            }
+        };
+        ExecutionSectionRendererComponent.prototype.ngOnDestroy = function () {
+            if (this.componentRef) {
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+        };
+        ExecutionSectionRendererComponent.prototype.renderSection = function () {
+            var _a;
+            if (this.componentRef) {
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+            var componentFactory = this.sectionStore.getComponentFactory(this._section);
+            if (!componentFactory) {
+                return;
+            }
+            this.componentRef = componentFactory.create(this._injector, [], null, this._m);
+            this.componentRef.location.nativeElement.setAttribute('sectionId', "" + ((_a = this._section.model) === null || _a === void 0 ? void 0 : _a.id) + this._section.label);
+            this.componentRef.instance['form'] = this.form;
+            this.componentRef.instance['section'] = this.section;
+            this.container.insert(this.componentRef.hostView);
+        };
+        return ExecutionSectionRendererComponent;
+    }());
+    ExecutionSectionRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ExecutionSectionRendererComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.NgModuleRef }, { token: SectionScopeService }, { token: SectionStoreService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExecutionSectionRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ExecutionSectionRendererComponent, selector: "section-renderer", inputs: { section: "section", form: "form" }, providers: [SectionScopeService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-template #container></ng-template>", styles: [":host{display:contents}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ExecutionSectionRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'section-renderer',
+                        templateUrl: 'execution-section-renderer.component.html',
+                        styleUrls: ['execution-section-renderer.component.scss'],
+                        providers: [SectionScopeService],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.NgModuleRef }, { type: SectionScopeService }, { type: SectionStoreService }]; }, propDecorators: { section: [{
+                    type: i0.Input
+                }], form: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ['container', { read: i0.ViewContainerRef, static: true }]
+                }] } });
+
+    var ChildrenPlaceholderComponent = /** @class */ (function () {
+        function ChildrenPlaceholderComponent(sectionScope, formScope, collapsibleState) {
+            this.sectionScope = sectionScope;
+            this.formScope = formScope;
+            this.collapsibleState = collapsibleState;
+            this._children = [];
+            this.collapsed = false;
+        }
+        ChildrenPlaceholderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.section = this.sectionScope.section;
+            this.form = this.formScope.form;
+            this.collapsed = this.section.model ? this.collapsibleState.isCollapsedSection(this.section.model.id) : true;
+            this.sub = this.collapsibleState.collapseSectionEvent.subscribe(function (e) {
+                var _a;
+                var lineItemId = e[0];
+                if (((_a = _this.section.model) === null || _a === void 0 ? void 0 : _a.id) === lineItemId) {
+                    _this.collapsed = e[1];
+                }
+            });
+            this.setChildren();
+        };
+        ChildrenPlaceholderComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b;
+            if (!this.children || ((_a = changes.children) === null || _a === void 0 ? void 0 : _a.currentValue) !== ((_b = changes.children) === null || _b === void 0 ? void 0 : _b.previousValue)) {
+                this.setChildren();
+            }
+        };
+        ChildrenPlaceholderComponent.prototype.setChildren = function () {
+            this._children = this.children ? this.children : this.section.children;
+        };
+        ChildrenPlaceholderComponent.prototype.ngOnDestroy = function () {
+            this.sub.unsubscribe();
+        };
+        return ChildrenPlaceholderComponent;
+    }());
+    ChildrenPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ChildrenPlaceholderComponent, deps: [{ token: SectionScopeService }, { token: FormScopeService }, { token: CollapsibleStateService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ChildrenPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ChildrenPlaceholderComponent, selector: "children-placeholder", inputs: { children: "children" }, providers: [i7.OrderByPipe], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!collapsed\">\n  <ng-container *ngFor=\"let child of _children\">\n    <section-renderer [section]=\"child\" [form]=\"form\" *ngIf=\"!child.hidden\"></section-renderer>\n  </ng-container>\n</ng-container>\n", components: [{ type: ExecutionSectionRendererComponent, selector: "section-renderer", inputs: ["section", "form"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ChildrenPlaceholderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'children-placeholder',
+                        templateUrl: 'children-placeholder.component.html',
+                        providers: [i7.OrderByPipe],
+                    }]
+            }], ctorParameters: function () { return [{ type: SectionScopeService }, { type: FormScopeService }, { type: CollapsibleStateService }]; }, propDecorators: { children: [{
+                    type: i0.Input
+                }] } });
+    var TemplateComponent = /** @class */ (function (_super) {
+        __extends(TemplateComponent, _super);
+        function TemplateComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TemplateComponent;
+    }(ChildrenPlaceholderComponent));
+    TemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplateComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TemplateComponent, selector: "template-component", usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"!collapsed\">\n  <ng-container *ngFor=\"let child of _children\">\n    <section-renderer [section]=\"child\" [form]=\"form\" *ngIf=\"!child.hidden\"></section-renderer>\n  </ng-container>\n</ng-container>\n", components: [{ type: ExecutionSectionRendererComponent, selector: "section-renderer", inputs: ["section", "form"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TemplateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'template-component',
+                        templateUrl: 'children-placeholder.component.html',
+                    }]
+            }] });
+
+    var ContextProviderComponent = /** @class */ (function () {
+        function ContextProviderComponent(runtimeService) {
+            this.runtimeService = runtimeService;
+            this.types = [];
+            this.products = {};
+        }
+        ContextProviderComponent.prototype.ngOnInit = function () {
+            var context = this.runtimeService.getRuntimeContext();
+            if (!context) {
+                return;
+            }
+            this.runtimeService.setRuntimeContext(Object.assign(Object.assign({}, context), { runtimeModel: i7.RuntimeModel.create(this.types, this.products) }));
+        };
+        return ContextProviderComponent;
+    }());
+    ContextProviderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ContextProviderComponent, deps: [{ token: RuntimeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContextProviderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ContextProviderComponent, selector: "vl-context-provider", inputs: { types: "types", products: "products" }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ContextProviderComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'vl-context-provider',
+                        template: '',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: RuntimeService, decorators: [{
+                            type: i0.Inject,
+                            args: [RuntimeService]
+                        }] }];
+        }, propDecorators: { types: [{
+                    type: i0.Input
+                }], products: [{
+                    type: i0.Input
+                }] } });
+
+    var moduleMap = {};
+    function loadRemoteEntry(remoteEntry) {
+        return new Promise(function (resolve, reject) {
+            if (moduleMap[remoteEntry]) {
+                resolve();
+                return;
+            }
+            var script = document.createElement('script');
+            script.src = remoteEntry;
+            script.onerror = reject;
+            script.onload = function () {
+                moduleMap[remoteEntry] = true;
+                resolve(); // window is the global namespace
+            };
+            document.body.append(script);
+        });
+    }
+    function lookupExposedModule(remoteName, exposedModule) {
+        return __awaiter(this, void 0, void 0, function () {
+            var container, factory, Module;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: 
+                    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
+                    return [4 /*yield*/, __webpack_init_sharing__('default')];
+                    case 1:
+                        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
+                        _a.sent();
+                        container = window[remoteName];
+                        // Initialize the container, it may provide shared modules
+                        return [4 /*yield*/, container.init(__webpack_share_scopes__.default)];
+                    case 2:
+                        // Initialize the container, it may provide shared modules
+                        _a.sent();
+                        return [4 /*yield*/, container.get(exposedModule)];
+                    case 3:
+                        factory = _a.sent();
+                        Module = factory();
+                        return [2 /*return*/, Module];
+                }
+            });
+        });
+    }
+    function loadRemoteModule(options) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, loadRemoteEntry(options.remoteEntry)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, lookupExposedModule(options.remoteName, options.exposedModule)];
+                    case 2: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    }
+
+    var IntegrationEvent;
+    (function (IntegrationEvent) {
+        IntegrationEvent["Init"] = "Init";
+    })(IntegrationEvent || (IntegrationEvent = {}));
+    var FederatedComponent = /** @class */ (function () {
+        function FederatedComponent(injector, compiler, appRef, renderer) {
+            this.injector = injector;
+            this.compiler = compiler;
+            this.appRef = appRef;
+            this.renderer = renderer;
+            this.integrationEvent = new i0.EventEmitter();
+            this.moduleReady = false;
+        }
+        FederatedComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            if (!this.remoteEntry || !this.remoteName || !this.exposedModule) {
+                return;
+            }
+            loadRemoteModule({
+                remoteEntry: this.remoteEntry,
+                remoteName: this.remoteName,
+                exposedModule: this.exposedModule,
+            }).then(function (federated) {
+                _this.compiler.compileModuleAsync(federated[_this.exposedModule]).then(function (moduleFactory) {
+                    var _a;
+                    var rootModuleRef = moduleFactory.create(_this.injector);
+                    var rootComponentFactory = rootModuleRef.componentFactoryResolver.resolveComponentFactory(federated[_this.exposedModule].rootComponent);
+                    var node = document.createElement('div');
+                    var _b = rootComponentFactory.create(_this.injector, [], node), instance = _b.instance, hostView = _b.hostView;
+                    _this.instance = instance;
+                    _this.instance.data = _this.data;
+                    _this.instance.eventData = _this.eventData;
+                    _this.instance.integrationEvent = _this.integrationEvent;
+                    _this.renderer.appendChild((_a = _this.moduleHostRef) === null || _a === void 0 ? void 0 : _a.nativeElement, node);
+                    _this.appRef.attachView(hostView);
+                });
+            });
+        };
+        FederatedComponent.prototype.ngOnChanges = function (changes) {
+            if (!this.instance) {
+                return;
+            }
+            this.instance.ngOnChanges(changes);
+        };
+        return FederatedComponent;
+    }());
+    FederatedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.Compiler }, { token: i0__namespace.ApplicationRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FederatedComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", eventData: "eventData" }, outputs: { integrationEvent: "integrationEvent" }, viewQueries: [{ propertyName: "federatedComponent", first: true, predicate: ["federatedComponent"], descendants: true, read: i0.ViewContainerRef }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true, read: i0.TemplateRef }, { propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: FederatedComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'veloce-host-federated',
+                        templateUrl: './federated.component.html',
+                        styleUrls: ['./federated.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.Compiler }, { type: i0__namespace.ApplicationRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { federatedComponent: [{
+                    type: i0.ViewChild,
+                    args: ['federatedComponent', { read: i0.ViewContainerRef }]
+                }], foo: [{
+                    type: i0.ViewChild,
+                    args: ['foo', { read: i0.TemplateRef }]
+                }], moduleHostRef: [{
+                    type: i0.ViewChild,
+                    args: ['moduleHost', { static: false }]
+                }], remoteEntry: [{
+                    type: i0.Input
+                }], remoteName: [{
+                    type: i0.Input
+                }], exposedModule: [{
+                    type: i0.Input
+                }], data: [{
+                    type: i0.Input
+                }], eventData: [{
+                    type: i0.Input
+                }], integrationEvent: [{
+                    type: i0.Output
+                }] } });
+
+    //TODO ALE WE ARE EXTENDING COMPONENT HERE IN PORTS WE ARE EXTENDING DEDICATED CLASS!! TYPES HANDLER IS NO IMPLEMENTED YET
+    var VeloAttributeDirective = /** @class */ (function () {
+        function VeloAttributeDirective(formScope, sectionScope) {
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+            this.valueQuantities = {};
+            this.form = this.formScope.form;
+            this.section = this.sectionScope.section;
+        }
+        VeloAttributeDirective.prototype.ngOnInit = function () {
+            this.initQuantity();
+        };
+        VeloAttributeDirective.prototype.handleChange = function (valueOption) {
+            var updateData = {
+                id: this.section.id,
+                action: 'update',
+                valueOption: valueOption,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloAttributeDirective.prototype.handleChangDate = function (valueOption) {
+            var oldValue = this.form.controls[this.section.id].value || '';
+            var newValue = _.isDate(valueOption) ? valueOption.toLocaleDateString('en-us') : '';
+            if (oldValue !== newValue) {
+                this.handleChange(newValue);
+            }
+        };
+        VeloAttributeDirective.prototype.handleRemove = function () {
+            var updateData = {
+                id: this.section.id,
+                action: 'remove',
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        // TODO ALE THIS IS SPECIFIC STEPPER FUNCTIONS
+        VeloAttributeDirective.prototype.nextVal = function () {
+            var currentIndex = this.getCurrentValueIndex();
+            var nextValIndex = currentIndex + 1;
+            if (currentIndex != -1 &&
+                this.section.sectionValue &&
+                this.section.sectionValue.valueOptions.length >= nextValIndex) {
+                this.handleChange(this.section.sectionValue.valueOptions[nextValIndex]);
+            }
+        };
+        VeloAttributeDirective.prototype.prevVal = function () {
+            var currentIndex = this.getCurrentValueIndex();
+            var prevValIndex = currentIndex - 1;
+            if (currentIndex != -1 &&
+                this.section.sectionValue &&
+                this.section.sectionValue.valueOptions.length >= prevValIndex) {
+                this.handleChange(this.section.sectionValue.valueOptions[prevValIndex]);
+            }
+        };
+        VeloAttributeDirective.prototype.initQuantity = function () {
+            this.valueQuantities = this.section.model
+                ? SectionsBinderHelper.getQuantityGroupByValue(this.section.model, this.section.boundData.name)
+                : {};
+        };
+        VeloAttributeDirective.prototype.getCurrentValueIndex = function () {
+            var index = -1;
+            var valueOptions = this.section.sectionValue && this.section.sectionValue.valueOptions;
+            var currentValue = this.form.controls[this.section.id].value;
+            if (valueOptions && i7.EntityUtil.isPresent(currentValue)) {
+                return valueOptions.findIndex(function (valueOption) { return currentValue === valueOption; });
+            }
+            return index;
+        };
+        return VeloAttributeDirective;
+    }());
+    VeloAttributeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloAttributeDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VeloAttributeDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VeloAttributeDirective, selector: "velo-attribute-directive", exportAs: ["attributeApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloAttributeDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'velo-attribute-directive',
+                        exportAs: 'attributeApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+    var MultiselectComponent = /** @class */ (function () {
+        function MultiselectComponent(elRef, viewContainerRef, overlay) {
+            this.elRef = elRef;
+            this.viewContainerRef = viewContainerRef;
+            this.overlay = overlay;
+            this.selectionChange = new i0.EventEmitter();
+            this.selected = [];
+            this.displayValue = '';
+            this.touched = false;
+            this.disabled = false;
+            this.opened = false;
+            this.onChange = function () {
+                return;
+            };
+            this.onTouched = function () {
+                return;
+            };
+        }
+        MultiselectComponent.prototype.ngOnDestroy = function () {
+            this.destroyDropdown();
+        };
+        MultiselectComponent.prototype.writeValue = function (selected) {
+            this.selected = selected;
+            this.getDisplayValue();
+        };
+        MultiselectComponent.prototype.registerOnChange = function (onChange) {
+            this.onChange = onChange;
+        };
+        MultiselectComponent.prototype.registerOnTouched = function (onTouched) {
+            this.onTouched = onTouched;
+        };
+        MultiselectComponent.prototype.setDisabledState = function (disabled) {
+            this.disabled = disabled;
+        };
+        MultiselectComponent.prototype.handleSelection = function (value) {
+            var selectedItem = this.selected.find(function (item) { return item === value; });
+            if (selectedItem) {
+                this.selected = this.selected.filter(function (item) { return item !== value; });
+            }
+            else {
+                this.selected = __spreadArray(__spreadArray([], __read(this.selected)), [value]);
+            }
+            this.getDisplayValue();
+            this.selectionChange.emit(this.selected);
+            this.onChange(this.selected);
+        };
+        MultiselectComponent.prototype.toggleOpened = function () {
+            this.opened ? this.destroyDropdown() : this.openDropdown();
+        };
+        MultiselectComponent.prototype.getDisplayValue = function () {
+            var joinedValue = this.selected.join(', ');
+            this.displayValue = joinedValue.length > 24 ? this.selected.length + " options selected" : joinedValue;
+        };
+        MultiselectComponent.prototype.openDropdown = function () {
+            var _this = this;
+            this.opened = true;
+            this.overlayRef = this.overlay.create({
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                scrollStrategy: this.overlay.scrollStrategies.close(),
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elRef)
+                    .withPositions([
+                    {
+                        originX: 'end',
+                        originY: 'bottom',
+                        overlayX: 'end',
+                        overlayY: 'top',
+                        offsetY: 8,
+                    },
+                ]),
+            });
+            var templatePortal = new portal.TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+            this.overlayRef.attach(templatePortal);
+            this.dropdownClosingActionsSub = this.dropdownClosingActions().subscribe(function () { return _this.destroyDropdown(); });
+        };
+        MultiselectComponent.prototype.dropdownClosingActions = function () {
+            if (!this.overlayRef) {
+                return rxjs.of();
+            }
+            var backdropClick$ = this.overlayRef.backdropClick();
+            var detachment$ = this.overlayRef.detachments();
+            return rxjs.merge(backdropClick$, detachment$);
+        };
+        MultiselectComponent.prototype.destroyDropdown = function () {
+            var _a;
+            if (!this.overlayRef || !this.opened) {
+                return;
+            }
+            (_a = this.dropdownClosingActionsSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this.opened = false;
+            this.overlayRef.detach();
+        };
+        return MultiselectComponent;
+    }());
+    MultiselectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: MultiselectComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i1__namespace$1.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MultiselectComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: MultiselectComponent, selector: "velo-multiselect", inputs: { options: "options" }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.opened": "this.opened" } }, providers: [
+            {
+                provide: i4.NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: MultiselectComponent,
+            },
+        ], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], ngImport: i0__namespace, template: "<div class=\"value-wrapper\" (click)=\"toggleOpened()\">\n  <span class=\"value\">{{ displayValue }}</span>\n  <i class=\"fa fa-chevron-down\"></i>\n</div>\n\n<ng-template #overlayTemplate>\n  <div class=\"dropdown\">\n    <div class=\"checkbox-select\" *ngFor=\"let option of options\">\n      <label>\n        <input\n          type=\"checkbox\"\n          [checked]=\"selected.includes(option)\"\n          (change)=\"handleSelection(option)\"\n          [value]=\"option\"\n        />\n\n        <i class=\"input-helper\"></i>\n        {{ option }}\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:172px}:host[disabled] .value-wrapper{pointer-events:none;background:rgba(0,0,0,.06);border-color:#0003}:host.opened .value-wrapper{border-color:#0e8fff}:host.opened i{transform:rotate(180deg)}:host .value-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 10px;border:1px solid #ddd;border-radius:3px;background:#fff}:host .value-wrapper .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown{width:172px;max-height:200px;background:#fff;border:1px solid #ddd;border-radius:3px;overflow:auto}.dropdown .checkbox-select{padding:0 10px;width:100%}.dropdown .checkbox-select label{width:100%;height:36px;line-height:36px}.dropdown .checkbox-select .input-helper:before{top:10px}.dropdown .checkbox-select .input-helper:after{top:12px}.dropdown .checkbox-select:hover{background:#d5dddf}\n"], directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: MultiselectComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-multiselect',
+                        templateUrl: 'velo-multiselect.component.html',
+                        styleUrls: ['./velo-multiselect.component.scss'],
+                        providers: [
+                            {
+                                provide: i4.NG_VALUE_ACCESSOR,
+                                multi: true,
+                                useExisting: MultiselectComponent,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ViewContainerRef }, { type: i1__namespace$1.Overlay }]; }, propDecorators: { options: [{
+                    type: i0.Input
+                }], selectionChange: [{
+                    type: i0.Output
+                }], overlayTemplate: [{
+                    type: i0.ViewChild,
+                    args: ['overlayTemplate']
+                }], opened: [{
+                    type: i0.HostBinding,
+                    args: ['class.opened']
+                }] } });
+
+    var VeloAttributeComponent = /** @class */ (function (_super) {
+        __extends(VeloAttributeComponent, _super);
+        function VeloAttributeComponent(formScope, sectionScope) {
+            var _this = this;
+            var _a, _b;
+            _this = _super.call(this, formScope, sectionScope) || this;
+            _this.controlName = _this.section.id;
+            _this.displayName = _this.getDisplayName();
+            _this.isMultiselect =
+                ((_b = (_a = _this.section.model) === null || _a === void 0 ? void 0 : _a.attributes.find(function (attr) { return attr.name === _this.section.boundData.entity.name; })) === null || _b === void 0 ? void 0 : _b.type) ===
+                    'MULTIPLE';
+            return _this;
+        }
+        VeloAttributeComponent.prototype.getValueOptions = function (valueOptions) {
+            return this.isBooleanType(valueOptions) ? [0, 1] : valueOptions;
+        };
+        VeloAttributeComponent.prototype.getValueText = function (valueOptions, value) {
+            if (this.isBooleanType(valueOptions)) {
+                return value === 0 ? 'False' : 'True';
+            }
+            return value;
+        };
+        VeloAttributeComponent.prototype.handleMultiselectChange = function (value) {
+            var _a;
+            var formControl = this.form.get(this.controlName);
+            if (!formControl) {
+                return;
+            }
+            var currentValue = (_a = formControl.value) !== null && _a !== void 0 ? _a : [];
+            var newValue = currentValue.includes(value) ? currentValue.filter(function (v) { return v !== value; }) : __spreadArray(__spreadArray([], __read(currentValue)), [value]);
+            formControl.setValue(newValue);
+            _super.prototype.handleChange.call(this);
+        };
+        VeloAttributeComponent.prototype.handleMultipleDropdownChange = function (event) {
+            var formControl = this.form.get(this.controlName);
+            if (!formControl) {
+                return;
+            }
+            formControl.setValue(event);
+            _super.prototype.handleChange.call(this);
+        };
+        VeloAttributeComponent.prototype.isBooleanType = function (value) {
+            return Array.isArray(value) && value.length === 1 && value[0].min === 0 && value[0].max === 1;
+        };
+        VeloAttributeComponent.prototype.getDisplayName = function () {
+            var _a, _b;
+            return ((((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.properties) && this.section.model.properties['displayName']) || ((_b = this.section.model) === null || _b === void 0 ? void 0 : _b.type) || '');
+        };
+        return VeloAttributeComponent;
+    }(VeloAttributeDirective));
+    VeloAttributeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloAttributeComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloAttributeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloAttributeComponent, selector: "velo-attribute", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"form-group div-inline\" [formGroup]=\"form\">\n  <div class=\"input-form-input div-inline\" [class.input-form-input--required]=\"section.required\">\n    <label>\n      <ng-container *ngIf=\"section.required\"> * </ng-container>\n\n      {{ section.label }}\n    </label>\n    <div [ngSwitch]=\"section.controlType\" class=\"form-control-wrapper\">\n      <div *ngSwitchCase=\"'DROPDOWN'\">\n        <select\n          [id]=\"controlName\"\n          [formControlName]=\"controlName\"\n          class=\"form-control\"\n          (change)=\"handleChange()\"\n          [attr.disabled]=\"section.readOnly ? true : null\"\n        >\n          <option\n            *ngFor=\"let valueOption of getValueOptions(section.sectionValue?.valueOptions) || []\"\n            [ngValue]=\"valueOption\"\n          >\n            {{ getValueText(section.sectionValue?.valueOptions, valueOption) }}\n          </option>\n        </select>\n      </div>\n\n      <div *ngSwitchCase=\"'MULTISELECT'\">\n        <velo-multiselect\n          [id]=\"controlName\"\n          [formControlName]=\"controlName\"\n          [options]=\"getValueOptions(section.sectionValue?.valueOptions)\"\n          [attr.disabled]=\"section.readOnly ? true : null\"\n          (selectionChange)=\"handleMultipleDropdownChange($event)\"\n        ></velo-multiselect>\n      </div>\n\n      <div *ngSwitchCase=\"'RADIO'\">\n        <div\n          *ngFor=\"let valueOption of getValueOptions(section.sectionValue?.valueOptions)\"\n          class=\"radio-button\"\n          [attr.disabled]=\"section.readOnly ? true : null\"\n        >\n          <label>\n            <input\n              type=\"radio\"\n              [id]=\"controlName\"\n              [formControlName]=\"controlName\"\n              [value]=\"valueOption\"\n              (change)=\"handleChange()\"\n              [attr.disabled]=\"section.readOnly ? true : null\"\n            />\n            <i class=\"input-helper\"></i>\n            {{ getValueText(section.sectionValue?.valueOptions, valueOption) }}\n          </label>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'CHECKBOX'\">\n        <ng-container *ngIf=\"!isMultiselect; else multiselect\">\n          <div class=\"checkbox-select\" [attr.disabled]=\"section.readOnly ? true : null\">\n            <label>\n              <input\n                type=\"checkbox\"\n                [id]=\"controlName\"\n                [formControlName]=\"controlName\"\n                [checked]=\"section.sectionValue?.value === 1\"\n                (change)=\"handleChange()\"\n                [attr.disabled]=\"section.readOnly ? true : null\"\n              />\n\n              <i class=\"input-helper\"></i>\n              &nbsp;\n            </label>\n          </div>\n        </ng-container>\n\n        <ng-template #multiselect>\n          <div\n            *ngFor=\"let valueOption of getValueOptions(section.sectionValue?.valueOptions)\"\n            class=\"checkbox-select\"\n            [attr.disabled]=\"section.readOnly ? true : null\"\n          >\n            <label>\n              <input\n                type=\"checkbox\"\n                [id]=\"controlName\"\n                [checked]=\"section.sectionValue?.value.includes(valueOption)\"\n                (change)=\"handleMultiselectChange(valueOption)\"\n                [value]=\"valueOption\"\n                [attr.disabled]=\"section.readOnly ? true : null\"\n              />\n\n              <i class=\"input-helper\"></i>\n              {{ valueOption }}\n            </label>\n          </div>\n        </ng-template>\n      </div>\n\n      <div *ngSwitchCase=\"'DATE'\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          [id]=\"controlName\"\n          [formControlName]=\"controlName\"\n          [attr.disabled]=\"section.readOnly ? true : null\"\n          (bsValueChange)=\"handleChangDate($event)\"\n          bsDatepicker\n        />\n      </div>\n\n      <div *ngSwitchDefault>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          [id]=\"controlName\"\n          [formControlName]=\"controlName\"\n          (blur)=\"form.controls[controlName].dirty && handleChange()\"\n          [attr.disabled]=\"section.readOnly ? true : null\"\n        />\n      </div>\n\n      <!-- Add validation messages -->\n      <!-- <div validation-messages [form]=\"form\" [controlId]=\"controlName\" [showForPristine]=\"true\"></div> -->\n    </div>\n  </div>\n</div>\n", components: [{ type: MultiselectComponent, selector: "velo-multiselect", inputs: ["options"], outputs: ["selectionChange"] }], directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloAttributeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-attribute',
+                        templateUrl: 'velo-attribute.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+    var VeloPortCheckBoxComponent = /** @class */ (function () {
+        function VeloPortCheckBoxComponent(formScope, sectionScope) {
+            var _this = this;
+            var _a;
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+            this.showSelectAll = false;
+            this.form = this.formScope.form;
+            this.section = this.sectionScope.section;
+            this.controlName = this.section.id;
+            (_a = this.section.sectionValue) === null || _a === void 0 ? void 0 : _a.valueOptions.forEach(function (item) {
+                if (_this.hasValueFor(item)) {
+                    _this.form.controls[_this.controlName].setValue(item);
+                }
+            });
+        }
+        VeloPortCheckBoxComponent.prototype.handleChange = function (valueOption) {
+            var updateData = {
+                id: this.section.id,
+                action: this.hasValueFor(valueOption)
+                    ? 'remove'
+                    : this.section.model && SectionsBinderHelper.isAddAllowed(this.section.model, this.section.boundData.name)
+                        ? 'create'
+                        : 'update',
+                valueOption: valueOption,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloPortCheckBoxComponent.prototype.hasValueFor = function (valueOption) {
+            return !!this.findLineItemForValue(valueOption);
+        };
+        VeloPortCheckBoxComponent.prototype.selectAllChange = function () {
+            var _a;
+            var portDomain = (_a = this.section.model) === null || _a === void 0 ? void 0 : _a.portDomains[this.section.boundData.name];
+            var updateData = {
+                id: this.section.id,
+                action: 'upsert',
+                selectedValueOptions: this.isAllSelected() ? [] : portDomain ? portDomain.domainTypes.map(function (t) { return t.name; }) : [],
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloPortCheckBoxComponent.prototype.isAllSelected = function () {
+            var _this = this;
+            var _a, _b;
+            var selected = (_a = this.section.model) === null || _a === void 0 ? void 0 : _a.lineItems.filter(function (li) { return li.port && li.port === _this.section.boundData.name; });
+            var portDomain = (_b = this.section.model) === null || _b === void 0 ? void 0 : _b.portDomains[this.section.boundData.name];
+            return portDomain ? portDomain.domainTypes.length === (selected === null || selected === void 0 ? void 0 : selected.length) : false;
+        };
+        VeloPortCheckBoxComponent.prototype.getMessages = function (valueOption) {
+            var _a, _b, _c;
+            if ((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.lineItems) {
+                return (_c = (_b = this.findLineItemForValue(valueOption)) === null || _b === void 0 ? void 0 : _b.messages) !== null && _c !== void 0 ? _c : [];
+            }
+            return [];
+        };
+        VeloPortCheckBoxComponent.prototype.findLineItemForValue = function (valueOption) {
+            var _a;
+            return (((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.lineItems) &&
+                this.section.model.lineItems.find(function (li) { return li.type && li.type.toLowerCase() === valueOption.toLowerCase(); }));
+        };
+        return VeloPortCheckBoxComponent;
+    }());
+    VeloPortCheckBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortCheckBoxComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloPortCheckBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloPortCheckBoxComponent, selector: "velo-port-checkbox", inputs: { showSelectAll: "showSelectAll" }, ngImport: i0__namespace, template: "<div [formGroup]=\"form\">\n  <!--TODO ALE replace divs with ng-templates-->\n  <div *ngIf=\"showSelectAll\">\n    <div class=\"row no-gutter clearfix\">\n      <div class=\"col-md-12\">\n        <div class=\"content\">\n          <div class=\"container-box container-box-bordered container-box-checkbox collapsed\">\n            <div class=\"box-title\">\n              <div class=\"header clearfix\">\n                <div class=\"checkbox-select\">\n                  <label>\n                    <input type=\"checkbox\" (change)=\"selectAllChange()\" [checked]=\"isAllSelected()\" />\n\n                    <i class=\"input-helper\"></i>\n                    Select All\n                  </label>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div *ngFor=\"let valueOption of section.sectionValue?.valueOptions\">\n    <div class=\"unchecked\">\n      <div class=\"row no-gutter clearfix\">\n        <div class=\"col-md-12\">\n          <div class=\"content\">\n            <div class=\"container-box container-box-bordered container-box-checkbox collapsed\">\n              <div class=\"box-title\" (click)=\"handleChange(valueOption)\">\n                <div class=\"header clearfix\">\n                  <div class=\"checkbox-select\">\n                    <label>\n                      <input\n                        type=\"checkbox\"\n                        [class.checkbox--checked]=\"valueOption === form.controls[controlName].value\"\n                      />\n\n                      <i class=\"input-helper\"></i>\n                      {{section.sectionValue?.displayValues?.[valueOption] || valueOption}}\n                    </label>\n                  </div>\n                </div>\n\n                <div class=\"box-actions\" *ngIf=\"hasValueFor(valueOption)\">\n                  <ng-template #msgTemplate>\n                    <div class=\"runtime-info-message\">\n                      <ul class=\"message-text\">\n                        <li *ngFor=\"let message of getMessages(valueOption)\">{{ message }}</li>\n                      </ul>\n                    </div>\n                  </ng-template>\n                  <div\n                    class=\"box-action-button\"\n                    *ngIf=\"getMessages(valueOption).length > 0\"\n                    [popover]=\"msgTemplate\"\n                    placement=\"left\"\n                    container=\"body\"\n                    [isOpen]=\"true\"\n                  >\n                    <a href=\"javascript:void(0);\">\n                      <i class=\"fa fa-info check-icon\"></i>\n                    </a>\n                  </div>\n                </div>\n              </div>\n              <div class=\"box-content-wrapper\">\n                <div class=\"box-content\">&nbsp;</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-content></ng-content>\n", directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$1.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortCheckBoxComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-port-checkbox',
+                        templateUrl: 'velo-port-checkbox.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; }, propDecorators: { showSelectAll: [{
+                    type: i0.Input
+                }] } });
+
+    var VeloPortDropdownComponent = /** @class */ (function () {
+        function VeloPortDropdownComponent(formScope, sectionScope) {
+            var _this = this;
+            var _a;
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+            this.prices = {};
+            this.form = this.formScope.form;
+            this.section = this.sectionScope.section;
+            this.controlName = this.section.id;
+            this.qtyControlName = this.section.id + 'qty';
+            if (this.section.pricingEnabled) {
+                (_a = this.section.sectionValue) === null || _a === void 0 ? void 0 : _a.valueOptions.forEach(function (valueOption) {
+                    _this.prices[valueOption] = _this.findPriceItemsForValue(valueOption);
+                });
+            }
+        }
+        VeloPortDropdownComponent.prototype.isAddAllowed = function () {
+            if (!i7.EntityUtil.isPresent(this.form.controls[this.controlName].value)) {
+                return false;
+            }
+            return this.section.model
+                ? SectionsBinderHelper.isAddAllowed(this.section.model, this.section.boundData.name)
+                : false;
+        };
+        VeloPortDropdownComponent.prototype.handleCreate = function () {
+            if (this.form.invalid || !this.isAddAllowed()) {
+                return;
+            }
+            var updateData = {
+                id: this.section.id,
+                action: 'create',
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloPortDropdownComponent.prototype.findPriceItemsForValue = function (valueOption) {
+            var _this = this;
+            var _a;
+            var prices = [];
+            if (valueOption) {
+                var portDomain = (_a = this.section.model) === null || _a === void 0 ? void 0 : _a.portDomains[this.section.boundData.name];
+                var domainType = portDomain === null || portDomain === void 0 ? void 0 : portDomain.domainTypes.find(function (d) { return d.name.toLowerCase() === valueOption.toLowerCase(); });
+                if (domainType && domainType.recommendedPrices) {
+                    prices = domainType.recommendedPrices;
+                }
+            }
+            var oneTime = {
+                chargeMethod: 'ONE_TIME',
+                netPrice: 0,
+                listPrice: 0,
+                chargeType: '',
+            };
+            var recurring = {
+                chargeMethod: 'RECURRING',
+                netPrice: 0,
+                listPrice: 0,
+                chargeType: '',
+            };
+            prices.forEach(function (p) {
+                if (p.chargeMethod === oneTime.chargeMethod) {
+                    _this.add(oneTime, p);
+                }
+                if (p.chargeMethod === recurring.chargeMethod) {
+                    _this.add(recurring, p);
+                }
+            });
+            var result = [];
+            if (oneTime.listPrice > 0) {
+                result.push(oneTime);
+            }
+            if (recurring.listPrice > 0) {
+                result.push(recurring);
+            }
+            return result;
+        };
+        VeloPortDropdownComponent.prototype.add = function (target, src) {
+            target.netPrice = target.netPrice + src.netPrice;
+            target.listPrice = target.listPrice + src.listPrice;
+            if (src.explanation) {
+                target.explanation = src.explanation;
+            }
+        };
+        return VeloPortDropdownComponent;
+    }());
+    VeloPortDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortDropdownComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloPortDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloPortDropdownComponent, selector: "velo-port-dropdown", ngImport: i0__namespace, template: "<div class=\"form-group col-md-12\" [formGroup]=\"form\">\n  <div class=\"input-form-input div-inline\">\n    <label [for]=\"controlName\">{{ section.label }}</label>\n    <div class=\"form-control-wrapper\">\n      <select [id]=\"controlName\" [formControlName]=\"controlName\" class=\"form-control\">\n        <option *ngFor=\"let valueOption of section.sectionValue?.valueOptions\" [ngValue]=\"valueOption\">\n          {{section.sectionValue?.displayValues?.[valueOption] || valueOption}}\n          <span *ngIf=\"prices[valueOption] && prices[valueOption].length > 0\">\n            <span>${{ prices[valueOption][0].netPrice }}</span>\n            <span *ngIf=\"prices[valueOption].length > 1\">\n              <span>, </span>\n              <span>${{ prices[valueOption][1].netPrice }}</span>\n            </span>\n          </span>\n        </option>\n      </select>\n    </div>\n  </div>\n  <div class=\"input-form-input div-inline quantity-form-input\">\n    <label [for]=\"qtyControlName\"> Quantity </label>\n    <div class=\"form-control-wrapper\">\n      <input [id]=\"qtyControlName\" [formControlName]=\"qtyControlName\" type=\"text\" class=\"form-control\" size=\"3\" />\n\n      <div\n        class=\"validation-message\"\n        [hidden]=\"form.controls[qtyControlName].valid || form.controls[qtyControlName].pristine\"\n      >\n        <div *ngFor=\"let key of form.controls[qtyControlName].errors | values\">\n          <span> {{form.controls[qtyControlName]?.errors?.[key].message}}</span>\n        </div>\n      </div>\n\n      <a href=\"javascript:void(0);\" (click)=\"handleCreate()\">\n        <div class=\"add-config-control\" [attr.disabled]=\"form.valid && isAddAllowed() ? null : true\">\n          <i class=\"fa fa-plus plus-icon\"></i>\n        </div>\n      </a>\n    </div>\n  </div>\n</div>\n<ng-content></ng-content>\n", directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "values": i7__namespace.ValuesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-port-dropdown',
+                        templateUrl: 'velo-port-dropdown.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+    var VeloPortRadioComponent = /** @class */ (function () {
+        function VeloPortRadioComponent(formScope, sectionScope) {
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+            this.prices = {};
+            this.form = this.formScope.form;
+            this.section = this.sectionScope.section;
+            this.controlName = this.section.id;
+        }
+        VeloPortRadioComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
+            this.initPriceItems();
+            (_a = this.section.sectionValue) === null || _a === void 0 ? void 0 : _a.valueOptions.forEach(function (item) {
+                if (_this.hasValueFor(item)) {
+                    _this.form.controls[_this.controlName].setValue(item);
+                }
+            });
+        };
+        VeloPortRadioComponent.prototype.handleChange = function (event, valueOption) {
+            event.preventDefault();
+            event.stopPropagation();
+            var updateData = {
+                id: this.section.id,
+                action: this.hasPreviousValue() ? 'update' : 'create',
+                valueOption: valueOption,
+            };
+            this.form.controls[this.controlName].setValue(valueOption);
+            this.form.controls[this.controlName].markAsDirty();
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloPortRadioComponent.prototype.hasValueFor = function (valueOption) {
+            return !!this.findLineItemForValue(valueOption);
+        };
+        VeloPortRadioComponent.prototype.getMessages = function (valueOption) {
+            var _a;
+            var lineItem = this.findLineItemForValue(valueOption);
+            if (((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.lineItems) && lineItem) {
+                return lineItem.messages;
+            }
+            return [];
+        };
+        VeloPortRadioComponent.prototype.toString = function (price) {
+            var result = '';
+            if (price.listPrice > price.netPrice) {
+                result += '<strike>' + price.listPrice + '</strike>';
+            }
+            result += price.netPrice;
+            if (price.explanation) {
+                result += '(' + price.explanation + ')';
+            }
+            return result;
+        };
+        VeloPortRadioComponent.prototype.hasPreviousValue = function () {
+            var _this = this;
+            var _a;
+            var previous = (_a = this.section.model) === null || _a === void 0 ? void 0 : _a.lineItems.filter(function (li) { return li.port && li.port === _this.section.boundData.name; });
+            return previous ? previous.length > 0 : false;
+        };
+        VeloPortRadioComponent.prototype.findLineItemForValue = function (valueOption) {
+            return this.section.model ? LineItemUtil.findLineItemForValue(this.section.model, valueOption) : undefined;
+        };
+        VeloPortRadioComponent.prototype.initPriceItems = function () {
+            var _this = this;
+            var _a;
+            this.prices = {};
+            if (this.section.pricingEnabled) {
+                (_a = this.section.sectionValue) === null || _a === void 0 ? void 0 : _a.valueOptions.forEach(function (valueOption) {
+                    _this.prices[valueOption] = _this.findPriceItemsForValue(valueOption);
+                });
+            }
+        };
+        VeloPortRadioComponent.prototype.findPriceItemsForValue = function (valueOption) {
+            var _this = this;
+            var _a, _b;
+            var prices = [];
+            if (valueOption) {
+                var lineItem = ((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.lineItems) &&
+                    this.section.model.lineItems.find(function (li) { return li.type && li.type.toLowerCase() === valueOption.toLowerCase(); });
+                if (lineItem && lineItem.chargeItems) {
+                    prices = lineItem.chargeItems.map(function (pi) {
+                        var price = {
+                            listPrice: pi.listPrice,
+                            netPrice: pi.netPrice,
+                            chargeMethod: pi.chargeMethod,
+                            chargeType: pi.chargeType,
+                        };
+                        return price;
+                    });
+                }
+                else {
+                    var portDomain = (_b = this.section.model) === null || _b === void 0 ? void 0 : _b.portDomains[this.section.boundData.name];
+                    var domainType = portDomain === null || portDomain === void 0 ? void 0 : portDomain.domainTypes.find(function (d) { return d.name.toLowerCase() === valueOption.toLowerCase(); });
+                    if (domainType && domainType.recommendedPrices) {
+                        prices = domainType.recommendedPrices;
+                    }
+                }
+            }
+            var oneTime = {
+                chargeMethod: 'ONE_TIME',
+                netPrice: 0,
+                listPrice: 0,
+                chargeType: '',
+            };
+            var recurring = {
+                chargeMethod: 'RECURRING',
+                netPrice: 0,
+                listPrice: 0,
+                chargeType: '',
+            };
+            prices.forEach(function (p) {
+                if (p.chargeMethod === oneTime.chargeMethod) {
+                    _this.add(oneTime, p);
+                }
+                if (p.chargeMethod === recurring.chargeMethod) {
+                    _this.add(recurring, p);
+                }
+            });
+            var result = [];
+            if (oneTime.listPrice > 0) {
+                result.push(oneTime);
+            }
+            if (recurring.listPrice > 0) {
+                result.push(recurring);
+            }
+            return result;
+        };
+        VeloPortRadioComponent.prototype.add = function (target, src) {
+            target.netPrice = target.netPrice + src.netPrice;
+            target.listPrice = target.listPrice + src.listPrice;
+            if (src.explanation) {
+                target.explanation = src.explanation;
+            }
+        };
+        return VeloPortRadioComponent;
+    }());
+    VeloPortRadioComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortRadioComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloPortRadioComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloPortRadioComponent, selector: "velo-port-radio", ngImport: i0__namespace, template: "<div [formGroup]=\"form\">\n  <!--TODO ALE replace divs with ng-templates-->\n  <ng-container *ngFor=\"let valueOption of section.sectionValue?.valueOptions\">\n    <div class=\"unchecked\">\n      <div class=\"row no-gutter clearfix\">\n        <div class=\"col-md-12\">\n          <div class=\"content\">\n            <div class=\"container-box container-box-bordered container-box-radio\">\n              <div class=\"box-title\" (click)=\"handleChange($event, valueOption)\">\n                <div class=\"header clearfix\">\n                  <div class=\"radio-button\">\n                    <label>\n                      <input type=\"radio\" [id]=\"controlName\" [value]=\"valueOption\" [formControlName]=\"controlName\" />\n\n                      <i class=\"input-helper\"></i>\n\n                      {{ section.sectionValue?.displayValues?.[valueOption] || valueOption }}\n\n                      <span *ngIf=\"prices[valueOption] && prices[valueOption].length > 0\">\n                        <span>${{ prices[valueOption][0].netPrice }}</span>\n\n                        <span *ngIf=\"prices[valueOption].length > 1\">\n                          <span>, </span>\n\n                          <span>${{ prices[valueOption][1].netPrice }}</span>\n                        </span>\n                      </span>\n                    </label>\n                    <span *ngIf=\"prices[valueOption] && prices[valueOption].length > 0\">\n                      <div>{{ prices[valueOption][0].explanation }}</div>\n\n                      <span *ngIf=\"prices[valueOption].length > 1 && prices[valueOption][1].explanation\">\n                        <div>{{ prices[valueOption][1].explanation }}</div>\n                      </span>\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <ng-content></ng-content>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n</div>\n<ng-content></ng-content>\n", directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortRadioComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // tslint:disable-next-line:component-selector
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-port-radio',
+                        templateUrl: 'velo-port-radio.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+    var VeloTypeComponent = /** @class */ (function () {
+        function VeloTypeComponent(formScope, collapsibleState, sectionScope, messageService) {
+            var _a, _b;
+            this.formScope = formScope;
+            this.collapsibleState = collapsibleState;
+            this.sectionScope = sectionScope;
+            this.messageService = messageService;
+            this.messageBucketId = 'ui-runtime';
+            this.indent = 1;
+            this.prices = [];
+            this.form = this.formScope.form;
+            this.section = this.sectionScope.section;
+            this.indent = this.sectionScope.indent;
+            this.controlName = this.section.id;
+            this.qtyControlName = this.section.id + 'qty';
+            this.displayName =
+                (((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.properties) && this.section.model.properties.displayName) || ((_b = this.section.model) === null || _b === void 0 ? void 0 : _b.type) || '';
+        }
+        VeloTypeComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b;
+            if (this.section.pricingEnabled) {
+                this.prices = this.getPrices();
+            }
+            if (this.section.controlType === 'MESSAGE') {
+                this.messageService.clear(this.messageBucketId);
+                (_b = (_a = this.section.model) === null || _a === void 0 ? void 0 : _a.messages) === null || _b === void 0 ? void 0 : _b.forEach(function (message) {
+                    _this.messageService.add({ key: _this.messageBucketId, summary: message });
+                });
+            }
+        };
+        VeloTypeComponent.prototype.handleRemove = function () {
+            var updateData = {
+                id: this.section.id,
+                action: 'remove',
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloTypeComponent.prototype.handleQuantityUpdate = function () {
+            var updateData = {
+                id: this.section.id,
+                action: 'qtyUpdate',
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloTypeComponent.prototype.toggleCollapse = function () {
+            if (this.section.model) {
+                this.collapsibleState.toggleCollapse(this.section.model.id);
+            }
+        };
+        VeloTypeComponent.prototype.getPrices = function () {
+            var _this = this;
+            var _a;
+            var prices = [];
+            if ((_a = this.section.model) === null || _a === void 0 ? void 0 : _a.chargeItems) {
+                prices = this.section.model.chargeItems.map(function (pi) {
+                    var price = {
+                        listPrice: pi.listPrice,
+                        netPrice: pi.netPrice,
+                        chargeMethod: pi.chargeMethod,
+                        chargeType: pi.chargeType,
+                    };
+                    return price;
+                });
+            }
+            var oneTime = {
+                chargeMethod: 'ONE_TIME',
+                netPrice: 0,
+                listPrice: 0,
+                chargeType: '',
+            };
+            var recurring = {
+                chargeMethod: 'RECURRING',
+                netPrice: 0,
+                listPrice: 0,
+                chargeType: '',
+            };
+            prices.forEach(function (p) {
+                if (p.chargeMethod === oneTime.chargeMethod) {
+                    _this.add(oneTime, p);
+                }
+                if (p.chargeMethod === recurring.chargeMethod) {
+                    _this.add(recurring, p);
+                }
+            });
+            var result = [];
+            if (oneTime.listPrice > 0) {
+                result.push(oneTime);
+            }
+            if (recurring.listPrice > 0) {
+                result.push(recurring);
+            }
+            return result;
+        };
+        VeloTypeComponent.prototype.add = function (target, src) {
+            target.netPrice = target.netPrice + src.netPrice;
+            target.listPrice = target.listPrice + src.listPrice;
+            if (src.explanation) {
+                target.explanation = src.explanation;
+            }
+        };
+        return VeloTypeComponent;
+    }());
+    VeloTypeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloTypeComponent, deps: [{ token: FormScopeService }, { token: CollapsibleStateService }, { token: SectionScopeService }, { token: i3__namespace$1.MessageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloTypeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloTypeComponent, selector: "velo-type", ngImport: i0__namespace, template: "<div class=\"container-box div-block collapsed container-box-bordered\" [formGroup]=\"form\">\n  <div class=\"box-title\">\n    <div class=\"header clearfix\">\n      <div>\n        <div class=\"header-label div-inline\">\n          {{ displayName }}\n          <span *ngIf=\"prices.length > 0\">\n            <span>${{ prices[0].netPrice }}</span>\n            <span *ngIf=\"prices.length > 1\">\n              <span>, </span>\n              <span>${{ prices[1].netPrice }}</span>\n            </span>\n          </span>\n        </div>\n\n        <div class=\"header-qty-container input-form-input\">\n          <input\n            [id]=\"qtyControlName\"\n            [formControlName]=\"qtyControlName\"\n            (blur)=\"form.controls[qtyControlName].valid && handleQuantityUpdate()\"\n            type=\"text\"\n            class=\"form-control\"\n            size=\"3\"\n          />\n          <div class=\"validation-message\">\n            <div *ngFor=\"let key of form.controls[qtyControlName].errors | values\">\n              <span>\n                {{ form.controls[qtyControlName]?.errors?.[key].message }}\n              </span>\n            </div>\n            <span *ngIf=\"form.controls[qtyControlName].valid\"> &nbsp; </span>\n          </div>\n          <span *ngIf=\"prices.length > 0\">\n            <div>{{ prices[0].explanation }}</div>\n            <span *ngIf=\"prices.length > 1 && prices[1].explanation\">\n              <div>{{ prices[1].explanation }}</div>\n            </span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"box-actions\">\n      <ng-container *ngIf=\"section.controlType !== 'MESSAGE'\">\n        <ng-template #msgTemplate>\n          <div class=\"runtime-info-message\">\n            <ul class=\"message-text\">\n              <li *ngFor=\"let message of section.model?.messages\">{{ message }}</li>\n            </ul>\n          </div>\n        </ng-template>\n\n        <div\n          class=\"box-action-button\"\n          *ngIf=\"(section.model?.messages?.length ?? 0) > 0\"\n          [popover]=\"msgTemplate\"\n          placement=\"left\"\n          container=\"body\"\n          [isOpen]=\"true\"\n        >\n          <a href=\"javascript:void(0);\">\n            <i class=\"fa fa-info check-icon\"></i>\n          </a>\n        </div>\n      </ng-container>\n\n      <div\n        class=\"box-action-button\"\n        (click)=\"toggleCollapse()\"\n        [hidden]=\"!section.children || section.children.length < 1\"\n      >\n        <a><i class=\"fa fa-chevron-down check-icon\"></i></a>\n      </div>\n\n      <div class=\"box-action-button\" (click)=\"handleRemove()\">\n        <a><i class=\"fa fa-trash-o check-icon\"></i></a>\n      </div>\n    </div>\n  </div>\n\n  <ng-content></ng-content>\n</div>\n", directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$1.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }], pipes: { "values": i7__namespace.ValuesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloTypeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-type',
+                        templateUrl: 'velo-type.component.html',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: CollapsibleStateService }, { type: SectionScopeService }, { type: i3__namespace$1.MessageService }]; } });
+
+    var SfQueryDirective = /** @class */ (function () {
+        function SfQueryDirective(apiService) {
+            this.apiService = apiService;
+        }
+        SfQueryDirective.prototype.query = function (searchRequest, objectName) {
+            return this.apiService.query(searchRequest, objectName).toPromise();
+        };
+        SfQueryDirective.prototype.describe = function (objectName, fieldName) {
+            return this.apiService.describe(objectName, fieldName).toPromise();
+        };
+        SfQueryDirective.prototype.describe2 = function (objectName, fieldsNames) {
+            return this.apiService.describe2(objectName, fieldsNames).toPromise();
+        };
+        SfQueryDirective.prototype.apexGetRequest = function (path, params) {
+            return this.apiService.apexGetRequest(path, params).toPromise();
+        };
+        SfQueryDirective.prototype.apexPostRequest = function (path, body) {
+            return this.apiService.apexPostRequest(path, body).toPromise();
+        };
+        return SfQueryDirective;
+    }());
+    SfQueryDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SfQueryDirective, deps: [{ token: i1__namespace.SalesforceApiService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SfQueryDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: SfQueryDirective, selector: "sf-query", exportAs: ["sfApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SfQueryDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'sf-query',
+                        exportAs: 'sfApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.SalesforceApiService }]; } });
+
+    var SectionHelperService = /** @class */ (function () {
+        function SectionHelperService() {
+        }
+        SectionHelperService.findSectionForValue = function (section, valueOption) {
+            if (!i7.EntityUtil.isPresent(section) || !i7.EntityUtil.isPresent(section.children) || i7.EntityUtil.isBlank(valueOption)) {
+                return;
+            }
+            var found = i7.EntityUtil.filterHierarchically(section.children, 'children', function (_a) {
+                var model = _a.model;
+                return model && model.type.toLowerCase() === valueOption.toLowerCase();
+            });
+            return found && found.pop();
+        };
+        SectionHelperService.prototype.getTotalPrices = function (section) {
+            if (!section || !section.model || !section.model.chargeGroupItems) {
+                return new Map();
+            }
+            return i7.PricingUtils.sumPriceByProperty(section.model.chargeGroupItems, 'netPrice', [
+                'chargeMethod',
+                'sellingFrequency',
+            ]);
+        };
+        return SectionHelperService;
+    }());
+    SectionHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionHelperService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionHelperService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    var SectionContextAware = /** @class */ (function () {
+        function SectionContextAware(formScope, sectionScope) {
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+        }
+        SectionContextAware.prototype.ngOnInit = function () {
+            this.form = this.formScope.form;
+            this.section = this.sectionScope.section;
+            this.initControlNames();
+        };
+        SectionContextAware.prototype.initControlNames = function () {
+            this.controlName = this.section.id;
+            this.qtyControlName = this.section.id + 'qty';
+        };
+        //TODO ALE CONSIDER STORE INSTEAD OF CALCULATE EVERY TIME
+        SectionContextAware.prototype.isAddAllowed = function (quantityToAdd) {
+            if (quantityToAdd === void 0) { quantityToAdd = 1; }
+            return this.section.model
+                ? SectionsBinderHelper.isAddAllowed(this.section.model, this.section.boundData.name, quantityToAdd)
+                : false;
+        };
+        SectionContextAware.prototype.isRemoveAllowed = function (quantityToRemove) {
+            if (quantityToRemove === void 0) { quantityToRemove = 1; }
+            return this.section.model
+                ? SectionsBinderHelper.isRemoveAllowed(this.section.model, this.section.boundData.name, quantityToRemove)
+                : false;
+        };
+        SectionContextAware.prototype.handleCreate = function (valueOption) {
+            if (!this.isAddAllowed()) {
+                return;
+            }
+            var updateData = {
+                id: this.section.id,
+                action: 'create',
+                valueOption: i7.EntityUtil.isPresent(valueOption) ? valueOption : void 0,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        SectionContextAware.prototype.handleChange = function (valueOption) {
+            var updateData = {
+                id: this.section.id,
+                action: 'update',
+                valueOption: i7.EntityUtil.isPresent(valueOption) ? valueOption : void 0,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        SectionContextAware.prototype.handleQtyChange = function (valueOption) {
+            var updateData = {
+                id: this.section.id,
+                action: 'qtyUpdate',
+                valueOption: valueOption,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        SectionContextAware.prototype.handleRemove = function (valueOption) {
+            var updateData = {
+                id: this.section.id,
+                action: 'remove',
+                valueOption: valueOption,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        SectionContextAware.prototype.handleCopy = function (valueOption) {
+            var updateData = {
+                id: this.section.id,
+                action: 'copy',
+                valueOption: valueOption,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        return SectionContextAware;
+    }());
+    SectionContextAware.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionContextAware, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SectionContextAware.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: SectionContextAware, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionContextAware, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+    var LineItemDirective = /** @class */ (function () {
+        function LineItemDirective(formScope, sectionScope, configurationService) {
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+            this.configurationService = configurationService;
+        }
+        LineItemDirective.prototype.ngOnInit = function () {
+            this.section = this.sectionScope.section;
+            this.lineItem = this.section.model;
+        };
+        LineItemDirective.prototype.handlePatch = function (rootLineItem) {
+            var updateData = {
+                id: this.sectionScope.section.id,
+                action: 'patch',
+                valueOption: rootLineItem,
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        LineItemDirective.prototype.configure = function (runtimeContext, configurableRamp) {
+            return this.configurationService
+                .configure(runtimeContext, { configurableRamp: configurableRamp })
+                .pipe(rxjsOperators.take(1))
+                .toPromise();
+        };
+        return LineItemDirective;
+    }());
+    LineItemDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LineItemDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }, { token: ConfigurationService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    LineItemDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: LineItemDirective, selector: "line-item", exportAs: ["liApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: LineItemDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'line-item',
+                        exportAs: 'liApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }, { type: ConfigurationService }]; } });
+    var VeloPortDirective = /** @class */ (function (_super) {
+        __extends(VeloPortDirective, _super);
+        function VeloPortDirective(formScope, sectionScope) {
+            var _this = _super.call(this, formScope, sectionScope) || this;
+            _this.valueQuantities = {};
+            return _this;
+        }
+        VeloPortDirective.prototype.handlePriceAdjustment = function (action, valueOption, amount) {
+            var updateData = {
+                id: this.section.id,
+                action: action,
+                valueOption: valueOption,
+                options: { amount: amount },
+            };
+            this.formScope.publishFormUpdate(updateData);
+        };
+        VeloPortDirective.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            this.initQuantity();
+        };
+        VeloPortDirective.prototype.handleUpsert = function (valueOption, event) {
+            if (i7.EntityUtil.isPresent(this.valueQuantities[valueOption]) && i7.EntityUtil.isPresent(event)) {
+                event === null || event === void 0 ? void 0 : event.preventDefault();
+                return;
+            }
+            else if (Object.keys(this.valueQuantities).length > 0) {
+                this.handleChange(valueOption);
+            }
+            else {
+                this.handleCreate(valueOption);
+            }
+        };
+        VeloPortDirective.prototype.isActive = function (valueOption) {
+            return i7.EntityUtil.isPresent(this.valueQuantities[valueOption]);
+        };
+        VeloPortDirective.prototype.initQuantity = function () {
+            this.valueQuantities = this.section.model
+                ? SectionsBinderHelper.getQuantityGroupByValue(this.section.model, this.section.boundData.name)
+                : {};
+        };
+        //Quantity Stepper Functions
+        VeloPortDirective.prototype.handleNextVal = function (valueOption) {
+            var initQty = this.valueQuantities[valueOption] || 0;
+            if (this.isAddAllowed()) {
+                if (initQty > 0) {
+                    var typeSection = SectionHelperService.findSectionForValue(this.section, valueOption);
+                    if (typeSection) {
+                        this.form.controls[typeSection.id + 'qty'].setValue(++initQty);
+                        this.handleQtyChange(valueOption);
+                    }
+                }
+                else {
+                    this.handleCreate(valueOption);
+                }
+            }
+        };
+        VeloPortDirective.prototype.handlePrevVal = function (valueOption) {
+            var initQty = this.valueQuantities[valueOption] || 0;
+            if (this.isRemoveAllowed()) {
+                if (initQty < 2) {
+                    this.handleRemove(valueOption);
+                }
+                else {
+                    var typeSection = SectionHelperService.findSectionForValue(this.section, valueOption);
+                    if (typeSection) {
+                        this.form.controls[typeSection.id + 'qty'].setValue(--initQty);
+                        this.handleQtyChange(valueOption);
+                    }
+                }
+            }
+        };
+        VeloPortDirective.prototype.handleManualQtyChange = function (valueOption, qtyVal) {
+            var initQty = this.valueQuantities[valueOption] || 0;
+            if (isNaN(+qtyVal) || +qtyVal < 0 || initQty === +qtyVal) {
+                return;
+            }
+            var newQty = +qtyVal;
+            if (initQty === 0) {
+                if (this.isAddAllowed(newQty)) {
+                    this.form.controls[this.qtyControlName].setValue(newQty);
+                    this.handleCreate(valueOption);
+                }
+            }
+            else if (newQty === 0) {
+                if (this.isRemoveAllowed()) {
+                    this.handleRemove(valueOption);
+                }
+            }
+            else {
+                var typeSection = SectionHelperService.findSectionForValue(this.section, valueOption);
+                if (typeSection) {
+                    var dif = newQty - initQty;
+                    var isAllowed = dif > 0 ? this.isAddAllowed(dif) : this.isRemoveAllowed(dif * -1);
+                    if (isAllowed) {
+                        this.form.controls[typeSection.id + 'qty'].setValue(newQty);
+                        this.handleQtyChange(valueOption);
+                    }
+                }
+            }
+        };
+        VeloPortDirective.prototype.handleNetPriceAdjustment = function (valueOption, amount) {
+            this.handlePriceAdjustment('adjustNetPrice', valueOption, amount);
+        };
+        VeloPortDirective.prototype.handleListPriceAdjustment = function (valueOption, amount) {
+            this.handlePriceAdjustment('adjustListPrice', valueOption, amount);
+        };
+        return VeloPortDirective;
+    }(SectionContextAware));
+    VeloPortDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VeloPortDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VeloPortDirective, selector: "velo-port", exportAs: ["portApi"], usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloPortDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'velo-port',
+                        exportAs: 'portApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+    var VeloDropdownComponent = /** @class */ (function (_super) {
+        __extends(VeloDropdownComponent, _super);
+        function VeloDropdownComponent(formScope, sectionScope) {
+            return _super.call(this, formScope, sectionScope) || this;
+        }
+        return VeloDropdownComponent;
+    }(SectionContextAware));
+    VeloDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloDropdownComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloDropdownComponent, selector: "velo-dropdown", usesInheritance: true, ngImport: i0__namespace, template: "\n    <div class=\"input-form-input div-inline\" [formGroup]=\"form\">\n      <label [for]=\"controlName\">{{ section.label }}</label>\n      <div class=\"form-control-wrapper\">\n        <select [id]=\"controlName\" [formControlName]=\"controlName\" class=\"form-control\">\n          <option *ngFor=\"let valueOption of section.sectionValue?.valueOptions\" [ngValue]=\"valueOption\">\n            {{ section.sectionValue?.displayValues?.[valueOption] || valueOption }}\n          </option>\n        </select>\n      </div>\n    </div>\n  ", isInline: true, directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloDropdownComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-dropdown',
+                        template: "\n    <div class=\"input-form-input div-inline\" [formGroup]=\"form\">\n      <label [for]=\"controlName\">{{ section.label }}</label>\n      <div class=\"form-control-wrapper\">\n        <select [id]=\"controlName\" [formControlName]=\"controlName\" class=\"form-control\">\n          <option *ngFor=\"let valueOption of section.sectionValue?.valueOptions\" [ngValue]=\"valueOption\">\n            {{ section.sectionValue?.displayValues?.[valueOption] || valueOption }}\n          </option>\n        </select>\n      </div>\n    </div>\n  ",
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+    var VeloQuantityComponent = /** @class */ (function (_super) {
+        __extends(VeloQuantityComponent, _super);
+        function VeloQuantityComponent(formScope, sectionScope) {
+            return _super.call(this, formScope, sectionScope) || this;
+        }
+        return VeloQuantityComponent;
+    }(SectionContextAware));
+    VeloQuantityComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloQuantityComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloQuantityComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloQuantityComponent, selector: "velo-quantity", usesInheritance: true, ngImport: i0__namespace, template: "\n    <div class=\"input-form-input div-inline quantity-form-input\" [formGroup]=\"form\">\n      <label [for]=\"qtyControlName\"> Quantity </label>\n      <div class=\"form-control-wrapper\">\n        <input\n          [id]=\"controlName\"\n          [formControlName]=\"qtyControlName\"\n          [attr.disabled]=\"isAddAllowed() === true ? null : true\"\n          type=\"text\"\n          class=\"form-control\"\n          size=\"3\"\n        />\n\n        <div\n          class=\"validation-message\"\n          [hidden]=\"form.controls[qtyControlName].valid || form.controls[qtyControlName].pristine\"\n        >\n          <div *ngFor=\"let key of form.controls[qtyControlName].errors | values\">\n            <span> {{ form.controls[qtyControlName].errors?.[key].message }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ", isInline: true, directives: [{ type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "values": i7__namespace.ValuesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloQuantityComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-quantity',
+                        template: "\n    <div class=\"input-form-input div-inline quantity-form-input\" [formGroup]=\"form\">\n      <label [for]=\"qtyControlName\"> Quantity </label>\n      <div class=\"form-control-wrapper\">\n        <input\n          [id]=\"controlName\"\n          [formControlName]=\"qtyControlName\"\n          [attr.disabled]=\"isAddAllowed() === true ? null : true\"\n          type=\"text\"\n          class=\"form-control\"\n          size=\"3\"\n        />\n\n        <div\n          class=\"validation-message\"\n          [hidden]=\"form.controls[qtyControlName].valid || form.controls[qtyControlName].pristine\"\n        >\n          <div *ngFor=\"let key of form.controls[qtyControlName].errors | values\">\n            <span> {{ form.controls[qtyControlName].errors?.[key].message }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  ",
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+    var VeloQuantityButtonComponent = /** @class */ (function (_super) {
+        __extends(VeloQuantityButtonComponent, _super);
+        function VeloQuantityButtonComponent(formScope, sectionScope) {
+            return _super.call(this, formScope, sectionScope) || this;
+        }
+        return VeloQuantityButtonComponent;
+    }(SectionContextAware));
+    VeloQuantityButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloQuantityButtonComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VeloQuantityButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: VeloQuantityButtonComponent, selector: "velo-quantity-button", usesInheritance: true, ngImport: i0__namespace, template: "\n    <div class=\"input-form-input div-inline quantity-form-input\">\n      <div class=\"form-control-wrapper\">\n        <a href=\"javascript:void(0);\" (click)=\"handleCreate()\">\n          <div class=\"add-config-control\" [attr.disabled]=\"isAddAllowed() === true ? null : true\">\n            <i class=\"fa fa-plus plus-icon\"></i>\n          </div>\n        </a>\n      </div>\n    </div>\n  ", isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VeloQuantityButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        moduleId: module.id,
+                        // eslint-disable-next-line @angular-eslint/component-selector
+                        selector: 'velo-quantity-button',
+                        template: "\n    <div class=\"input-form-input div-inline quantity-form-input\">\n      <div class=\"form-control-wrapper\">\n        <a href=\"javascript:void(0);\" (click)=\"handleCreate()\">\n          <div class=\"add-config-control\" [attr.disabled]=\"isAddAllowed() === true ? null : true\">\n            <i class=\"fa fa-plus plus-icon\"></i>\n          </div>\n        </a>\n      </div>\n    </div>\n  ",
+                    }]
+            }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+    var VlApprovalDirective = /** @class */ (function () {
+        function VlApprovalDirective(repo) {
+            this.repo = repo;
+        }
+        VlApprovalDirective.prototype.submitQuote = function (quoteDraft) {
+            return this.repo.submitQuote(quoteDraft).toPromise();
+        };
+        return VlApprovalDirective;
+    }());
+    VlApprovalDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlApprovalDirective, deps: [{ token: i1__namespace.QuoteApiService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VlApprovalDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VlApprovalDirective, selector: "vl-approval", exportAs: ["approvalApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlApprovalDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'vl-approval',
+                        exportAs: 'approvalApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.QuoteApiService }]; } });
+
+    var VlDocumentAttachmentsDirective = /** @class */ (function () {
+        function VlDocumentAttachmentsDirective(service) {
+            this.service = service;
+        }
+        VlDocumentAttachmentsDirective.prototype.getAttachments = function (searchRequest) {
+            return this.service.getAttachments(searchRequest).toPromise();
+        };
+        VlDocumentAttachmentsDirective.prototype.createAttachment = function (attachment, file, reportProgress) {
+            var observable = this.service.createAttachment(attachment, file, reportProgress);
+            return reportProgress ? observable : observable.toPromise();
+        };
+        VlDocumentAttachmentsDirective.prototype.updateAttachment = function (id, attachment) {
+            return this.service.updateAttachment(id, attachment).toPromise();
+        };
+        VlDocumentAttachmentsDirective.prototype.getAttachmentFile = function (id, isPreventDownload) {
+            return this.service.getAttachmentFile(id, isPreventDownload).toPromise();
+        };
+        VlDocumentAttachmentsDirective.prototype.removeAttachment = function (id) {
+            return this.service.removeAttachment(id).toPromise();
+        };
+        return VlDocumentAttachmentsDirective;
+    }());
+    VlDocumentAttachmentsDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlDocumentAttachmentsDirective, deps: [{ token: i1__namespace.DocumentAttachmentApiService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VlDocumentAttachmentsDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VlDocumentAttachmentsDirective, selector: "vl-document-attachments", exportAs: ["documentAttachmentsApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlDocumentAttachmentsDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'vl-document-attachments',
+                        exportAs: 'documentAttachmentsApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.DocumentAttachmentApiService }]; } });
+
+    var VlDocumentTemplatesDirective = /** @class */ (function () {
+        function VlDocumentTemplatesDirective(documentTemplatesApiService) {
+            this.documentTemplatesApiService = documentTemplatesApiService;
+            /**
+             * @deprecated Use `generateDocument` instead
+             */
+            // eslint-disable-next-line @typescript-eslint/member-ordering
+            this.generateDocumentNew = this.generateDocument;
+        }
+        VlDocumentTemplatesDirective.prototype.getTemplates = function (tag) {
+            return this.documentTemplatesApiService.getTemplates(tag).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.upsertTemplate = function (template, templateFile) {
+            return this.documentTemplatesApiService
+                .upsertTemplate(template, templateFile)
+                .toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.removeTemplate = function (id) {
+            return this.documentTemplatesApiService.removeTemplate(id).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.cloneTemplate = function (id) {
+            return this.documentTemplatesApiService.cloneTemplate(id).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.downloadTemplate = function (id) {
+            return this.documentTemplatesApiService.downloadTemplateFile(id).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.generateDocument = function (template, quoteDraft, params) {
+            return this.documentTemplatesApiService.generateDocument(template, quoteDraft, params).pipe(rxjsOperators.take(1));
+        };
+        VlDocumentTemplatesDirective.prototype.generateDocumentData = function (template, quoteDraft, params) {
+            return this.documentTemplatesApiService.generateDocumentData(template, quoteDraft, params).pipe(rxjsOperators.take(1));
+        };
+        VlDocumentTemplatesDirective.prototype.getAttachments = function (searchRequest) {
+            return this.documentTemplatesApiService.getAttachments(searchRequest).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.getAttachmentFile = function (id) {
+            return this.documentTemplatesApiService.getAttachmentFile(id).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.createAttachment = function (attachment, file) {
+            return this.documentTemplatesApiService.createAttachment(attachment, file).toPromise();
+        };
+        VlDocumentTemplatesDirective.prototype.removeAttachment = function (id) {
+            return this.documentTemplatesApiService.removeAttachment(id).toPromise();
+        };
+        return VlDocumentTemplatesDirective;
+    }());
+    VlDocumentTemplatesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlDocumentTemplatesDirective, deps: [{ token: i1__namespace.DocumentTemplatesApiService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VlDocumentTemplatesDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VlDocumentTemplatesDirective, selector: "[vlQuoteTemplates]", exportAs: ["quoteTemplateApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlDocumentTemplatesDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[vlQuoteTemplates]',
+                        exportAs: 'quoteTemplateApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.DocumentTemplatesApiService }]; } });
+
+    var VlQuoteDirective = /** @class */ (function () {
+        function VlQuoteDirective(quoteApiService, runtimeService) {
+            this.quoteApiService = quoteApiService;
+            this.runtimeService = runtimeService;
+        }
+        VlQuoteDirective.prototype.getQuote = function (quoteId) {
+            return this.quoteApiService.getQuoteDraft(quoteId).toPromise();
+        };
+        VlQuoteDirective.prototype.upsertQuote = function (quoteDraft) {
+            return this.quoteApiService.upsertQuote(quoteDraft).toPromise();
+        };
+        VlQuoteDirective.prototype.configureQuote = function (quoteDraft, rootLineItemId) {
+            var _a;
+            var rootLineItem = i7.EntityUtil.findById(rootLineItemId, quoteDraft.currentState);
+            var asset = (_a = quoteDraft.initialState) === null || _a === void 0 ? void 0 : _a.find(function (a) { return a.id === rootLineItem.assetId; });
+            var context = quoteDraft.context;
+            var states = {
+                configurableRamp: LineItemUtil.removeDeletedItems(rootLineItem),
+                currentState: quoteDraft.currentState,
+                asset: asset,
+            };
+            this.runtimeService.updateRuntime(states, context.properties);
+        };
+        return VlQuoteDirective;
+    }());
+    VlQuoteDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlQuoteDirective, deps: [{ token: i1__namespace.QuoteApiService }, { token: RuntimeService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VlQuoteDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VlQuoteDirective, selector: "vl-quote", exportAs: ["quoteApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlQuoteDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'vl-quote',
+                        exportAs: 'quoteApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace.QuoteApiService }, { type: RuntimeService }]; } });
+
+    var VlRampDirective = /** @class */ (function () {
+        function VlRampDirective(contextService, rampApiService, priceApiService) {
+            this.contextService = contextService;
+            this.rampApiService = rampApiService;
+            this.priceApiService = priceApiService;
+        }
+        VlRampDirective.prototype.createRamp = function (sourceItems, currentRamps, term) {
+            var _this = this;
+            var context = this.contextService.resolve();
+            return this.rampApiService
+                .next({
+                context: context,
+                sourceItems: sourceItems,
+                currentItems: currentRamps || [],
+                term: term,
+            })
+                .pipe(rxjsOperators.tap(function (data) {
+                if (data.context) {
+                    _this.contextService.update({
+                        properties: Object.assign({}, data.context.properties),
+                    });
+                }
+            }))
+                .toPromise();
+        };
+        VlRampDirective.prototype.calculateRampTermByEndDate = function (lineItem, endDate) {
+            return this.priceApiService
+                .getSellingTermByEndDate(lineItem.planId, lineItem.offeringId, lineItem.startDate, endDate, lineItem.sellingFrequencyUnit, lineItem.sellingFrequencyDuration)
+                .toPromise();
+        };
+        VlRampDirective.prototype.calculateRampTermByTerm = function (lineItem, term) {
+            return this.priceApiService
+                .getSellingTermByTerm(lineItem.planId, lineItem.offeringId, lineItem.startDate, term, lineItem.sellingFrequencyUnit, lineItem.sellingFrequencyDuration)
+                .toPromise();
+        };
+        return VlRampDirective;
+    }());
+    VlRampDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlRampDirective, deps: [{ token: i2__namespace.ContextService }, { token: i1__namespace.RampApiService }, { token: i1__namespace.PriceApiService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    VlRampDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: VlRampDirective, selector: "vl-ramp", exportAs: ["rampApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: VlRampDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'vl-ramp',
+                        exportAs: 'rampApi',
+                    }]
+            }], ctorParameters: function () { return [{ type: i2__namespace.ContextService }, { type: i1__namespace.RampApiService }, { type: i1__namespace.PriceApiService }]; } });
+
+    var SHA1$1 = i7.UUID.SHA1();
+    var SCRIPT_GLOBAL_NAME = "$velo";
+    var SectionScriptDirective = /** @class */ (function () {
+        function SectionScriptDirective(_document, sfQueryDirective, lineItemDirective, quoteDirective, documentTemplatesDirective, rampDirective, approvalDirective, documentAttachmentsDirective, formScope, sectionScope, renderer, formBuilder, runtimeService, cdr, cartService, contextService, currentStateService, quoteService) {
+            this._document = _document;
+            this.sfQueryDirective = sfQueryDirective;
+            this.lineItemDirective = lineItemDirective;
+            this.quoteDirective = quoteDirective;
+            this.documentTemplatesDirective = documentTemplatesDirective;
+            this.rampDirective = rampDirective;
+            this.approvalDirective = approvalDirective;
+            this.documentAttachmentsDirective = documentAttachmentsDirective;
+            this.formScope = formScope;
+            this.sectionScope = sectionScope;
+            this.renderer = renderer;
+            this.formBuilder = formBuilder;
+            this.runtimeService = runtimeService;
+            this.cdr = cdr;
+            this.cartService = cartService;
+            this.contextService = contextService;
+            this.currentStateService = currentStateService;
+            this.quoteService = quoteService;
+            this.scriptId = '';
+            this.sessionScope = {};
+        }
+        SectionScriptDirective.prototype.ngOnInit = function () {
+            if (!this.scriptExists()) {
+                return;
+            }
+            this.scriptId = this.generateScriptId();
+            this.registry = this.getScriptRegistry();
+            this.sessionScope = this.getSessionScope();
+            if (!this.registry.exists(this.scriptId)) {
+                this.appendScriptElementToDom();
+            }
+            this.initScript();
+            this.registry.doRegister(this.scriptId, this.sectionScope.section.id);
+        };
+        SectionScriptDirective.prototype.ngAfterViewInit = function () {
+            var _a;
+            var sharedScriptGlobal = (_a = this.registry) === null || _a === void 0 ? void 0 : _a.getGlobalForScript(this.sectionScope.section.id);
+            if (sharedScriptGlobal) {
+                this.methodApply('afterViewInit', sharedScriptGlobal);
+            }
+        };
+        SectionScriptDirective.prototype.ngOnDestroy = function () {
+            if (!this.scriptId) {
+                return;
+            }
+            this.registry.unRegister(this.scriptId, this.sectionScope.section.id);
+            if (!this.registry.exists(this.scriptId)) {
+                this.removeScript();
+                this.registry.removeGlobalForScript(this.scriptId);
+            }
+        };
+        Object.defineProperty(SectionScriptDirective.prototype, "scope", {
+            get: function () {
+                if (!this.scriptId || !this.sectionScope.section) {
+                    return {};
+                }
+                return Object.assign({}, this.registry.getGlobalForScript(this.sectionScope.section.id) || {}, this.sessionScope);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SectionScriptDirective.prototype.scriptExists = function () {
+            var _a, _b, _c, _d;
+            return ((_d = (_c = (_b = (_a = this.sectionScope) === null || _a === void 0 ? void 0 : _a.section) === null || _b === void 0 ? void 0 : _b.script) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
+        };
+        SectionScriptDirective.prototype.encodeScriptBody = function () {
+            return this.sectionScope.section.script ? atob(this.sectionScope.section.script) : '';
+        };
+        SectionScriptDirective.prototype.generateScriptId = function () {
+            return '_' + SHA1$1.hex(this.encodeScriptBody());
+        };
+        SectionScriptDirective.prototype.getScriptRegistry = function () {
+            return this.formScope.scriptRegistry;
+        };
+        SectionScriptDirective.prototype.getSessionScope = function () {
+            return this.formScope.scriptSessionScope;
+        };
+        SectionScriptDirective.prototype.initScript = function () {
+            var sharedScriptGlobal = this.registry.getGlobalForScript(this.sectionScope.section.id);
+            if (!i7.EntityUtil.isPresent(sharedScriptGlobal)) {
+                sharedScriptGlobal = {};
+                this.registry.setGlobalForScript(this.sectionScope.section.id, sharedScriptGlobal);
+            }
+            this.methodApply('init', sharedScriptGlobal);
+        };
+        SectionScriptDirective.prototype.removeScript = function () {
+            var sharedScriptGlobal = this.registry.getGlobalForScript(this.sectionScope.section.id);
+            this.methodApply('destroy', sharedScriptGlobal);
+            this.removeScriptElementFromDom();
+        };
+        SectionScriptDirective.prototype.appendScriptElementToDom = function () {
+            var script = this.scriptFromTemplate(this.encodeScriptBody(), this.scriptId, this.sectionScope.section);
+            this.scriptElement = this.renderer.createElement('script');
+            this.scriptElement.type = "text/javascript";
+            this.scriptElement.text = script;
+            this.scriptElement.setAttribute('id', this.scriptId);
+            this.renderer.appendChild(this._document.body, this.scriptElement);
+        };
+        SectionScriptDirective.prototype.removeScriptElementFromDom = function () {
+            if (!this.scriptElement) {
+                this.scriptElement = this._document.getElementById(this.scriptId);
+            }
+            this.scriptElement.remove();
+        };
+        SectionScriptDirective.prototype.scriptFromTemplate = function (scriptBody, scriptId, section) {
+            return "var " + scriptId + " = (function (" + SCRIPT_GLOBAL_NAME + ", form, { section, templates }, sessionScope, formBuilder, runtimeContext, cdr, apis) {\n            " + SCRIPT_GLOBAL_NAME + "[\"form\"] = form;\n            " + SCRIPT_GLOBAL_NAME + "[\"section\"] = section;\n            " + SCRIPT_GLOBAL_NAME + "[\"templates\"] = templates;\n            " + SCRIPT_GLOBAL_NAME + "[\"sessionScope\"] = sessionScope;\n            " + SCRIPT_GLOBAL_NAME + "[\"formBuilder\"] = formBuilder;\n            " + SCRIPT_GLOBAL_NAME + "[\"runtimeContext\"] = runtimeContext;\n            " + SCRIPT_GLOBAL_NAME + "[\"cdr\"] = cdr;\n            " + SCRIPT_GLOBAL_NAME + "[\"apis\"] = apis;\n\n            " + scriptBody + "\n                return " + SCRIPT_GLOBAL_NAME + ";\n            });\n\n            //# sourceURL=" + ___namespace.kebabCase(section.label) + ".js";
+        };
+        SectionScriptDirective.prototype.methodApply = function (methodName, sharedScriptGlobal) {
+            var args = [
+                sharedScriptGlobal,
+                this.formScope.form,
+                this.sectionScope,
+                this.sessionScope,
+                this.formBuilder,
+                this.runtimeService.getRuntimeContext(),
+                this.cdr,
+                this.getExposedApis(),
+            ];
+            var fnInit = window["" + this.scriptId].apply(window, __spreadArray([], __read(args)));
+            fnInit && fnInit[methodName] && fnInit[methodName].apply();
+        };
+        SectionScriptDirective.prototype.getExposedApis = function () {
+            return {
+                'sf-query': this.sfQueryDirective,
+                'line-item': this.lineItemDirective,
+                'quote-directive': this.quoteDirective,
+                'templates-directive': this.documentTemplatesDirective,
+                'attachments-directive': this.documentAttachmentsDirective,
+                'ramp-directive': this.rampDirective,
+                'approval-directive': this.approvalDirective,
+                entityUtil: i7.EntityUtil,
+                moment: moment__namespace,
+                lodash: ___namespace,
+                rxjs: Object.assign(Object.assign({}, rxjsOperators__namespace), rxjs__namespace),
+                PagedEntity: i7.PagedEntity,
+                pipes: {
+                    currency: i5.CurrencyPipe,
+                },
+                solutionUpdateStarted: this.runtimeService.onSolutionUpdateStartedEvent,
+                solutionUpdated: this.runtimeService.onSolutionProcessed,
+                cartService: this.cartService,
+                configurationContextService: this.contextService,
+                quoteDraft: this.quoteService.quoteDraft,
+                currentStateService: this.currentStateService,
+            };
+        };
+        return SectionScriptDirective;
+    }());
+    SectionScriptDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionScriptDirective, deps: [{ token: i5.DOCUMENT }, { token: SfQueryDirective }, { token: LineItemDirective }, { token: VlQuoteDirective }, { token: VlDocumentTemplatesDirective }, { token: VlRampDirective }, { token: VlApprovalDirective }, { token: VlDocumentAttachmentsDirective }, { token: FormScopeService }, { token: SectionScopeService }, { token: i0__namespace.Renderer2 }, { token: i4__namespace.FormBuilder }, { token: RuntimeService }, { token: i0__namespace.ChangeDetectorRef }, { token: ShoppingCartService }, { token: i2__namespace.ContextService }, { token: CurrentStateService }, { token: i2__namespace.QuoteDraftService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SectionScriptDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: SectionScriptDirective, selector: "section-script", providers: [
+            SfQueryDirective,
+            LineItemDirective,
+            VlQuoteDirective,
+            VlDocumentTemplatesDirective,
+            VlRampDirective,
+            VlApprovalDirective,
+            VlDocumentAttachmentsDirective,
+        ], exportAs: ["scriptApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionScriptDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'section-script',
+                        exportAs: 'scriptApi',
+                        providers: [
+                            SfQueryDirective,
+                            LineItemDirective,
+                            VlQuoteDirective,
+                            VlDocumentTemplatesDirective,
+                            VlRampDirective,
+                            VlApprovalDirective,
+                            VlDocumentAttachmentsDirective,
+                        ],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: Document, decorators: [{
+                            type: i0.Inject,
+                            args: [i5.DOCUMENT]
+                        }] }, { type: SfQueryDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [SfQueryDirective]
+                        }] }, { type: LineItemDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [LineItemDirective]
+                        }] }, { type: VlQuoteDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [VlQuoteDirective]
+                        }] }, { type: VlDocumentTemplatesDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [VlDocumentTemplatesDirective]
+                        }] }, { type: VlRampDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [VlRampDirective]
+                        }] }, { type: VlApprovalDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [VlApprovalDirective]
+                        }] }, { type: VlDocumentAttachmentsDirective, decorators: [{
+                            type: i0.Inject,
+                            args: [VlDocumentAttachmentsDirective]
+                        }] }, { type: FormScopeService }, { type: SectionScopeService }, { type: i0__namespace.Renderer2 }, { type: i4__namespace.FormBuilder }, { type: RuntimeService }, { type: i0__namespace.ChangeDetectorRef }, { type: ShoppingCartService }, { type: i2__namespace.ContextService }, { type: CurrentStateService }, { type: i2__namespace.QuoteDraftService }];
+        } });
+
+    var RuntimeExecutionModule = /** @class */ (function () {
+        function RuntimeExecutionModule() {
+        }
+        return RuntimeExecutionModule;
+    }());
+    RuntimeExecutionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeExecutionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RuntimeExecutionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeExecutionModule, declarations: [ExecutionSectionRendererComponent,
+            ChildrenPlaceholderComponent,
+            SectionScriptDirective,
+            VeloPortDirective,
+            LineItemDirective,
+            VeloDropdownComponent,
+            VeloQuantityButtonComponent,
+            VeloQuantityComponent,
+            VeloAttributeDirective,
+            MultiselectComponent,
+            VeloAttributeComponent,
+            VeloPortRadioComponent,
+            VeloTypeComponent,
+            VeloPortDropdownComponent,
+            VeloPortCheckBoxComponent,
+            FederatedComponent,
+            TemplateComponent,
+            ContextProviderComponent], imports: [i5.CommonModule,
+            i4.FormsModule,
+            i4.ReactiveFormsModule,
+            i7.CoreModule,
+            i1.ApiModule,
+            elements.VeloceElementsModule,
+            i5$1.PopoverModule,
+            i8.LoaderModule,
+            i2.SdkCoreModule], exports: [i4.FormsModule,
+            i4.ReactiveFormsModule,
+            ChildrenPlaceholderComponent,
+            SectionScriptDirective,
+            LineItemDirective,
+            VeloPortDirective,
+            VeloAttributeDirective,
+            MultiselectComponent,
+            VeloAttributeComponent,
+            VeloPortRadioComponent,
+            VeloTypeComponent,
+            VeloPortDropdownComponent,
+            VeloPortCheckBoxComponent,
+            FederatedComponent,
+            TemplateComponent,
+            ContextProviderComponent] });
+    RuntimeExecutionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeExecutionModule, providers: [
+            ShoppingCartService,
+            RuntimeService,
+            ConfigurationService,
+            RuntimeContextService,
+            RuntimeFormService,
+            CurrentStateService,
+            ProductModelCacheService,
+            i5.DatePipe,
+            SectionStoreService,
+        ], imports: [[
+                i5.CommonModule,
+                i4.FormsModule,
+                i4.ReactiveFormsModule,
+                i7.CoreModule,
+                i1.ApiModule,
+                elements.VeloceElementsModule,
+                i5$1.PopoverModule,
+                i8.LoaderModule,
+                i2.SdkCoreModule,
+            ], i4.FormsModule,
+            i4.ReactiveFormsModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeExecutionModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [
+                            ExecutionSectionRendererComponent,
+                            ChildrenPlaceholderComponent,
+                            SectionScriptDirective,
+                            VeloPortDirective,
+                            LineItemDirective,
+                            VeloDropdownComponent,
+                            VeloQuantityButtonComponent,
+                            VeloQuantityComponent,
+                            VeloAttributeDirective,
+                            MultiselectComponent,
+                            VeloAttributeComponent,
+                            VeloPortRadioComponent,
+                            VeloTypeComponent,
+                            VeloPortDropdownComponent,
+                            VeloPortCheckBoxComponent,
+                            FederatedComponent,
+                            TemplateComponent,
+                            ContextProviderComponent,
+                        ],
+                        providers: [
+                            ShoppingCartService,
+                            RuntimeService,
+                            ConfigurationService,
+                            RuntimeContextService,
+                            RuntimeFormService,
+                            CurrentStateService,
+                            ProductModelCacheService,
+                            i5.DatePipe,
+                            SectionStoreService,
+                        ],
+                        imports: [
+                            i5.CommonModule,
+                            i4.FormsModule,
+                            i4.ReactiveFormsModule,
+                            i7.CoreModule,
+                            i1.ApiModule,
+                            elements.VeloceElementsModule,
+                            i5$1.PopoverModule,
+                            i8.LoaderModule,
+                            i2.SdkCoreModule,
+                        ],
+                        exports: [
+                            i4.FormsModule,
+                            i4.ReactiveFormsModule,
+                            ChildrenPlaceholderComponent,
+                            SectionScriptDirective,
+                            LineItemDirective,
+                            VeloPortDirective,
+                            VeloAttributeDirective,
+                            MultiselectComponent,
+                            VeloAttributeComponent,
+                            VeloPortRadioComponent,
+                            VeloTypeComponent,
+                            VeloPortDropdownComponent,
+                            VeloPortCheckBoxComponent,
+                            FederatedComponent,
+                            TemplateComponent,
+                            ContextProviderComponent,
+                        ],
+                    }]
+            }] });
+
+    var SHA1 = i7.UUID.SHA1();
+    var BaseSectionComponent = /** @class */ (function () {
+        function BaseSectionComponent() {
+        }
+        return BaseSectionComponent;
+    }());
+    BaseSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: BaseSectionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BaseSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: BaseSectionComponent, selector: "ng-component", inputs: { form: "form", section: "section" }, viewQueries: [{ propertyName: "templates", predicate: ["customTemplate"], descendants: true }], ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: BaseSectionComponent, decorators: [{
+                type: i0.Component,
+                args: [{ template: '' }]
+            }], propDecorators: { form: [{
+                    type: i0.Input
+                }], section: [{
+                    type: i0.Input
+                }], templates: [{
+                    type: i0.ViewChildren,
+                    args: ['customTemplate']
+                }] } });
+    var SectionsService = /** @class */ (function () {
+        function SectionsService(compiler, m, sectionStore) {
+            this.compiler = compiler;
+            this.m = m;
+            this.sectionStore = sectionStore;
+            this.moduleType = null;
+            this.moduleInstance = null;
+        }
+        SectionsService.prototype.compileModule = function (sections, isViewEncapsulated) {
+            var uniqueSections = this.getUniqueSections(sections);
+            this.moduleType = this.getModuleType(uniqueSections, isViewEncapsulated);
+            this.moduleInstance = this.compiler.compileModuleAndAllComponentsSync(this.moduleType);
+            this.sectionStore.componentFactories = this.moduleInstance.componentFactories;
+        };
+        SectionsService.prototype.destroy = function () {
+            if (this.moduleInstance) {
+                this.sectionStore.componentFactories = [];
+                this.moduleInstance = null;
+            }
+            if (this.moduleType) {
+                this.compiler.clearCacheFor(this.moduleType);
+                this.moduleType = null;
+            }
+        };
+        SectionsService.prototype.getDecoratedComponents = function (sections, isViewEncapsulated) {
+            var _this = this;
+            if (isViewEncapsulated === void 0) { isViewEncapsulated = false; }
+            var result = [];
+            sections.forEach(function (section) {
+                var _a;
+                var transpiledTemplate = _this.getTranspiledTemplate(section);
+                var DynamicComponent = i0.Component({
+                    selector: section.dynamicSelector,
+                    template: transpiledTemplate,
+                    styles: [atob(section.styles || '')],
+                    providers: [SectionHelperService],
+                    encapsulation: isViewEncapsulated ? i0.ViewEncapsulation.ShadowDom : i0.ViewEncapsulation.Emulated,
+                    jit: true,
+                })(/** @class */ (function (_super) {
+                    __extends(C, _super);
+                    function C() {
+                        return _super !== null && _super.apply(this, arguments) || this;
+                    }
+                    return C;
+                }(BaseSectionComponent)));
+                _this.applySelectorField(DynamicComponent, (_a = section.dynamicSelector) !== null && _a !== void 0 ? _a : '');
+                result.push(DynamicComponent);
+            });
+            return result;
+        };
+        SectionsService.prototype.getModuleType = function (sections, isViewEncapsulated) {
+            var decoratedComponents = this.getDecoratedComponents(sections, isViewEncapsulated);
+            var DynamicModule = /** @class */ (function () {
+                function DynamicModule() {
+                }
+                return DynamicModule;
+            }());
+            DynamicModule = __decorate([
+                i0.NgModule({
+                    imports: [
+                        i5.CommonModule,
+                        RuntimeExecutionModule,
+                        i7.CoreModule,
+                        elements.VeloceElementsModule,
+                        scrolling.ScrollingModule,
+                        scrolling$1.ScrollingModule,
+                    ],
+                    declarations: [decoratedComponents],
+                    jit: true,
+                })
+            ], DynamicModule);
+            return DynamicModule;
+        };
+        SectionsService.prototype.applySelectorField = function (target, dynamicSelector) {
+            _.set(target, '$$dynamicSelector', dynamicSelector);
+        };
+        SectionsService.prototype.getUniqueSections = function (sections) {
+            var uniqueSections = {};
+            sections.forEach(function (section) {
+                section.hash = SHA1.hex(section.template);
+                var existingSection = section.hash ? uniqueSections[section.hash] : undefined;
+                if (existingSection && existingSection.template === section.template) {
+                    section.dynamicSelector = existingSection.dynamicSelector;
+                }
+                else if (section.hash) {
+                    section.dynamicSelector = "section-" + section.id;
+                    uniqueSections[section.hash] = section;
+                }
+            });
+            return _.values(uniqueSections);
+        };
+        SectionsService.prototype.getTranspiledTemplate = function (section) {
+            var template = section.template ? atob(section.template) : '';
+            if (!i7.EntityUtil.isEmpty(section.script) && template.indexOf('<section-script') === -1) {
+                template = "<section-script></section-script>".concat(template);
+            }
+            return template;
+        };
+        return SectionsService;
+    }());
+    SectionsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionsService, deps: [{ token: i0__namespace.Compiler }, { token: i0__namespace.NgModuleRef }, { token: SectionStoreService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionsService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionsService, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: i0__namespace.Compiler }, { type: i0__namespace.NgModuleRef }, { type: SectionStoreService }]; } });
+
+    var SectionRendererComponent = /** @class */ (function () {
+        function SectionRendererComponent(_injector, _m, sectionScope, sectionStore) {
+            this._injector = _injector;
+            this._m = _m;
+            this.sectionScope = sectionScope;
+            this.sectionStore = sectionStore;
+            this.componentRef = null;
+        }
+        Object.defineProperty(SectionRendererComponent.prototype, "section", {
+            get: function () {
+                return this._section;
+            },
+            set: function (value) {
+                this._section = value;
+                this.sectionScope.section = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        SectionRendererComponent.prototype.ngOnInit = function () {
+            this.renderSection();
+        };
+        SectionRendererComponent.prototype.ngAfterViewInit = function () {
+            var _a, _b;
+            if (this.componentRef) {
+                this.sectionScope.templates.next((_b = (_a = this.componentRef.instance['templates']) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : []);
+            }
+        };
+        SectionRendererComponent.prototype.ngOnDestroy = function () {
+            if (this.componentRef) {
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+        };
+        SectionRendererComponent.prototype.renderSection = function () {
+            var _a;
+            if (this.componentRef) {
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+            var componentFactory = this.sectionStore.getComponentFactory(this._section);
+            if (!componentFactory) {
+                return;
+            }
+            this.componentRef = componentFactory.create(this._injector, [], null, this._m);
+            this.componentRef.location.nativeElement.setAttribute('sectionId', "" + ((_a = this._section.model) === null || _a === void 0 ? void 0 : _a.id) + this._section.label);
+            this.componentRef.instance['form'] = this.form;
+            this.componentRef.instance['section'] = this.section;
+            this.container.insert(this.componentRef.hostView);
+        };
+        return SectionRendererComponent;
+    }());
+    SectionRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionRendererComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.NgModuleRef }, { token: SectionScopeService }, { token: SectionStoreService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SectionRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: SectionRendererComponent, selector: "vl-section-renderer", inputs: { section: "section", form: "form" }, providers: [SectionScopeService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: "<ng-template #container></ng-template>", styles: [":host{display:contents}\n"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'vl-section-renderer',
+                        templateUrl: 'section-renderer.component.html',
+                        styleUrls: ['section-renderer.component.scss'],
+                        providers: [SectionScopeService],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }, { type: i0__namespace.NgModuleRef }, { type: SectionScopeService }, { type: SectionStoreService }]; }, propDecorators: { section: [{
+                    type: i0.Input
+                }], form: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ['container', { read: i0.ViewContainerRef, static: true }]
+                }] } });
+
+    var defaultTemplate = btoa('<template-component></template-component>');
+    var ComponentPreviewComponent = /** @class */ (function () {
+        function ComponentPreviewComponent(sectionsService, runtimeFormService, formScope, runtimeService, cdr) {
+            this.sectionsService = sectionsService;
+            this.runtimeFormService = runtimeFormService;
+            this.formScope = formScope;
+            this.runtimeService = runtimeService;
+            this.cdr = cdr;
+            this.form = new i4.FormGroup({});
+            this.showPreview = false;
+            this.isNoPreviewAvailable = false;
+            this.isPreviewFailed = false;
+        }
+        ComponentPreviewComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            if (changes.data) {
+                this.sectionsService.destroy();
+                this.showPreview = false;
+                this.isNoPreviewAvailable = false;
+                this.isPreviewFailed = false;
+                setTimeout(function () {
+                    var _a, _b;
+                    try {
+                        _this.runPreview(_this.data);
+                        _this.cdr.detectChanges();
+                    }
+                    catch (e) {
+                        console.error((_b = (_a = e === null || e === void 0 ? void 0 : e.stack) !== null && _a !== void 0 ? _a : e === null || e === void 0 ? void 0 : e.error) !== null && _b !== void 0 ? _b : 'Error occured');
+                        _this.showPreview = false;
+                        _this.isPreviewFailed = true;
+                        _this.cdr.detectChanges();
+                    }
+                });
+            }
+        };
+        ComponentPreviewComponent.prototype.runPreview = function (data) {
+            var _a;
+            var section = data.section && JSON.parse(data.section);
+            if (!section) {
+                this.isNoPreviewAvailable = true;
+                return;
+            }
+            var model = Object.assign(Object.assign({}, ((_a = section === null || section === void 0 ? void 0 : section.model) !== null && _a !== void 0 ? _a : {
+                attributes: [],
+                lineItems: [],
+            })), { id: i7.UUID.UUID() });
+            var componentSection = Object.assign(Object.assign({}, section), { script: data.componentScript ? btoa(data.componentScript) : '', styles: data.componentStyles ? btoa(data.componentStyles) : '', template: data.componentTemplate ? btoa(data.componentTemplate) : '', properties: data.componentProperties ? JSON.stringify(data.componentProperties) : {}, id: i7.UUID.UUID(), model: model });
+            var storySection = {
+                id: i7.UUID.UUID(),
+                template: data.template ? btoa(data.template) : defaultTemplate,
+                styles: data.styles ? btoa(data.styles) : '',
+                script: data.script ? btoa(data.script) : '',
+                children: [componentSection],
+                model: model,
+            };
+            var sections = [storySection, componentSection];
+            this.form = this.formScope.form = this.runtimeFormService.initForm(sections, model);
+            this.createRuntimeContext(componentSection);
+            this.sectionsService.compileModule(sections);
+            this.section = storySection;
+            this.showPreview = true;
+        };
+        ComponentPreviewComponent.prototype.createRuntimeContext = function (section) {
+            var runtimeModel = i7.RuntimeModel.create([], {});
+            var rootType = Array.from(runtimeModel.components.values()).find(function (c) {
+                var _a;
+                return ((_a = section.model) === null || _a === void 0 ? void 0 : _a.type) &&
+                    runtimeModel.isEquals(c.typeName, section.model.type) &&
+                    i7.EntityUtil.isPresent(c.productId);
+            });
+            var contextProductId = rootType ? rootType.productId : undefined;
+            var context = {
+                modelId: '',
+                runtimeModel: runtimeModel,
+                runtimeMode: i2.RuntimeMode.TEST,
+                productId: contextProductId,
+                properties: {},
+            };
+            this.runtimeService.setRuntimeContext(context);
+        };
+        return ComponentPreviewComponent;
+    }());
+    ComponentPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ComponentPreviewComponent, deps: [{ token: SectionsService }, { token: RuntimeFormService }, { token: FormScopeService }, { token: RuntimeService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ComponentPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: ComponentPreviewComponent, selector: "vl-component-preview", inputs: { data: "data" }, providers: [
+            SectionsService,
+            FormScopeService,
+            CollapsibleStateService,
+            RuntimeFormService,
+            FormScopeService,
+            RuntimeService,
+        ], usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"showPreview\">\n  <vl-section-renderer [section]=\"section!\" [form]=\"form\"></vl-section-renderer>\n</ng-container>\n\n<span class=\"info\" *ngIf=\"isNoPreviewAvailable\">No preview available</span>\n<span class=\"info error\" *ngIf=\"isPreviewFailed\">Preview has failed</span>\n", styles: ["@charset \"UTF-8\";body.veloce-apex-index,body.veloce-index,body.sfdcBody{overflow:hidden;margin:0;padding:0}:host ::ng-deep .velo-app .modal.in .modal-dialog.runtime-modal{margin-left:5%;margin-right:5%;padding:0;position:relative;width:auto}:host ::ng-deep .modal-body.runtime-modal.main-container{height:100%;margin:0;padding:0}:host ::ng-deep .modal-body.runtime-modal.main-container .content-wrapper{display:flex;flex-direction:column;height:100%}:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper{display:flex;flex-direction:column;flex-grow:1;padding:0}:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid{height:100%;margin:0;padding:0;overflow:auto}:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid .input-form.form-horizontal,:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid .input-form.form-horizontal .form-horizontal,:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid section-script>:first-child{height:100%}:host ::ng-deep .runtime-modal .modal-content,:host ::ng-deep .gu-mirror .modal-content{background-color:--vl-input-background}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a{color:#333333b3;font-weight:600;text-transform:uppercase;letter-spacing:.85px;font-size:10px}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a.active,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a.active{color:#333}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a.disabled,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a.disabled{color:#33333380}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a.active:after,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a.active:after{background-color:#f36;bottom:-1px;content:\"\";height:1px;left:0;position:absolute;width:100%}:host ::ng-deep .runtime-modal .modal-content .modal-header,:host ::ng-deep .gu-mirror .modal-content .modal-header{background:transparent;color:#fff}:host ::ng-deep .runtime-modal .runtime-group-divider,:host ::ng-deep .gu-mirror .runtime-group-divider{border-bottom:1px solid #e5e5e5}:host ::ng-deep .runtime-modal .input-form-input,:host ::ng-deep .gu-mirror .input-form-input{position:relative;padding-left:0;padding-top:0}:host ::ng-deep .runtime-modal .input-form-input--required>label,:host ::ng-deep .gu-mirror .input-form-input--required>label{color:#ff4233;font-weight:bold}:host ::ng-deep .form-control-wrapper{position:relative}:host ::ng-deep .add-config-control:hover{background-color:#e96099;color:#fff;border:1px solid transparent}:host ::ng-deep .remove-config-control:hover{background-color:#828c9e;color:#fff}:host ::ng-deep .add-config-control[disabled],:host ::ng-deep .remove-config-control[disabled]{background-color:transparent;color:#ccc;border:1px dashed #ccc}:host ::ng-deep .add-config-control[disabled]:hover,:host ::ng-deep .remove-config-control[disabled]:hover{cursor:default}:host ::ng-deep .add-config-control{height:36px;width:36px;line-height:36px;font-size:14px;text-align:center;border-radius:50%;float:left;position:absolute;top:0;right:-57px;z-index:500;background-color:#e3337c;color:#fff;border:1px solid #e3337c;transition:all .5s ease 0s}:host ::ng-deep .add-config-control .plus-icon{line-height:36px}:host ::ng-deep .remove-config-control{height:36px;width:36px;line-height:36px;font-size:14px;text-align:center;margin-right:25px;border-radius:50%;float:left;position:absolute;top:33px;right:51px;z-index:500;background-color:transparent;color:#687285;border:1px solid transparent;transition:all .5s ease 0s}:host ::ng-deep .remove-config-control .plus-icon{line-height:36px}:host ::ng-deep .sidebar .new-wrapper{min-height:96px;margin-bottom:25px}:host ::ng-deep .sidebar .new-wrapper .add-container .add-card{left:0;margin-left:15px}:host ::ng-deep .ui-settings{height:100%;display:flex;flex-direction:column}:host ::ng-deep .runtime-modal .form-horizontal form,:host ::ng-deep .gu-mirror form{margin:0}:host ::ng-deep .runtime-modal .form-horizontal .form-group,:host ::ng-deep .gu-mirror .form-group{margin:0;padding:0}:host ::ng-deep .runtime-modal .form-horizontal .control.form-group,:host ::ng-deep .gu-mirror .control.form-group{margin-bottom:25px}:host ::ng-deep .runtime-modal .form-horizontal .form-control-wrapper,:host ::ng-deep .gu-mirror .form-control-wrapper{min-width:172px;margin-bottom:25px}:host ::ng-deep .runtime-modal .form-horizontal .quantity-form-input .form-control-wrapper,:host ::ng-deep .gu-mirror .quantity-form-input .form-control-wrapper{min-width:50px}:host ::ng-deep .runtime-modal .form-horizontal .quantity-form-input .form-control-wrapper .form-control,:host ::ng-deep .gu-mirror .quantity-form-input .form-control-wrapper .form-control{width:50px}:host ::ng-deep .runtime-left-side{height:calc(100% - 97px);background:#fff;padding:48px 56px 0}:host ::ng-deep .ui-controls-group{margin-left:-8px;margin-right:-8px}:host ::ng-deep .ui-controls-group .ui-control-type:hover{border-color:#3384ff}:host ::ng-deep .ui-controls-group .ui-control-type{position:relative;min-width:140px;float:left;border-radius:3px;border:1px solid #c4c4c4;background-color:#fff;width:calc(50% - 16px);padding:12px 13px;margin-bottom:16px;margin-right:8px;margin-left:8px;cursor:pointer}:host ::ng-deep .ui-controls-group .ui-control-type span{padding-left:3px}:host ::ng-deep .sidebar-header{letter-spacing:-.5px;padding-bottom:24px;padding-top:0;line-height:32px;font-size:24px;font-weight:700;color:#333}:host ::ng-deep .sidebar-header small{display:block;color:#333;font-size:11px;font-weight:300;line-height:20px;margin:0}:host ::ng-deep .sidebar-menu-list{color:#333333b3;margin:0;width:100%;list-style:none;font-size:12px}:host ::ng-deep .sidebar-menu-list li.active a,:host ::ng-deep .sidebar-menu-list li.active i{color:#005ee3}:host ::ng-deep .sidebar-menu-list li:hover{cursor:pointer}:host ::ng-deep .sidebar-menu-list li{text-align:right;padding-left:16px}:host ::ng-deep .sidebar-menu-list li a{padding:0 8px;margin-left:-8px;cursor:pointer;white-space:nowrap;color:inherit;font-weight:700;display:inline-block;line-height:32px}:host ::ng-deep .sidebar-menu-list li i{display:none;padding-right:5px}:host ::ng-deep .runtime-builder-content{min-height:100%}:host ::ng-deep .runtime-builder-content .input-form{margin:0;padding:18px 11px 0}:host ::ng-deep .runtime-builder-content .input-form .form-group{border:3px dashed transparent}:host ::ng-deep .runtime-builder-content .input-form .form-group:hover{border:3px dashed #dedede}:host ::ng-deep .runtime-right-side{background:#fff}:host ::ng-deep .sidebar-section .section-title{color:#a1a1a1;background:#fff;position:relative;display:inline-block;padding-right:16px;text-transform:uppercase;font-size:10px;letter-spacing:.2px}:host ::ng-deep .sidebar-section:before{content:\" \";position:absolute;top:50%;left:0;right:0;border-top:1px solid #e6e6e6}:host ::ng-deep .sidebar-section{position:relative;margin-top:16px;margin-bottom:16px}:host ::ng-deep .sidebar-section .section-title{color:#a1a1a1;background-color:var(--vl-input-background);position:relative;display:inline-block;padding-right:16px;padding-left:8px;text-transform:uppercase;font-size:6px;letter-spacing:.2px}:host ::ng-deep .section-wrapper{top:-21px;position:absolute;right:0;left:12px}:host ::ng-deep .container-box.container-box-bordered{border:1px solid rgba(0,0,0,.2);margin-bottom:25px;padding-left:25px}:host ::ng-deep .container-box.container-box-radio{margin-left:0}:host ::ng-deep .container-box.container-box-radio:hover,:host ::ng-deep .container-box.container-box-checkbox:hover{cursor:pointer}:host ::ng-deep .container-box{position:relative;overflow:auto;border:1px solid transparent;background:var(--vl-input-background)}:host ::ng-deep .container-box .container-box{border:1px solid rgba(0,0,0,.2);margin-left:25px;margin-right:25px;margin-bottom:25px}:host ::ng-deep .container-box .container-box:hover{border-color:var(--vl-primary-color)}:host ::ng-deep .container-box .box-title .header .header-label{color:#333;margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;line-height:75px}:host ::ng-deep .container-box .box-title .header .header-label small{padding-left:21px;color:#757575;font-weight:400;font-size:10px;line-height:75px}:host ::ng-deep .container-box .box-title .header .header-qty-container,:host ::ng-deep .container-box .box-title .header .radio-button,:host ::ng-deep .container-box .box-title .header .checkbox-select{display:table-cell;vertical-align:middle;height:75px;padding-left:21px}:host ::ng-deep .container-box .box-title .header .header-qty-container .form-control,:host ::ng-deep .container-box .box-title .header .radio-button .form-control,:host ::ng-deep .container-box .box-title .header .checkbox-select .form-control{height:auto;color:#333;width:50px;border:1px solid #dddddd}:host ::ng-deep .container-box .box-title .header .header-qty-container .form-control:focus,:host ::ng-deep .container-box .box-title .header .radio-button .form-control:focus,:host ::ng-deep .container-box .box-title .header .checkbox-select .form-control:focus{border:1px solid #c4c4c4}:host ::ng-deep .container-box .box-title .header .header-qty-container .validation-message,:host ::ng-deep .container-box .box-title .header .radio-button .validation-message,:host ::ng-deep .container-box .box-title .header .checkbox-select .validation-message{position:absolute;margin-top:3px}:host ::ng-deep .container-box .box-title .header .radio-button,:host ::ng-deep .container-box .box-title .header .checkbox-select{padding-left:0;vertical-align:middle}:host ::ng-deep .container-box .box-content{padding:25px 0 25px 33px}:host ::ng-deep .container-box .timeline-item{clear:both;display:block;width:100%;position:relative}:host ::ng-deep .container-box .timeline-item:before{display:block!important;content:\"\";position:absolute;left:25px;top:-25px;bottom:25px;width:1px;border-left:1px dashed rgba(0,0,0,.2)}:host ::ng-deep .container-box .timeline-item .icon{background:#90c7ec;width:35px;height:35px;border-radius:50%;position:absolute;left:24px;top:4px}:host ::ng-deep .container-box .timeline-item .icon .fa.fa-upload{left:11px;top:10px}:host ::ng-deep .container-box .timeline-item .icon .fa{color:#fff;position:absolute}:host ::ng-deep .container-box .timeline-item .message .content{float:left;width:80%}:host ::ng-deep .container-box .container-group-control{background:transparent;text-transform:uppercase}:host ::ng-deep .container-box-custom{margin-bottom:25px}:host ::ng-deep .unchecked .container-box{border-color:#0003}:host ::ng-deep .unchecked .container-box:hover{border-color:var(--vl-primary-color)}:host ::ng-deep .unchecked.timeline-item .icon-circle{background-color:#6e6e6e}:host ::ng-deep .collapsed .box-content-wrapper{opacity:0;display:none;transition:max-height .3s .1s}:host ::ng-deep .box-content-wrapper{transition:opacity .5s .1s;display:block;opacity:1}:host ::ng-deep .box-actions{position:absolute;right:25px;z-index:2;top:21px;opacity:1;transition:height .3s ease-out,opacity .5s .1s}:host ::ng-deep .box-action-button{height:32px;width:32px;line-height:32px;font-size:12px;text-align:center;float:left;margin-left:5px;border-radius:50%;transition:all .25s ease 0s}:host ::ng-deep .box-action-button a{color:#0000008a}:host ::ng-deep .box-action-button .check-icon{line-height:32px}:host ::ng-deep .box-actions-group{top:18px;right:45px}:host ::ng-deep .box-action-button:hover,:host ::ng-deep .box-action-button:focus{background-color:#0000001a;cursor:pointer;outline:none}:host ::ng-deep .box-action-button:active{background-color:#0003;cursor:pointer}:host ::ng-deep .box-action-button.active{background-color:#0000001a}:host ::ng-deep .div-block{clear:both;display:block}:host ::ng-deep .div-inline{float:left}:host ::ng-deep .checkbox-select{position:relative;display:block}:host ::ng-deep .checkbox-select label{color:#333;margin:0;line-height:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;padding-left:25px;position:relative;min-height:16px;cursor:pointer}:host ::ng-deep .checkbox-select input[type=checkbox]{position:absolute;width:16px;height:16px;top:0;left:0;z-index:1;cursor:pointer;opacity:0;filter:alpha(opacity=0);margin:0;line-height:normal}:host ::ng-deep .checkbox-select .input-helper:before{position:absolute;content:\"\";top:-1px;width:12px;height:12px;border-radius:2px;left:0;border:2px solid rgba(0,0,0,.54);transition:all;transition-duration:.25s}:host ::ng-deep .checkbox-select .input-helper:after{font-weight:100;line-height:12px;font-size:10px;color:#fff;font-family:FontAwesome;position:absolute;content:\"\\f00c\";width:12px;height:12px;background:#0065ff;border-radius:0;top:1px;left:2px;transform:scale(0);transition:all;transition-duration:.15s}:host ::ng-deep .checkbox-select input[type=checkbox]:checked+.input-helper:before,:host ::ng-deep .checkbox-select input[type=checkbox].checkbox--checked+.input-helper:before{border-color:var(--vl-primary-color)}:host ::ng-deep .checkbox-select input[type=checkbox]:checked+.input-helper:after,:host ::ng-deep .checkbox-select input[type=checkbox].checkbox--checked+.input-helper:after{transform:scale(1)}:host ::ng-deep .radio-button{position:relative;display:block}:host ::ng-deep .radio-button label{color:#333;margin:0;line-height:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;padding-left:25px;position:relative;min-height:16px;cursor:pointer}:host ::ng-deep .radio-button input[type=radio]{position:absolute;width:16px;height:16px;top:0;left:0;z-index:1;cursor:pointer;opacity:0;filter:alpha(opacity=0);margin:0;line-height:normal}:host ::ng-deep .radio-button .input-helper:before{position:absolute;content:\"\";top:-1px;width:12px;height:12px;border-radius:50%;left:0;border:2px solid rgba(0,0,0,.54);transition:all;transition-duration:.25s}:host ::ng-deep .radio-button .input-helper:after{position:absolute;content:\"\";width:6px;height:6px;background:var(--vl-primary-color);border-radius:50%;top:4px;left:5px;transform:scale(0);transition:all;transition-duration:.25s}:host ::ng-deep .radio-button input[type=radio]:checked+.input-helper:before{border-color:var(--vl-primary-color)}:host ::ng-deep .radio-button input[type=radio]:checked+.input-helper:after{transform:scale(1)}:host ::ng-deep .radio-button[disabled] input[type=radio]+.input-helper:before,:host ::ng-deep .checkbox-select[disabled] input[type=radio]+.input-helper:before{border-color:#0003}:host ::ng-deep .radio-button[disabled] input[type=checkbox]+.input-helper:before,:host ::ng-deep .checkbox-select[disabled] input[type=checkbox]+.input-helper:before{border-color:#0003}:host ::ng-deep .radio-button[disabled] input[type=radio]+.input-helper:after,:host ::ng-deep .checkbox-select[disabled] input[type=radio]+.input-helper:after{background:rgba(0,0,0,.2)}:host ::ng-deep .radio-button[disabled] input[type=checkbox]+.input-helper:after,:host ::ng-deep .checkbox-select[disabled] input[type=checkbox]+.input-helper:after{background:rgba(0,0,0,.2)}:host ::ng-deep .form-control-wrapper .checkbox-select,:host ::ng-deep .form-control-wrapper .radio-button{padding-top:10px}:host ::ng-deep .shopping-bag-sidebar.open{transform:translate(-100%)}:host ::ng-deep .shopping-bag-sidebar{position:fixed;top:0;bottom:0;z-index:1051;width:420px;right:-420px;background-color:#2a2b30;transition:.3s transform}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart{color:#abacae;position:absolute;top:20%;width:50px;height:50px;line-height:50px;text-align:center;right:100%;left:auto;background:#2a2b30;border-radius:3px 0 0 3px;display:block}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:before{font-family:FontAwesome;content:\"\\f291\"}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:hover{text-decoration:none;color:#abacae}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:active,:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:focus,:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:visited{text-decoration:none;color:#abacae}:host ::ng-deep .shopping-bag-sidebar .cart-count{font-size:9px;font-weight:bold;line-height:15px;position:absolute;top:50%;right:8px;width:15px;height:15px;margin:-16px 0 0;text-align:center;color:#fff;border-radius:50%;background:var(--vl-primary-color)}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-container{overflow:auto;display:block;height:100%;padding:0 25px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item{color:#abacae;background-color:#000;position:relative;overflow:auto;margin-bottom:10px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title{position:relative;padding-right:25px;padding-left:25px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title .header{float:left;color:#abacae;margin:0;line-height:48px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title .box-actions{height:48px;float:right;top:0}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title .box-action-button{height:32px;width:32px;line-height:32px;font-size:10px;font-weight:700;margin-top:8px;text-align:center;transition:all .25s ease 0s;color:#fff;background-color:var(--vl-primary-color)}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-title{color:#cecece;font-size:11px;text-transform:uppercase;line-height:64px;font-weight:600;padding-top:0;margin-top:25px;margin-bottom:25px;text-align:right}:host ::ng-deep .container-box.hovered:before,:host ::ng-deep .box-title.hovered:before,:host ::ng-deep .container-box.selected:before,:host ::ng-deep .box-title.selected:before{top:0;right:0;left:0;bottom:0}:host ::ng-deep .selectable{position:relative;cursor:pointer}:host ::ng-deep .container-box.hovered:before{border-color:transparent}:host ::ng-deep .container-box.hovered{border-color:var(--vl-primary-color)}:host ::ng-deep .container-box.selected:before{border-color:transparent}:host ::ng-deep .container-box.selected{border-color:var(--vl-primary-color)}:host ::ng-deep .hovered:before{display:block!important;position:absolute;content:\" \";top:-15px;bottom:15px;left:-15px;right:15px;border:1px solid var(--vl-primary-color)}:host ::ng-deep .hovered .box-action-button{opacity:1!important}:host ::ng-deep .opacity-1{opacity:1!important}:host ::ng-deep .overflow-y--auto{overflow-y:auto}:host ::ng-deep .gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}:host ::ng-deep .gu-hide{display:none!important}:host ::ng-deep .gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}:host ::ng-deep .gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}:host ::ng-deep .top-nav-msg{margin-top:-30px}:host ::ng-deep .runtime-info-message ul{margin-bottom:0;list-style:none}:host ::ng-deep .runtime-info-message ul li{margin-bottom:10px}:host ::ng-deep .runtime-info-message ul li:last-child{margin-bottom:0}:host ::ng-deep .runtime-info-message .message-text{font-family:\"Open Sans\",Tahoma,sans-serif!important;overflow:hidden;padding:0;font-size:11px}:host ::ng-deep .runtime-attributes-popover .popover-arrow{display:none}:host ::ng-deep .runtime-attributes-popover .popover-content{padding:0}:host ::ng-deep .runtime-attributes-popover .runtime-content-wrapper{padding:0}:host ::ng-deep .runtime-attributes-popover .container-box-custom{margin-bottom:0}:host ::ng-deep .runtime-attributes-popover .input-form{margin:0;padding:0}:host ::ng-deep .runtime-attributes-popover .input-form form{margin-bottom:0}:host ::ng-deep .runtime-attributes-popover .input-form form .div-inline{display:block;float:none}:host ::ng-deep .runtime-attributes-popover .input-form form .form-group{padding:0;margin:0}:host ::ng-deep .runtime-attributes-popover .container-box .box-content{padding:0}:host ::ng-deep .v-custom-title,:host ::ng-deep .v-custom-description,:host ::ng-deep .v-custom-image{display:none}:host ::ng-deep .dropdown{position:relative}:host ::ng-deep .dropdown-toggle:focus{outline:0}:host ::ng-deep .dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px #0000002d}:host ::ng-deep .dropdown-menu.pull-right{right:0;left:auto}:host ::ng-deep .dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}:host ::ng-deep .dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}:host ::ng-deep .dropdown-menu>li>a:hover,:host ::ng-deep .dropdown-menu>li>a:focus{color:#262626;text-decoration:none;background-color:#f5f5f5}:host ::ng-deep .dropdown-menu>.active>a,:host ::ng-deep .dropdown-menu>.active>a:hover,:host ::ng-deep .dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}:host ::ng-deep .dropdown-menu>.disabled>a,:host ::ng-deep .dropdown-menu>.disabled>a:hover,:host ::ng-deep .dropdown-menu>.disabled>a:focus{color:#777}:host ::ng-deep .dropdown-menu>.disabled>a:hover,:host ::ng-deep .dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false)}:host ::ng-deep .open>.dropdown-menu{display:block}:host ::ng-deep .open>a{outline:0}:host ::ng-deep .dropdown-menu-right{right:0;left:auto}:host ::ng-deep .dropdown-menu-left{right:auto;left:0}:host ::ng-deep .dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}:host ::ng-deep .dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}\n", ".info{color:var(--vl-text-color-secondary);font-weight:300;font-size:13px;line-height:20px}.info.error{color:var(--vl-error-color)}\n"], components: [{ type: SectionRendererComponent, selector: "vl-section-renderer", inputs: ["section", "form"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ComponentPreviewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'vl-component-preview',
+                        templateUrl: './component-preview.component.html',
+                        styleUrls: ['../ui-runtime/runtime-legacy-styles.scss', './component-preview.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [
+                            SectionsService,
+                            FormScopeService,
+                            CollapsibleStateService,
+                            RuntimeFormService,
+                            FormScopeService,
+                            RuntimeService,
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: SectionsService }, { type: RuntimeFormService }, { type: FormScopeService }, { type: RuntimeService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                    type: i0.Input
+                }] } });
+
+    var getSectionTree = function (src) {
+        var sections = i7.EntityUtil.clone(src);
+        var sectionIdMap = new Map();
+        sections.forEach(function (section) { return sectionIdMap.set(section.id, section); });
+        var sectionTree = [];
+        sections.forEach(function (section) {
+            if (section.parentId) {
+                var parentSection = sectionIdMap.get(section.parentId);
+                if (parentSection) {
+                    var sectionFromMap = sectionIdMap.get(section.id);
+                    if (sectionFromMap) {
+                        parentSection.addChild(sectionFromMap);
+                    }
+                }
+            }
+            else {
+                var s = sectionIdMap.get(section.id);
+                if (s) {
+                    sectionTree.push(s);
+                }
+            }
+        });
+        return sectionTree;
+    };
+
+    var RuntimeComponent = /** @class */ (function () {
+        function RuntimeComponent(sectionsService, formScope, collapsibleState, formService, runtimeService, messageService, contextService, orderByPipe, searchFilterPipe, cdr) {
+            this.sectionsService = sectionsService;
+            this.formScope = formScope;
+            this.collapsibleState = collapsibleState;
+            this.formService = formService;
+            this.runtimeService = runtimeService;
+            this.messageService = messageService;
+            this.contextService = contextService;
+            this.orderByPipe = orderByPipe;
+            this.searchFilterPipe = searchFilterPipe;
+            this.cdr = cdr;
+            this.messageBucketId = 'ui.runtime';
+            this.sortedSections = [];
+            this.staticSections = [];
+            this.form = new i4.FormGroup({});
+            this.solutionIsReady = false;
+            this.unsubscribe = new rxjs.Subject();
+            this.solutionUpdated = new i0.EventEmitter();
+        }
+        RuntimeComponent.prototype.adjustPrice = function (valueOption, section, solutionLineItem, patch) {
+            var parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+            if (!parentLineItem) {
+                return;
+            }
+            parentLineItem.lineItems = parentLineItem.lineItems.map(function (lineItem) {
+                var productId = lineItem.productId, chargeItems = lineItem.chargeItems;
+                if (productId !== valueOption) {
+                    return lineItem;
+                }
+                var chargeItem = chargeItems.shift();
+                var updatedChargeItem = Object.assign(Object.assign({}, chargeItem), patch);
+                return Object.assign(Object.assign({}, lineItem), { chargeItems: __spreadArray([updatedChargeItem], __read(chargeItems)) });
+            });
+            this.updateRuntime(solutionLineItem);
+        };
+        RuntimeComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.formScope.formSubmitEvent.pipe(rxjsOperators.takeUntil(this.unsubscribe)).subscribe(function (e) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                try {
+                    _this.form.updateValueAndValidity();
+                    var solutionLineItem = i7.EntityUtil.clone(_this.solutionLineItem);
+                    var section_1 = _this.findSection(e.id);
+                    if (!section_1) {
+                        throw 'Section not found';
+                    }
+                    var entityType = section_1.boundData.entityType;
+                    if (entityType === BoundDataType[BoundDataType.PORT] || entityType === BoundDataType[BoundDataType.TYPE]) {
+                        if (e.action === 'patch' && i7.EntityUtil.isPresent(e.valueOption)) {
+                            var valueOption = e['valueOption'];
+                            if (!((_a = section_1.model) === null || _a === void 0 ? void 0 : _a.parentId)) {
+                                _this.collapsibleState.clearState(section_1.id);
+                                _this.updateRuntime(valueOption);
+                            }
+                            else {
+                                var parentLineItem = LineItemUtil.findById(section_1.model.parentId, [solutionLineItem]);
+                                if (parentLineItem) {
+                                    var indx = parentLineItem.lineItems.findIndex(function (item) { var _a; return item.id === ((_a = section_1.model) === null || _a === void 0 ? void 0 : _a.id); });
+                                    parentLineItem.lineItems.splice(indx, 1, valueOption);
+                                    _this.collapsibleState.clearState(section_1.id);
+                                    _this.updateRuntime(solutionLineItem);
+                                }
+                            }
+                        }
+                    }
+                    if (entityType === BoundDataType[BoundDataType.PORT]) {
+                        if (e.action === 'upsert') {
+                            var parentLineItem_1 = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            if (parentLineItem_1) {
+                                parentLineItem_1.lineItems.forEach(function (i) {
+                                    if (e.selectedValueOptions &&
+                                        e.selectedValueOptions.findIndex(function (v) { return v.toLowerCase() === i.type.toLowerCase(); }) < 0) {
+                                        _this.updateCardinalityVariable(parentLineItem_1, i, 0);
+                                    }
+                                });
+                                var lineItems_1 = parentLineItem_1 === null || parentLineItem_1 === void 0 ? void 0 : parentLineItem_1.lineItems.filter(function (i) { return e.selectedValueOptions &&
+                                    e.selectedValueOptions.findIndex(function (v) { return v.toLowerCase() === i.type.toLowerCase(); }) > -1; });
+                                (_b = e.selectedValueOptions) === null || _b === void 0 ? void 0 : _b.forEach(function (v) {
+                                    if ((lineItems_1 === null || lineItems_1 === void 0 ? void 0 : lineItems_1.findIndex(function (item) { return item.type.toLowerCase() === v.toLowerCase(); })) === -1) {
+                                        var lineItem = _this.createLineItem(section_1, v, parentLineItem_1);
+                                        _this.updateCardinalityVariable(parentLineItem_1, lineItem);
+                                        lineItems_1.push(lineItem);
+                                    }
+                                });
+                                _this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                        if (e.action === 'create') {
+                            var parentLineItem = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            if (parentLineItem) {
+                                var valueOption = e.valueOption;
+                                var lineItem = _this.createLineItem(section_1, valueOption, parentLineItem);
+                                parentLineItem.lineItems.push(lineItem);
+                                _this.updateCardinalityVariable(parentLineItem, lineItem);
+                                _this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                        if (e.action === 'copy') {
+                            var parentLineItem = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            if (parentLineItem) {
+                                var valueOption_1 = e.valueOption;
+                                var lineItemToCopy = parentLineItem.lineItems.find(function (li) { return li.id === valueOption_1; });
+                                if (lineItemToCopy) {
+                                    var lineItem = Object.assign(Object.assign({}, lineItemToCopy), { id: '' });
+                                    parentLineItem.lineItems.push(lineItem);
+                                    _this.updateCardinalityVariable(parentLineItem, lineItem);
+                                    _this.updateRuntime(solutionLineItem);
+                                }
+                            }
+                        }
+                        if (e.action === 'update') {
+                            var parentLineItem = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            if (parentLineItem) {
+                                //Assuming that radio control is the only control, that 'updates' values
+                                var previous_1 = (_c = section_1.model) === null || _c === void 0 ? void 0 : _c.lineItems.filter(function (li) { return li.port && li.port === section_1.boundData.name; })[0];
+                                if (previous_1) {
+                                    _this.updateCardinalityVariable(parentLineItem, previous_1, 0);
+                                }
+                                var index = parentLineItem.lineItems.findIndex(function (li) { return li.id === (previous_1 === null || previous_1 === void 0 ? void 0 : previous_1.id); });
+                                var lineItem = {
+                                    id: i7.UUID.UUID(),
+                                    qty: previous_1 === null || previous_1 === void 0 ? void 0 : previous_1.qty,
+                                    port: previous_1 === null || previous_1 === void 0 ? void 0 : previous_1.port,
+                                    type: i7.EntityUtil.isPresent(e.valueOption) ? e.valueOption : _this.form.controls[e.id].value,
+                                    cfgStatus: 'New',
+                                    parentId: previous_1 === null || previous_1 === void 0 ? void 0 : previous_1.parentId,
+                                };
+                                _this.updateCardinalityVariable(parentLineItem, lineItem);
+                                parentLineItem.lineItems[index] = lineItem;
+                                _this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                        if (e.action === 'remove') {
+                            var parentLineItem = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            if (parentLineItem &&
+                                SectionsBinderHelper.isRemoveAllowed(parentLineItem, section_1.boundData.name, (_d = section_1.model) === null || _d === void 0 ? void 0 : _d.qty)) {
+                                var index = parentLineItem.lineItems.findIndex(function (item) { var _a; return item.type.toLowerCase() === ((_a = e.valueOption) === null || _a === void 0 ? void 0 : _a.toLowerCase()); });
+                                if (index > -1) {
+                                    var removed = parentLineItem.lineItems.splice(index, 1)[0];
+                                    _this.updateCardinalityVariable(parentLineItem, removed, 0);
+                                    _this.updateRuntime(solutionLineItem);
+                                }
+                            }
+                        }
+                        if (e.action === 'qtyUpdate') {
+                            var typeSection = e.valueOption
+                                ? SectionHelperService.findSectionForValue(section_1, e.valueOption)
+                                : undefined;
+                            var typeLineItem = (typeSection === null || typeSection === void 0 ? void 0 : typeSection.model) && LineItemUtil.findById(typeSection.model.id, [solutionLineItem]);
+                            if (typeSection && typeLineItem) {
+                                typeLineItem.qty = +_this.form.controls[typeSection.id + 'qty'].value;
+                                typeLineItem.cfgStatus = 'User';
+                                _this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                        if (e.action === 'adjustNetPrice') {
+                            var valueOption = e.valueOption, options = e.options;
+                            var amount = (options !== null && options !== void 0 ? options : {}).amount;
+                            var priceAdjustment = {
+                                type: 'OVERRIDE_AMOUNT',
+                                explanation: 'Manual net price adjustment',
+                                formula: '',
+                                amount: amount,
+                            };
+                            _this.adjustPrice(valueOption, section_1, solutionLineItem, { priceAdjustment: priceAdjustment });
+                        }
+                        if (e.action === 'adjustListPrice') {
+                            var valueOption = e.valueOption, options = e.options;
+                            var amount = (options !== null && options !== void 0 ? options : {}).amount;
+                            var listPriceAdjustment = {
+                                type: 'OVERRIDE_AMOUNT',
+                                explanation: 'Manual list price adjustment',
+                                formula: '',
+                                amount: amount,
+                            };
+                            _this.adjustPrice(valueOption, section_1, solutionLineItem, { listPriceAdjustment: listPriceAdjustment });
+                        }
+                    }
+                    if (entityType === BoundDataType[BoundDataType.TYPE]) {
+                        if (e.action === 'remove') {
+                            var parentLineItem = ((_e = section_1.model) === null || _e === void 0 ? void 0 : _e.parentId) && LineItemUtil.findById(section_1.model.parentId, [solutionLineItem]);
+                            if (parentLineItem &&
+                                section_1.model &&
+                                section_1.model.port &&
+                                SectionsBinderHelper.isRemoveAllowed(parentLineItem, section_1.model.port, (_f = section_1.model) === null || _f === void 0 ? void 0 : _f.qty)) {
+                                var index = parentLineItem.lineItems.findIndex(function (item) { var _a; return item.id === ((_a = section_1.model) === null || _a === void 0 ? void 0 : _a.id); });
+                                if (index > -1) {
+                                    var removed = parentLineItem.lineItems.splice(index, 1)[0];
+                                    _this.updateCardinalityVariable(parentLineItem, removed, 0);
+                                    _this.collapsibleState.clearState(section_1.id);
+                                    _this.updateRuntime(solutionLineItem);
+                                }
+                            }
+                        }
+                        if (e.action === 'qtyUpdate') {
+                            var typeLineItem = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            if (typeLineItem) {
+                                var qty = +_this.form.controls[e.id + 'qty'].value;
+                                if (typeLineItem.parentId) {
+                                    var parentLineItem = LineItemUtil.findById(typeLineItem.parentId, [solutionLineItem]);
+                                    if (parentLineItem) {
+                                        _this.updateCardinalityVariable(parentLineItem, typeLineItem, qty);
+                                    }
+                                }
+                                typeLineItem.qty = qty;
+                                typeLineItem.cfgStatus = 'User';
+                                _this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                    }
+                    if (entityType === BoundDataType[BoundDataType.ATTRIBUTE]) {
+                        if (e.action === 'update') {
+                            var parentLineItem = section_1.model && LineItemUtil.findById(section_1.model.id, [solutionLineItem]);
+                            var attribute = parentLineItem === null || parentLineItem === void 0 ? void 0 : parentLineItem.attributes.find(function (attr) { return attr.name.toLowerCase() === section_1.boundData.name.toLowerCase(); });
+                            if (attribute) {
+                                //Explicitly set value always win
+                                var value = typeof e.valueOption !== 'undefined' ? e.valueOption : _this.form.controls[e.id].value;
+                                if (attribute.type === 'BOOLEAN') {
+                                    value = value ? 1 : 0;
+                                }
+                                attribute.value = value;
+                                attribute.cfgStatus = 'User';
+                                _this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                    _this.messageService.add({ key: _this.messageBucketId, summary: "Configuration failed " + ((_g = e) === null || _g === void 0 ? void 0 : _g.message) });
+                }
+            });
+            this.runtimeService.onSolutionReadyEvent
+                .pipe(rxjsOperators.takeUntil(this.unsubscribe))
+                .subscribe(function (lineItem) { return _this.onSolutionReady(lineItem); });
+            this.runtimeService.onSolutionUpdatedEvent
+                .pipe(rxjsOperators.takeUntil(this.unsubscribe))
+                .subscribe(function (data) {
+                if (!(data instanceof http.HttpErrorResponse)) {
+                    return _this.handleSolutionUpdate(data);
+                }
+                _this.handleSolutionFailedUpdate(data);
+            });
+            this.runtimeService.onUIRefreshEvent.pipe(rxjsOperators.takeUntil(this.unsubscribe)).subscribe(function () {
+                var _a;
+                var uiDefinition = ((_a = _this.runtimeService.getRuntimeContext()) !== null && _a !== void 0 ? _a : {}).uiDefinition;
+                _this.runtimeContext.uiDefinition = uiDefinition;
+                _this.formScope.scriptSessionScope = {};
+                _this.startRuntime();
+            });
+        };
+        RuntimeComponent.prototype.onSolutionReady = function (lineItem) {
+            var _a;
+            var context = this.runtimeService.getRuntimeContext();
+            var configurationContext = this.contextService.resolve();
+            var mergeContext = Object.assign(Object.assign({}, context), { properties: Object.assign(Object.assign({}, context.properties), configurationContext.properties) });
+            var accountId = (_a = mergeContext.properties) === null || _a === void 0 ? void 0 : _a.AccountId;
+            if (accountId && accountId.length === 15) {
+                this.runtimeContext = Object.assign(Object.assign({}, mergeContext), { properties: Object.assign(Object.assign({}, mergeContext.properties), { AccountId: i7.SalesforceIdUtils.generateId18FromId15(accountId) }) });
+            }
+            else {
+                this.runtimeContext = mergeContext;
+            }
+            this.solutionLineItem = lineItem;
+            this.runtimeService.setRuntimeContext(this.runtimeContext);
+            this.startRuntime();
+        };
+        RuntimeComponent.prototype.handleSolutionUpdate = function (updatedLineItem) {
+            this.solutionLineItem = updatedLineItem;
+            this.processSolution(true);
+            this.runtimeService.solutionProcessed(this.solutionLineItem);
+            this.cdr.detectChanges();
+        };
+        RuntimeComponent.prototype.handleSolutionFailedUpdate = function (error) {
+            var _a;
+            var hasErrorMessage = i7.EntityUtil.isPresent(error.error) && i7.EntityUtil.isPresent(error.error.message);
+            var message = hasErrorMessage ? error.error.message : 'Configuration failed';
+            var isHandlingConfigurationErrors = ((_a = this.runtimeContext.uiDefinition) !== null && _a !== void 0 ? _a : {}).isHandlingConfigurationErrors;
+            if (isHandlingConfigurationErrors) {
+                this.messageService.add({ key: this.messageBucketId, summary: message });
+            }
+            this.solutionLineItem = Object.assign(Object.assign({}, this.solutionLineItem), { messages: __spreadArray(__spreadArray([], __read(this.solutionLineItem.messages)), ["E:" + message]) });
+            this.processSolution(true, true);
+            this.runtimeService.solutionProcessed(this.solutionLineItem);
+            this.cdr.detectChanges();
+        };
+        RuntimeComponent.prototype.updateCardinalityVariable = function (parent, updated, newQuantity) {
+            var _a;
+            var portDomain = updated.port ? parent.portDomains[updated.port] : undefined;
+            var domainType = portDomain === null || portDomain === void 0 ? void 0 : portDomain.domainTypes.find(function (t) { return t.name === updated.type; });
+            var cardinality = (_a = domainType === null || domainType === void 0 ? void 0 : domainType.cardinality) !== null && _a !== void 0 ? _a : 0;
+            var qty;
+            if (!Number.isFinite(domainType === null || domainType === void 0 ? void 0 : domainType.cardinality)) {
+                qty = Number.isFinite(newQuantity) ? newQuantity : updated.qty;
+            }
+            else {
+                qty = i7.EntityUtil.isPresent(newQuantity)
+                    ? cardinality - updated.qty + newQuantity
+                    : cardinality + updated.qty;
+            }
+            var cardinalityName = '#CV-' + updated.type + '@' + updated.port;
+            var cardinalityVariable = parent.attributes.find(function (a) { return a.name === cardinalityName; });
+            if (!cardinalityVariable) {
+                cardinalityVariable = {
+                    id: i7.UUID.UUID(),
+                    name: cardinalityName,
+                };
+                parent.attributes.push(cardinalityVariable);
+            }
+            cardinalityVariable.value = qty;
+            cardinalityVariable.cfgStatus = 'User';
+        };
+        RuntimeComponent.prototype.createLineItem = function (section, valueOption, parentLineItem) {
+            return {
+                qty: +this.form.controls[section.id + 'qty'].value,
+                port: section.boundData.name,
+                type: i7.EntityUtil.isPresent(valueOption) ? valueOption : this.form.controls[section.id].value,
+                cfgStatus: 'New',
+                parentId: parentLineItem === null || parentLineItem === void 0 ? void 0 : parentLineItem.id,
+            };
+        };
+        RuntimeComponent.prototype.ngOnDestroy = function () {
+            this.unsubscribe.next();
+            this.sectionsService.destroy();
+        };
+        RuntimeComponent.prototype.startRuntime = function () {
+            var _a, _b, _c;
+            var uiDefinition = this.runtimeContext.uiDefinition;
+            var defaultTab = (_a = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.tabs) === null || _a === void 0 ? void 0 : _a.find(function (tab) { return tab.isDefault; });
+            this.activeUITab = i7.EntityUtil.isPresent(defaultTab) ? defaultTab : (_b = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.tabs) === null || _b === void 0 ? void 0 : _b[0];
+            this.sectionsService.compileModule((_c = uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.sections) !== null && _c !== void 0 ? _c : [], uiDefinition === null || uiDefinition === void 0 ? void 0 : uiDefinition.isViewEncapsulated);
+            this.processSolution();
+            this.solutionIsReady = true;
+            this.cdr.detectChanges();
+        };
+        RuntimeComponent.prototype.updateRuntime = function (lineItem) {
+            this.solutionUpdated.emit(lineItem);
+        };
+        RuntimeComponent.prototype.addToCart = function () {
+            var lineItem = i7.EntityUtil.clone(this.solutionLineItem);
+            this.runtimeService.stopRuntime(lineItem);
+        };
+        RuntimeComponent.prototype.processSolution = function (isUpdate, isError) {
+            var _a, _b, _c, _d, _e, _f;
+            //1. Bind sections to solution
+            var sections = (_b = i7.EntityUtil.clone((_a = this.runtimeContext.uiDefinition) === null || _a === void 0 ? void 0 : _a.sections)) !== null && _b !== void 0 ? _b : [];
+            var sourceSections = (_d = i7.EntityUtil.clone((_c = this.runtimeContext.uiDefinition) === null || _c === void 0 ? void 0 : _c.sections)) !== null && _d !== void 0 ? _d : [];
+            this.updateLineItemsSectionPath(this.solutionLineItem);
+            SectionsBinderHelper.setLineItemsPath(this.runtimeContext.runtimeModel, this.solutionLineItem, sections, sourceSections, function (sec) { return !sec.parentId && sec.boundData; }, (_f = (_e = this.runtimeContext.uiDefinition) === null || _e === void 0 ? void 0 : _e.pricingEnabled) !== null && _f !== void 0 ? _f : false);
+            sections = sections.filter(function (s) { return s.model && s.template; });
+            //2. Init form
+            this.form = this.formService.initForm(sections, this.solutionLineItem);
+            this.formScope.form = this.form;
+            this.sortedSections = this.filterAndSort(getSectionTree(sections.filter(function (s) { return !s.isStatic; })));
+            if (!isUpdate) {
+                this.staticSections = this.filterAndSort(getSectionTree(sections.filter(function (s) { return s.isStatic; })));
+            }
+            if (!isError) {
+                this.messageService.clear(this.messageBucketId);
+            }
+        };
+        RuntimeComponent.prototype.hideModal = function () {
+            this.runtimeService.cancelRuntime();
+        };
+        RuntimeComponent.prototype.updateLineItemsSectionPath = function (lineItem, parent) {
+            var e_1, _h;
+            var path = {
+                types: parent ? parent.types.concat([lineItem.type]) : [lineItem.type],
+                ports: parent ? parent.ports.concat(lineItem.port ? [lineItem.port] : []) : [],
+            };
+            lineItem.path = path;
+            try {
+                for (var _j = __values(lineItem.lineItems), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var child = _k.value;
+                    this.updateLineItemsSectionPath(child, lineItem.path);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_h = _j.return)) _h.call(_j);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        RuntimeComponent.prototype.filterAndSort = function (sections) {
+            var _a;
+            var filtered = this.searchFilterPipe.transform(sections, (_a = this.activeUITab) === null || _a === void 0 ? void 0 : _a.id, 'page');
+            var ordered = this.orderByPipe.transform(filtered, 'order', 'asc');
+            return ordered;
+        };
+        RuntimeComponent.prototype.findSection = function (id) {
+            return i7.EntityUtil.findByFieldHierarchically('id', id, __spreadArray(__spreadArray([], __read(this.sortedSections)), __read(this.staticSections)), 'children');
+        };
+        return RuntimeComponent;
+    }());
+    RuntimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeComponent, deps: [{ token: SectionsService }, { token: FormScopeService }, { token: CollapsibleStateService }, { token: RuntimeFormService }, { token: RuntimeService }, { token: i3$1.MessageService }, { token: i2__namespace.ContextService }, { token: i7__namespace.OrderByPipe }, { token: i7__namespace.SearchFilterPipe }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RuntimeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: RuntimeComponent, selector: "vl-runtime", outputs: { solutionUpdated: "solutionUpdated" }, providers: [FormScopeService, CollapsibleStateService, i7.OrderByPipe, i7.SearchFilterPipe], ngImport: i0__namespace, template: "<vl-loader label=\"Loading UI\" *ngIf=\"!solutionIsReady; else content\"></vl-loader>\n\n<ng-template #content>\n  <div\n    class=\"sidebar-tabs\"\n    [ngClass]=\"{ hidden: !runtimeContext?.uiDefinition?.defaultPanels }\"\n    #uiTabs=\"sidebarTabs\"\n    sidebarTabs=\"{{ activeUITab?.id }}\"\n    id=\"vl-default-sidebar-tabs\"\n  >\n    <ul>\n      <li\n        *ngFor=\"let tab of runtimeContext?.uiDefinition?.tabs | orderBy: 'order':'asc'\"\n        [ngClass]=\"{ active: uiTabs.activeTab === tab.id }\"\n        (click)=\"uiTabs.switchTab(tab.id)\"\n      >\n        <a href=\"javascript:void(0);\">{{ tab.name }}</a>\n      </li>\n    </ul>\n  </div>\n\n  <div class=\"sections-wrapper\">\n    <form role=\"form\" name=\"form\" class=\"form-horizontal\" [formGroup]=\"form\" novalidate autocomplete=\"off\">\n      <ng-container *ngFor=\"let section of staticSections; let i = index\">\n        <ng-container *ngIf=\"section.model && section.template && !section.hidden\">\n          <vl-section-renderer [section]=\"section\" [form]=\"form\"></vl-section-renderer>\n        </ng-container>\n      </ng-container>\n\n      <ng-container *ngFor=\"let section of sortedSections; let i = index\">\n        <ng-container *ngIf=\"section.model && section.template && !section.hidden\">\n          <vl-section-renderer [section]=\"section\" [form]=\"form\"></vl-section-renderer>\n        </ng-container>\n      </ng-container>\n    </form>\n\n    <div\n      class=\"modal-footer\"\n      *ngIf=\"runtimeContext?.runtimeMode === 1\"\n      id=\"vl-runtime-default-footer\"\n      [ngClass]=\"{ hidden: !runtimeContext?.uiDefinition?.defaultPanels }\"\n    >\n      <div class=\"col-md-12 input-form-input\">\n        <a href=\"javascript:void(0);\" class=\"btn btn-default\" (click)=\"form.valid && addToCart()\" id=\"add-to-cart-btn\"\n          >Add to cart</a\n        >\n        <a href=\"javascript:void(0);\" class=\"btn btn-link\" (click)=\"hideModal()\" id=\"cancel-btn\">Cancel</a>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";body.veloce-apex-index,body.veloce-index,body.sfdcBody{overflow:hidden;margin:0;padding:0}:host ::ng-deep .velo-app .modal.in .modal-dialog.runtime-modal{margin-left:5%;margin-right:5%;padding:0;position:relative;width:auto}:host ::ng-deep .modal-body.runtime-modal.main-container{height:100%;margin:0;padding:0}:host ::ng-deep .modal-body.runtime-modal.main-container .content-wrapper{display:flex;flex-direction:column;height:100%}:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper{display:flex;flex-direction:column;flex-grow:1;padding:0}:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid{height:100%;margin:0;padding:0;overflow:auto}:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid .input-form.form-horizontal,:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid .input-form.form-horizontal .form-horizontal,:host ::ng-deep .modal-body.runtime-modal.main-container .sections-wrapper .modal-body.runtime-modal.container-fluid section-script>:first-child{height:100%}:host ::ng-deep .runtime-modal .modal-content,:host ::ng-deep .gu-mirror .modal-content{background-color:--vl-input-background}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a{color:#333333b3;font-weight:600;text-transform:uppercase;letter-spacing:.85px;font-size:10px}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a.active,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a.active{color:#333}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a.disabled,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a.disabled{color:#33333380}:host ::ng-deep .runtime-modal .modal-content .modal-header-menu ul li a.active:after,:host ::ng-deep .gu-mirror .modal-content .modal-header-menu ul li a.active:after{background-color:#f36;bottom:-1px;content:\"\";height:1px;left:0;position:absolute;width:100%}:host ::ng-deep .runtime-modal .modal-content .modal-header,:host ::ng-deep .gu-mirror .modal-content .modal-header{background:transparent;color:#fff}:host ::ng-deep .runtime-modal .runtime-group-divider,:host ::ng-deep .gu-mirror .runtime-group-divider{border-bottom:1px solid #e5e5e5}:host ::ng-deep .runtime-modal .input-form-input,:host ::ng-deep .gu-mirror .input-form-input{position:relative;padding-left:0;padding-top:0}:host ::ng-deep .runtime-modal .input-form-input--required>label,:host ::ng-deep .gu-mirror .input-form-input--required>label{color:#ff4233;font-weight:bold}:host ::ng-deep .form-control-wrapper{position:relative}:host ::ng-deep .add-config-control:hover{background-color:#e96099;color:#fff;border:1px solid transparent}:host ::ng-deep .remove-config-control:hover{background-color:#828c9e;color:#fff}:host ::ng-deep .add-config-control[disabled],:host ::ng-deep .remove-config-control[disabled]{background-color:transparent;color:#ccc;border:1px dashed #ccc}:host ::ng-deep .add-config-control[disabled]:hover,:host ::ng-deep .remove-config-control[disabled]:hover{cursor:default}:host ::ng-deep .add-config-control{height:36px;width:36px;line-height:36px;font-size:14px;text-align:center;border-radius:50%;float:left;position:absolute;top:0;right:-57px;z-index:500;background-color:#e3337c;color:#fff;border:1px solid #e3337c;transition:all .5s ease 0s}:host ::ng-deep .add-config-control .plus-icon{line-height:36px}:host ::ng-deep .remove-config-control{height:36px;width:36px;line-height:36px;font-size:14px;text-align:center;margin-right:25px;border-radius:50%;float:left;position:absolute;top:33px;right:51px;z-index:500;background-color:transparent;color:#687285;border:1px solid transparent;transition:all .5s ease 0s}:host ::ng-deep .remove-config-control .plus-icon{line-height:36px}:host ::ng-deep .sidebar .new-wrapper{min-height:96px;margin-bottom:25px}:host ::ng-deep .sidebar .new-wrapper .add-container .add-card{left:0;margin-left:15px}:host ::ng-deep .ui-settings{height:100%;display:flex;flex-direction:column}:host ::ng-deep .runtime-modal .form-horizontal form,:host ::ng-deep .gu-mirror form{margin:0}:host ::ng-deep .runtime-modal .form-horizontal .form-group,:host ::ng-deep .gu-mirror .form-group{margin:0;padding:0}:host ::ng-deep .runtime-modal .form-horizontal .control.form-group,:host ::ng-deep .gu-mirror .control.form-group{margin-bottom:25px}:host ::ng-deep .runtime-modal .form-horizontal .form-control-wrapper,:host ::ng-deep .gu-mirror .form-control-wrapper{min-width:172px;margin-bottom:25px}:host ::ng-deep .runtime-modal .form-horizontal .quantity-form-input .form-control-wrapper,:host ::ng-deep .gu-mirror .quantity-form-input .form-control-wrapper{min-width:50px}:host ::ng-deep .runtime-modal .form-horizontal .quantity-form-input .form-control-wrapper .form-control,:host ::ng-deep .gu-mirror .quantity-form-input .form-control-wrapper .form-control{width:50px}:host ::ng-deep .runtime-left-side{height:calc(100% - 97px);background:#fff;padding:48px 56px 0}:host ::ng-deep .ui-controls-group{margin-left:-8px;margin-right:-8px}:host ::ng-deep .ui-controls-group .ui-control-type:hover{border-color:#3384ff}:host ::ng-deep .ui-controls-group .ui-control-type{position:relative;min-width:140px;float:left;border-radius:3px;border:1px solid #c4c4c4;background-color:#fff;width:calc(50% - 16px);padding:12px 13px;margin-bottom:16px;margin-right:8px;margin-left:8px;cursor:pointer}:host ::ng-deep .ui-controls-group .ui-control-type span{padding-left:3px}:host ::ng-deep .sidebar-header{letter-spacing:-.5px;padding-bottom:24px;padding-top:0;line-height:32px;font-size:24px;font-weight:700;color:#333}:host ::ng-deep .sidebar-header small{display:block;color:#333;font-size:11px;font-weight:300;line-height:20px;margin:0}:host ::ng-deep .sidebar-menu-list{color:#333333b3;margin:0;width:100%;list-style:none;font-size:12px}:host ::ng-deep .sidebar-menu-list li.active a,:host ::ng-deep .sidebar-menu-list li.active i{color:#005ee3}:host ::ng-deep .sidebar-menu-list li:hover{cursor:pointer}:host ::ng-deep .sidebar-menu-list li{text-align:right;padding-left:16px}:host ::ng-deep .sidebar-menu-list li a{padding:0 8px;margin-left:-8px;cursor:pointer;white-space:nowrap;color:inherit;font-weight:700;display:inline-block;line-height:32px}:host ::ng-deep .sidebar-menu-list li i{display:none;padding-right:5px}:host ::ng-deep .runtime-builder-content{min-height:100%}:host ::ng-deep .runtime-builder-content .input-form{margin:0;padding:18px 11px 0}:host ::ng-deep .runtime-builder-content .input-form .form-group{border:3px dashed transparent}:host ::ng-deep .runtime-builder-content .input-form .form-group:hover{border:3px dashed #dedede}:host ::ng-deep .runtime-right-side{background:#fff}:host ::ng-deep .sidebar-section .section-title{color:#a1a1a1;background:#fff;position:relative;display:inline-block;padding-right:16px;text-transform:uppercase;font-size:10px;letter-spacing:.2px}:host ::ng-deep .sidebar-section:before{content:\" \";position:absolute;top:50%;left:0;right:0;border-top:1px solid #e6e6e6}:host ::ng-deep .sidebar-section{position:relative;margin-top:16px;margin-bottom:16px}:host ::ng-deep .sidebar-section .section-title{color:#a1a1a1;background-color:var(--vl-input-background);position:relative;display:inline-block;padding-right:16px;padding-left:8px;text-transform:uppercase;font-size:6px;letter-spacing:.2px}:host ::ng-deep .section-wrapper{top:-21px;position:absolute;right:0;left:12px}:host ::ng-deep .container-box.container-box-bordered{border:1px solid rgba(0,0,0,.2);margin-bottom:25px;padding-left:25px}:host ::ng-deep .container-box.container-box-radio{margin-left:0}:host ::ng-deep .container-box.container-box-radio:hover,:host ::ng-deep .container-box.container-box-checkbox:hover{cursor:pointer}:host ::ng-deep .container-box{position:relative;overflow:auto;border:1px solid transparent;background:var(--vl-input-background)}:host ::ng-deep .container-box .container-box{border:1px solid rgba(0,0,0,.2);margin-left:25px;margin-right:25px;margin-bottom:25px}:host ::ng-deep .container-box .container-box:hover{border-color:var(--vl-primary-color)}:host ::ng-deep .container-box .box-title .header .header-label{color:#333;margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;line-height:75px}:host ::ng-deep .container-box .box-title .header .header-label small{padding-left:21px;color:#757575;font-weight:400;font-size:10px;line-height:75px}:host ::ng-deep .container-box .box-title .header .header-qty-container,:host ::ng-deep .container-box .box-title .header .radio-button,:host ::ng-deep .container-box .box-title .header .checkbox-select{display:table-cell;vertical-align:middle;height:75px;padding-left:21px}:host ::ng-deep .container-box .box-title .header .header-qty-container .form-control,:host ::ng-deep .container-box .box-title .header .radio-button .form-control,:host ::ng-deep .container-box .box-title .header .checkbox-select .form-control{height:auto;color:#333;width:50px;border:1px solid #dddddd}:host ::ng-deep .container-box .box-title .header .header-qty-container .form-control:focus,:host ::ng-deep .container-box .box-title .header .radio-button .form-control:focus,:host ::ng-deep .container-box .box-title .header .checkbox-select .form-control:focus{border:1px solid #c4c4c4}:host ::ng-deep .container-box .box-title .header .header-qty-container .validation-message,:host ::ng-deep .container-box .box-title .header .radio-button .validation-message,:host ::ng-deep .container-box .box-title .header .checkbox-select .validation-message{position:absolute;margin-top:3px}:host ::ng-deep .container-box .box-title .header .radio-button,:host ::ng-deep .container-box .box-title .header .checkbox-select{padding-left:0;vertical-align:middle}:host ::ng-deep .container-box .box-content{padding:25px 0 25px 33px}:host ::ng-deep .container-box .timeline-item{clear:both;display:block;width:100%;position:relative}:host ::ng-deep .container-box .timeline-item:before{display:block!important;content:\"\";position:absolute;left:25px;top:-25px;bottom:25px;width:1px;border-left:1px dashed rgba(0,0,0,.2)}:host ::ng-deep .container-box .timeline-item .icon{background:#90c7ec;width:35px;height:35px;border-radius:50%;position:absolute;left:24px;top:4px}:host ::ng-deep .container-box .timeline-item .icon .fa.fa-upload{left:11px;top:10px}:host ::ng-deep .container-box .timeline-item .icon .fa{color:#fff;position:absolute}:host ::ng-deep .container-box .timeline-item .message .content{float:left;width:80%}:host ::ng-deep .container-box .container-group-control{background:transparent;text-transform:uppercase}:host ::ng-deep .container-box-custom{margin-bottom:25px}:host ::ng-deep .unchecked .container-box{border-color:#0003}:host ::ng-deep .unchecked .container-box:hover{border-color:var(--vl-primary-color)}:host ::ng-deep .unchecked.timeline-item .icon-circle{background-color:#6e6e6e}:host ::ng-deep .collapsed .box-content-wrapper{opacity:0;display:none;transition:max-height .3s .1s}:host ::ng-deep .box-content-wrapper{transition:opacity .5s .1s;display:block;opacity:1}:host ::ng-deep .box-actions{position:absolute;right:25px;z-index:2;top:21px;opacity:1;transition:height .3s ease-out,opacity .5s .1s}:host ::ng-deep .box-action-button{height:32px;width:32px;line-height:32px;font-size:12px;text-align:center;float:left;margin-left:5px;border-radius:50%;transition:all .25s ease 0s}:host ::ng-deep .box-action-button a{color:#0000008a}:host ::ng-deep .box-action-button .check-icon{line-height:32px}:host ::ng-deep .box-actions-group{top:18px;right:45px}:host ::ng-deep .box-action-button:hover,:host ::ng-deep .box-action-button:focus{background-color:#0000001a;cursor:pointer;outline:none}:host ::ng-deep .box-action-button:active{background-color:#0003;cursor:pointer}:host ::ng-deep .box-action-button.active{background-color:#0000001a}:host ::ng-deep .div-block{clear:both;display:block}:host ::ng-deep .div-inline{float:left}:host ::ng-deep .checkbox-select{position:relative;display:block}:host ::ng-deep .checkbox-select label{color:#333;margin:0;line-height:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;padding-left:25px;position:relative;min-height:16px;cursor:pointer}:host ::ng-deep .checkbox-select input[type=checkbox]{position:absolute;width:16px;height:16px;top:0;left:0;z-index:1;cursor:pointer;opacity:0;filter:alpha(opacity=0);margin:0;line-height:normal}:host ::ng-deep .checkbox-select .input-helper:before{position:absolute;content:\"\";top:-1px;width:12px;height:12px;border-radius:2px;left:0;border:2px solid rgba(0,0,0,.54);transition:all;transition-duration:.25s}:host ::ng-deep .checkbox-select .input-helper:after{font-weight:100;line-height:12px;font-size:10px;color:#fff;font-family:FontAwesome;position:absolute;content:\"\\f00c\";width:12px;height:12px;background:#0065ff;border-radius:0;top:1px;left:2px;transform:scale(0);transition:all;transition-duration:.15s}:host ::ng-deep .checkbox-select input[type=checkbox]:checked+.input-helper:before,:host ::ng-deep .checkbox-select input[type=checkbox].checkbox--checked+.input-helper:before{border-color:var(--vl-primary-color)}:host ::ng-deep .checkbox-select input[type=checkbox]:checked+.input-helper:after,:host ::ng-deep .checkbox-select input[type=checkbox].checkbox--checked+.input-helper:after{transform:scale(1)}:host ::ng-deep .radio-button{position:relative;display:block}:host ::ng-deep .radio-button label{color:#333;margin:0;line-height:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;padding-left:25px;position:relative;min-height:16px;cursor:pointer}:host ::ng-deep .radio-button input[type=radio]{position:absolute;width:16px;height:16px;top:0;left:0;z-index:1;cursor:pointer;opacity:0;filter:alpha(opacity=0);margin:0;line-height:normal}:host ::ng-deep .radio-button .input-helper:before{position:absolute;content:\"\";top:-1px;width:12px;height:12px;border-radius:50%;left:0;border:2px solid rgba(0,0,0,.54);transition:all;transition-duration:.25s}:host ::ng-deep .radio-button .input-helper:after{position:absolute;content:\"\";width:6px;height:6px;background:var(--vl-primary-color);border-radius:50%;top:4px;left:5px;transform:scale(0);transition:all;transition-duration:.25s}:host ::ng-deep .radio-button input[type=radio]:checked+.input-helper:before{border-color:var(--vl-primary-color)}:host ::ng-deep .radio-button input[type=radio]:checked+.input-helper:after{transform:scale(1)}:host ::ng-deep .radio-button[disabled] input[type=radio]+.input-helper:before,:host ::ng-deep .checkbox-select[disabled] input[type=radio]+.input-helper:before{border-color:#0003}:host ::ng-deep .radio-button[disabled] input[type=checkbox]+.input-helper:before,:host ::ng-deep .checkbox-select[disabled] input[type=checkbox]+.input-helper:before{border-color:#0003}:host ::ng-deep .radio-button[disabled] input[type=radio]+.input-helper:after,:host ::ng-deep .checkbox-select[disabled] input[type=radio]+.input-helper:after{background:rgba(0,0,0,.2)}:host ::ng-deep .radio-button[disabled] input[type=checkbox]+.input-helper:after,:host ::ng-deep .checkbox-select[disabled] input[type=checkbox]+.input-helper:after{background:rgba(0,0,0,.2)}:host ::ng-deep .form-control-wrapper .checkbox-select,:host ::ng-deep .form-control-wrapper .radio-button{padding-top:10px}:host ::ng-deep .shopping-bag-sidebar.open{transform:translate(-100%)}:host ::ng-deep .shopping-bag-sidebar{position:fixed;top:0;bottom:0;z-index:1051;width:420px;right:-420px;background-color:#2a2b30;transition:.3s transform}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart{color:#abacae;position:absolute;top:20%;width:50px;height:50px;line-height:50px;text-align:center;right:100%;left:auto;background:#2a2b30;border-radius:3px 0 0 3px;display:block}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:before{font-family:FontAwesome;content:\"\\f291\"}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:hover{text-decoration:none;color:#abacae}:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:active,:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:focus,:host ::ng-deep .shopping-bag-sidebar .close-shopping-cart:visited{text-decoration:none;color:#abacae}:host ::ng-deep .shopping-bag-sidebar .cart-count{font-size:9px;font-weight:bold;line-height:15px;position:absolute;top:50%;right:8px;width:15px;height:15px;margin:-16px 0 0;text-align:center;color:#fff;border-radius:50%;background:var(--vl-primary-color)}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-container{overflow:auto;display:block;height:100%;padding:0 25px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item{color:#abacae;background-color:#000;position:relative;overflow:auto;margin-bottom:10px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title{position:relative;padding-right:25px;padding-left:25px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title .header{float:left;color:#abacae;margin:0;line-height:48px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title .box-actions{height:48px;float:right;top:0}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-item .item-title .box-action-button{height:32px;width:32px;line-height:32px;font-size:10px;font-weight:700;margin-top:8px;text-align:center;transition:all .25s ease 0s;color:#fff;background-color:var(--vl-primary-color)}:host ::ng-deep .shopping-bag-sidebar .shopping-bag-title{color:#cecece;font-size:11px;text-transform:uppercase;line-height:64px;font-weight:600;padding-top:0;margin-top:25px;margin-bottom:25px;text-align:right}:host ::ng-deep .container-box.hovered:before,:host ::ng-deep .box-title.hovered:before,:host ::ng-deep .container-box.selected:before,:host ::ng-deep .box-title.selected:before{top:0;right:0;left:0;bottom:0}:host ::ng-deep .selectable{position:relative;cursor:pointer}:host ::ng-deep .container-box.hovered:before{border-color:transparent}:host ::ng-deep .container-box.hovered{border-color:var(--vl-primary-color)}:host ::ng-deep .container-box.selected:before{border-color:transparent}:host ::ng-deep .container-box.selected{border-color:var(--vl-primary-color)}:host ::ng-deep .hovered:before{display:block!important;position:absolute;content:\" \";top:-15px;bottom:15px;left:-15px;right:15px;border:1px solid var(--vl-primary-color)}:host ::ng-deep .hovered .box-action-button{opacity:1!important}:host ::ng-deep .opacity-1{opacity:1!important}:host ::ng-deep .overflow-y--auto{overflow-y:auto}:host ::ng-deep .gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)\";filter:alpha(opacity=80)}:host ::ng-deep .gu-hide{display:none!important}:host ::ng-deep .gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}:host ::ng-deep .gu-transit{opacity:.2;-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)\";filter:alpha(opacity=20)}:host ::ng-deep .top-nav-msg{margin-top:-30px}:host ::ng-deep .runtime-info-message ul{margin-bottom:0;list-style:none}:host ::ng-deep .runtime-info-message ul li{margin-bottom:10px}:host ::ng-deep .runtime-info-message ul li:last-child{margin-bottom:0}:host ::ng-deep .runtime-info-message .message-text{font-family:\"Open Sans\",Tahoma,sans-serif!important;overflow:hidden;padding:0;font-size:11px}:host ::ng-deep .runtime-attributes-popover .popover-arrow{display:none}:host ::ng-deep .runtime-attributes-popover .popover-content{padding:0}:host ::ng-deep .runtime-attributes-popover .runtime-content-wrapper{padding:0}:host ::ng-deep .runtime-attributes-popover .container-box-custom{margin-bottom:0}:host ::ng-deep .runtime-attributes-popover .input-form{margin:0;padding:0}:host ::ng-deep .runtime-attributes-popover .input-form form{margin-bottom:0}:host ::ng-deep .runtime-attributes-popover .input-form form .div-inline{display:block;float:none}:host ::ng-deep .runtime-attributes-popover .input-form form .form-group{padding:0;margin:0}:host ::ng-deep .runtime-attributes-popover .container-box .box-content{padding:0}:host ::ng-deep .v-custom-title,:host ::ng-deep .v-custom-description,:host ::ng-deep .v-custom-image{display:none}:host ::ng-deep .dropdown{position:relative}:host ::ng-deep .dropdown-toggle:focus{outline:0}:host ::ng-deep .dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;box-shadow:0 6px 12px #0000002d}:host ::ng-deep .dropdown-menu.pull-right{right:0;left:auto}:host ::ng-deep .dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}:host ::ng-deep .dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}:host ::ng-deep .dropdown-menu>li>a:hover,:host ::ng-deep .dropdown-menu>li>a:focus{color:#262626;text-decoration:none;background-color:#f5f5f5}:host ::ng-deep .dropdown-menu>.active>a,:host ::ng-deep .dropdown-menu>.active>a:hover,:host ::ng-deep .dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}:host ::ng-deep .dropdown-menu>.disabled>a,:host ::ng-deep .dropdown-menu>.disabled>a:hover,:host ::ng-deep .dropdown-menu>.disabled>a:focus{color:#777}:host ::ng-deep .dropdown-menu>.disabled>a:hover,:host ::ng-deep .dropdown-menu>.disabled>a:focus{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false)}:host ::ng-deep .open>.dropdown-menu{display:block}:host ::ng-deep .open>a{outline:0}:host ::ng-deep .dropdown-menu-right{right:0;left:auto}:host ::ng-deep .dropdown-menu-left{right:auto;left:0}:host ::ng-deep .dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}:host ::ng-deep .dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}\n", ":host{height:100%;display:flex;flex-direction:column}.sections-wrapper{flex-grow:1;display:flex;flex-direction:column}form{flex-grow:1;display:flex;flex-direction:column}.hidden{display:none}\n"], components: [{ type: i8__namespace.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { type: SectionRendererComponent, selector: "vl-section-renderer", inputs: ["section", "form"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7__namespace.SidebarTabsDirective, selector: "[sidebarTabs]", inputs: ["sidebarTabs"], exportAs: ["sidebarTabs"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], pipes: { "orderBy": i7__namespace.OrderByPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'vl-runtime',
+                        moduleId: module.id,
+                        templateUrl: 'runtime.component.html',
+                        styleUrls: ['./runtime-legacy-styles.scss', 'runtime.component.scss'],
+                        providers: [FormScopeService, CollapsibleStateService, i7.OrderByPipe, i7.SearchFilterPipe],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: SectionsService }, { type: FormScopeService }, { type: CollapsibleStateService }, { type: RuntimeFormService }, { type: RuntimeService }, { type: i3__namespace$1.MessageService, decorators: [{
+                            type: i0.Inject,
+                            args: [i3$1.MessageService]
+                        }] }, { type: i2__namespace.ContextService }, { type: i7__namespace.OrderByPipe }, { type: i7__namespace.SearchFilterPipe }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { solutionUpdated: [{
+                    type: i0.Output
+                }] } });
+
+    var RuntimePreviewComponent = /** @class */ (function () {
+        function RuntimePreviewComponent(runtimeService, modelCacheService, configurationApiService, contextService) {
+            this.runtimeService = runtimeService;
+            this.modelCacheService = modelCacheService;
+            this.configurationApiService = configurationApiService;
+            this.contextService = contextService;
+            this.destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(RuntimePreviewComponent.prototype, "uiDefinition", {
+            set: function (value) {
+                this._uiDefinition = value;
+                this.initDefinition(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RuntimePreviewComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (!this.modelId) {
+                return;
+            }
+            this.modelCacheService
+                .getProductModel(this.modelId)
+                .pipe(rxjsOperators.takeUntil(this.destroy$))
+                .subscribe(function (container) {
+                _this.productModelContainer = container;
+                if (_this._uiDefinition) {
+                    _this.initDefinition(_this._uiDefinition);
+                }
+            });
+        };
+        RuntimePreviewComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        RuntimePreviewComponent.prototype.initDefinition = function (uiDefinition) {
+            if (!this.productModelContainer) {
+                return;
+            }
+            var initialisedUiDefinition = i7.EntityUtil.clone(uiDefinition);
+            var externals = this.productModelContainer.main.externals;
+            if (externals) {
+                initialisedUiDefinition.externals = externals.reduce(function (trunk, variable) {
+                    var _c;
+                    var _a, _b;
+                    return Object.assign(Object.assign({}, trunk), (_c = {}, _c[variable.name] = (_b = (_a = initialisedUiDefinition.externals) === null || _a === void 0 ? void 0 : _a[variable.name]) !== null && _b !== void 0 ? _b : '', _c));
+                }, {});
+            }
+            else {
+                delete initialisedUiDefinition.externals;
+            }
+            this.initialisedUiDefinition = initialisedUiDefinition;
+            this.launchRuntime();
+        };
+        RuntimePreviewComponent.prototype.onSolutionUpdated = function (lineItem) {
+            this.runtimeService.updateRuntime({ configurableRamp: lineItem });
+        };
+        RuntimePreviewComponent.prototype.launchRuntime = function () {
+            var _this = this;
+            if (!this.modelId || !this.initialisedUiDefinition) {
+                return;
+            }
+            i7.SectionPathUtil.updateSectionsPath(this.initialisedUiDefinition.sections);
+            var uiDefinition = i7.EntityUtil.clone(this.initialisedUiDefinition);
+            rxjs.combineLatest([
+                this.configurationApiService.getRuntimeDataByModelId(this.modelId),
+                this.contextService.create('TestId', i7.ConfigurationContextMode.TEST),
+            ]).subscribe(function (_c) {
+                var _d = __read(_c, 1), runtimeData = _d[0];
+                var _a;
+                var runtimeModel = i7.RuntimeModel.create(runtimeData.types, runtimeData.products);
+                var rootType = Array.from(runtimeModel.components.values()).find(function (c) { return uiDefinition.rootType &&
+                    runtimeModel.isEquals(c.typeName, uiDefinition.rootType) &&
+                    i7.EntityUtil.isPresent(c.productId); });
+                if (rootType === null || rootType === void 0 ? void 0 : rootType.typeName) {
+                    uiDefinition.rootType = rootType.typeName;
+                }
+                var contextProductId = rootType ? rootType.productId : undefined;
+                var context = {
+                    modelId: (_a = _this.modelId) !== null && _a !== void 0 ? _a : '',
+                    uiDefinition: uiDefinition,
+                    runtimeModel: runtimeModel,
+                    runtimeMode: i2.RuntimeMode.TEST,
+                    productId: contextProductId,
+                    properties: uiDefinition.externals,
+                };
+                _this.runtimeService.startRuntime(context, {});
+            });
+        };
+        return RuntimePreviewComponent;
+    }());
+    RuntimePreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimePreviewComponent, deps: [{ token: RuntimeService }, { token: ProductModelCacheService }, { token: i1__namespace.ConfigurationApiService }, { token: i2__namespace.ContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RuntimePreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: RuntimePreviewComponent, selector: "vl-runtime-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, ngImport: i0__namespace, template: "<vl-runtime (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{flex-grow:1}\n"], components: [{ type: RuntimeComponent, selector: "vl-runtime", outputs: ["solutionUpdated"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimePreviewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'vl-runtime-preview',
+                        templateUrl: 'runtime-preview.component.html',
+                        styleUrls: ['runtime-preview.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: RuntimeService }, { type: ProductModelCacheService }, { type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.ContextService }]; }, propDecorators: { modelId: [{
+                    type: i0.Input
+                }], uiDefinition: [{
+                    type: i0.Input
+                }] } });
+
+    var RuntimeModule = /** @class */ (function () {
+        function RuntimeModule() {
+        }
+        return RuntimeModule;
+    }());
+    RuntimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RuntimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeModule, declarations: [RuntimeComponent, RuntimePreviewComponent, SectionRendererComponent, ComponentPreviewComponent], imports: [i5.CommonModule,
+            i4.FormsModule,
+            i4.ReactiveFormsModule,
+            i7.CoreModule,
+            i1.ApiModule,
+            elements.VeloceElementsModule,
+            i5$1.PopoverModule,
+            i8.LoaderModule,
+            i2.SdkCoreModule], exports: [i4.FormsModule,
+            i4.ReactiveFormsModule,
+            RuntimeComponent,
+            RuntimePreviewComponent,
+            SectionRendererComponent,
+            ComponentPreviewComponent] });
+    RuntimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeModule, providers: [
+            ShoppingCartService,
+            RuntimeService,
+            ConfigurationService,
+            RuntimeContextService,
+            RuntimeFormService,
+            CurrentStateService,
+            ProductModelCacheService,
+            i5.DatePipe,
+            SectionsService,
+            SectionStoreService,
+            i3.DialogService,
+        ], imports: [[
+                i5.CommonModule,
+                i4.FormsModule,
+                i4.ReactiveFormsModule,
+                i7.CoreModule,
+                i1.ApiModule,
+                elements.VeloceElementsModule,
+                i5$1.PopoverModule,
+                i8.LoaderModule,
+                i2.SdkCoreModule,
+            ], i4.FormsModule,
+            i4.ReactiveFormsModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [RuntimeComponent, RuntimePreviewComponent, SectionRendererComponent, ComponentPreviewComponent],
+                        providers: [
+                            ShoppingCartService,
+                            RuntimeService,
+                            ConfigurationService,
+                            RuntimeContextService,
+                            RuntimeFormService,
+                            CurrentStateService,
+                            ProductModelCacheService,
+                            i5.DatePipe,
+                            SectionsService,
+                            SectionStoreService,
+                            i3.DialogService,
+                        ],
+                        imports: [
+                            i5.CommonModule,
+                            i4.FormsModule,
+                            i4.ReactiveFormsModule,
+                            i7.CoreModule,
+                            i1.ApiModule,
+                            elements.VeloceElementsModule,
+                            i5$1.PopoverModule,
+                            i8.LoaderModule,
+                            i2.SdkCoreModule,
+                        ],
+                        exports: [
+                            i4.FormsModule,
+                            i4.ReactiveFormsModule,
+                            RuntimeComponent,
+                            RuntimePreviewComponent,
+                            SectionRendererComponent,
+                            ComponentPreviewComponent,
+                        ],
+                    }]
+            }] });
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.ComponentPreviewComponent = ComponentPreviewComponent;
+    exports.CurrentStateService = CurrentStateService;
+    exports.RuntimeComponent = RuntimeComponent;
+    exports.RuntimeContextService = RuntimeContextService;
+    exports.RuntimeModule = RuntimeModule;
+    exports.RuntimePreviewComponent = RuntimePreviewComponent;
+    exports.RuntimeService = RuntimeService;
+    exports.SectionRendererComponent = SectionRendererComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=veloceapps-sdk-runtime.umd.js.map