@veloceapps/sdk 6.0.0-9 → 6.0.0-91

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

@@ -64,9 +64,9 @@
         };
         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: [{
+    CollapsibleStateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollapsibleStateService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    CollapsibleStateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollapsibleStateService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CollapsibleStateService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -145,9 +145,9 @@
         };
         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: [{
+    FormScopeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormScopeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FormScopeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormScopeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FormScopeService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -158,7 +158,7 @@
         BoundDataType[BoundDataType["PORT"] = 2] = "PORT";
     })(BoundDataType || (BoundDataType = {}));
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -225,6 +225,64 @@
     function __param(paramIndex, decorator) {
         return function (target, key) { decorator(target, key, paramIndex); };
     }
+    function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+        function accept(f) { if (f !== void 0 && typeof f !== "function")
+            throw new TypeError("Function expected"); return f; }
+        var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+        var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+        var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+        var _, done = false;
+        for (var i = decorators.length - 1; i >= 0; i--) {
+            var context = {};
+            for (var p in contextIn)
+                context[p] = p === "access" ? {} : contextIn[p];
+            for (var p in contextIn.access)
+                context.access[p] = contextIn.access[p];
+            context.addInitializer = function (f) { if (done)
+                throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+            var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+            if (kind === "accessor") {
+                if (result === void 0)
+                    continue;
+                if (result === null || typeof result !== "object")
+                    throw new TypeError("Object expected");
+                if (_ = accept(result.get))
+                    descriptor.get = _;
+                if (_ = accept(result.set))
+                    descriptor.set = _;
+                if (_ = accept(result.init))
+                    initializers.push(_);
+            }
+            else if (_ = accept(result)) {
+                if (kind === "field")
+                    initializers.push(_);
+                else
+                    descriptor[key] = _;
+            }
+        }
+        if (target)
+            Object.defineProperty(target, contextIn.name, descriptor);
+        done = true;
+    }
+    ;
+    function __runInitializers(thisArg, initializers, value) {
+        var useValue = arguments.length > 2;
+        for (var i = 0; i < initializers.length; i++) {
+            value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+        }
+        return useValue ? value : void 0;
+    }
+    ;
+    function __propKey(x) {
+        return typeof x === "symbol" ? x : "".concat(x);
+    }
+    ;
+    function __setFunctionName(f, name, prefix) {
+        if (typeof name === "symbol")
+            name = name.description ? "[".concat(name.description, "]") : "";
+        return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+    }
+    ;
     function __metadata(metadataKey, metadataValue) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
             return Reflect.metadata(metadataKey, metadataValue);
@@ -256,7 +314,7 @@
         function step(op) {
             if (f)
                 throw new TypeError("Generator is already executing.");
-            while (_)
+            while (g && (g = 0, op[0] && (_ = 0)), _)
                 try {
                     if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                         return t;
@@ -320,7 +378,11 @@
     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]; } });
+        var desc = Object.getOwnPropertyDescriptor(m, k);
+        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+            desc = { enumerable: true, get: function () { return m[k]; } };
+        }
+        Object.defineProperty(o, k2, desc);
     }) : (function (o, m, k, k2) {
         if (k2 === undefined)
             k2 = k;
@@ -420,7 +482,7 @@
     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 verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
     }
     function __asyncValues(o) {
         if (!Symbol.asyncIterator)
@@ -475,6 +537,11 @@
             throw new TypeError("Cannot write private member to an object whose class did not declare it");
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
+    function __classPrivateFieldIn(state, receiver) {
+        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
+            throw new TypeError("Cannot use 'in' operator on non-object");
+        return typeof state === "function" ? receiver === state : state.has(receiver);
+    }
 
     var LineItemPath = /** @class */ (function () {
         function LineItemPath(path) {
@@ -1090,9 +1157,9 @@
         };
         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: [{
+    RuntimeFormService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeFormService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RuntimeFormService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeFormService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeFormService, decorators: [{
                 type: i0.Injectable
             }] });
     var FormServiceUtils = /** @class */ (function () {
@@ -1178,6 +1245,12 @@
         };
         ConfigurationService.prototype.showInactiveProductsConfirmation = function () {
             var _this = this;
+            var confirmationConfig = {
+                title: ' ',
+                description: 'This quote contains inactive products. Do you want to remove them?',
+                primaryButtonLabel: 'Remove products',
+                secondaryButtonLabel: 'Back to Quote',
+            };
             this.dialogService
                 .open(i8.ConfirmationComponent, {
                 dismissableMask: false,
@@ -1186,14 +1259,7 @@
                 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',
-                    },
-                },
+                data: { confirmationConfig: confirmationConfig },
             })
                 .onClose.subscribe(function (result) {
                 if (!result) {
@@ -1204,9 +1270,9 @@
         };
         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: [{
+    ConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: ConfigurationService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfigurationService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.ConfigurationApiService }, { type: i2__namespace.ContextService }, { type: i3__namespace.DialogService }]; } });
 
@@ -1307,9 +1373,9 @@
         };
         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: [{
+    RuntimeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: RuntimeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: i2__namespace.ContextService }, { type: i3__namespace$1.MessageService }]; } });
 
