@veloceapps/sdk 8.0.0-77 → 8.0.0-79

package/fesm2020/veloceapps-sdk-runtime.mjs

@@ -1,3767 +0,0 @@
-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, isLegacyUIDefinition, 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.9", ngImport: i0, type: CollapsibleStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CollapsibleStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CollapsibleStateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: FormScopeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormScopeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormScopeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: RuntimeFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-RuntimeFormService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RuntimeFormService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: ConfigurationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: RuntimeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: ShoppingCartService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: CurrentStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CurrentStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CurrentStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: ProductModelCacheService, deps: [{ token: i1.ProductModelApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-ProductModelCacheService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ProductModelCacheService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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);
-            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(runtimeData) {
-        const { uiDefinitionId } = this.contextService.resolve();
-        const findByFn = (uiDef) => uiDefinitionId ? uiDefinitionId === uiDef.id : uiDef.primary;
-        const uiDefinitions = runtimeData.uiDefinitions
-            .map(({ source }) => source)
-            .filter((uiDefinition) => isLegacyUIDefinition(uiDefinition));
-        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.9", 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.9", ngImport: i0, type: RuntimeContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SectionStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SectionStoreService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SectionStoreService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SectionScopeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SectionScopeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SectionScopeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", ngImport: i0, type: TemplateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: ContextProviderComponent, deps: [{ token: RuntimeService }], target: i0.ɵɵFactoryTarget.Component });
-ContextProviderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", 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.9", 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.9", 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.9", ngImport: i0, type: VeloAttributeDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Directive });
-VeloAttributeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: VeloAttributeDirective, selector: "velo-attribute-directive", exportAs: ["attributeApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", 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.9", 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.9", ngImport: i0, type: VeloAttributeComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloAttributeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: VeloPortCheckBoxComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloPortCheckBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: VeloPortDropdownComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloPortDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: VeloPortRadioComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloPortRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", 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.9", 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.9", 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.9", ngImport: i0, type: SfQueryDirective, deps: [{ token: i1.SalesforceApiService }], target: i0.ɵɵFactoryTarget.Directive });
-SfQueryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SfQueryDirective, selector: "sf-query", exportAs: ["sfApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SectionHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SectionHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SectionHelperService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: SectionContextAware, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Directive });
-SectionContextAware.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SectionContextAware, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", type: LineItemDirective, selector: "line-item", exportAs: ["liApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: VeloPortDirective, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Directive });
-VeloPortDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: VeloPortDirective, selector: "velo-port", exportAs: ["portApi"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: VeloDropdownComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: VeloQuantityComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloQuantityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: VeloQuantityButtonComponent, deps: [{ token: FormScopeService }, { token: SectionScopeService }], target: i0.ɵɵFactoryTarget.Component });
-VeloQuantityButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", ngImport: i0, type: VlApprovalDirective, deps: [{ token: i1.QuoteApiService }], target: i0.ɵɵFactoryTarget.Directive });
-VlApprovalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: VlApprovalDirective, selector: "vl-approval", exportAs: ["approvalApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: VlDocumentAttachmentsDirective, deps: [{ token: i1.DocumentAttachmentApiService }], target: i0.ɵɵFactoryTarget.Directive });
-VlDocumentAttachmentsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: VlDocumentAttachmentsDirective, selector: "vl-document-attachments", exportAs: ["documentAttachmentsApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", ngImport: i0, type: VlDocumentTemplatesDirective, deps: [{ token: i1.DocumentTemplatesApiService }], target: i0.ɵɵFactoryTarget.Directive });
-VlDocumentTemplatesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: VlDocumentTemplatesDirective, selector: "[vlQuoteTemplates]", exportAs: ["quoteTemplateApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", type: VlQuoteDirective, selector: "vl-quote", exportAs: ["quoteApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", type: VlRampDirective, selector: "vl-ramp", exportAs: ["rampApi"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", 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.9", 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.9", ngImport: i0, type: RuntimeExecutionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuntimeExecutionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", 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.9", ngImport: i0, type: BaseSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BaseSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", 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.9", ngImport: i0, type: SectionsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", 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.9", ngImport: i0, type: RuntimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuntimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", 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.9", 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.9", 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