@veloceapps/sdk 7.0.0-9 → 7.0.1-0

package/fesm2020/veloceapps-sdk-runtime.mjs

@@ -0,0 +1,3764 @@
+import * as i0 from '@angular/core';
+import { Injectable, ViewContainerRef, Component, Input, ViewChild, Inject, EventEmitter, TemplateRef, ChangeDetectionStrategy, Output, Directive, HostBinding, NgModule, ViewChildren, ViewEncapsulation } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { FormGroup, FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i7 from '@veloceapps/core';
+import { EntityUtil, UUID, SectionPathUtil, TypeValidators, ConfigurationMode, RuntimeModel, OrderByPipe, PricingUtils, PagedEntity, CoreModule, SalesforceIdUtils, SearchFilterPipe, ConfigurationContextMode } from '@veloceapps/core';
+import * as i2 from '@veloceapps/sdk/core';
+import { RuntimeMode, RuntimeStep, SdkCoreModule } from '@veloceapps/sdk/core';
+import * as rxjs from 'rxjs';
+import { Subject, BehaviorSubject, of, merge, combineLatest } from 'rxjs';
+import * as _ from 'lodash';
+import { keys, isUndefined, isNull, isString, isDate, set, values } from 'lodash';
+import * as i3$1 from 'primeng/api';
+import { MessageService } from 'primeng/api';
+import * as rxjsOperators from 'rxjs/operators';
+import { map, take, tap, shareReplay, takeUntil } from 'rxjs/operators';
+import * as i1 from '@veloceapps/api';
+import { ApiModule } from '@veloceapps/api';
+import * as i10 from '@veloceapps/components';
+import { ConfirmationComponent, LoaderModule } from '@veloceapps/components';
+import * as i3 from 'primeng/dynamicdialog';
+import { DialogService } from 'primeng/dynamicdialog';
+import { __decorate } from 'tslib';
+import { ScrollingModule as ScrollingModule$1 } from '@angular/cdk-experimental/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i3$2 from '@angular/common';
+import { CurrencyPipe, DOCUMENT, CommonModule, DatePipe } from '@angular/common';
+import '@angular/compiler';
+import * as i1$1 from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as moment from 'moment';
+import { HttpErrorResponse } from '@angular/common/http';
+
+class CollapsibleStateService {
+    constructor() {
+        this._collapsedSections = {}; // By Line Item Id
+        this.collapseSectionSubject = new Subject();
+        this.collapseSectionEvent = this.collapseSectionSubject.asObservable();
+    }
+    toggleCollapse(sectionId, silently) {
+        this._collapsedSections[sectionId] = !this.isCollapsedSection(sectionId);
+        if (!silently) {
+            this.collapseSectionSubject.next([sectionId, this._collapsedSections[sectionId]]);
+        }
+    }
+    collapse(sectionId) {
+        this._collapsedSections[sectionId] = true;
+    }
+    expand(sectionId) {
+        this._collapsedSections[sectionId] = false;
+    }
+    clearState(sectionId) {
+        delete this._collapsedSections[sectionId];
+    }
+    isCollapsedSection(sectionId) {
+        return this._collapsedSections[sectionId];
+    }
+}
+CollapsibleStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CollapsibleStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CollapsibleStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CollapsibleStateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CollapsibleStateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class ScriptRegistry {
+    constructor() {
+        this.store = new Map();
+        this.scope = new Map();
+    }
+    exists(scriptId) {
+        const sectionIds = this.store.get(scriptId);
+        return !EntityUtil.isEmpty(sectionIds);
+    }
+    isRegistered(scriptId, sectionId) {
+        const sectionIds = this.store.get(scriptId);
+        return !EntityUtil.isEmpty(sectionIds) && sectionIds?.findIndex(entryId => entryId === sectionId) !== -1;
+    }
+    doRegister(scriptId, sectionId) {
+        const sectionIds = this.store.get(scriptId);
+        if (!EntityUtil.isPresent(sectionIds)) {
+            this.store.set(scriptId, [sectionId]);
+        }
+        else if (sectionIds?.findIndex(entryId => entryId === sectionId) === -1) {
+            sectionIds.push(sectionId);
+        }
+    }
+    unRegister(scriptId, sectionId) {
+        const sectionIds = this.store.get(scriptId);
+        if (!sectionIds) {
+            return;
+        }
+        const index = sectionIds?.findIndex(entryId => entryId === sectionId);
+        if (index !== -1) {
+            sectionIds.splice(index, 1);
+            // Remove orphan
+            if (sectionIds.length < 1) {
+                this.store.delete(scriptId);
+            }
+        }
+    }
+    hasGlobalForScript(globalId) {
+        return this.scope.has(globalId);
+    }
+    getGlobalForScript(globalId) {
+        return this.scope.get(globalId);
+    }
+    setGlobalForScript(globalId, globalVariable) {
+        this.scope.set(globalId, globalVariable);
+    }
+    removeGlobalForScript(globalId) {
+        this.scope.delete(globalId);
+    }
+}
+
+// TODO ALE RENAME TO SESSION SCOPE
+class FormScopeService {
+    constructor() {
+        this.scriptRegistry = new ScriptRegistry();
+        this.scriptSessionScope = {};
+        this.formSubmitSubject = new Subject();
+        this._form = new FormGroup({});
+        this.formSubmitEvent = this.formSubmitSubject.asObservable();
+    }
+    get form() {
+        return this._form;
+    }
+    set form(value) {
+        this._form = value;
+    }
+    publishFormUpdate(value) {
+        this.formSubmitSubject.next(value);
+    }
+}
+FormScopeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormScopeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormScopeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormScopeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FormScopeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+var BoundDataType;
+(function (BoundDataType) {
+    BoundDataType[BoundDataType["TYPE"] = 0] = "TYPE";
+    BoundDataType[BoundDataType["ATTRIBUTE"] = 1] = "ATTRIBUTE";
+    BoundDataType[BoundDataType["PORT"] = 2] = "PORT";
+})(BoundDataType || (BoundDataType = {}));
+
+class LineItemPath {
+    set relativePath(relativePath) {
+        this._relativePath = relativePath.toLowerCase();
+    }
+    get relativePath() {
+        return this._relativePath;
+    }
+    set abstractPath(abstractPath) {
+        this._abstractPath = abstractPath.toLowerCase();
+    }
+    get abstractPath() {
+        return this._abstractPath || this.path;
+    }
+    set relativeAbstractPath(relativeAbstractPath) {
+        this._relativeAbstractPath = relativeAbstractPath.toLowerCase();
+    }
+    constructor(path) {
+        this._relativePath = '';
+        this._relativeAbstractPath = '';
+        this._abstractPath = '';
+        this.path = path.toLowerCase();
+    }
+    isEqualTo(sectionPath) {
+        if (!sectionPath || !this.path || !sectionPath.path) {
+            return false;
+        }
+        const otherPath = sectionPath.path.toLowerCase();
+        const isEqual = this.path === otherPath || this._relativePath === otherPath || this._relativeAbstractPath === otherPath;
+        //TODO ALE SORT OUT SEARCH
+        if (!isEqual) {
+            const abstractPathMatch = this._abstractPath === sectionPath.abstractPath.toLowerCase();
+            const relativePathMatch = this._relativePath
+                ? this._relativePath === sectionPath.relativePath.toLowerCase()
+                : false;
+            const relativeAbstractPathMatch = this._relativeAbstractPath && sectionPath.relativeAbstractPath
+                ? sectionPath.relativeAbstractPath.toLowerCase() === sectionPath.relativePath.toLowerCase() &&
+                    this._relativeAbstractPath === sectionPath.relativePath.toLowerCase()
+                : false;
+            return abstractPathMatch && (relativePathMatch || relativeAbstractPathMatch);
+        }
+        return isEqual;
+    }
+}
+class LineItemUtil {
+    static removeDeletedItems(original) {
+        const root = EntityUtil.clone(original);
+        if (root) {
+            let items = [root];
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                item.lineItems = (item.lineItems ?? []).filter(l => l.actionCode !== 'DELETE');
+                items = items.concat(item.lineItems);
+            }
+        }
+        return root;
+    }
+    static replaceLineItemKeys(rootLineItem) {
+        const replaceFn = (item) => {
+            item.id = item.id ? 'DUMMY-' + item.id : item.id;
+            item.rootId = item.rootId ? 'DUMMY-' + item.rootId : item.rootId;
+            item.parentId = item.parentId ? 'DUMMY-' + item.parentId : item.parentId;
+            item.offeringInstanceId = item.offeringInstanceId ? 'DUMMY-' + item.offeringInstanceId : void 0;
+            item.offeringItemId = item.offeringItemId ? 'DUMMY-' + item.offeringItemId : void 0;
+            item.rampInstanceId = item.rampInstanceId ? 'DUMMY-' + item.rampInstanceId : void 0;
+        };
+        const traverseFn = (lineItem, callbackFn) => {
+            if (lineItem.lineItems && lineItem.lineItems.length > 0) {
+                lineItem.lineItems.forEach(childLineItem => {
+                    callbackFn.apply(null, [childLineItem]);
+                    traverseFn.apply(null, [childLineItem, callbackFn]);
+                });
+            }
+        };
+        replaceFn.apply(null, [rootLineItem]);
+        // rootLineItem.rootId = rootLineItem.id;
+        traverseFn.apply(null, [rootLineItem, replaceFn]);
+    }
+    static enrichPricingInfo(source, pricingDto) {
+        const result = {
+            ...source,
+        };
+        if (pricingDto) {
+            result.productName = pricingDto.properties?.['displayName'] || pricingDto.productName;
+            result.type = pricingDto.type;
+            result.rootId = pricingDto.rootId;
+            result.assetId = pricingDto.assetId;
+            result.openOrderLineItemId = pricingDto.openOrderLineItemId;
+            result.activated = pricingDto.activated;
+            result.actionCode = pricingDto.actionCode;
+            result.serviceStartDate = pricingDto.serviceStartDate;
+            result.effectiveDate = pricingDto.effectiveDate;
+            result.startDate = pricingDto.startDate;
+            result.endDate = pricingDto.endDate;
+            result.offeringId = pricingDto.offeringId;
+            result.offeringItemId = pricingDto.offeringItemId;
+            result.offeringInstanceId = pricingDto.offeringInstanceId;
+            result.rampInstanceId = pricingDto.rampInstanceId;
+            result.planId = pricingDto.planId;
+            if (!result.chargeItems) {
+                result.chargeItems = pricingDto.chargeItems;
+            }
+            result.chargeGroupItems = [];
+        }
+        if (source.lineItems && source.lineItems.length > 0) {
+            result.lineItems = [];
+            source.lineItems.forEach((childSource) => {
+                const childDto = pricingDto && pricingDto.lineItems && pricingDto.lineItems.find(c => childSource.id === c.id);
+                const childItem = LineItemUtil.enrichPricingInfo(childSource, childDto);
+                result.lineItems.push(childItem);
+            });
+        }
+        return result;
+    }
+    static getLineItemPath(lineItem, rootLineItem) {
+        let path;
+        if (!lineItem.parentId) {
+            path = new LineItemPath('/' + lineItem.type);
+            path.abstractPath = path.path;
+            path.relativePath = path.path;
+            path.relativeAbstractPath = path.path;
+        }
+        else {
+            //TOODO ALE SORT OUT PATENT ITEM
+            const parentItem = EntityUtil.findByFieldHierarchically('id', lineItem.parentId, [rootLineItem], 'lineItems');
+            const portType = lineItem.port && parentItem?.portDomains[lineItem.port].type;
+            const parentPath = parentItem && LineItemUtil.getLineItemPath(parentItem, rootLineItem);
+            if (parentPath) {
+                path = new LineItemPath(parentPath.path + '/ports/' + lineItem.port + '/' + lineItem.type);
+                path.abstractPath = parentPath.abstractPath + '/ports/' + (lineItem.port + '/' + portType);
+                path.relativePath = '/' + lineItem.type;
+                path.relativeAbstractPath = '/' + portType;
+            }
+            else {
+                throw 'Could not construct line item path';
+            }
+        }
+        return path;
+    }
+    static findById(parentId, lineItems) {
+        return EntityUtil.findByFieldHierarchically('id', parentId, lineItems, 'lineItems');
+    }
+    static countAttributeValues(scale, attributeDomain) {
+        const precision = LineItemUtil.precision(scale);
+        let count = 0;
+        attributeDomain.forEach(d => (count += d.max - d.min + precision));
+        return count;
+    }
+    static precision(scale) {
+        if (!scale) {
+            return 1;
+        }
+        let s = '1';
+        while (s.length < scale) {
+            s = '0' + s;
+        }
+        return Number('0.' + s);
+    }
+    static splitDomainToValues(scale, attributeDomain) {
+        const precision = this.precision(scale);
+        let values = [];
+        attributeDomain.forEach(interval => (values = values.concat(LineItemUtil.splitIntervalToValues(precision, interval))));
+        return values;
+    }
+    static splitIntervalToValues(precision, interval) {
+        const values = [];
+        for (let i = interval.min; i <= interval.max; i += precision) {
+            values.push(i);
+        }
+        return values;
+    }
+    static findLineItemsByPath(runtimeModel, lineItem, path) {
+        if (!runtimeModel.isEquals(lineItem.type, path.types[0])) {
+            return [];
+        }
+        let lineItems = [lineItem];
+        for (let i = 1; i < path.types.length; i++) {
+            const portName = path.ports[i - 1];
+            const typeName = path.types[i];
+            lineItems = LineItemUtil.findLineItemChildren(runtimeModel, lineItems, portName, typeName);
+        }
+        return lineItems;
+    }
+    static findLineItemChildren(runtimeModel, lineItems, portName, typeName) {
+        const result = [];
+        for (const lineItem of lineItems) {
+            for (const childItem of lineItem.lineItems) {
+                if (childItem.port?.toLowerCase() === portName.toLowerCase() &&
+                    runtimeModel.isEquals(childItem.type, typeName)) {
+                    result.push(childItem);
+                }
+            }
+        }
+        return result;
+    }
+    static findLineItemsByType(runtimeModel, lineItem, typeName) {
+        const result = [];
+        let lineItems = [lineItem];
+        for (let i = 0; i < lineItems.length; i++) {
+            const lineItem = lineItems[i];
+            if (runtimeModel.isEquals(lineItem.type, typeName)) {
+                result.push(lineItem);
+            }
+            lineItems = lineItems.concat(lineItem.lineItems);
+        }
+        return result;
+    }
+    static findLineItemForValue(model, valueOption) {
+        if (!EntityUtil.isPresent(model) || !EntityUtil.isPresent(model.lineItems)) {
+            return;
+        }
+        return model.lineItems.find(li => li.type && li.type.toLowerCase() === valueOption.toLowerCase());
+    }
+    // TODO: add Product typings
+    static create(product, qty) {
+        return {
+            id: UUID.UUID(),
+            type: product.typeName,
+            name: product.properties?.displayName || product.name,
+            productName: product.name,
+            productId: product.id,
+            cfgStatus: 'User',
+            actionCode: 'ADD',
+            qty: qty || 1,
+        };
+    }
+    static upsert(value, collection) {
+        const index = collection.findIndex(item => item.id === value.id);
+        if (index > -1) {
+            collection[index] = value;
+        }
+        else {
+            collection.push(value);
+        }
+    }
+    static compareSortOrder(a, b) {
+        const orderA = Number(a.properties['SortOrder']);
+        const orderB = Number(b.properties['SortOrder']);
+        if (!orderA && !orderB) {
+            return LineItemUtil.compareProductName(a, b);
+        }
+        if (!orderA) {
+            return 1;
+        }
+        else if (!orderB) {
+            return -1;
+        }
+        const result = orderA - orderB;
+        if (result === 0) {
+            return LineItemUtil.compareProductName(a, b);
+        }
+        return result;
+    }
+    static sort(lineItems) {
+        if (lineItems) {
+            lineItems.sort((a, b) => LineItemUtil.compareSortOrder(a, b));
+            lineItems.forEach(i => LineItemUtil.sort(i.lineItems));
+        }
+    }
+    static compareProductName(a, b) {
+        if (a.productName) {
+            return (a.productName ?? '').localeCompare(b.productName ?? '');
+        }
+        else if (b.productName) {
+            return 1;
+        }
+        return 0;
+    }
+}
+
+class SectionsBinderHelper {
+    static setLineItemsPath(runtimeModel, rootLineItem, sections, sourceSections, filterFn, pricingEnabled) {
+        const filtered = sections.filter(filterFn);
+        filtered.forEach(section => {
+            const path = section.boundData.path;
+            let foundLineItems;
+            if (path.relative) {
+                foundLineItems = LineItemUtil.findLineItemsByType(runtimeModel, rootLineItem, path.types[0]);
+            }
+            else {
+                const remainder = rootLineItem.path ? SectionPathUtil.cut(runtimeModel, path, rootLineItem.path) : undefined;
+                if (!remainder) {
+                    return [];
+                }
+                foundLineItems = LineItemUtil.findLineItemsByPath(runtimeModel, rootLineItem, remainder);
+            }
+            if (section.boundData.entityType === BoundDataType[BoundDataType.TYPE]) {
+                SectionsBinderHelper.bindMatchingLineItems(runtimeModel, foundLineItems, section, sections, sourceSections, pricingEnabled);
+            }
+            else if (section.boundData.entityType === BoundDataType[BoundDataType.ATTRIBUTE]) {
+                foundLineItems = foundLineItems.filter(item => item.attributes &&
+                    item.attributes.findIndex(a => a.name.toLowerCase() === section.boundData.name.toLowerCase()) !== -1);
+                foundLineItems.forEach(lineItem => {
+                    SectionsBinderHelper.bindLineItem(section, sections, sourceSections, lineItem, pricingEnabled);
+                });
+            }
+            else if (section.boundData.entityType === BoundDataType[BoundDataType.PORT]) {
+                foundLineItems = foundLineItems.filter(item => item.portDomains && item.portDomains[section.boundData.name]);
+                SectionsBinderHelper.bindMatchingLineItems(runtimeModel, foundLineItems, section, sections, sourceSections, pricingEnabled);
+            }
+            return;
+        });
+        return sections;
+    }
+    static isAddAllowed(model, portName, quantityToAdd = 1) {
+        const quantity = this.getQuantity(model, portName);
+        return quantity + quantityToAdd <= +this.getPortMax(model, portName);
+    }
+    static isRemoveAllowed(model, portName, quantityToRemove = 1) {
+        const quantity = this.getQuantity(model, portName);
+        return quantity - quantityToRemove >= +this.getPortMin(model, portName);
+    }
+    static getMaxAllowed(lineItem, portName) {
+        return +this.getPortMax(lineItem, portName) - this.getQuantity(lineItem, portName);
+    }
+    static getQuantityGroupByValue(model, portName) {
+        const quantities = {};
+        if (model && portName) {
+            model.lineItems
+                .filter(li => li.port === portName)
+                .forEach(li => {
+                let quantity = (EntityUtil.isPresent(li.qty) && li.qty) || 1;
+                if (EntityUtil.isPresent(quantities[li.type])) {
+                    quantity += quantities[li.type];
+                }
+                quantities[li.type] = quantity;
+            });
+        }
+        return quantities;
+    }
+    static bindMatchingLineItems(runtimeModel, foundLineItems, section, sections, sourceSections, pricingEnabled) {
+        foundLineItems.forEach(lineItem => {
+            const boundSection = SectionsBinderHelper.bindLineItem(section, sections, sourceSections, lineItem, pricingEnabled);
+            SectionsBinderHelper.setLineItemsPath(runtimeModel, lineItem, sections, sourceSections, (sec) => {
+                return sec.boundData && sec.parentId === boundSection.id;
+            }, pricingEnabled);
+        });
+    }
+    static bindLineItem(section, sections, sourceSections, lineItem, pricingEnabled) {
+        const boundSection = section.model ? SectionsBinderHelper.doClone(section, sections, sourceSections) : section;
+        boundSection.model = lineItem;
+        boundSection.pricingEnabled = pricingEnabled;
+        return boundSection;
+    }
+    static doClone(source, sections, sourceSections, parent) {
+        const sourceClass = sourceSections.find(s => s.classId === source.classId);
+        const clone = EntityUtil.clone(sourceClass);
+        clone.id = UUID.UUID();
+        clone.parentId = parent ? parent.id : source.parentId;
+        sections.splice(sections.findIndex(s => s.id === source.id) + 1, 0, clone);
+        sourceSections
+            .filter(s => s.parentId === sourceClass.id)
+            .forEach(s => SectionsBinderHelper.doClone(s, sections, sourceSections, clone));
+        return clone;
+    }
+    static getQuantity(model, portName) {
+        let quantity = 0;
+        model.lineItems
+            .filter(li => li.port === portName)
+            .forEach(li => {
+            quantity += li.qty;
+        });
+        return quantity;
+    }
+    static getPortMax(model, portName) {
+        return model.portDomains[portName].maxCard;
+    }
+    static getPortMin(model, portName) {
+        return model.portDomains[portName].minCard;
+    }
+}
+
+class RuntimeFormService {
+    constructor() {
+        this.sections = [];
+    }
+    initForm(sections, solutionLineItem) {
+        this.sections = sections;
+        this.solutionLineItem = solutionLineItem;
+        const form = new FormGroup({});
+        sections
+            .filter(section => section.model && section.template && section.boundData)
+            .forEach(section => {
+            this.populateSectionValue(section);
+            this.populateSectionPrice(section);
+            this.populateFormControls(section, form);
+        });
+        return form;
+    }
+    populateSectionValue(section) {
+        let value;
+        let valueOptions = [];
+        let displayValues = {};
+        let properties = {};
+        if (FormServiceUtils.isPortSection(section)) {
+            const portDomain = section.model?.portDomains[section.boundData.name];
+            valueOptions = portDomain?.domainTypes.map(dt => dt.name) ?? [];
+            properties =
+                portDomain?.domainTypes.reduce(function (map, dt) {
+                    map[dt.name] = dt.properties;
+                    return map;
+                }, {}) ?? {};
+            displayValues =
+                portDomain?.domainTypes.reduce(function (map, dt) {
+                    map[dt.name] = dt.displayName;
+                    return map;
+                }, {}) ?? {};
+            value = section.model?.lineItems.map(li => li.type);
+        }
+        if (FormServiceUtils.isAttributeSection(section)) {
+            const attribute = section.model?.attributes.find(attr => attr.name.toLowerCase() === section.boundData.name.toLowerCase());
+            if (attribute) {
+                value = attribute.value;
+            }
+            const attributeDomain = section.model?.attributeDomains[section.boundData.name];
+            if (!attribute?.type.match('GENERIC|BOOLEAN') && attributeDomain) {
+                const count = attribute && attribute.scale != null
+                    ? LineItemUtil.countAttributeValues(attribute.scale, attributeDomain)
+                    : undefined;
+                if (attribute && attribute.scale != null && count && count <= 100) {
+                    valueOptions = LineItemUtil.splitDomainToValues(attribute.scale, attributeDomain);
+                }
+                else {
+                    valueOptions = attributeDomain;
+                }
+            }
+            else if (attributeDomain) {
+                valueOptions = attributeDomain;
+            }
+        }
+        if (!EntityUtil.isPresent(value)) {
+            value = '';
+        }
+        section.sectionValue = {
+            value,
+            valueOptions,
+            displayValues,
+            properties,
+        };
+    }
+    populateSectionPrice(section) {
+        const priceValue = { priceOptions: {} };
+        if (FormServiceUtils.isPortSection(section)) {
+            const portDomain = section.model?.portDomains[section.boundData.name];
+            if (portDomain) {
+                portDomain.domainTypes.forEach(dt => {
+                    if (dt.recommendedPrices && dt.recommendedPrices.length > 0) {
+                        priceValue.priceOptions[dt.name] = dt.recommendedPrices;
+                    }
+                    else {
+                        delete priceValue.priceOptions[dt.name];
+                    }
+                });
+            }
+        }
+        section.priceValue = priceValue;
+    }
+    populateFormControls(section, form) {
+        form.controls[section.id] = this.createFormControl(section);
+        if (FormServiceUtils.isPortSection(section) || FormServiceUtils.isTypeSection(section)) {
+            form.controls[section.id.concat('qty')] = this.createQtyControl(section);
+        }
+    }
+    createFormControl(section) {
+        const value = FormServiceUtils.isPortSection(section) ? void 0 : section.sectionValue?.value;
+        return new FormControl(value, this.getFormControlValidators(section));
+    }
+    createQtyControl(section) {
+        const isTypeSection = FormServiceUtils.isTypeSection(section);
+        const validators = [];
+        const maxAllowed = this.getMaxAllowed(section);
+        //TODO TEMPORARY SOLUTION (WILL BE DISABLED ONCE RADIO CONTROLS IMPLEMENTED)
+        if (maxAllowed > 0) {
+            validators.push(this.getQuantityValidator(maxAllowed, isTypeSection ? section.model?.qty ?? 0 : 0));
+        }
+        const qtyValue = isTypeSection ? section.model?.qty : 1;
+        return new FormControl(qtyValue, validators);
+    }
+    getMaxAllowed(section) {
+        let lineItem = section.model;
+        let portName = section.boundData.name;
+        if (FormServiceUtils.isTypeSection(section)) {
+            if (section.model && EntityUtil.isPresent(section.model.parentId) && this.solutionLineItem) {
+                if (section.model.parentId) {
+                    lineItem = LineItemUtil.findById(section.model.parentId, [this.solutionLineItem]);
+                }
+                portName = section.model.port;
+            }
+            else {
+                return 0;
+            }
+        }
+        if (!lineItem) {
+            return 0;
+        }
+        return SectionsBinderHelper.getMaxAllowed(lineItem, portName);
+    }
+    //TODO ALE TO SUPPORT EMPTY VALUES FOR INTERVAL ATTRIBUTES OUT OF DOMAIN
+    getFormControlValidators(section) {
+        if (!FormServiceUtils.isAttributeSection(section)) {
+            return null;
+        }
+        const validators = [];
+        const parentLineItem = section.model && this.solutionLineItem && FormServiceUtils.findParent(section.model.id, [this.solutionLineItem]);
+        const attribute = parentLineItem &&
+            parentLineItem.attributes.find(attr => attr.name.toLowerCase() === section.boundData.name.toLowerCase());
+        if (!attribute || !attribute.type) {
+            return null;
+        }
+        const primitiveTypesValidators = {
+            INT: TypeValidators.integerValidator(),
+            'DOUBLE|DECIMAL': TypeValidators.decimalValidator(10),
+        };
+        keys(primitiveTypesValidators).forEach(types => {
+            if (types.match(attribute.type)) {
+                const validator = primitiveTypesValidators[types];
+                validators.push(validator);
+            }
+        });
+        if (!attribute.type.match('GENERIC|BOOLEAN|MULTIPLE')) {
+            const sectionLabel = section.label;
+            const intervalValidator = function (control) {
+                if (isUndefined(control.value) || isNull(control.value) || isNaN(+control.value)) {
+                    return { interval: { message: sectionLabel + ' is not in domain' } };
+                }
+                if (!isUndefined(control.value) && isString(control.value) && control.value.length === 0) {
+                    return null;
+                }
+                const attributeDomain = section.model?.attributeDomains[section.boundData.name];
+                const valid = attributeDomain?.some(valueOption => {
+                    const min = +valueOption.min;
+                    const max = +valueOption.max;
+                    return +control.value <= max && +control.value >= min;
+                });
+                if (!valid) {
+                    return { interval: { message: sectionLabel + ' is not in domain' } };
+                }
+                return null;
+            };
+            validators.push(intervalValidator);
+        }
+        if (section.required) {
+            validators.push(TypeValidators.requiredValidator(section.label + ' is required '));
+        }
+        return validators.length !== 0 ? validators : null;
+    }
+    getQuantityValidator(max, originalQty) {
+        return (control) => {
+            if (!control.value) {
+                return { quantity: { message: 'Required' } };
+            }
+            else if (isNaN(+control.value) || +control.value < 1) {
+                return { quantity: { message: 'Invalid value' } };
+            }
+            else if (+control.value > max + originalQty) {
+                return { quantity: { message: 'Max quantity  ' + (max + originalQty) } };
+            }
+            else {
+                return null;
+            }
+        };
+    }
+}
+RuntimeFormService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeFormService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeFormService, decorators: [{
+            type: Injectable
+        }] });
+class FormServiceUtils {
+    static isPortSection(section) {
+        return section && section.boundData && section.boundData.entityType === BoundDataType[BoundDataType.PORT];
+    }
+    static isTypeSection(section) {
+        return section && section.boundData && section.boundData.entityType === BoundDataType[BoundDataType.TYPE];
+    }
+    static isAttributeSection(section) {
+        return section && section.boundData && section.boundData.entityType === BoundDataType[BoundDataType.ATTRIBUTE];
+    }
+    static findParent(parentId, lineItems) {
+        return EntityUtil.findByFieldHierarchically('id', parentId, lineItems, 'lineItems');
+    }
+}
+
+class ConfigurationService {
+    constructor(configurationApiService, contextService, dialogService) {
+        this.configurationApiService = configurationApiService;
+        this.contextService = contextService;
+        this.dialogService = dialogService;
+    }
+    configure(runtimeContext, states, resolve) {
+        const lineItem = (states && states.configurableRamp) || this.getDefaultLineItem(runtimeContext);
+        const configurationMode = resolve ? ConfigurationMode.RESOLVE : ConfigurationMode.SEARCH;
+        const configurationRequest = this.createRequest(lineItem, runtimeContext, configurationMode);
+        configurationRequest.lineItems = states.currentState || [];
+        configurationRequest.asset = states.asset;
+        const runtimeModel = runtimeContext.runtimeModel;
+        const pricingEnabled = runtimeContext.uiDefinition?.pricingEnabled;
+        return this.configurationApiService
+            .configureLineItem({
+            configurationRequest,
+            runtimeModel,
+            pricingEnabled,
+        })
+            .pipe(map(({ lineItem, context, deletedLineItems }) => {
+            if (context) {
+                this.contextService.update({ properties: context.properties });
+            }
+            if (deletedLineItems?.length) {
+                this.showInactiveProductsConfirmation();
+            }
+            return lineItem;
+        }));
+    }
+    createRequest(lineItem, runtimeContext, configurationMode) {
+        if (runtimeContext.runtimeMode === RuntimeMode.TEST) {
+            const properties = {
+                ...runtimeContext.properties,
+                ModelId: runtimeContext.modelId,
+                RuntimeMode: 'TEST',
+                PricingEnabled: String(runtimeContext.uiDefinition?.pricingEnabled),
+                StartDate: runtimeContext.properties?.StartDate ?? new Date().toISOString().substring(0, 10),
+                PriceListId: runtimeContext.uiDefinition?.priceList,
+            };
+            this.contextService.update({ properties });
+        }
+        else {
+            const context = this.contextService.resolve();
+            if (context.properties && runtimeContext.properties?.StartDate) {
+                this.contextService.update({
+                    properties: {
+                        ...context.properties,
+                        ...runtimeContext.properties,
+                    },
+                });
+            }
+        }
+        return {
+            lineItem,
+            mode: configurationMode,
+            step: runtimeContext.invocationContext && runtimeContext.invocationContext.runtimeStep,
+            attributeDomainMode: 'ALL',
+            context: this.contextService.resolve(),
+        };
+    }
+    getDefaultLineItem(context) {
+        const id = UUID.UUID();
+        const lineItem = {
+            id,
+            type: context.uiDefinition?.rootType ?? '',
+            cfgStatus: 'Default',
+            qty: 1,
+            productName: context.properties?.['displayName'] || context.productName,
+            productId: context.productId ?? '',
+            offeringId: context.offeringId,
+            ...(context.offeringId
+                ? { offeringId: context.offeringId, offeringInstanceId: context.offeringInstanceId || id }
+                : {}),
+        };
+        return lineItem;
+    }
+    showInactiveProductsConfirmation() {
+        const confirmationConfig = {
+            title: ' ',
+            description: 'This quote contains inactive products. Do you want to remove them?',
+            primaryButtonLabel: 'Remove products',
+            secondaryButtonLabel: 'Back to Quote',
+        };
+        this.dialogService
+            .open(ConfirmationComponent, {
+            dismissableMask: false,
+            closeOnEscape: false,
+            closable: false,
+            showHeader: true,
+            header: `Inactive Products in Quote`,
+            width: '440px',
+            data: { confirmationConfig },
+        })
+            .onClose.subscribe(result => {
+            if (!result) {
+                const context = this.contextService.resolve();
+                window['VELO_BACK_FN'].apply(null, [context.headerId]);
+            }
+        });
+    }
+}
+ConfigurationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfigurationService, deps: [{ token: i1.ConfigurationApiService }, { token: i2.ContextService }, { token: i3.DialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfigurationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfigurationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfigurationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ConfigurationApiService }, { type: i2.ContextService }, { type: i3.DialogService }]; } });
+
+class RuntimeService {
+    constructor(configurationService, contextService, messageService) {
+        this.configurationService = configurationService;
+        this.contextService = contextService;
+        this.messageService = messageService;
+        this.solutionReadySubject = new Subject();
+        this.onSolutionReadyEvent = this.solutionReadySubject.asObservable();
+        this.solutionUpdateStartedSubject = new Subject();
+        this.onSolutionUpdateStartedEvent = this.solutionUpdateStartedSubject.asObservable();
+        this.solutionUpdatedSubject = new Subject();
+        this.onSolutionUpdatedEvent = this.solutionUpdatedSubject.asObservable();
+        this.solutionProcessedSubject = new Subject();
+        this.onSolutionProcessed = this.solutionProcessedSubject.asObservable();
+        this.solutionStopSubject = new Subject();
+        this.onSolutionStopEvent = this.solutionStopSubject.asObservable();
+        this.solutionCancelSubject = new Subject();
+        this.onSolutionCancelEvent = this.solutionCancelSubject.asObservable();
+        this.uiRefreshSubject = new Subject();
+        this.onUIRefreshEvent = this.uiRefreshSubject.asObservable();
+    }
+    displayErrorMessage(error) {
+        this.messageService.add({
+            severity: 'error',
+            summary: error.error?.message || error.message || JSON.stringify(error),
+        });
+    }
+    startRuntime(context, states, resolve) {
+        this.setRuntimeContext(context);
+        this.setRuntimeStep(RuntimeStep.START);
+        this.configurationService
+            .configure(context, states, resolve)
+            .pipe(take(1))
+            .subscribe(lineItem => {
+            this.solutionReadySubject.next(lineItem);
+        }, error => {
+            this.displayErrorMessage(error);
+            this.solutionUpdatedSubject.next(error);
+        });
+    }
+    updateRuntime(states, configurationContextProperties) {
+        if (!this.runtimeContext) {
+            return;
+        }
+        this.solutionUpdateStartedSubject.next();
+        this.setRuntimeStep(RuntimeStep.UPDATE);
+        this.updateRuntimeContext(configurationContextProperties);
+        this.configurationService
+            .configure(this.runtimeContext, states)
+            .pipe(take(1))
+            .subscribe(lineItem => {
+            const context = this.contextService.resolve();
+            this.updateRuntimeContext(context.properties);
+            this.solutionUpdatedSubject.next(lineItem);
+        }, error => {
+            this.displayErrorMessage(error);
+            this.solutionUpdatedSubject.next(error);
+        });
+    }
+    stopRuntime(solutionLineItem) {
+        this.solutionStopSubject.next(solutionLineItem);
+    }
+    cancelRuntime() {
+        this.solutionCancelSubject.next();
+    }
+    setRuntimeContext(runtimeContext) {
+        this.runtimeContext = runtimeContext;
+    }
+    getRuntimeContext() {
+        return this.runtimeContext;
+    }
+    solutionProcessed(lineItem) {
+        this.solutionProcessedSubject.next(lineItem);
+    }
+    refreshUI(uiDefinition) {
+        if (!this.runtimeContext) {
+            return;
+        }
+        this.runtimeContext = {
+            ...this.runtimeContext,
+            uiDefinition,
+        };
+        this.uiRefreshSubject.next();
+    }
+    updateRuntimeContext(configurationContextProperties) {
+        if (!this.runtimeContext || !configurationContextProperties) {
+            return;
+        }
+        this.runtimeContext = { ...this.runtimeContext, properties: configurationContextProperties };
+    }
+    setRuntimeStep(runtimeStep) {
+        if (!this.runtimeContext) {
+            return;
+        }
+        this.runtimeContext.invocationContext = {
+            ...this.runtimeContext.invocationContext,
+            runtimeStep,
+        };
+    }
+}
+RuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, deps: [{ token: ConfigurationService }, { token: i2.ContextService }, { token: i3$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ConfigurationService }, { type: i2.ContextService }, { type: i3$1.MessageService }]; } });
+
+class ShoppingCartService {
+    constructor(priceApiService, contextService, quoteService) {
+        this.priceApiService = priceApiService;
+        this.contextService = contextService;
+        this.quoteService = quoteService;
+    }
+    setCartExternally(currentState) {
+        const context = this.contextService.resolve();
+        return this.priceApiService.calculate({ context, currentState }).pipe(take(1), tap(({ lineItems }) => {
+            this.quoteService.setCurrentLineItemState(lineItems);
+        }));
+    }
+    getCurrentState() {
+        return this.quoteService.currentState;
+    }
+}
+ShoppingCartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ShoppingCartService, deps: [{ token: i1.PriceApiService }, { token: i2.ContextService }, { token: i2.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Injectable });
+ShoppingCartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ShoppingCartService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ShoppingCartService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.PriceApiService }, { type: i2.ContextService }, { type: i2.QuoteDraftService }]; } });
+
+class CurrentStateService {
+    constructor() {
+        this.currentState = [];
+    }
+    update(state) {
+        this.currentState = state;
+    }
+}
+CurrentStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CurrentStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CurrentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CurrentStateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CurrentStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ProductModelCacheService {
+    constructor(productModelApiService) {
+        this.productModelApiService = productModelApiService;
+        this.cachedModel = new Map();
+    }
+    getProductModel(currentModelId, version) {
+        if (!this.cachedModel.has(currentModelId) || version) {
+            this.clearCache();
+            this.cachedModel.set(currentModelId, this.productModelApiService.load(currentModelId, version).pipe(shareReplay(1)));
+        }
+        return this.cachedModel.get(currentModelId);
+    }
+    getCachedModel() {
+        const ids = Array.from(this.cachedModel.keys());
+        return this.cachedModel.get(ids[0]);
+    }
+    clearCache() {
+        this.cachedModel.clear();
+    }
+}
+ProductModelCacheService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductModelCacheService, deps: [{ token: i1.ProductModelApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+ProductModelCacheService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductModelCacheService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ProductModelCacheService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ProductModelApiService }]; } });
+
+class RuntimeContextService {
+    constructor(configurationApiService, messageService, contextService) {
+        this.configurationApiService = configurationApiService;
+        this.messageService = messageService;
+        this.contextService = contextService;
+    }
+    getRuntimeContext(productId, offeringId) {
+        return this.configurationApiService.getRuntimeDataByProductId(productId, offeringId).pipe(map(runtimeData => {
+            const uiDefinition = this.getUIDefinition(runtimeData.uiDefinitions);
+            const runtimeModel = RuntimeModel.create(runtimeData.types, runtimeData.products);
+            const { productName, properties } = Array.from(runtimeModel.components.values()).find(c => c.productId === productId) ?? {};
+            return {
+                modelId: runtimeData.modelId,
+                uiDefinition: uiDefinition,
+                runtimeModel: runtimeModel,
+                runtimeMode: RuntimeMode.PROD,
+                productId: productId,
+                productType: properties?.['displayName'] || productName,
+                offeringId: offeringId,
+                properties: {
+                    PricingEnabled: uiDefinition.pricingEnabled ? 'true' : 'false',
+                },
+            };
+        }));
+    }
+    getUIDefinition(uiDefinitions = []) {
+        const { uiDefinitionId } = this.contextService.resolve();
+        const findByFn = (uiDef) => (uiDefinitionId ? uiDefinitionId === uiDef.id : uiDef.primary);
+        const uiDefinition = uiDefinitions.find(findByFn) || (uiDefinitions.length === 1 && { ...uiDefinitions[0] });
+        if (!uiDefinition) {
+            const errMsg = `Unable to find ${uiDefinitionId ? uiDefinitionId : 'Default'} UI`;
+            this.messageService.add({
+                severity: 'error',
+                summary: 'ERROR',
+            });
+            throw new Error(errMsg);
+        }
+        SectionPathUtil.updateSectionsPath(uiDefinition.sections);
+        return uiDefinition;
+    }
+}
+RuntimeContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeContextService, deps: [{ token: i1.ConfigurationApiService }, { token: i3$1.MessageService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeContextService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ConfigurationApiService }, { type: i3$1.MessageService }, { type: i2.ContextService }]; } });
+
+class SectionStoreService {
+    constructor() {
+        this._componentFactories = [];
+    }
+    set componentFactories(data) {
+        this._componentFactories = data;
+    }
+    get componentFactories() {
+        return this._componentFactories;
+    }
+    getComponentFactory(section) {
+        return this.componentFactories.find(f => f.selector === section.dynamicSelector);
+    }
+}
+SectionStoreService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SectionStoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionStoreService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionStoreService, decorators: [{
+            type: Injectable
+        }] });
+
+class SectionScopeService {
+    constructor() {
+        this.indent = 1;
+        this.templates = new BehaviorSubject([]);
+    }
+    get section() {
+        return this._section;
+    }
+    set section(value) {
+        this._section = value;
+        this.indent = this.getIndent(value);
+    }
+    getIndent(section) {
+        if (!section || !section.parentId) {
+            return 1;
+        }
+        else {
+            let current = section;
+            let indent = 1;
+            while (current && current.parent) {
+                current = current.parent;
+                indent++;
+            }
+            return indent;
+        }
+    }
+}
+SectionScopeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionScopeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SectionScopeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionScopeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionScopeService, decorators: [{
+            type: Injectable
+        }] });
+
+class ExecutionSectionRendererComponent {
+    set section(value) {
+        this._section = value;
+        this.sectionScope.section = value;
+    }
+    get section() {
+        return this._section;
+    }
+    constructor(_injector, _m, sectionScope, sectionStore) {
+        this._injector = _injector;
+        this._m = _m;
+        this.sectionScope = sectionScope;
+        this.sectionStore = sectionStore;
+        this.componentRef = null;
+    }
+    ngOnInit() {
+        this.renderSection();
+    }
+    ngAfterViewInit() {
+        if (this.componentRef) {
+            this.sectionScope.templates.next(this.componentRef.instance['templates']?.toArray() ?? []);
+        }
+    }
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    renderSection() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        const componentFactory = this.sectionStore.getComponentFactory(this._section);
+        if (!componentFactory) {
+            return;
+        }
+        this.componentRef = componentFactory.create(this._injector, [], null, this._m);
+        this.componentRef.location.nativeElement.setAttribute('sectionId', `${this._section.model?.id}${this._section.label}`);
+        this.componentRef.instance['form'] = this.form;
+        this.componentRef.instance['section'] = this.section;
+        this.container.insert(this.componentRef.hostView);
+    }
+}
+ExecutionSectionRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ExecutionSectionRendererComponent, deps: [{ token: i0.Injector }, { token: i0.NgModuleRef }, { token: SectionScopeService }, { token: SectionStoreService }], target: i0.ɵɵFactoryTarget.Component });
+ExecutionSectionRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ExecutionSectionRendererComponent, selector: "section-renderer", inputs: { section: "section", form: "form" }, providers: [SectionScopeService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #container></ng-template>", styles: [":host{display:contents}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ExecutionSectionRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'section-renderer', providers: [SectionScopeService], template: "<ng-template #container></ng-template>", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.NgModuleRef }, { type: SectionScopeService }, { type: SectionStoreService }]; }, propDecorators: { section: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class ChildrenPlaceholderComponent {
+    constructor(sectionScope, formScope, collapsibleState) {
+        this.sectionScope = sectionScope;
+        this.formScope = formScope;
+        this.collapsibleState = collapsibleState;
+        this._children = [];
+        this.collapsed = false;
+    }
+    ngOnInit() {
+        this.section = this.sectionScope.section;
+        this.form = this.formScope.form;
+        this.collapsed = this.section.model ? this.collapsibleState.isCollapsedSection(this.section.model.id) : true;
+        this.sub = this.collapsibleState.collapseSectionEvent.subscribe(e => {
+            const lineItemId = e[0];
+            if (this.section.model?.id === lineItemId) {
+                this.collapsed = e[1];
+            }
+        });
+        this.setChildren();
+    }
+    ngOnChanges(changes) {
+        if (!this.children || changes['children']?.currentValue !== changes['children']?.previousValue) {
+            this.setChildren();
+        }
+    }
+    setChildren() {
+        this._children = this.children ? this.children : this.section.children;
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+}
+ChildrenPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ChildrenPlaceholderComponent, deps: [{ token: SectionScopeService }, { token: FormScopeService }, { token: CollapsibleStateService }], target: i0.ɵɵFactoryTarget.Component });
+ChildrenPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ChildrenPlaceholderComponent, selector: "children-placeholder", inputs: { children: "children" }, providers: [OrderByPipe], usesOnChanges: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExecutionSectionRendererComponent, selector: "section-renderer", inputs: ["section", "form"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ChildrenPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'children-placeholder', providers: [OrderByPipe], 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" }]
+        }], ctorParameters: function () { return [{ type: SectionScopeService }, { type: FormScopeService }, { type: CollapsibleStateService }]; }, propDecorators: { children: [{
+                type: Input
+            }] } });
+class TemplateComponent extends ChildrenPlaceholderComponent {
+}
+TemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TemplateComponent, selector: "template-component", usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExecutionSectionRendererComponent, selector: "section-renderer", inputs: ["section", "form"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'template-component', 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" }]
+        }] });
+
+class ContextProviderComponent {
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
+        this.types = [];
+        this.products = {};
+    }
+    ngOnInit() {
+        const context = this.runtimeService.getRuntimeContext();
+        if (!context) {
+            return;
+        }
+        this.runtimeService.setRuntimeContext({
+            ...context,
+            runtimeModel: RuntimeModel.create(this.types, this.products),
+        });
+    }
+}
+ContextProviderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextProviderComponent, deps: [{ token: RuntimeService }], target: i0.ɵɵFactoryTarget.Component });
+ContextProviderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ContextProviderComponent, selector: "vl-context-provider", inputs: { types: "types", products: "products" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ContextProviderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vl-context-provider',
+                    template: '',
+                }]
+        }], ctorParameters: function () { return [{ type: RuntimeService, decorators: [{
+                    type: Inject,
+                    args: [RuntimeService]
+                }] }]; }, propDecorators: { types: [{
+                type: Input
+            }], products: [{
+                type: Input
+            }] } });
+
+const moduleMap = {};
+function loadRemoteEntry(remoteEntry) {
+    return new Promise((resolve, reject) => {
+        if (moduleMap[remoteEntry]) {
+            resolve();
+            return;
+        }
+        const script = document.createElement('script');
+        script.src = remoteEntry;
+        script.onerror = reject;
+        script.onload = () => {
+            moduleMap[remoteEntry] = true;
+            resolve(); // window is the global namespace
+        };
+        document.body.append(script);
+    });
+}
+async function lookupExposedModule(remoteName, exposedModule) {
+    // Initializes the share scope. This fills it with known provided modules from this build and all remotes
+    await __webpack_init_sharing__('default');
+    const container = window[remoteName]; // or get the container somewhere else
+    // Initialize the container, it may provide shared modules
+    await container.init(__webpack_share_scopes__.default);
+    const factory = await container.get(exposedModule);
+    const Module = factory();
+    return Module;
+}
+async function loadRemoteModule(options) {
+    await loadRemoteEntry(options.remoteEntry);
+    return await lookupExposedModule(options.remoteName, options.exposedModule);
+}
+
+var IntegrationEvent;
+(function (IntegrationEvent) {
+    IntegrationEvent["Init"] = "Init";
+})(IntegrationEvent || (IntegrationEvent = {}));
+class FederatedComponent {
+    constructor(injector, compiler, appRef, renderer) {
+        this.injector = injector;
+        this.compiler = compiler;
+        this.appRef = appRef;
+        this.renderer = renderer;
+        this.integrationEvent = new EventEmitter();
+        this.moduleReady = false;
+    }
+    ngAfterViewInit() {
+        if (!this.remoteEntry || !this.remoteName || !this.exposedModule) {
+            return;
+        }
+        loadRemoteModule({
+            remoteEntry: this.remoteEntry,
+            remoteName: this.remoteName,
+            exposedModule: this.exposedModule,
+        }).then(federated => {
+            this.compiler.compileModuleAsync(federated[this.exposedModule]).then(moduleFactory => {
+                const rootModuleRef = moduleFactory.create(this.injector);
+                const rootComponentFactory = rootModuleRef.componentFactoryResolver.resolveComponentFactory(federated[this.exposedModule].rootComponent);
+                const node = document.createElement('div');
+                const { instance, hostView } = rootComponentFactory.create(this.injector, [], node);
+                this.instance = instance;
+                this.instance.data = this.data;
+                this.instance.eventData = this.eventData;
+                this.instance.integrationEvent = this.integrationEvent;
+                this.renderer.appendChild(this.moduleHostRef?.nativeElement, node);
+                this.appRef.attachView(hostView);
+            });
+        });
+    }
+    ngOnChanges(changes) {
+        if (!this.instance) {
+            return;
+        }
+        this.instance.ngOnChanges(changes);
+    }
+}
+FederatedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedComponent, deps: [{ token: i0.Injector }, { token: i0.Compiler }, { token: i0.ApplicationRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+FederatedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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: ViewContainerRef }, { propertyName: "foo", first: true, predicate: ["foo"], descendants: true, read: TemplateRef }, { propertyName: "moduleHostRef", first: true, predicate: ["moduleHost"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'veloce-host-federated', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #moduleHost></div>\n", styles: [":host{display:block}div{height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.Compiler }, { type: i0.ApplicationRef }, { type: i0.Renderer2 }]; }, propDecorators: { federatedComponent: [{
+                type: ViewChild,
+                args: ['federatedComponent', { read: ViewContainerRef }]
+            }], foo: [{
+                type: ViewChild,
+                args: ['foo', { read: TemplateRef }]
+            }], moduleHostRef: [{
+                type: ViewChild,
+                args: ['moduleHost', { static: false }]
+            }], remoteEntry: [{
+                type: Input
+            }], remoteName: [{
+                type: Input
+            }], exposedModule: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], eventData: [{
+                type: Input
+            }], integrationEvent: [{
+                type: Output
+            }] } });
+
+//TODO ALE WE ARE EXTENDING COMPONENT HERE IN PORTS WE ARE EXTENDING DEDICATED CLASS!! TYPES HANDLER IS NO IMPLEMENTED YET
+class VeloAttributeDirective {
+    constructor(formScope, sectionScope) {
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+        this.valueQuantities = {};
+        this.form = this.formScope.form;
+        this.section = this.sectionScope.section;
+    }
+    ngOnInit() {
+        this.initQuantity();
+    }
+    handleChange(valueOption) {
+        const updateData = {
+            id: this.section.id,
+            action: 'update',
+            valueOption,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    handleChangDate(valueOption) {
+        const oldValue = this.form.controls[this.section.id].value || '';
+        const newValue = isDate(valueOption) ? valueOption.toLocaleDateString('en-us') : '';
+        if (oldValue !== newValue) {
+            this.handleChange(newValue);
+        }
+    }
+    handleRemove() {
+        const updateData = {
+            id: this.section.id,
+            action: 'remove',
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    // TODO ALE THIS IS SPECIFIC STEPPER FUNCTIONS
+    nextVal() {
+        const currentIndex = this.getCurrentValueIndex();
+        const nextValIndex = currentIndex + 1;
+        if (currentIndex != -1 &&
+            this.section.sectionValue &&
+            this.section.sectionValue.valueOptions.length >= nextValIndex) {
+            this.handleChange(this.section.sectionValue.valueOptions[nextValIndex]);
+        }
+    }
+    prevVal() {
+        const currentIndex = this.getCurrentValueIndex();
+        const prevValIndex = currentIndex - 1;
+        if (currentIndex != -1 &&
+            this.section.sectionValue &&
+            this.section.sectionValue.valueOptions.length >= prevValIndex) {
+            this.handleChange(this.section.sectionValue.valueOptions[prevValIndex]);
+        }
+    }
+    initQuantity() {
+        this.valueQuantities = this.section.model
+            ? SectionsBinderHelper.getQuantityGroupByValue(this.section.model, this.section.boundData.name)
+            : {};
+    }
+    getCurrentValueIndex() {
+        const index = -1;
+        const valueOptions = this.section.sectionValue && this.section.sectionValue.valueOptions;
+        const currentValue = this.form.controls[this.section.id].value;
+        if (valueOptions && EntityUtil.isPresent(currentValue)) {
+            return valueOptions.findIndex(valueOption => currentValue === valueOption);
+        }
+        return index;
+    }
+}
+VeloAttributeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloAttributeDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Directive });
+VeloAttributeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VeloAttributeDirective, selector: "velo-attribute-directive", exportAs: ["attributeApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloAttributeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'velo-attribute-directive',
+                    exportAs: 'attributeApi',
+                }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+class MultiselectComponent {
+    constructor(elRef, viewContainerRef, overlay) {
+        this.elRef = elRef;
+        this.viewContainerRef = viewContainerRef;
+        this.overlay = overlay;
+        this.selectionChange = new EventEmitter();
+        this.selected = [];
+        this.displayValue = '';
+        this.touched = false;
+        this.disabled = false;
+        this.opened = false;
+        this.onChange = () => {
+            return;
+        };
+        this.onTouched = () => {
+            return;
+        };
+    }
+    ngOnDestroy() {
+        this.destroyDropdown();
+    }
+    writeValue(selected) {
+        this.selected = selected;
+        this.getDisplayValue();
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+    }
+    handleSelection(value) {
+        const selectedItem = this.selected.find(item => item === value);
+        if (selectedItem) {
+            this.selected = this.selected.filter(item => item !== value);
+        }
+        else {
+            this.selected = [...this.selected, value];
+        }
+        this.getDisplayValue();
+        this.selectionChange.emit(this.selected);
+        this.onChange(this.selected);
+    }
+    toggleOpened() {
+        this.opened ? this.destroyDropdown() : this.openDropdown();
+    }
+    getDisplayValue() {
+        const joinedValue = this.selected.join(', ');
+        this.displayValue = joinedValue.length > 24 ? `${this.selected.length} options selected` : joinedValue;
+    }
+    openDropdown() {
+        this.opened = true;
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.elRef)
+                .withPositions([
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                    offsetY: 8,
+                },
+            ]),
+        });
+        const templatePortal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+        this.overlayRef.attach(templatePortal);
+        this.dropdownClosingActionsSub = this.dropdownClosingActions().subscribe(() => this.destroyDropdown());
+    }
+    dropdownClosingActions() {
+        if (!this.overlayRef) {
+            return of();
+        }
+        const backdropClick$ = this.overlayRef.backdropClick();
+        const detachment$ = this.overlayRef.detachments();
+        return merge(backdropClick$, detachment$);
+    }
+    destroyDropdown() {
+        if (!this.overlayRef || !this.opened) {
+            return;
+        }
+        this.dropdownClosingActionsSub?.unsubscribe();
+        this.opened = false;
+        this.overlayRef.detach();
+    }
+}
+MultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiselectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+MultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: MultiselectComponent, selector: "velo-multiselect", inputs: { options: "options" }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.opened": "this.opened" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            multi: true,
+            useExisting: MultiselectComponent,
+        },
+    ], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }], ngImport: i0, 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"], dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'velo-multiselect', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: MultiselectComponent,
+                        },
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1$1.Overlay }]; }, propDecorators: { options: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], overlayTemplate: [{
+                type: ViewChild,
+                args: ['overlayTemplate']
+            }], opened: [{
+                type: HostBinding,
+                args: ['class.opened']
+            }] } });
+
+class VeloAttributeComponent extends VeloAttributeDirective {
+    constructor(formScope, sectionScope) {
+        super(formScope, sectionScope);
+        this.controlName = this.section.id;
+        this.displayName = this.getDisplayName();
+        this.isMultiselect =
+            this.section.model?.attributes.find(attr => attr.name === this.section.boundData.entity.name)?.type ===
+                'MULTIPLE';
+    }
+    getValueOptions(valueOptions) {
+        return this.isBooleanType(valueOptions) ? [0, 1] : valueOptions;
+    }
+    getValueText(valueOptions, value) {
+        if (this.isBooleanType(valueOptions)) {
+            return value === 0 ? 'False' : 'True';
+        }
+        return value;
+    }
+    handleMultiselectChange(value) {
+        const formControl = this.form.get(this.controlName);
+        if (!formControl) {
+            return;
+        }
+        const currentValue = formControl.value ?? [];
+        const newValue = currentValue.includes(value) ? currentValue.filter(v => v !== value) : [...currentValue, value];
+        formControl.setValue(newValue);
+        super.handleChange();
+    }
+    handleMultipleDropdownChange(event) {
+        const formControl = this.form.get(this.controlName);
+        if (!formControl) {
+            return;
+        }
+        formControl.setValue(event);
+        super.handleChange();
+    }
+    isBooleanType(value) {
+        return Array.isArray(value) && value.length === 1 && value[0].min === 0 && value[0].max === 1;
+    }
+    getDisplayName() {
+        return ((this.section.model?.properties && this.section.model.properties['displayName']) || this.section.model?.type || '');
+    }
+}
+VeloAttributeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloAttributeComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloAttributeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloAttributeComponent, selector: "velo-attribute", usesInheritance: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MultiselectComponent, selector: "velo-multiselect", inputs: ["options"], outputs: ["selectionChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloAttributeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'velo-attribute', 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" }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+class VeloPortCheckBoxComponent {
+    constructor(formScope, sectionScope) {
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+        this.showSelectAll = false;
+        this.form = this.formScope.form;
+        this.section = this.sectionScope.section;
+        this.controlName = this.section.id;
+        this.section.sectionValue?.valueOptions.forEach(item => {
+            if (this.hasValueFor(item)) {
+                this.form.controls[this.controlName].setValue(item);
+            }
+        });
+    }
+    handleChange(valueOption) {
+        const updateData = {
+            id: this.section.id,
+            action: this.hasValueFor(valueOption)
+                ? 'remove'
+                : this.section.model && SectionsBinderHelper.isAddAllowed(this.section.model, this.section.boundData.name)
+                    ? 'create'
+                    : 'update',
+            valueOption,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    hasValueFor(valueOption) {
+        return !!this.findLineItemForValue(valueOption);
+    }
+    selectAllChange() {
+        const portDomain = this.section.model?.portDomains[this.section.boundData.name];
+        const updateData = {
+            id: this.section.id,
+            action: 'upsert',
+            selectedValueOptions: this.isAllSelected() ? [] : portDomain ? portDomain.domainTypes.map(t => t.name) : [],
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    isAllSelected() {
+        const selected = this.section.model?.lineItems.filter(li => li.port && li.port === this.section.boundData.name);
+        const portDomain = this.section.model?.portDomains[this.section.boundData.name];
+        return portDomain ? portDomain.domainTypes.length === selected?.length : false;
+    }
+    getMessages(valueOption) {
+        if (this.section.model?.lineItems) {
+            return this.findLineItemForValue(valueOption)?.messages ?? [];
+        }
+        return [];
+    }
+    findLineItemForValue(valueOption) {
+        return (this.section.model?.lineItems &&
+            this.section.model.lineItems.find(li => li.type && li.type.toLowerCase() === valueOption.toLowerCase()));
+    }
+}
+VeloPortCheckBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortCheckBoxComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloPortCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloPortCheckBoxComponent, selector: "velo-port-checkbox", inputs: { showSelectAll: "showSelectAll" }, ngImport: i0, 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                  <!-- removed dependency: ngx-bootstrap -->\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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortCheckBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'velo-port-checkbox', 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                  <!-- removed dependency: ngx-bootstrap -->\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" }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; }, propDecorators: { showSelectAll: [{
+                type: Input
+            }] } });
+
+class VeloPortDropdownComponent {
+    constructor(formScope, sectionScope) {
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+        this.prices = {};
+        this.form = this.formScope.form;
+        this.section = this.sectionScope.section;
+        this.controlName = this.section.id;
+        this.qtyControlName = this.section.id + 'qty';
+        if (this.section.pricingEnabled) {
+            this.section.sectionValue?.valueOptions.forEach(valueOption => {
+                this.prices[valueOption] = this.findPriceItemsForValue(valueOption);
+            });
+        }
+    }
+    isAddAllowed() {
+        if (!EntityUtil.isPresent(this.form.controls[this.controlName].value)) {
+            return false;
+        }
+        return this.section.model
+            ? SectionsBinderHelper.isAddAllowed(this.section.model, this.section.boundData.name)
+            : false;
+    }
+    handleCreate() {
+        if (this.form.invalid || !this.isAddAllowed()) {
+            return;
+        }
+        const updateData = {
+            id: this.section.id,
+            action: 'create',
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    findPriceItemsForValue(valueOption) {
+        let prices = [];
+        if (valueOption) {
+            const portDomain = this.section.model?.portDomains[this.section.boundData.name];
+            const domainType = portDomain?.domainTypes.find(d => d.name.toLowerCase() === valueOption.toLowerCase());
+            if (domainType && domainType.recommendedPrices) {
+                prices = domainType.recommendedPrices;
+            }
+        }
+        const oneTime = {
+            chargeMethod: 'ONE_TIME',
+            netPrice: 0,
+            listPrice: 0,
+            chargeType: '',
+        };
+        const recurring = {
+            chargeMethod: 'RECURRING',
+            netPrice: 0,
+            listPrice: 0,
+            chargeType: '',
+        };
+        prices.forEach(p => {
+            if (p.chargeMethod === oneTime.chargeMethod) {
+                this.add(oneTime, p);
+            }
+            if (p.chargeMethod === recurring.chargeMethod) {
+                this.add(recurring, p);
+            }
+        });
+        const result = [];
+        if (oneTime.listPrice > 0) {
+            result.push(oneTime);
+        }
+        if (recurring.listPrice > 0) {
+            result.push(recurring);
+        }
+        return result;
+    }
+    add(target, src) {
+        target.netPrice = target.netPrice + src.netPrice;
+        target.listPrice = target.listPrice + src.listPrice;
+        if (src.explanation) {
+            target.explanation = src.explanation;
+        }
+    }
+}
+VeloPortDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortDropdownComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloPortDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloPortDropdownComponent, selector: "velo-port-dropdown", ngImport: i0, 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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.ValuesPipe, name: "values" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'velo-port-dropdown', 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" }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+class VeloPortRadioComponent {
+    constructor(formScope, sectionScope) {
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+        this.prices = {};
+        this.form = this.formScope.form;
+        this.section = this.sectionScope.section;
+        this.controlName = this.section.id;
+    }
+    ngOnInit() {
+        this.initPriceItems();
+        this.section.sectionValue?.valueOptions.forEach(item => {
+            if (this.hasValueFor(item)) {
+                this.form.controls[this.controlName].setValue(item);
+            }
+        });
+    }
+    handleChange(event, valueOption) {
+        event.preventDefault();
+        event.stopPropagation();
+        const updateData = {
+            id: this.section.id,
+            action: this.hasPreviousValue() ? 'update' : 'create',
+            valueOption,
+        };
+        this.form.controls[this.controlName].setValue(valueOption);
+        this.form.controls[this.controlName].markAsDirty();
+        this.formScope.publishFormUpdate(updateData);
+    }
+    hasValueFor(valueOption) {
+        return !!this.findLineItemForValue(valueOption);
+    }
+    getMessages(valueOption) {
+        const lineItem = this.findLineItemForValue(valueOption);
+        if (this.section.model?.lineItems && lineItem) {
+            return lineItem.messages;
+        }
+        return [];
+    }
+    toString(price) {
+        let result = '';
+        if (price.listPrice > price.netPrice) {
+            result += '<strike>' + price.listPrice + '</strike>';
+        }
+        result += price.netPrice;
+        if (price.explanation) {
+            result += '(' + price.explanation + ')';
+        }
+        return result;
+    }
+    hasPreviousValue() {
+        const previous = this.section.model?.lineItems.filter(li => li.port && li.port === this.section.boundData.name);
+        return previous ? previous.length > 0 : false;
+    }
+    findLineItemForValue(valueOption) {
+        return this.section.model ? LineItemUtil.findLineItemForValue(this.section.model, valueOption) : undefined;
+    }
+    initPriceItems() {
+        this.prices = {};
+        if (this.section.pricingEnabled) {
+            this.section.sectionValue?.valueOptions.forEach(valueOption => {
+                this.prices[valueOption] = this.findPriceItemsForValue(valueOption);
+            });
+        }
+    }
+    findPriceItemsForValue(valueOption) {
+        let prices = [];
+        if (valueOption) {
+            const lineItem = this.section.model?.lineItems &&
+                this.section.model.lineItems.find(li => li.type && li.type.toLowerCase() === valueOption.toLowerCase());
+            if (lineItem && lineItem.chargeItems) {
+                prices = lineItem.chargeItems.map(pi => {
+                    const price = {
+                        listPrice: pi.listPrice,
+                        netPrice: pi.netPrice,
+                        chargeMethod: pi.chargeMethod,
+                        chargeType: pi.chargeType,
+                    };
+                    return price;
+                });
+            }
+            else {
+                const portDomain = this.section.model?.portDomains[this.section.boundData.name];
+                const domainType = portDomain?.domainTypes.find(d => d.name.toLowerCase() === valueOption.toLowerCase());
+                if (domainType && domainType.recommendedPrices) {
+                    prices = domainType.recommendedPrices;
+                }
+            }
+        }
+        const oneTime = {
+            chargeMethod: 'ONE_TIME',
+            netPrice: 0,
+            listPrice: 0,
+            chargeType: '',
+        };
+        const recurring = {
+            chargeMethod: 'RECURRING',
+            netPrice: 0,
+            listPrice: 0,
+            chargeType: '',
+        };
+        prices.forEach(p => {
+            if (p.chargeMethod === oneTime.chargeMethod) {
+                this.add(oneTime, p);
+            }
+            if (p.chargeMethod === recurring.chargeMethod) {
+                this.add(recurring, p);
+            }
+        });
+        const result = [];
+        if (oneTime.listPrice > 0) {
+            result.push(oneTime);
+        }
+        if (recurring.listPrice > 0) {
+            result.push(recurring);
+        }
+        return result;
+    }
+    add(target, src) {
+        target.netPrice = target.netPrice + src.netPrice;
+        target.listPrice = target.listPrice + src.listPrice;
+        if (src.explanation) {
+            target.explanation = src.explanation;
+        }
+    }
+}
+VeloPortRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortRadioComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloPortRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloPortRadioComponent, selector: "velo-port-radio", ngImport: i0, 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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'velo-port-radio', 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" }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+class VeloTypeComponent {
+    constructor(formScope, collapsibleState, sectionScope, messageService) {
+        this.formScope = formScope;
+        this.collapsibleState = collapsibleState;
+        this.sectionScope = sectionScope;
+        this.messageService = messageService;
+        this.messageBucketId = 'ui-runtime';
+        this.indent = 1;
+        this.prices = [];
+        this.form = this.formScope.form;
+        this.section = this.sectionScope.section;
+        this.indent = this.sectionScope.indent;
+        this.controlName = this.section.id;
+        this.qtyControlName = this.section.id + 'qty';
+        this.displayName =
+            (this.section.model?.properties && this.section.model.properties['displayName']) ||
+                this.section.model?.type ||
+                '';
+    }
+    ngOnInit() {
+        if (this.section.pricingEnabled) {
+            this.prices = this.getPrices();
+        }
+        if (this.section.controlType === 'MESSAGE') {
+            this.messageService.clear(this.messageBucketId);
+            this.section.model?.messages?.forEach(message => {
+                this.messageService.add({ key: this.messageBucketId, summary: message });
+            });
+        }
+    }
+    handleRemove() {
+        const updateData = {
+            id: this.section.id,
+            action: 'remove',
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    handleQuantityUpdate() {
+        const updateData = {
+            id: this.section.id,
+            action: 'qtyUpdate',
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    toggleCollapse() {
+        if (this.section.model) {
+            this.collapsibleState.toggleCollapse(this.section.model.id);
+        }
+    }
+    getPrices() {
+        let prices = [];
+        if (this.section.model?.chargeItems) {
+            prices = this.section.model.chargeItems.map(pi => {
+                const price = {
+                    listPrice: pi.listPrice,
+                    netPrice: pi.netPrice,
+                    chargeMethod: pi.chargeMethod,
+                    chargeType: pi.chargeType,
+                };
+                return price;
+            });
+        }
+        const oneTime = {
+            chargeMethod: 'ONE_TIME',
+            netPrice: 0,
+            listPrice: 0,
+            chargeType: '',
+        };
+        const recurring = {
+            chargeMethod: 'RECURRING',
+            netPrice: 0,
+            listPrice: 0,
+            chargeType: '',
+        };
+        prices.forEach(p => {
+            if (p.chargeMethod === oneTime.chargeMethod) {
+                this.add(oneTime, p);
+            }
+            if (p.chargeMethod === recurring.chargeMethod) {
+                this.add(recurring, p);
+            }
+        });
+        const result = [];
+        if (oneTime.listPrice > 0) {
+            result.push(oneTime);
+        }
+        if (recurring.listPrice > 0) {
+            result.push(recurring);
+        }
+        return result;
+    }
+    add(target, src) {
+        target.netPrice = target.netPrice + src.netPrice;
+        target.listPrice = target.listPrice + src.listPrice;
+        if (src.explanation) {
+            target.explanation = src.explanation;
+        }
+    }
+}
+VeloTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloTypeComponent, deps: [{ token: FormScopeService }, { token: CollapsibleStateService }, { token: SectionScopeService }, { token: i3$1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
+VeloTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloTypeComponent, selector: "velo-type", ngImport: i0, 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        <!-- removed dependency: ngx-bootstrap -->\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", dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.ValuesPipe, name: "values" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'velo-type', 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        <!-- removed dependency: ngx-bootstrap -->\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" }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: CollapsibleStateService }, { type: SectionScopeService }, { type: i3$1.MessageService }]; } });
+
+class SfQueryDirective {
+    constructor(apiService) {
+        this.apiService = apiService;
+    }
+    query(searchRequest, objectName) {
+        return this.apiService.query(searchRequest, objectName).toPromise();
+    }
+    describe(objectName, fieldName) {
+        return this.apiService.describe(objectName, fieldName).toPromise();
+    }
+    describe2(objectName, fieldsNames) {
+        return this.apiService.describe2(objectName, fieldsNames).toPromise();
+    }
+    apexGetRequest(path, params) {
+        return this.apiService.apexGetRequest(path, params).toPromise();
+    }
+    apexPostRequest(path, body) {
+        return this.apiService.apexPostRequest(path, body).toPromise();
+    }
+}
+SfQueryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SfQueryDirective, deps: [{ token: i1.SalesforceApiService }], target: i0.ɵɵFactoryTarget.Directive });
+SfQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: SfQueryDirective, selector: "sf-query", exportAs: ["sfApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SfQueryDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'sf-query',
+                    exportAs: 'sfApi',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SalesforceApiService }]; } });
+
+class SectionHelperService {
+    static findSectionForValue(section, valueOption) {
+        if (!EntityUtil.isPresent(section) || !EntityUtil.isPresent(section.children) || EntityUtil.isBlank(valueOption)) {
+            return;
+        }
+        const found = EntityUtil.filterHierarchically(section.children, 'children', ({ model }) => model && model.type.toLowerCase() === valueOption.toLowerCase());
+        return found && found.pop();
+    }
+    getTotalPrices(section) {
+        if (!section || !section.model || !section.model.chargeGroupItems) {
+            return new Map();
+        }
+        return PricingUtils.sumPriceByProperty(section.model.chargeGroupItems, 'netPrice', [
+            'chargeMethod',
+            'sellingFrequency',
+        ]);
+    }
+}
+SectionHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SectionHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionHelperService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionHelperService, decorators: [{
+            type: Injectable
+        }] });
+
+class SectionContextAware {
+    constructor(formScope, sectionScope) {
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+    }
+    ngOnInit() {
+        this.form = this.formScope.form;
+        this.section = this.sectionScope.section;
+        this.initControlNames();
+    }
+    initControlNames() {
+        this.controlName = this.section.id;
+        this.qtyControlName = this.section.id + 'qty';
+    }
+    //TODO ALE CONSIDER STORE INSTEAD OF CALCULATE EVERY TIME
+    isAddAllowed(quantityToAdd = 1) {
+        return this.section.model
+            ? SectionsBinderHelper.isAddAllowed(this.section.model, this.section.boundData.name, quantityToAdd)
+            : false;
+    }
+    isRemoveAllowed(quantityToRemove = 1) {
+        return this.section.model
+            ? SectionsBinderHelper.isRemoveAllowed(this.section.model, this.section.boundData.name, quantityToRemove)
+            : false;
+    }
+    handleCreate(valueOption) {
+        if (!this.isAddAllowed()) {
+            return;
+        }
+        const updateData = {
+            id: this.section.id,
+            action: 'create',
+            valueOption: EntityUtil.isPresent(valueOption) ? valueOption : void 0,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    handleChange(valueOption) {
+        const updateData = {
+            id: this.section.id,
+            action: 'update',
+            valueOption: EntityUtil.isPresent(valueOption) ? valueOption : void 0,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    handleQtyChange(valueOption) {
+        const updateData = {
+            id: this.section.id,
+            action: 'qtyUpdate',
+            valueOption: valueOption,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    handleRemove(valueOption) {
+        const updateData = {
+            id: this.section.id,
+            action: 'remove',
+            valueOption: valueOption,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    handleCopy(valueOption) {
+        const updateData = {
+            id: this.section.id,
+            action: 'copy',
+            valueOption: valueOption,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+}
+SectionContextAware.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionContextAware, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Directive });
+SectionContextAware.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: SectionContextAware, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionContextAware, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+class LineItemDirective {
+    constructor(formScope, sectionScope, configurationService) {
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+        this.configurationService = configurationService;
+    }
+    ngOnInit() {
+        this.section = this.sectionScope.section;
+        this.lineItem = this.section.model;
+    }
+    handlePatch(rootLineItem) {
+        const updateData = {
+            id: this.sectionScope.section.id,
+            action: 'patch',
+            valueOption: rootLineItem,
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    configure(runtimeContext, configurableRamp) {
+        return this.configurationService
+            .configure(runtimeContext, { configurableRamp })
+            .pipe(take(1))
+            .toPromise();
+    }
+}
+LineItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LineItemDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }, { token: ConfigurationService }], target: i0.ɵɵFactoryTarget.Directive });
+LineItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: LineItemDirective, selector: "line-item", exportAs: ["liApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LineItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'line-item',
+                    exportAs: 'liApi',
+                }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }, { type: ConfigurationService }]; } });
+class VeloPortDirective extends SectionContextAware {
+    constructor(formScope, sectionScope) {
+        super(formScope, sectionScope);
+        this.valueQuantities = {};
+    }
+    handlePriceAdjustment(action, valueOption, amount) {
+        const updateData = {
+            id: this.section.id,
+            action,
+            valueOption,
+            options: { amount },
+        };
+        this.formScope.publishFormUpdate(updateData);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.initQuantity();
+    }
+    handleUpsert(valueOption, event) {
+        if (EntityUtil.isPresent(this.valueQuantities[valueOption]) && EntityUtil.isPresent(event)) {
+            event?.preventDefault();
+            return;
+        }
+        else if (Object.keys(this.valueQuantities).length > 0) {
+            this.handleChange(valueOption);
+        }
+        else {
+            this.handleCreate(valueOption);
+        }
+    }
+    isActive(valueOption) {
+        return EntityUtil.isPresent(this.valueQuantities[valueOption]);
+    }
+    initQuantity() {
+        this.valueQuantities = this.section.model
+            ? SectionsBinderHelper.getQuantityGroupByValue(this.section.model, this.section.boundData.name)
+            : {};
+    }
+    //Quantity Stepper Functions
+    handleNextVal(valueOption) {
+        let initQty = this.valueQuantities[valueOption] || 0;
+        if (this.isAddAllowed()) {
+            if (initQty > 0) {
+                const typeSection = SectionHelperService.findSectionForValue(this.section, valueOption);
+                if (typeSection) {
+                    this.form.controls[typeSection.id + 'qty'].setValue(++initQty);
+                    this.handleQtyChange(valueOption);
+                }
+            }
+            else {
+                this.handleCreate(valueOption);
+            }
+        }
+    }
+    handlePrevVal(valueOption) {
+        let initQty = this.valueQuantities[valueOption] || 0;
+        if (this.isRemoveAllowed()) {
+            if (initQty < 2) {
+                this.handleRemove(valueOption);
+            }
+            else {
+                const typeSection = SectionHelperService.findSectionForValue(this.section, valueOption);
+                if (typeSection) {
+                    this.form.controls[typeSection.id + 'qty'].setValue(--initQty);
+                    this.handleQtyChange(valueOption);
+                }
+            }
+        }
+    }
+    handleManualQtyChange(valueOption, qtyVal) {
+        const initQty = this.valueQuantities[valueOption] || 0;
+        if (isNaN(+qtyVal) || +qtyVal < 0 || initQty === +qtyVal) {
+            return;
+        }
+        const newQty = +qtyVal;
+        if (initQty === 0) {
+            if (this.isAddAllowed(newQty)) {
+                this.form.controls[this.qtyControlName].setValue(newQty);
+                this.handleCreate(valueOption);
+            }
+        }
+        else if (newQty === 0) {
+            if (this.isRemoveAllowed()) {
+                this.handleRemove(valueOption);
+            }
+        }
+        else {
+            const typeSection = SectionHelperService.findSectionForValue(this.section, valueOption);
+            if (typeSection) {
+                const dif = newQty - initQty;
+                const isAllowed = dif > 0 ? this.isAddAllowed(dif) : this.isRemoveAllowed(dif * -1);
+                if (isAllowed) {
+                    this.form.controls[typeSection.id + 'qty'].setValue(newQty);
+                    this.handleQtyChange(valueOption);
+                }
+            }
+        }
+    }
+    handleNetPriceAdjustment(valueOption, amount) {
+        this.handlePriceAdjustment('adjustNetPrice', valueOption, amount);
+    }
+    handleListPriceAdjustment(valueOption, amount) {
+        this.handlePriceAdjustment('adjustListPrice', valueOption, amount);
+    }
+}
+VeloPortDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Directive });
+VeloPortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VeloPortDirective, selector: "velo-port", exportAs: ["portApi"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloPortDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'velo-port',
+                    exportAs: 'portApi',
+                }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+class VeloDropdownComponent extends SectionContextAware {
+    constructor(formScope, sectionScope) {
+        super(formScope, sectionScope);
+    }
+}
+VeloDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloDropdownComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloDropdownComponent, selector: "velo-dropdown", usesInheritance: true, ngImport: i0, template: `
+    <div class="input-form-input div-inline" [formGroup]="form">
+      <label [for]="controlName">{{ section.label }}</label>
+      <div class="form-control-wrapper">
+        <select [id]="controlName" [formControlName]="controlName" class="form-control">
+          <option *ngFor="let valueOption of section.sectionValue?.valueOptions" [ngValue]="valueOption">
+            {{ section.sectionValue?.displayValues?.[valueOption] || valueOption }}
+          </option>
+        </select>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloDropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // moduleId: module.id,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'velo-dropdown',
+                    template: `
+    <div class="input-form-input div-inline" [formGroup]="form">
+      <label [for]="controlName">{{ section.label }}</label>
+      <div class="form-control-wrapper">
+        <select [id]="controlName" [formControlName]="controlName" class="form-control">
+          <option *ngFor="let valueOption of section.sectionValue?.valueOptions" [ngValue]="valueOption">
+            {{ section.sectionValue?.displayValues?.[valueOption] || valueOption }}
+          </option>
+        </select>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+class VeloQuantityComponent extends SectionContextAware {
+    constructor(formScope, sectionScope) {
+        super(formScope, sectionScope);
+    }
+}
+VeloQuantityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloQuantityComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloQuantityComponent, selector: "velo-quantity", usesInheritance: true, ngImport: i0, template: `
+    <div class="input-form-input div-inline quantity-form-input" [formGroup]="form">
+      <label [for]="qtyControlName"> Quantity </label>
+      <div class="form-control-wrapper">
+        <input
+          [id]="controlName"
+          [formControlName]="qtyControlName"
+          [attr.disabled]="isAddAllowed() === true ? null : true"
+          type="text"
+          class="form-control"
+          size="3"
+        />
+
+        <div
+          class="validation-message"
+          [hidden]="form.controls[qtyControlName].valid || form.controls[qtyControlName].pristine"
+        >
+          <div *ngFor="let key of form.controls[qtyControlName].errors | values">
+            <span> {{ form.controls[qtyControlName].errors?.[key].message }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i7.ValuesPipe, name: "values" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloQuantityComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // moduleId: module.id,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'velo-quantity',
+                    template: `
+    <div class="input-form-input div-inline quantity-form-input" [formGroup]="form">
+      <label [for]="qtyControlName"> Quantity </label>
+      <div class="form-control-wrapper">
+        <input
+          [id]="controlName"
+          [formControlName]="qtyControlName"
+          [attr.disabled]="isAddAllowed() === true ? null : true"
+          type="text"
+          class="form-control"
+          size="3"
+        />
+
+        <div
+          class="validation-message"
+          [hidden]="form.controls[qtyControlName].valid || form.controls[qtyControlName].pristine"
+        >
+          <div *ngFor="let key of form.controls[qtyControlName].errors | values">
+            <span> {{ form.controls[qtyControlName].errors?.[key].message }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+class VeloQuantityButtonComponent extends SectionContextAware {
+    constructor(formScope, sectionScope) {
+        super(formScope, sectionScope);
+    }
+}
+VeloQuantityButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloQuantityButtonComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
+VeloQuantityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: VeloQuantityButtonComponent, selector: "velo-quantity-button", usesInheritance: true, ngImport: i0, template: `
+    <div class="input-form-input div-inline quantity-form-input">
+      <div class="form-control-wrapper">
+        <a href="javascript:void(0);" (click)="handleCreate()">
+          <div class="add-config-control" [attr.disabled]="isAddAllowed() === true ? null : true">
+            <i class="fa fa-plus plus-icon"></i>
+          </div>
+        </a>
+      </div>
+    </div>
+  `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VeloQuantityButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // moduleId: module.id,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'velo-quantity-button',
+                    template: `
+    <div class="input-form-input div-inline quantity-form-input">
+      <div class="form-control-wrapper">
+        <a href="javascript:void(0);" (click)="handleCreate()">
+          <div class="add-config-control" [attr.disabled]="isAddAllowed() === true ? null : true">
+            <i class="fa fa-plus plus-icon"></i>
+          </div>
+        </a>
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: FormScopeService }, { type: SectionScopeService }]; } });
+
+class VlApprovalDirective {
+    constructor(repo) {
+        this.repo = repo;
+    }
+    submitQuote(quoteDraft) {
+        return this.repo.submitQuote(quoteDraft).toPromise();
+    }
+}
+VlApprovalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlApprovalDirective, deps: [{ token: i1.QuoteApiService }], target: i0.ɵɵFactoryTarget.Directive });
+VlApprovalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VlApprovalDirective, selector: "vl-approval", exportAs: ["approvalApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlApprovalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'vl-approval',
+                    exportAs: 'approvalApi',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.QuoteApiService }]; } });
+
+class VlDocumentAttachmentsDirective {
+    constructor(service) {
+        this.service = service;
+    }
+    getAttachments(searchRequest) {
+        return this.service.getAttachments(searchRequest).toPromise();
+    }
+    createAttachment(attachment, file, reportProgress) {
+        const observable = this.service.createAttachment(attachment, file, reportProgress);
+        return reportProgress ? observable : observable.toPromise();
+    }
+    updateAttachment(id, attachment) {
+        return this.service.updateAttachment(id, attachment).toPromise();
+    }
+    getAttachmentFile(id, isPreventDownload) {
+        return this.service.getAttachmentFile(id, isPreventDownload).toPromise();
+    }
+    removeAttachment(id) {
+        return this.service.removeAttachment(id).toPromise();
+    }
+}
+VlDocumentAttachmentsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlDocumentAttachmentsDirective, deps: [{ token: i1.DocumentAttachmentApiService }], target: i0.ɵɵFactoryTarget.Directive });
+VlDocumentAttachmentsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VlDocumentAttachmentsDirective, selector: "vl-document-attachments", exportAs: ["documentAttachmentsApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlDocumentAttachmentsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'vl-document-attachments',
+                    exportAs: 'documentAttachmentsApi',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DocumentAttachmentApiService }]; } });
+
+class VlDocumentTemplatesDirective {
+    constructor(documentTemplatesApiService) {
+        this.documentTemplatesApiService = documentTemplatesApiService;
+        /**
+         * @deprecated Use `generateDocument` instead
+         */
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.generateDocumentNew = this.generateDocument;
+    }
+    getTemplates(tag) {
+        return this.documentTemplatesApiService.getTemplates(tag).toPromise();
+    }
+    upsertTemplate(template, templateFile) {
+        return this.documentTemplatesApiService
+            .upsertTemplate(template, templateFile)
+            .toPromise();
+    }
+    removeTemplate(id) {
+        return this.documentTemplatesApiService.removeTemplate(id).toPromise();
+    }
+    cloneTemplate(id) {
+        return this.documentTemplatesApiService.cloneTemplate(id).toPromise();
+    }
+    downloadTemplate(id) {
+        return this.documentTemplatesApiService.downloadTemplateFile(id).toPromise();
+    }
+    generateDocument(template, quoteDraft, params) {
+        return this.documentTemplatesApiService.generateDocument(template, quoteDraft, params).pipe(take(1));
+    }
+    generateDocumentData(template, quoteDraft, params) {
+        return this.documentTemplatesApiService.generateDocumentData(template, quoteDraft, params).pipe(take(1));
+    }
+    getAttachments(searchRequest) {
+        return this.documentTemplatesApiService.getAttachments(searchRequest).toPromise();
+    }
+    getAttachmentFile(id) {
+        return this.documentTemplatesApiService.getAttachmentFile(id).toPromise();
+    }
+    createAttachment(attachment, file) {
+        return this.documentTemplatesApiService.createAttachment(attachment, file).toPromise();
+    }
+    removeAttachment(id) {
+        return this.documentTemplatesApiService.removeAttachment(id).toPromise();
+    }
+}
+VlDocumentTemplatesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlDocumentTemplatesDirective, deps: [{ token: i1.DocumentTemplatesApiService }], target: i0.ɵɵFactoryTarget.Directive });
+VlDocumentTemplatesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VlDocumentTemplatesDirective, selector: "[vlQuoteTemplates]", exportAs: ["quoteTemplateApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlDocumentTemplatesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vlQuoteTemplates]',
+                    exportAs: 'quoteTemplateApi',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DocumentTemplatesApiService }]; } });
+
+class VlQuoteDirective {
+    constructor(quoteApiService, runtimeService) {
+        this.quoteApiService = quoteApiService;
+        this.runtimeService = runtimeService;
+    }
+    getQuote(quoteId) {
+        return this.quoteApiService.getQuoteDraft(quoteId).toPromise();
+    }
+    upsertQuote(quoteDraft) {
+        return this.quoteApiService.upsertQuote(quoteDraft).toPromise();
+    }
+    configureQuote(quoteDraft, rootLineItemId) {
+        const rootLineItem = EntityUtil.findById(rootLineItemId, quoteDraft.currentState);
+        const asset = quoteDraft.initialState?.find(a => a.id === rootLineItem.assetId);
+        const { context } = quoteDraft;
+        const states = {
+            configurableRamp: LineItemUtil.removeDeletedItems(rootLineItem),
+            currentState: quoteDraft.currentState,
+            asset,
+        };
+        this.runtimeService.updateRuntime(states, context.properties);
+    }
+}
+VlQuoteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlQuoteDirective, deps: [{ token: i1.QuoteApiService }, { token: RuntimeService }], target: i0.ɵɵFactoryTarget.Directive });
+VlQuoteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VlQuoteDirective, selector: "vl-quote", exportAs: ["quoteApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlQuoteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'vl-quote',
+                    exportAs: 'quoteApi',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.QuoteApiService }, { type: RuntimeService }]; } });
+
+class VlRampDirective {
+    constructor(contextService, rampApiService, priceApiService) {
+        this.contextService = contextService;
+        this.rampApiService = rampApiService;
+        this.priceApiService = priceApiService;
+    }
+    createRamp(sourceItems, currentRamps, term) {
+        const context = this.contextService.resolve();
+        return this.rampApiService
+            .next({
+            context,
+            sourceItems,
+            currentItems: currentRamps || [],
+            term,
+        })
+            .pipe(tap(data => {
+            if (data.context) {
+                this.contextService.update({
+                    properties: {
+                        ...data.context.properties,
+                    },
+                });
+            }
+        }))
+            .toPromise();
+    }
+    calculateRampTermByEndDate(lineItem, endDate) {
+        return this.priceApiService
+            .getSellingTermByEndDate(lineItem.planId, lineItem.offeringId, lineItem.startDate, endDate, lineItem.sellingFrequencyUnit, lineItem.sellingFrequencyDuration)
+            .toPromise();
+    }
+    calculateRampTermByTerm(lineItem, term) {
+        return this.priceApiService
+            .getSellingTermByTerm(lineItem.planId, lineItem.offeringId, lineItem.startDate, term, lineItem.sellingFrequencyUnit, lineItem.sellingFrequencyDuration)
+            .toPromise();
+    }
+}
+VlRampDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlRampDirective, deps: [{ token: i2.ContextService }, { token: i1.RampApiService }, { token: i1.PriceApiService }], target: i0.ɵɵFactoryTarget.Directive });
+VlRampDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: VlRampDirective, selector: "vl-ramp", exportAs: ["rampApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: VlRampDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'vl-ramp',
+                    exportAs: 'rampApi',
+                }]
+        }], ctorParameters: function () { return [{ type: i2.ContextService }, { type: i1.RampApiService }, { type: i1.PriceApiService }]; } });
+
+const SHA1$1 = UUID.SHA1();
+const SCRIPT_GLOBAL_NAME = `$velo`;
+class SectionScriptDirective {
+    constructor(_document, sfQueryDirective, lineItemDirective, quoteDirective, documentTemplatesDirective, rampDirective, approvalDirective, documentAttachmentsDirective, formScope, sectionScope, renderer, formBuilder, runtimeService, cdr, cartService, contextService, currentStateService, quoteService) {
+        this._document = _document;
+        this.sfQueryDirective = sfQueryDirective;
+        this.lineItemDirective = lineItemDirective;
+        this.quoteDirective = quoteDirective;
+        this.documentTemplatesDirective = documentTemplatesDirective;
+        this.rampDirective = rampDirective;
+        this.approvalDirective = approvalDirective;
+        this.documentAttachmentsDirective = documentAttachmentsDirective;
+        this.formScope = formScope;
+        this.sectionScope = sectionScope;
+        this.renderer = renderer;
+        this.formBuilder = formBuilder;
+        this.runtimeService = runtimeService;
+        this.cdr = cdr;
+        this.cartService = cartService;
+        this.contextService = contextService;
+        this.currentStateService = currentStateService;
+        this.quoteService = quoteService;
+        this.scriptId = '';
+        this.sessionScope = {};
+    }
+    ngOnInit() {
+        if (!this.scriptExists()) {
+            return;
+        }
+        this.scriptId = this.generateScriptId();
+        this.registry = this.getScriptRegistry();
+        this.sessionScope = this.getSessionScope();
+        if (!this.registry.exists(this.scriptId)) {
+            this.appendScriptElementToDom();
+        }
+        this.initScript();
+        this.registry.doRegister(this.scriptId, this.sectionScope.section.id);
+    }
+    ngAfterViewInit() {
+        const sharedScriptGlobal = this.registry?.getGlobalForScript(this.sectionScope.section.id);
+        if (sharedScriptGlobal) {
+            this.methodApply('afterViewInit', sharedScriptGlobal);
+        }
+    }
+    ngOnDestroy() {
+        if (!this.scriptId) {
+            return;
+        }
+        this.registry.unRegister(this.scriptId, this.sectionScope.section.id);
+        if (!this.registry.exists(this.scriptId)) {
+            this.removeScript();
+            this.registry.removeGlobalForScript(this.scriptId);
+        }
+    }
+    get scope() {
+        if (!this.scriptId || !this.sectionScope.section) {
+            return {};
+        }
+        return Object.assign({}, this.registry.getGlobalForScript(this.sectionScope.section.id) || {}, this.sessionScope);
+    }
+    scriptExists() {
+        return (this.sectionScope?.section?.script?.length ?? 0) > 0;
+    }
+    encodeScriptBody() {
+        return this.sectionScope.section.script ? atob(this.sectionScope.section.script) : '';
+    }
+    generateScriptId() {
+        return '_' + SHA1$1.hex(this.encodeScriptBody());
+    }
+    getScriptRegistry() {
+        return this.formScope.scriptRegistry;
+    }
+    getSessionScope() {
+        return this.formScope.scriptSessionScope;
+    }
+    initScript() {
+        let sharedScriptGlobal = this.registry.getGlobalForScript(this.sectionScope.section.id);
+        if (!EntityUtil.isPresent(sharedScriptGlobal)) {
+            sharedScriptGlobal = {};
+            this.registry.setGlobalForScript(this.sectionScope.section.id, sharedScriptGlobal);
+        }
+        this.methodApply('init', sharedScriptGlobal);
+    }
+    removeScript() {
+        const sharedScriptGlobal = this.registry.getGlobalForScript(this.sectionScope.section.id);
+        this.methodApply('destroy', sharedScriptGlobal);
+        this.removeScriptElementFromDom();
+    }
+    appendScriptElementToDom() {
+        const script = this.scriptFromTemplate(this.encodeScriptBody(), this.scriptId, this.sectionScope.section);
+        this.scriptElement = this.renderer.createElement('script');
+        this.scriptElement.type = `text/javascript`;
+        this.scriptElement.text = script;
+        this.scriptElement.setAttribute('id', this.scriptId);
+        this.renderer.appendChild(this._document.body, this.scriptElement);
+    }
+    removeScriptElementFromDom() {
+        if (!this.scriptElement) {
+            this.scriptElement = this._document.getElementById(this.scriptId);
+        }
+        this.scriptElement.remove();
+    }
+    scriptFromTemplate(scriptBody, scriptId, section) {
+        return `var ${scriptId} = (function (${SCRIPT_GLOBAL_NAME}, form, { section, templates }, sessionScope, formBuilder, runtimeContext, cdr, apis) {
+            ${SCRIPT_GLOBAL_NAME}["form"] = form;
+            ${SCRIPT_GLOBAL_NAME}["section"] = section;
+            ${SCRIPT_GLOBAL_NAME}["templates"] = templates;
+            ${SCRIPT_GLOBAL_NAME}["sessionScope"] = sessionScope;
+            ${SCRIPT_GLOBAL_NAME}["formBuilder"] = formBuilder;
+            ${SCRIPT_GLOBAL_NAME}["runtimeContext"] = runtimeContext;
+            ${SCRIPT_GLOBAL_NAME}["cdr"] = cdr;
+            ${SCRIPT_GLOBAL_NAME}["apis"] = apis;
+
+            ${scriptBody}
+                return ${SCRIPT_GLOBAL_NAME};
+            });
+
+            //# sourceURL=${_.kebabCase(section.label)}.js`;
+    }
+    methodApply(methodName, sharedScriptGlobal) {
+        const args = [
+            sharedScriptGlobal,
+            this.formScope.form,
+            this.sectionScope,
+            this.sessionScope,
+            this.formBuilder,
+            this.runtimeService.getRuntimeContext(),
+            this.cdr,
+            this.getExposedApis(),
+        ];
+        const fnInit = window[`${this.scriptId}`](...args);
+        fnInit && fnInit[methodName] && fnInit[methodName].apply();
+    }
+    getExposedApis() {
+        return {
+            'sf-query': this.sfQueryDirective,
+            'line-item': this.lineItemDirective,
+            'quote-directive': this.quoteDirective,
+            'templates-directive': this.documentTemplatesDirective,
+            'attachments-directive': this.documentAttachmentsDirective,
+            'ramp-directive': this.rampDirective,
+            'approval-directive': this.approvalDirective,
+            entityUtil: EntityUtil,
+            moment,
+            lodash: _,
+            rxjs: { ...rxjsOperators, ...rxjs },
+            PagedEntity,
+            pipes: {
+                currency: CurrencyPipe,
+            },
+            solutionUpdateStarted: this.runtimeService.onSolutionUpdateStartedEvent,
+            solutionUpdated: this.runtimeService.onSolutionProcessed,
+            cartService: this.cartService,
+            configurationContextService: this.contextService,
+            quoteDraft: this.quoteService.quoteDraft,
+            currentStateService: this.currentStateService,
+        };
+    }
+}
+SectionScriptDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionScriptDirective, deps: [{ token: DOCUMENT }, { token: SfQueryDirective }, { token: LineItemDirective }, { token: VlQuoteDirective }, { token: VlDocumentTemplatesDirective }, { token: VlRampDirective }, { token: VlApprovalDirective }, { token: VlDocumentAttachmentsDirective }, { token: FormScopeService }, { token: SectionScopeService }, { token: i0.Renderer2 }, { token: i4.FormBuilder }, { token: RuntimeService }, { token: i0.ChangeDetectorRef }, { token: ShoppingCartService }, { token: i2.ContextService }, { token: CurrentStateService }, { token: i2.QuoteDraftService }], target: i0.ɵɵFactoryTarget.Directive });
+SectionScriptDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: SectionScriptDirective, selector: "section-script", providers: [
+        SfQueryDirective,
+        LineItemDirective,
+        VlQuoteDirective,
+        VlDocumentTemplatesDirective,
+        VlRampDirective,
+        VlApprovalDirective,
+        VlDocumentAttachmentsDirective,
+    ], exportAs: ["scriptApi"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionScriptDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'section-script',
+                    exportAs: 'scriptApi',
+                    providers: [
+                        SfQueryDirective,
+                        LineItemDirective,
+                        VlQuoteDirective,
+                        VlDocumentTemplatesDirective,
+                        VlRampDirective,
+                        VlApprovalDirective,
+                        VlDocumentAttachmentsDirective,
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: SfQueryDirective, decorators: [{
+                    type: Inject,
+                    args: [SfQueryDirective]
+                }] }, { type: LineItemDirective, decorators: [{
+                    type: Inject,
+                    args: [LineItemDirective]
+                }] }, { type: VlQuoteDirective, decorators: [{
+                    type: Inject,
+                    args: [VlQuoteDirective]
+                }] }, { type: VlDocumentTemplatesDirective, decorators: [{
+                    type: Inject,
+                    args: [VlDocumentTemplatesDirective]
+                }] }, { type: VlRampDirective, decorators: [{
+                    type: Inject,
+                    args: [VlRampDirective]
+                }] }, { type: VlApprovalDirective, decorators: [{
+                    type: Inject,
+                    args: [VlApprovalDirective]
+                }] }, { type: VlDocumentAttachmentsDirective, decorators: [{
+                    type: Inject,
+                    args: [VlDocumentAttachmentsDirective]
+                }] }, { type: FormScopeService }, { type: SectionScopeService }, { type: i0.Renderer2 }, { type: i4.FormBuilder }, { type: RuntimeService }, { type: i0.ChangeDetectorRef }, { type: ShoppingCartService }, { type: i2.ContextService }, { type: CurrentStateService }, { type: i2.QuoteDraftService }]; } });
+
+class RuntimeExecutionModule {
+}
+RuntimeExecutionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeExecutionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RuntimeExecutionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: RuntimeExecutionModule, declarations: [ExecutionSectionRendererComponent,
+        ChildrenPlaceholderComponent,
+        SectionScriptDirective,
+        VeloPortDirective,
+        LineItemDirective,
+        VeloDropdownComponent,
+        VeloQuantityButtonComponent,
+        VeloQuantityComponent,
+        VeloAttributeDirective,
+        MultiselectComponent,
+        VeloAttributeComponent,
+        VeloPortRadioComponent,
+        VeloTypeComponent,
+        VeloPortDropdownComponent,
+        VeloPortCheckBoxComponent,
+        FederatedComponent,
+        TemplateComponent,
+        ContextProviderComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ApiModule, LoaderModule, SdkCoreModule], exports: [FormsModule,
+        ReactiveFormsModule,
+        ChildrenPlaceholderComponent,
+        SectionScriptDirective,
+        LineItemDirective,
+        VeloPortDirective,
+        VeloAttributeDirective,
+        MultiselectComponent,
+        VeloAttributeComponent,
+        VeloPortRadioComponent,
+        VeloTypeComponent,
+        VeloPortDropdownComponent,
+        VeloPortCheckBoxComponent,
+        FederatedComponent,
+        TemplateComponent,
+        ContextProviderComponent] });
+RuntimeExecutionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeExecutionModule, providers: [
+        ShoppingCartService,
+        RuntimeService,
+        ConfigurationService,
+        RuntimeContextService,
+        RuntimeFormService,
+        CurrentStateService,
+        ProductModelCacheService,
+        DatePipe,
+        SectionStoreService,
+    ], imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ApiModule, LoaderModule, SdkCoreModule, FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeExecutionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ExecutionSectionRendererComponent,
+                        ChildrenPlaceholderComponent,
+                        SectionScriptDirective,
+                        VeloPortDirective,
+                        LineItemDirective,
+                        VeloDropdownComponent,
+                        VeloQuantityButtonComponent,
+                        VeloQuantityComponent,
+                        VeloAttributeDirective,
+                        MultiselectComponent,
+                        VeloAttributeComponent,
+                        VeloPortRadioComponent,
+                        VeloTypeComponent,
+                        VeloPortDropdownComponent,
+                        VeloPortCheckBoxComponent,
+                        FederatedComponent,
+                        TemplateComponent,
+                        ContextProviderComponent,
+                    ],
+                    providers: [
+                        ShoppingCartService,
+                        RuntimeService,
+                        ConfigurationService,
+                        RuntimeContextService,
+                        RuntimeFormService,
+                        CurrentStateService,
+                        ProductModelCacheService,
+                        DatePipe,
+                        SectionStoreService,
+                    ],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ApiModule, LoaderModule, SdkCoreModule],
+                    exports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ChildrenPlaceholderComponent,
+                        SectionScriptDirective,
+                        LineItemDirective,
+                        VeloPortDirective,
+                        VeloAttributeDirective,
+                        MultiselectComponent,
+                        VeloAttributeComponent,
+                        VeloPortRadioComponent,
+                        VeloTypeComponent,
+                        VeloPortDropdownComponent,
+                        VeloPortCheckBoxComponent,
+                        FederatedComponent,
+                        TemplateComponent,
+                        ContextProviderComponent,
+                    ],
+                }]
+        }] });
+
+const SHA1 = UUID.SHA1();
+class BaseSectionComponent {
+}
+BaseSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BaseSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BaseSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: BaseSectionComponent, selector: "ng-component", inputs: { form: "form", section: "section" }, viewQueries: [{ propertyName: "templates", predicate: ["customTemplate"], descendants: true }], ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BaseSectionComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], propDecorators: { form: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }], templates: [{
+                type: ViewChildren,
+                args: ['customTemplate']
+            }] } });
+class SectionsService {
+    constructor(compiler, m, sectionStore) {
+        this.compiler = compiler;
+        this.m = m;
+        this.sectionStore = sectionStore;
+        this.moduleType = null;
+        this.moduleInstance = null;
+    }
+    compileModule(sections, isViewEncapsulated) {
+        const uniqueSections = this.getUniqueSections(sections);
+        this.moduleType = this.getModuleType(uniqueSections, isViewEncapsulated);
+        this.moduleInstance = this.compiler.compileModuleAndAllComponentsSync(this.moduleType);
+        this.sectionStore.componentFactories = this.moduleInstance.componentFactories;
+    }
+    destroy() {
+        if (this.moduleInstance) {
+            this.sectionStore.componentFactories = [];
+            this.moduleInstance = null;
+        }
+        if (this.moduleType) {
+            this.compiler.clearCacheFor(this.moduleType);
+            this.moduleType = null;
+        }
+    }
+    getDecoratedComponents(sections, isViewEncapsulated = false) {
+        const result = [];
+        sections.forEach(section => {
+            const transpiledTemplate = this.getTranspiledTemplate(section);
+            const DynamicComponent = Component({
+                selector: section.dynamicSelector,
+                template: transpiledTemplate,
+                styles: [atob(section.styles || '')],
+                providers: [SectionHelperService],
+                encapsulation: isViewEncapsulated ? ViewEncapsulation.ShadowDom : ViewEncapsulation.Emulated,
+                jit: true,
+            })(class C extends BaseSectionComponent {
+            });
+            this.applySelectorField(DynamicComponent, section.dynamicSelector ?? '');
+            result.push(DynamicComponent);
+        });
+        return result;
+    }
+    getModuleType(sections, isViewEncapsulated) {
+        const decoratedComponents = this.getDecoratedComponents(sections, isViewEncapsulated);
+        let DynamicModule = class DynamicModule {
+        };
+        DynamicModule = __decorate([
+            NgModule({
+                imports: [CommonModule, RuntimeExecutionModule, CoreModule, ScrollingModule, ScrollingModule$1],
+                declarations: [decoratedComponents],
+                jit: true,
+            })
+        ], DynamicModule);
+        return DynamicModule;
+    }
+    applySelectorField(target, dynamicSelector) {
+        set(target, '$$dynamicSelector', dynamicSelector);
+    }
+    getUniqueSections(sections) {
+        const uniqueSections = {};
+        sections.forEach(section => {
+            section.hash = SHA1.hex(section.template);
+            const existingSection = section.hash ? uniqueSections[section.hash] : undefined;
+            if (existingSection && existingSection.template === section.template) {
+                section.dynamicSelector = existingSection.dynamicSelector;
+            }
+            else if (section.hash) {
+                section.dynamicSelector = `section-${section.id}`;
+                uniqueSections[section.hash] = section;
+            }
+        });
+        return values(uniqueSections);
+    }
+    getTranspiledTemplate(section) {
+        let template = section.template ? atob(section.template) : '';
+        if (!EntityUtil.isEmpty(section.script) && template.indexOf('<section-script') === -1) {
+            template = `<section-script></section-script>`.concat(template);
+        }
+        return template;
+    }
+}
+SectionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionsService, deps: [{ token: i0.Compiler }, { token: i0.NgModuleRef }, { token: SectionStoreService }], target: i0.ɵɵFactoryTarget.Injectable });
+SectionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Compiler }, { type: i0.NgModuleRef }, { type: SectionStoreService }]; } });
+
+class SectionRendererComponent {
+    set section(value) {
+        this._section = value;
+        this.sectionScope.section = value;
+    }
+    get section() {
+        return this._section;
+    }
+    constructor(_injector, _m, sectionScope, sectionStore) {
+        this._injector = _injector;
+        this._m = _m;
+        this.sectionScope = sectionScope;
+        this.sectionStore = sectionStore;
+        this.componentRef = null;
+    }
+    ngOnInit() {
+        this.renderSection();
+    }
+    ngAfterViewInit() {
+        if (this.componentRef) {
+            this.sectionScope.templates.next(this.componentRef.instance['templates']?.toArray() ?? []);
+        }
+    }
+    ngOnDestroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    renderSection() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+        const componentFactory = this.sectionStore.getComponentFactory(this._section);
+        if (!componentFactory) {
+            return;
+        }
+        this.componentRef = componentFactory.create(this._injector, [], null, this._m);
+        this.componentRef.location.nativeElement.setAttribute('sectionId', `${this._section.model?.id}${this._section.label}`);
+        this.componentRef.instance['form'] = this.form;
+        this.componentRef.instance['section'] = this.section;
+        this.container.insert(this.componentRef.hostView);
+    }
+}
+SectionRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionRendererComponent, deps: [{ token: i0.Injector }, { token: i0.NgModuleRef }, { token: SectionScopeService }, { token: SectionStoreService }], target: i0.ɵɵFactoryTarget.Component });
+SectionRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: SectionRendererComponent, selector: "vl-section-renderer", inputs: { section: "section", form: "form" }, providers: [SectionScopeService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #container></ng-template>", styles: [":host{display:contents}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: SectionRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-section-renderer', providers: [SectionScopeService], template: "<ng-template #container></ng-template>", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.NgModuleRef }, { type: SectionScopeService }, { type: SectionStoreService }]; }, propDecorators: { section: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const defaultTemplate = btoa('<template-component></template-component>');
+class ComponentPreviewComponent {
+    constructor(sectionsService, runtimeFormService, formScope, runtimeService, cdr) {
+        this.sectionsService = sectionsService;
+        this.runtimeFormService = runtimeFormService;
+        this.formScope = formScope;
+        this.runtimeService = runtimeService;
+        this.cdr = cdr;
+        this.form = new FormGroup({});
+        this.showPreview = false;
+        this.isNoPreviewAvailable = false;
+        this.isPreviewFailed = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            this.sectionsService.destroy();
+            this.showPreview = false;
+            this.isNoPreviewAvailable = false;
+            this.isPreviewFailed = false;
+            setTimeout(() => {
+                try {
+                    this.runPreview(this.data);
+                    this.cdr.detectChanges();
+                }
+                catch (e) {
+                    console.error(e?.stack ?? e?.error ?? 'Error occured');
+                    this.showPreview = false;
+                    this.isPreviewFailed = true;
+                    this.cdr.detectChanges();
+                }
+            });
+        }
+    }
+    runPreview(data) {
+        const section = data.section && JSON.parse(data.section);
+        if (!section) {
+            this.isNoPreviewAvailable = true;
+            return;
+        }
+        const model = {
+            ...(section?.model ?? {
+                attributes: [],
+                lineItems: [],
+            }),
+            id: UUID.UUID(),
+        };
+        const componentSection = {
+            ...section,
+            script: data.componentScript ? btoa(data.componentScript) : '',
+            styles: data.componentStyles ? btoa(data.componentStyles) : '',
+            template: data.componentTemplate ? btoa(data.componentTemplate) : '',
+            properties: data.componentProperties ? JSON.stringify(data.componentProperties) : {},
+            id: UUID.UUID(),
+            model,
+        };
+        const storySection = {
+            id: UUID.UUID(),
+            template: data.template ? btoa(data.template) : defaultTemplate,
+            styles: data.styles ? btoa(data.styles) : '',
+            script: data.script ? btoa(data.script) : '',
+            children: [componentSection],
+            model,
+        };
+        const sections = [storySection, componentSection];
+        this.form = this.formScope.form = this.runtimeFormService.initForm(sections, model);
+        this.createRuntimeContext(componentSection);
+        this.sectionsService.compileModule(sections);
+        this.section = storySection;
+        this.showPreview = true;
+    }
+    createRuntimeContext(section) {
+        const runtimeModel = RuntimeModel.create([], {});
+        const rootType = Array.from(runtimeModel.components.values()).find(c => section.model?.type &&
+            runtimeModel.isEquals(c.typeName, section.model.type) &&
+            EntityUtil.isPresent(c.productId));
+        const contextProductId = rootType ? rootType.productId : undefined;
+        const context = {
+            modelId: '',
+            runtimeModel,
+            runtimeMode: RuntimeMode.TEST,
+            productId: contextProductId,
+            properties: {},
+        };
+        this.runtimeService.setRuntimeContext(context);
+    }
+}
+ComponentPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ComponentPreviewComponent, deps: [{ token: SectionsService }, { token: RuntimeFormService }, { token: FormScopeService }, { token: RuntimeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ComponentPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ComponentPreviewComponent, selector: "vl-component-preview", inputs: { data: "data" }, providers: [
+        SectionsService,
+        FormScopeService,
+        CollapsibleStateService,
+        RuntimeFormService,
+        FormScopeService,
+        RuntimeService,
+    ], usesOnChanges: true, ngImport: i0, 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: ["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:700}: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:translate3d(-100%,0,0)}: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:700;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{inset: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:\" \";inset:-15px 15px 15px -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;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;inset: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"], dependencies: [{ kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SectionRendererComponent, selector: "vl-section-renderer", inputs: ["section", "form"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ComponentPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-component-preview', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        SectionsService,
+                        FormScopeService,
+                        CollapsibleStateService,
+                        RuntimeFormService,
+                        FormScopeService,
+                        RuntimeService,
+                    ], 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: ["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:700}: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:translate3d(-100%,0,0)}: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:700;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{inset: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:\" \";inset:-15px 15px 15px -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;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;inset: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"] }]
+        }], ctorParameters: function () { return [{ type: SectionsService }, { type: RuntimeFormService }, { type: FormScopeService }, { type: RuntimeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }] } });
+
+const getSectionTree = (src) => {
+    const sections = EntityUtil.clone(src);
+    const sectionIdMap = new Map();
+    sections.forEach(section => sectionIdMap.set(section.id, section));
+    const sectionTree = [];
+    sections.forEach(section => {
+        if (section.parentId) {
+            const parentSection = sectionIdMap.get(section.parentId);
+            if (parentSection) {
+                const sectionFromMap = sectionIdMap.get(section.id);
+                if (sectionFromMap) {
+                    parentSection.addChild(sectionFromMap);
+                }
+            }
+        }
+        else {
+            const s = sectionIdMap.get(section.id);
+            if (s) {
+                sectionTree.push(s);
+            }
+        }
+    });
+    return sectionTree;
+};
+
+class RuntimeComponent {
+    constructor(sectionsService, formScope, collapsibleState, formService, runtimeService, messageService, contextService, orderByPipe, searchFilterPipe, cdr) {
+        this.sectionsService = sectionsService;
+        this.formScope = formScope;
+        this.collapsibleState = collapsibleState;
+        this.formService = formService;
+        this.runtimeService = runtimeService;
+        this.messageService = messageService;
+        this.contextService = contextService;
+        this.orderByPipe = orderByPipe;
+        this.searchFilterPipe = searchFilterPipe;
+        this.cdr = cdr;
+        this.messageBucketId = 'ui.runtime';
+        this.sortedSections = [];
+        this.staticSections = [];
+        this.form = new FormGroup({});
+        this.solutionIsReady = false;
+        this.unsubscribe = new Subject();
+        this.solutionUpdated = new EventEmitter();
+    }
+    adjustPrice(valueOption, section, solutionLineItem, patch) {
+        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+        if (!parentLineItem) {
+            return;
+        }
+        parentLineItem.lineItems = parentLineItem.lineItems.map(lineItem => {
+            const { productId, chargeItems } = lineItem;
+            if (productId !== valueOption) {
+                return lineItem;
+            }
+            const chargeItem = chargeItems.shift();
+            const updatedChargeItem = {
+                ...chargeItem,
+                ...patch,
+            };
+            return {
+                ...lineItem,
+                chargeItems: [updatedChargeItem, ...chargeItems],
+            };
+        });
+        this.updateRuntime(solutionLineItem);
+    }
+    ngOnInit() {
+        this.formScope.formSubmitEvent.pipe(takeUntil(this.unsubscribe)).subscribe((e) => {
+            try {
+                this.form.updateValueAndValidity();
+                const solutionLineItem = EntityUtil.clone(this.solutionLineItem);
+                const section = this.findSection(e.id);
+                if (!section) {
+                    throw 'Section not found';
+                }
+                const entityType = section.boundData.entityType;
+                if (entityType === BoundDataType[BoundDataType.PORT] || entityType === BoundDataType[BoundDataType.TYPE]) {
+                    if (e.action === 'patch' && EntityUtil.isPresent(e.valueOption)) {
+                        const valueOption = e['valueOption'];
+                        if (!section.model?.parentId) {
+                            this.collapsibleState.clearState(section.id);
+                            this.updateRuntime(valueOption);
+                        }
+                        else {
+                            const parentLineItem = LineItemUtil.findById(section.model.parentId, [solutionLineItem]);
+                            if (parentLineItem) {
+                                const indx = parentLineItem.lineItems.findIndex(item => item.id === section.model?.id);
+                                parentLineItem.lineItems.splice(indx, 1, valueOption);
+                                this.collapsibleState.clearState(section.id);
+                                this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                    }
+                }
+                if (entityType === BoundDataType[BoundDataType.PORT]) {
+                    if (e.action === 'upsert') {
+                        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        if (parentLineItem) {
+                            parentLineItem.lineItems.forEach(i => {
+                                if (e.selectedValueOptions &&
+                                    e.selectedValueOptions.findIndex(v => v.toLowerCase() === i.type.toLowerCase()) < 0) {
+                                    this.updateCardinalityVariable(parentLineItem, i, 0);
+                                }
+                            });
+                            const lineItems = parentLineItem?.lineItems.filter(i => e.selectedValueOptions &&
+                                e.selectedValueOptions.findIndex(v => v.toLowerCase() === i.type.toLowerCase()) > -1);
+                            e.selectedValueOptions?.forEach(v => {
+                                if (lineItems?.findIndex(item => item.type.toLowerCase() === v.toLowerCase()) === -1) {
+                                    const lineItem = this.createLineItem(section, v, parentLineItem);
+                                    this.updateCardinalityVariable(parentLineItem, lineItem);
+                                    lineItems.push(lineItem);
+                                }
+                            });
+                            this.updateRuntime(solutionLineItem);
+                        }
+                    }
+                    if (e.action === 'create') {
+                        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        if (parentLineItem) {
+                            const valueOption = e.valueOption;
+                            const lineItem = this.createLineItem(section, valueOption, parentLineItem);
+                            parentLineItem.lineItems.push(lineItem);
+                            this.updateCardinalityVariable(parentLineItem, lineItem);
+                            this.updateRuntime(solutionLineItem);
+                        }
+                    }
+                    if (e.action === 'copy') {
+                        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        if (parentLineItem) {
+                            const valueOption = e.valueOption;
+                            const lineItemToCopy = parentLineItem.lineItems.find(li => li.id === valueOption);
+                            if (lineItemToCopy) {
+                                const lineItem = { ...lineItemToCopy, id: '' };
+                                parentLineItem.lineItems.push(lineItem);
+                                this.updateCardinalityVariable(parentLineItem, lineItem);
+                                this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                    }
+                    if (e.action === 'update') {
+                        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        if (parentLineItem) {
+                            //Assuming that radio control is the only control, that 'updates' values
+                            const previous = section.model?.lineItems.filter(li => li.port && li.port === section.boundData.name)[0];
+                            if (previous) {
+                                this.updateCardinalityVariable(parentLineItem, previous, 0);
+                            }
+                            const index = parentLineItem.lineItems.findIndex(li => li.id === previous?.id);
+                            const lineItem = {
+                                id: UUID.UUID(),
+                                qty: previous?.qty,
+                                port: previous?.port,
+                                type: EntityUtil.isPresent(e.valueOption) ? e.valueOption : this.form.controls[e.id].value,
+                                cfgStatus: 'New',
+                                parentId: previous?.parentId,
+                            };
+                            this.updateCardinalityVariable(parentLineItem, lineItem);
+                            parentLineItem.lineItems[index] = lineItem;
+                            this.updateRuntime(solutionLineItem);
+                        }
+                    }
+                    if (e.action === 'remove') {
+                        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        if (parentLineItem &&
+                            SectionsBinderHelper.isRemoveAllowed(parentLineItem, section.boundData.name, section.model?.qty)) {
+                            const index = parentLineItem.lineItems.findIndex(item => item.type.toLowerCase() === e.valueOption?.toLowerCase());
+                            if (index > -1) {
+                                const removed = parentLineItem.lineItems.splice(index, 1)[0];
+                                this.updateCardinalityVariable(parentLineItem, removed, 0);
+                                this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                    }
+                    if (e.action === 'qtyUpdate') {
+                        const typeSection = e.valueOption
+                            ? SectionHelperService.findSectionForValue(section, e.valueOption)
+                            : undefined;
+                        const typeLineItem = typeSection?.model && LineItemUtil.findById(typeSection.model.id, [solutionLineItem]);
+                        if (typeSection && typeLineItem) {
+                            typeLineItem.qty = +this.form.controls[typeSection.id + 'qty'].value;
+                            typeLineItem.cfgStatus = 'User';
+                            this.updateRuntime(solutionLineItem);
+                        }
+                    }
+                    if (e.action === 'adjustNetPrice') {
+                        const { valueOption, options } = e;
+                        const { amount } = options ?? {};
+                        const priceAdjustment = {
+                            type: 'OVERRIDE_AMOUNT',
+                            explanation: 'Manual net price adjustment',
+                            formula: '',
+                            amount,
+                        };
+                        this.adjustPrice(valueOption, section, solutionLineItem, { priceAdjustment });
+                    }
+                    if (e.action === 'adjustListPrice') {
+                        const { valueOption, options } = e;
+                        const { amount } = options ?? {};
+                        const listPriceAdjustment = {
+                            type: 'OVERRIDE_AMOUNT',
+                            explanation: 'Manual list price adjustment',
+                            formula: '',
+                            amount,
+                        };
+                        this.adjustPrice(valueOption, section, solutionLineItem, { listPriceAdjustment });
+                    }
+                }
+                if (entityType === BoundDataType[BoundDataType.TYPE]) {
+                    if (e.action === 'remove') {
+                        const parentLineItem = section.model?.parentId && LineItemUtil.findById(section.model.parentId, [solutionLineItem]);
+                        if (parentLineItem &&
+                            section.model &&
+                            section.model.port &&
+                            SectionsBinderHelper.isRemoveAllowed(parentLineItem, section.model.port, section.model?.qty)) {
+                            const index = parentLineItem.lineItems.findIndex(item => item.id === section.model?.id);
+                            if (index > -1) {
+                                const removed = parentLineItem.lineItems.splice(index, 1)[0];
+                                this.updateCardinalityVariable(parentLineItem, removed, 0);
+                                this.collapsibleState.clearState(section.id);
+                                this.updateRuntime(solutionLineItem);
+                            }
+                        }
+                    }
+                    if (e.action === 'qtyUpdate') {
+                        const typeLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        if (typeLineItem) {
+                            const qty = +this.form.controls[e.id + 'qty'].value;
+                            if (typeLineItem.parentId) {
+                                const parentLineItem = LineItemUtil.findById(typeLineItem.parentId, [solutionLineItem]);
+                                if (parentLineItem) {
+                                    this.updateCardinalityVariable(parentLineItem, typeLineItem, qty);
+                                }
+                            }
+                            typeLineItem.qty = qty;
+                            typeLineItem.cfgStatus = 'User';
+                            this.updateRuntime(solutionLineItem);
+                        }
+                    }
+                }
+                if (entityType === BoundDataType[BoundDataType.ATTRIBUTE]) {
+                    if (e.action === 'update') {
+                        const parentLineItem = section.model && LineItemUtil.findById(section.model.id, [solutionLineItem]);
+                        const attribute = parentLineItem?.attributes.find(attr => attr.name.toLowerCase() === section.boundData.name.toLowerCase());
+                        if (attribute) {
+                            //Explicitly set value always win
+                            let value = typeof e.valueOption !== 'undefined' ? e.valueOption : this.form.controls[e.id].value;
+                            if (attribute.type === 'BOOLEAN') {
+                                value = value ? 1 : 0;
+                            }
+                            attribute.value = value;
+                            attribute.cfgStatus = 'User';
+                            this.updateRuntime(solutionLineItem);
+                        }
+                    }
+                }
+            }
+            catch (e) {
+                console.log(e);
+                this.messageService.add({ key: this.messageBucketId, summary: `Configuration failed ${e?.message}` });
+            }
+        });
+        this.runtimeService.onSolutionReadyEvent
+            .pipe(takeUntil(this.unsubscribe))
+            .subscribe(lineItem => this.onSolutionReady(lineItem));
+        this.runtimeService.onSolutionUpdatedEvent
+            .pipe(takeUntil(this.unsubscribe))
+            .subscribe((data) => {
+            if (!(data instanceof HttpErrorResponse)) {
+                return this.handleSolutionUpdate(data);
+            }
+            this.handleSolutionFailedUpdate(data);
+        });
+        this.runtimeService.onUIRefreshEvent.pipe(takeUntil(this.unsubscribe)).subscribe(() => {
+            const { uiDefinition } = this.runtimeService.getRuntimeContext() ?? {};
+            this.runtimeContext.uiDefinition = uiDefinition;
+            this.formScope.scriptSessionScope = {};
+            this.startRuntime();
+        });
+    }
+    onSolutionReady(lineItem) {
+        const context = this.runtimeService.getRuntimeContext();
+        const configurationContext = this.contextService.resolve();
+        const mergeContext = {
+            ...context,
+            properties: {
+                ...context.properties,
+                ...configurationContext.properties,
+            },
+        };
+        const accountId = mergeContext.properties?.AccountId;
+        if (accountId && accountId.length === 15) {
+            this.runtimeContext = {
+                ...mergeContext,
+                properties: {
+                    ...mergeContext.properties,
+                    AccountId: SalesforceIdUtils.generateId18FromId15(accountId),
+                },
+            };
+        }
+        else {
+            this.runtimeContext = mergeContext;
+        }
+        this.solutionLineItem = lineItem;
+        this.runtimeService.setRuntimeContext(this.runtimeContext);
+        this.startRuntime();
+    }
+    handleSolutionUpdate(updatedLineItem) {
+        this.solutionLineItem = updatedLineItem;
+        this.processSolution(true);
+        this.runtimeService.solutionProcessed(this.solutionLineItem);
+        this.cdr.detectChanges();
+    }
+    handleSolutionFailedUpdate(error) {
+        const hasErrorMessage = EntityUtil.isPresent(error.error) && EntityUtil.isPresent(error.error.message);
+        const message = hasErrorMessage ? error.error.message : 'Configuration failed';
+        const { isHandlingConfigurationErrors } = this.runtimeContext.uiDefinition ?? {};
+        if (isHandlingConfigurationErrors) {
+            this.messageService.add({ key: this.messageBucketId, summary: message });
+        }
+        this.solutionLineItem = {
+            ...this.solutionLineItem,
+            messages: [...this.solutionLineItem.messages, `E:${message}`],
+        };
+        this.processSolution(true, true);
+        this.runtimeService.solutionProcessed(this.solutionLineItem);
+        this.cdr.detectChanges();
+    }
+    updateCardinalityVariable(parent, updated, newQuantity) {
+        const portDomain = updated.port ? parent.portDomains[updated.port] : undefined;
+        const domainType = portDomain?.domainTypes.find(t => t.name === updated.type);
+        const cardinality = domainType?.cardinality ?? 0;
+        let qty;
+        if (!Number.isFinite(domainType?.cardinality)) {
+            qty = Number.isFinite(newQuantity) ? newQuantity : updated.qty;
+        }
+        else {
+            qty = EntityUtil.isPresent(newQuantity)
+                ? cardinality - updated.qty + newQuantity
+                : cardinality + updated.qty;
+        }
+        const cardinalityName = '#CV-' + updated.type + '@' + updated.port;
+        let cardinalityVariable = parent.attributes.find(a => a.name === cardinalityName);
+        if (!cardinalityVariable) {
+            cardinalityVariable = {
+                id: UUID.UUID(),
+                name: cardinalityName,
+            };
+            parent.attributes.push(cardinalityVariable);
+        }
+        cardinalityVariable.value = qty;
+        cardinalityVariable.cfgStatus = 'User';
+    }
+    createLineItem(section, valueOption, parentLineItem) {
+        return {
+            qty: +this.form.controls[section.id + 'qty'].value,
+            port: section.boundData.name,
+            type: EntityUtil.isPresent(valueOption) ? valueOption : this.form.controls[section.id].value,
+            cfgStatus: 'New',
+            parentId: parentLineItem?.id,
+        };
+    }
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.sectionsService.destroy();
+    }
+    startRuntime() {
+        const uiDefinition = this.runtimeContext.uiDefinition;
+        const defaultTab = uiDefinition?.tabs?.find(tab => tab.isDefault);
+        this.activeUITab = EntityUtil.isPresent(defaultTab) ? defaultTab : uiDefinition?.tabs?.[0];
+        this.sectionsService.compileModule(uiDefinition?.sections ?? [], uiDefinition?.isViewEncapsulated);
+        this.processSolution();
+        this.solutionIsReady = true;
+        this.cdr.detectChanges();
+    }
+    updateRuntime(lineItem) {
+        this.solutionUpdated.emit(lineItem);
+    }
+    addToCart() {
+        const lineItem = EntityUtil.clone(this.solutionLineItem);
+        this.runtimeService.stopRuntime(lineItem);
+    }
+    processSolution(isUpdate, isError) {
+        //1. Bind sections to solution
+        let sections = EntityUtil.clone(this.runtimeContext.uiDefinition?.sections) ?? [];
+        const sourceSections = EntityUtil.clone(this.runtimeContext.uiDefinition?.sections) ?? [];
+        this.updateLineItemsSectionPath(this.solutionLineItem);
+        SectionsBinderHelper.setLineItemsPath(this.runtimeContext.runtimeModel, this.solutionLineItem, sections, sourceSections, (sec) => !sec.parentId && sec.boundData, this.runtimeContext.uiDefinition?.pricingEnabled ?? false);
+        sections = sections.filter(s => s.model && s.template);
+        //2. Init form
+        this.form = this.formService.initForm(sections, this.solutionLineItem);
+        this.formScope.form = this.form;
+        this.sortedSections = this.filterAndSort(getSectionTree(sections.filter(s => !s.isStatic)));
+        if (!isUpdate) {
+            this.staticSections = this.filterAndSort(getSectionTree(sections.filter(s => s.isStatic)));
+        }
+        if (!isError) {
+            this.messageService.clear(this.messageBucketId);
+        }
+    }
+    hideModal() {
+        this.runtimeService.cancelRuntime();
+    }
+    updateLineItemsSectionPath(lineItem, parent) {
+        const path = {
+            types: parent ? parent.types.concat([lineItem.type]) : [lineItem.type],
+            ports: parent ? parent.ports.concat(lineItem.port ? [lineItem.port] : []) : [],
+        };
+        lineItem.path = path;
+        for (const child of lineItem.lineItems) {
+            this.updateLineItemsSectionPath(child, lineItem.path);
+        }
+    }
+    filterAndSort(sections) {
+        const filtered = this.searchFilterPipe.transform(sections, this.activeUITab?.id, 'page');
+        const ordered = this.orderByPipe.transform(filtered, 'order', 'asc');
+        return ordered;
+    }
+    findSection(id) {
+        return EntityUtil.findByFieldHierarchically('id', id, [...this.sortedSections, ...this.staticSections], 'children');
+    }
+}
+RuntimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeComponent, deps: [{ token: SectionsService }, { token: FormScopeService }, { token: CollapsibleStateService }, { token: RuntimeFormService }, { token: RuntimeService }, { token: MessageService }, { token: i2.ContextService }, { token: i7.OrderByPipe }, { token: i7.SearchFilterPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+RuntimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: RuntimeComponent, selector: "vl-runtime", outputs: { solutionUpdated: "solutionUpdated" }, providers: [FormScopeService, CollapsibleStateService, OrderByPipe, SearchFilterPipe], ngImport: i0, 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: ["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:700}: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:translate3d(-100%,0,0)}: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:700;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{inset: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:\" \";inset:-15px 15px 15px -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;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;inset:0;z-index:990}\n", ":host{height:100%;display:flex;flex-direction:column}.sections-wrapper,form{flex-grow:1;display:flex;flex-direction:column}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7.SidebarTabsDirective, selector: "[sidebarTabs]", inputs: ["sidebarTabs"], exportAs: ["sidebarTabs"] }, { kind: "component", type: i10.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: SectionRendererComponent, selector: "vl-section-renderer", inputs: ["section", "form"] }, { kind: "pipe", type: i7.OrderByPipe, name: "orderBy" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-runtime', providers: [FormScopeService, CollapsibleStateService, OrderByPipe, SearchFilterPipe], 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: ["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:700}: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:translate3d(-100%,0,0)}: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:700;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{inset: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:\" \";inset:-15px 15px 15px -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;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;inset:0;z-index:990}\n", ":host{height:100%;display:flex;flex-direction:column}.sections-wrapper,form{flex-grow:1;display:flex;flex-direction:column}.hidden{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: SectionsService }, { type: FormScopeService }, { type: CollapsibleStateService }, { type: RuntimeFormService }, { type: RuntimeService }, { type: i3$1.MessageService, decorators: [{
+                    type: Inject,
+                    args: [MessageService]
+                }] }, { type: i2.ContextService }, { type: i7.OrderByPipe }, { type: i7.SearchFilterPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { solutionUpdated: [{
+                type: Output
+            }] } });
+
+class RuntimePreviewComponent {
+    set uiDefinition(value) {
+        this._uiDefinition = value;
+        this.initDefinition(value);
+    }
+    constructor(runtimeService, modelCacheService, configurationApiService, contextService) {
+        this.runtimeService = runtimeService;
+        this.modelCacheService = modelCacheService;
+        this.configurationApiService = configurationApiService;
+        this.contextService = contextService;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        if (!this.modelId) {
+            return;
+        }
+        this.modelCacheService
+            .getProductModel(this.modelId)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(container => {
+            this.productModelContainer = container;
+            if (this._uiDefinition) {
+                this.initDefinition(this._uiDefinition);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    initDefinition(uiDefinition) {
+        if (!this.productModelContainer) {
+            return;
+        }
+        const initialisedUiDefinition = EntityUtil.clone(uiDefinition);
+        const externals = this.productModelContainer.main.externals;
+        if (externals) {
+            initialisedUiDefinition.externals = externals.reduce((trunk, variable) => {
+                return {
+                    ...trunk,
+                    [variable.name]: initialisedUiDefinition.externals?.[variable.name] ?? '',
+                };
+            }, {});
+        }
+        else {
+            delete initialisedUiDefinition.externals;
+        }
+        this.initialisedUiDefinition = initialisedUiDefinition;
+        this.launchRuntime();
+    }
+    onSolutionUpdated(lineItem) {
+        this.runtimeService.updateRuntime({ configurableRamp: lineItem });
+    }
+    launchRuntime() {
+        if (!this.modelId || !this.initialisedUiDefinition) {
+            return;
+        }
+        SectionPathUtil.updateSectionsPath(this.initialisedUiDefinition.sections);
+        const uiDefinition = EntityUtil.clone(this.initialisedUiDefinition);
+        combineLatest([
+            this.configurationApiService.getRuntimeDataByModelId(this.modelId),
+            this.contextService.create('TestId', ConfigurationContextMode.TEST),
+        ]).subscribe(([runtimeData]) => {
+            const runtimeModel = RuntimeModel.create(runtimeData.types, runtimeData.products);
+            const rootType = Array.from(runtimeModel.components.values()).find(c => uiDefinition.rootType &&
+                runtimeModel.isEquals(c.typeName, uiDefinition.rootType) &&
+                EntityUtil.isPresent(c.productId));
+            if (rootType?.typeName) {
+                uiDefinition.rootType = rootType.typeName;
+            }
+            const contextProductId = rootType ? rootType.productId : undefined;
+            const context = {
+                modelId: this.modelId ?? '',
+                uiDefinition: uiDefinition,
+                runtimeModel,
+                runtimeMode: RuntimeMode.TEST,
+                productId: contextProductId,
+                properties: uiDefinition.externals,
+            };
+            this.runtimeService.startRuntime(context, {});
+        });
+    }
+}
+RuntimePreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimePreviewComponent, deps: [{ token: RuntimeService }, { token: ProductModelCacheService }, { token: i1.ConfigurationApiService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+RuntimePreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: RuntimePreviewComponent, selector: "vl-runtime-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition" }, ngImport: i0, template: "<vl-runtime (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: RuntimeComponent, selector: "vl-runtime", outputs: ["solutionUpdated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-runtime-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vl-runtime (solutionUpdated)=\"onSolutionUpdated($event)\"></vl-runtime>\n", styles: [":host{flex-grow:1}\n"] }]
+        }], ctorParameters: function () { return [{ type: RuntimeService }, { type: ProductModelCacheService }, { type: i1.ConfigurationApiService }, { type: i2.ContextService }]; }, propDecorators: { modelId: [{
+                type: Input
+            }], uiDefinition: [{
+                type: Input
+            }] } });
+
+class RuntimeModule {
+}
+RuntimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RuntimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, declarations: [RuntimeComponent, RuntimePreviewComponent, SectionRendererComponent, ComponentPreviewComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ApiModule, LoaderModule, SdkCoreModule], exports: [FormsModule,
+        ReactiveFormsModule,
+        RuntimeComponent,
+        RuntimePreviewComponent,
+        SectionRendererComponent,
+        ComponentPreviewComponent] });
+RuntimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, providers: [
+        ShoppingCartService,
+        RuntimeService,
+        ConfigurationService,
+        RuntimeContextService,
+        RuntimeFormService,
+        CurrentStateService,
+        ProductModelCacheService,
+        DatePipe,
+        SectionsService,
+        SectionStoreService,
+        DialogService,
+    ], imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ApiModule, LoaderModule, SdkCoreModule, FormsModule,
+        ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [RuntimeComponent, RuntimePreviewComponent, SectionRendererComponent, ComponentPreviewComponent],
+                    providers: [
+                        ShoppingCartService,
+                        RuntimeService,
+                        ConfigurationService,
+                        RuntimeContextService,
+                        RuntimeFormService,
+                        CurrentStateService,
+                        ProductModelCacheService,
+                        DatePipe,
+                        SectionsService,
+                        SectionStoreService,
+                        DialogService,
+                    ],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ApiModule, LoaderModule, SdkCoreModule],
+                    exports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RuntimeComponent,
+                        RuntimePreviewComponent,
+                        SectionRendererComponent,
+                        ComponentPreviewComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComponentPreviewComponent, CurrentStateService, RuntimeComponent, RuntimeContextService, RuntimeModule, RuntimePreviewComponent, RuntimeService, SectionRendererComponent };
+//# sourceMappingURL=veloceapps-sdk-runtime.mjs.map