@@ -1332,9 +1398,9 @@
         };
         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: [{
+    ShoppingCartService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: ShoppingCartService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ShoppingCartService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.PriceApiService }, { type: i2__namespace.ContextService }, { type: i2__namespace.QuoteDraftService }]; } });
 
@@ -1347,9 +1413,9 @@
         };
         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: [{
+    CurrentStateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CurrentStateService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    CurrentStateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CurrentStateService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CurrentStateService, decorators: [{
                 type: i0.Injectable,
                 args: [{ providedIn: 'root' }]
             }] });
@@ -1375,9 +1441,9 @@
         };
         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: [{
+    ProductModelCacheService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: ProductModelCacheService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ProductModelCacheService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.ProductModelApiService }]; } });
 
@@ -1426,9 +1492,9 @@
         };
         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: [{
+    RuntimeContextService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: RuntimeContextService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", 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 }]; } });
 
@@ -1451,9 +1517,9 @@
         };
         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: [{
+    SectionStoreService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionStoreService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionStoreService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionStoreService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionStoreService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -1489,9 +1555,9 @@
         };
         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: [{
+    SectionScopeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionScopeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionScopeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionScopeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionScopeService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -1547,9 +1613,9 @@
         };
         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: [{
+    ExecutionSectionRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: ExecutionSectionRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -1603,9 +1669,9 @@
         };
         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: [{
+    ChildrenPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: ChildrenPlaceholderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -1623,9 +1689,9 @@
         }
         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: [{
+    TemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: TemplateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -1649,9 +1715,9 @@
         };
         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: [{
+    ContextProviderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: ContextProviderComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-context-provider',
@@ -1771,9 +1837,9 @@
         };
         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: [{
+    FederatedComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: FederatedComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -1874,9 +1940,9 @@
         };
         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: [{
+    VeloAttributeDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VeloAttributeDirective, selector: "velo-attribute-directive", exportAs: ["attributeApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VeloAttributeDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1981,15 +2047,15 @@
         };
         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: [
+    MultiselectComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MultiselectComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -2066,9 +2132,9 @@
         };
         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: [{
+    VeloAttributeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloAttributeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -2139,9 +2205,9 @@
         };
         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: [{
+    VeloPortCheckBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloPortCheckBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -2236,9 +2302,9 @@
         };
         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: [{
+    VeloPortDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloPortDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -2383,9 +2449,9 @@
         };
         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: [{
+    VeloPortRadioComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloPortRadioComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // tslint:disable-next-line:component-selector
@@ -2498,9 +2564,9 @@
         };
         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: [{
+    VeloTypeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloTypeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/component-selector
@@ -2530,9 +2596,9 @@
         };
         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: [{
+    SfQueryDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: SfQueryDirective, selector: "sf-query", exportAs: ["sfApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SfQueryDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2565,9 +2631,9 @@
         };
         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: [{
+    SectionHelperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionHelperService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SectionHelperService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionHelperService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionHelperService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -2643,9 +2709,9 @@
         };
         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: [{
+    SectionContextAware.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: SectionContextAware, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionContextAware, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
     var LineItemDirective = /** @class */ (function () {
@@ -2674,9 +2740,9 @@
         };
         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: [{
+    LineItemDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: LineItemDirective, selector: "line-item", exportAs: ["liApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LineItemDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2792,9 +2858,9 @@
         };
         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: [{
+    VeloPortDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VeloPortDirective, selector: "velo-port", exportAs: ["portApi"], usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VeloPortDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2809,9 +2875,9 @@
         }
         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: [{
+    VeloDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         moduleId: module.id,
@@ -2827,9 +2893,9 @@
         }
         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: [{
+    VeloQuantityComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloQuantityComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         moduleId: module.id,
@@ -2845,9 +2911,9 @@
         }
         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: [{
+    VeloQuantityButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: VeloQuantityButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         moduleId: module.id,
@@ -2866,9 +2932,9 @@
         };
         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: [{
+    VlApprovalDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VlApprovalDirective, selector: "vl-approval", exportAs: ["approvalApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VlApprovalDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2899,9 +2965,9 @@
         };
         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: [{
+    VlDocumentAttachmentsDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VlDocumentAttachmentsDirective, selector: "vl-document-attachments", exportAs: ["documentAttachmentsApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VlDocumentAttachmentsDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2956,9 +3022,9 @@
         };
         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: [{
+    VlDocumentTemplatesDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VlDocumentTemplatesDirective, selector: "[vlQuoteTemplates]", exportAs: ["quoteTemplateApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VlDocumentTemplatesDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[vlQuoteTemplates]',
@@ -2991,9 +3057,9 @@
         };
         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: [{
+    VlQuoteDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VlQuoteDirective, selector: "vl-quote", exportAs: ["quoteApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VlQuoteDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3039,9 +3105,9 @@
         };
         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: [{
+    VlRampDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: VlRampDirective, selector: "vl-ramp", exportAs: ["rampApi"], ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: VlRampDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3202,8 +3268,8 @@
         };
         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: [
+    SectionScriptDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", type: SectionScriptDirective, selector: "section-script", providers: [
             SfQueryDirective,
             LineItemDirective,
             VlQuoteDirective,
@@ -3212,7 +3278,7 @@
             VlApprovalDirective,
             VlDocumentAttachmentsDirective,
         ], exportAs: ["scriptApi"], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: SectionScriptDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionScriptDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         // eslint-disable-next-line @angular-eslint/directive-selector
@@ -3261,8 +3327,8 @@
         }
         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,
+    RuntimeExecutionModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeExecutionModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RuntimeExecutionModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeExecutionModule, declarations: [ExecutionSectionRendererComponent,
             ChildrenPlaceholderComponent,
             SectionScriptDirective,
             VeloPortDirective,
@@ -3303,7 +3369,7 @@
             FederatedComponent,
             TemplateComponent,
             ContextProviderComponent] });
-    RuntimeExecutionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeExecutionModule, providers: [
+    RuntimeExecutionModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeExecutionModule, providers: [
             ShoppingCartService,
             RuntimeService,
             ConfigurationService,
@@ -3325,7 +3391,7 @@
                 i2.SdkCoreModule,
             ], i4.FormsModule,
             i4.ReactiveFormsModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeExecutionModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeExecutionModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -3397,9 +3463,9 @@
         }
         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: [{
+    BaseSectionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseSectionComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BaseSectionComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: BaseSectionComponent, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
             }], propDecorators: { form: [{
@@ -3510,9 +3576,9 @@
         };
         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: [{
+    SectionsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", ngImport: i0__namespace, type: SectionsService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: SectionsService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.Compiler }, { type: i0__namespace.NgModuleRef }, { type: SectionStoreService }]; } });
 
@@ -3568,9 +3634,9 @@
         };
         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: [{
+    SectionRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: SectionRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-section-renderer',
@@ -3669,16 +3735,16 @@
         };
         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: [
+    ComponentPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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: [{
+        ], 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;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.17", ngImport: i0__namespace, type: ComponentPreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-component-preview',
@@ -4120,9 +4186,9 @@
         };
         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: [{
+    RuntimeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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;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.17", ngImport: i0__namespace, type: RuntimeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-runtime',
@@ -4231,9 +4297,9 @@
         };
         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: [{
+    RuntimePreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", 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.17", 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.17", ngImport: i0__namespace, type: RuntimePreviewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'vl-runtime-preview',
@@ -4252,8 +4318,8 @@
         }
         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,
+    RuntimeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    RuntimeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeModule, declarations: [RuntimeComponent, RuntimePreviewComponent, SectionRendererComponent, ComponentPreviewComponent], imports: [i5.CommonModule,
             i4.FormsModule,
             i4.ReactiveFormsModule,
             i7.CoreModule,
@@ -4267,7 +4333,7 @@
             RuntimePreviewComponent,
             SectionRendererComponent,
             ComponentPreviewComponent] });
-    RuntimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeModule, providers: [
+    RuntimeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeModule, providers: [
             ShoppingCartService,
             RuntimeService,
             ConfigurationService,
@@ -4291,7 +4357,7 @@
                 i2.SdkCoreModule,
             ], i4.FormsModule,
             i4.ReactiveFormsModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: RuntimeModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: RuntimeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [RuntimeComponent, RuntimePreviewComponent, SectionRendererComponent, ComponentPreviewComponent],