@veloceapps/sdk 7.0.0-8 → 7.0.1-0

package/fesm2020/veloceapps-sdk-cms.mjs

@@ -0,0 +1,2036 @@
+import { __decorate, __param, __metadata } from 'tslib';
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, Injectable, ViewContainerRef, SkipSelf, ViewChild, Input, ViewEncapsulation, NgModule, Directive, ElementRef, createNgModule } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { BehaviorSubject, Subject, of, map, tap, switchMap, startWith, distinctUntilChanged, filter, ReplaySubject, noop, take, Observable, takeUntil, forkJoin, catchError, combineLatest, from } from 'rxjs';
+import * as i2 from '@veloceapps/sdk/core';
+import { ConfigurationService, LineItemWorker, generateLineItem, getAttributeValue, QuoteDraftService, FlowConfigurationService, ProductImagesService, ContextService, lineItemUtils, SdkCoreModule, UI_DEFINITION_VERSION } from '@veloceapps/sdk/core';
+import * as i3 from 'primeng/api';
+import { applyPatch } from 'rfc6902';
+import * as lodash from 'lodash';
+import { compact, isArray, pull, merge, omit, flatten, set, kebabCase, cloneDeep } from 'lodash';
+import * as i5 from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i1 from '@veloceapps/components';
+import { LetDirectiveModule, LoaderModule, ToastService, ToastType } from '@veloceapps/components';
+import { UUID, isDefined, Operator, Predicate, parseJsonSafely, CoreModule } from '@veloceapps/core';
+import * as i2$1 from 'ngx-drag-drop';
+import { DndModule } from 'ngx-drag-drop';
+import { SalesforceApiService, QuoteApiService, DocumentTemplatesApiService, DocumentAttachmentApiService, RampApiService, CatalogApiService, DeltaApiService, PicklistsApiService, PriceApiService, ShoppingCartSettingsApiService, ConfigurationSettingsApiService, GuidedSellingApiService, ApiModule } from '@veloceapps/api';
+import { DialogService } from 'primeng/dynamicdialog';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as angularForms from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { transform } from '@babel/standalone';
+import * as rxjsOperators from 'rxjs/operators';
+import { loadRemoteModule } from '@angular-architects/module-federation';
+
+var FlowAction;
+(function (FlowAction) {
+    FlowAction["FLOW_CONFIGURE_PRODUCT"] = "FLOW_CONFIGURE_PRODUCT";
+    FlowAction["FLOW_NAVIGATE_BACK"] = "FLOW_NAVIGATE_BACK";
+    FlowAction["FLOW_NAVIGATE_TO_CATALOG"] = "FLOW_NAVIGATE_TO_CATALOG";
+    FlowAction["FLOW_APPLY_PRODUCT_CONFIGURATION"] = "FLOW_APPLY_PRODUCT_CONFIGURATION";
+    FlowAction["FLOW_OPEN_DOC_GEN"] = "FLOW_OPEN_DOC_GEN";
+    FlowAction["FLOW_CLOSE_DOC_GEN"] = "FLOW_CLOSE_DOC_GEN";
+    FlowAction["FLOW_SWITCH_OBJECT"] = "FLOW_SWITCH_OBJECT";
+    FlowAction["REMOTE_APPLY"] = "REMOTE_APPLY";
+    FlowAction["REMOTE_CANCEL"] = "REMOTE_CANCEL";
+})(FlowAction || (FlowAction = {}));
+const ConfigureProductAction = ({ lineItemId, productId, }) => ({
+    type: FlowAction.FLOW_CONFIGURE_PRODUCT,
+    payload: { lineItemId, productId },
+});
+const NavigateBackAction = () => ({
+    type: FlowAction.FLOW_NAVIGATE_BACK,
+});
+const NavigateToCatalogAction = () => ({
+    type: FlowAction.FLOW_NAVIGATE_TO_CATALOG,
+});
+const ApplyProductConfigurationAction = () => ({
+    type: FlowAction.FLOW_APPLY_PRODUCT_CONFIGURATION,
+});
+const OpenDocGenAction = () => ({
+    type: FlowAction.FLOW_OPEN_DOC_GEN,
+});
+const CloseDocGenAction = () => ({
+    type: FlowAction.FLOW_CLOSE_DOC_GEN,
+});
+const RemoteApplyAction = () => ({
+    type: FlowAction.REMOTE_APPLY,
+});
+const RemoteCancelAction = () => ({
+    type: FlowAction.REMOTE_CANCEL,
+});
+const SwitchObjectAction = (payload) => ({
+    type: FlowAction.FLOW_SWITCH_OBJECT,
+    payload,
+});
+var CmsAction;
+(function (CmsAction) {
+    CmsAction.GO_TO_PAGE = '[CMS]_GO_TO_PAGE';
+    /**
+     * Navigate UI definition to a specific page
+     *
+     * @param pageName name of the page
+     * @returns void
+     */
+    CmsAction.GoToPage = (pageName) => ({
+        type: CmsAction.GO_TO_PAGE,
+        payload: { pageName },
+    });
+})(CmsAction || (CmsAction = {}));
+
+var cmsActions = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ApplyProductConfigurationAction: ApplyProductConfigurationAction,
+    CloseDocGenAction: CloseDocGenAction,
+    get CmsAction () { return CmsAction; },
+    ConfigureProductAction: ConfigureProductAction,
+    get FlowAction () { return FlowAction; },
+    NavigateBackAction: NavigateBackAction,
+    NavigateToCatalogAction: NavigateToCatalogAction,
+    OpenDocGenAction: OpenDocGenAction,
+    RemoteApplyAction: RemoteApplyAction,
+    RemoteCancelAction: RemoteCancelAction,
+    SwitchObjectAction: SwitchObjectAction
+});
+
+const DEFAULT_PLUGINS_TOKEN = new InjectionToken('DEFAULT_PLUGINS_TOKEN');
+const UI_DEFINITION_METADATA = new InjectionToken('UI_DEFINITION_METADATA_TOKEN');
+const ELEMENT_METADATA = new InjectionToken('ELEMENT_METADATA_TOKEN');
+const SHARED_ELEMENT_METADATA = new InjectionToken('SHARED_ELEMENT_METADATA_TOKEN');
+const ELEMENT_CONFIG = new InjectionToken('ELEMENT_CONFIG_TOKEN');
+const VENDOR_MAP = new InjectionToken('VENDOR_MAP');
+
+var cmsInjectionTokens = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DEFAULT_PLUGINS_TOKEN: DEFAULT_PLUGINS_TOKEN,
+    ELEMENT_CONFIG: ELEMENT_CONFIG,
+    ELEMENT_METADATA: ELEMENT_METADATA,
+    SHARED_ELEMENT_METADATA: SHARED_ELEMENT_METADATA,
+    UI_DEFINITION_METADATA: UI_DEFINITION_METADATA,
+    VENDOR_MAP: VENDOR_MAP
+});
+
+class Entity {
+    constructor(injector) {
+        this.injector = injector;
+        this.plugins = [];
+        this.config = this.injector.get(ELEMENT_CONFIG);
+        this.defaultPlugins = this.injector.get(DEFAULT_PLUGINS_TOKEN);
+    }
+    initPlugins() {
+        this.defaultPlugins.forEach(plugin => this.registerPlugin(new plugin(this)));
+        this.config.plugins?.forEach(plugin => this.registerPlugin(new plugin(this)));
+    }
+    registerPlugin(plugin) {
+        this.plugins.push(plugin);
+    }
+}
+
+let ElementComponent = class ElementComponent extends Entity {
+    constructor(injector) {
+        super(injector);
+        this.injector = injector;
+        this.model$ = new BehaviorSubject(undefined);
+        super.initPlugins();
+    }
+    ngOnChanges(changes) {
+        this.plugins.forEach(plugin => plugin.ngOnChanges?.(changes));
+    }
+    ngOnInit() {
+        this.plugins.forEach(plugin => plugin.ngOnInit?.());
+    }
+    ngDoCheck() {
+        this.plugins.forEach(plugin => plugin.ngDoCheck?.());
+    }
+    ngAfterContentInit() {
+        this.plugins.forEach(plugin => plugin.ngAfterContentInit?.());
+    }
+    ngAfterViewInit() {
+        this.plugins.forEach(plugin => plugin.ngAfterViewInit?.());
+    }
+    ngAfterViewChecked() {
+        this.plugins.forEach(plugin => plugin.ngAfterViewChecked?.());
+    }
+    ngOnDestroy() {
+        this.plugins.forEach(plugin => plugin.ngOnDestroy?.());
+    }
+};
+ElementComponent = __decorate([
+    Component({
+        template: '',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        jit: true,
+    }),
+    __param(0, Inject(Injector)),
+    __metadata("design:paramtypes", [Injector])
+], ElementComponent);
+
+function getElementUniqueName(collection, name, comparator) {
+    let result = '';
+    let index = 0;
+    while (!result) {
+        const candidate = name + (index ? ` (${index})` : '');
+        const exists = collection.some(comparator(candidate));
+        if (!exists) {
+            result = candidate;
+        }
+        else {
+            index++;
+        }
+    }
+    return result;
+}
+const insertElementAt = (source, target, parentPath, index) => {
+    const result = [...source];
+    const name = getElementUniqueName(result, target.name, (name) => (el) => el.name === name);
+    const path = parentPath ? `${parentPath}/${name}` : name;
+    result.splice(index, 0, { ...target, path, name });
+    return result;
+};
+const insertElement = (source, target, path, index) => {
+    if (!path) {
+        return insertElementAt(source, target, '', index);
+    }
+    return source.map(element => {
+        if (element.path === path) {
+            return { ...element, children: insertElementAt(element.children, target, element.path, index) };
+        }
+        else if (element.path?.startsWith(path)) {
+            return {
+                ...element,
+                children: insertElement(element.children, target, path, index),
+            };
+        }
+        else {
+            return element;
+        }
+    });
+};
+const removeElement = (source, path) => {
+    return source.reduce((trunk, element) => {
+        if (path === element.path) {
+            return trunk;
+        }
+        if (element.path) {
+            if (path.startsWith(element.path)) {
+                trunk.push({
+                    ...element,
+                    children: removeElement(element.children, path),
+                });
+            }
+            else {
+                trunk.push(element);
+            }
+        }
+        return trunk;
+    }, []);
+};
+const findElementByPath = (source, path) => {
+    for (const el of source) {
+        if (el.path === path) {
+            return el;
+        }
+        if (el.path && path.startsWith(el.path)) {
+            const found = findElementByPath(el.children, path);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return;
+};
+const findElementByModule = (elements, module, elementName) => {
+    for (const el of elements) {
+        if (el.module === module && el.name === elementName) {
+            return el;
+        }
+        const child = findElementByModule(el.children, module, elementName);
+        if (child) {
+            return child;
+        }
+    }
+    return;
+};
+
+const CMS_COMPILATION_SERVICE = new InjectionToken('VENDOR_MAP');
+
+class RuntimeService {
+    constructor(injector) {
+        this.injector = injector;
+        this.modules = [];
+        this.componentFactories = {};
+        this.applicationTree = [];
+        this.isInitialized$ = new BehaviorSubject(false);
+        this.updated$ = new Subject();
+        this.compilationService = this.injector.get(CMS_COMPILATION_SERVICE);
+    }
+    initialize$(uiDefinition, config) {
+        this.config = config;
+        if (!uiDefinition) {
+            return of([]);
+        }
+        return this.compilationService.compileUIDefinition$(uiDefinition).pipe(map(result => {
+            this.applicationTree = result.elements;
+            this.addComponentFactories(result.module.componentFactories);
+            return result.elements;
+        }), tap(() => this.isInitialized$.next(true)));
+    }
+    applyPatch$(patch) {
+        let observable$ = of(undefined);
+        patch.forEach(operation => {
+            switch (operation.op) {
+                case 'add': {
+                    observable$ = observable$.pipe(switchMap(() => this.addElement$(operation)));
+                    break;
+                }
+                case 'remove': {
+                    observable$ = observable$.pipe(map(() => this.deleteElement(operation)));
+                    break;
+                }
+                default:
+                    observable$ = of();
+            }
+        });
+        return observable$.pipe(tap(() => this.updated$.next()));
+    }
+    getCompiledElement$(path) {
+        return this.updated$.pipe(startWith(undefined), map(() => findElementByPath(this.applicationTree, path)), distinctUntilChanged());
+    }
+    clear() {
+        this.compilationService.clearModuleCache(this.modules);
+        this.modules = [];
+        this.applicationTree = [];
+        this.componentFactories = {};
+        this.isInitialized$.next(false);
+    }
+    addElement$(operation) {
+        return this.compilationService.compileElement$(operation.value).pipe(map(result => {
+            this.addComponentFactories(result.module.componentFactories);
+            applyPatch(this.applicationTree, [{ ...operation, value: result.elements[0] }]);
+        }));
+    }
+    deleteElement(operation) {
+        applyPatch(this.applicationTree, [operation]);
+    }
+    addComponentFactories(list) {
+        list.forEach(item => (this.componentFactories[item.componentType.path] = item));
+    }
+}
+RuntimeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
+const InitAction = { type: 'INIT' };
+const ClearAction = { type: 'CLEAR' };
+class IntegrationState {
+    constructor() {
+        this.stateSubj$ = new BehaviorSubject({});
+        this.action$ = new BehaviorSubject(InitAction);
+    }
+    get state$() {
+        return this.stateSubj$.asObservable();
+    }
+    get state() {
+        return this.stateSubj$.getValue();
+    }
+    patchState(update) {
+        this.stateSubj$.next({ ...this.stateSubj$.getValue(), ...update });
+    }
+    dispatch(action) {
+        this.action$.next(action);
+    }
+    listen$(actionType) {
+        return this.action$.pipe(filter(action => action.type === actionType), map(action => action.payload));
+    }
+    listenAll$() {
+        return this.action$.asObservable();
+    }
+    clear() {
+        this.stateSubj$.next({});
+        this.action$.next(ClearAction);
+    }
+}
+IntegrationState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+IntegrationState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IntegrationState, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ResourcesService {
+    constructor() {
+        this.scripts = new Map();
+        this.loaded$ = new ReplaySubject();
+    }
+    loadScript(url) {
+        const loaded = this.scripts.get(url);
+        if (loaded === true) {
+            return of(noop());
+        }
+        if (loaded == null) {
+            this.scripts.set(url, false);
+            const script = document.createElement('script');
+            script.src = url;
+            script.onload = () => {
+                this.scripts.set(url, true);
+                this.loaded$.next();
+            };
+            document.body.appendChild(script);
+        }
+        return this.loaded$.pipe(filter(() => this.scripts.get(url) === true), take(1));
+    }
+    loadStyles(url) {
+        const previewEl = document.querySelector('vl-cms-preview');
+        const rootEl = previewEl?.shadowRoot ?? previewEl ?? document.body;
+        return new Observable(subscriber => {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.type = 'text/css';
+            link.href = url;
+            link.media = 'all';
+            link.onload = () => {
+                subscriber.next();
+                subscriber.complete();
+            };
+            rootEl.appendChild(link);
+        });
+    }
+}
+ResourcesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ResourcesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ResourcesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ResourcesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ResourcesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TemplatesService {
+    constructor() {
+        this.templates = {};
+    }
+    register(name, templateRef) {
+        this.ensureStorage(name);
+        this.templates[name].next(templateRef);
+    }
+    get(name) {
+        this.ensureStorage(name);
+        return this.templates[name].value;
+    }
+    get$(name) {
+        this.ensureStorage(name);
+        return this.templates[name].asObservable();
+    }
+    ensureStorage(name) {
+        if (!this.templates[name]) {
+            this.templates[name] = new BehaviorSubject(undefined);
+        }
+    }
+}
+TemplatesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TemplatesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TemplatesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TemplatesService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TemplatesService, decorators: [{
+            type: Injectable
+        }] });
+
+const parseBoundPath = (path) => {
+    const regexp = new RegExp(`(?:\\/)(?:\\w+)(?:\\/)(?:ports|attributes)(?:\\/)(?:\\w+)|(?:\\/)(?:\\w+)`, 'g');
+    const blocks = path.match(regexp)?.map(match => {
+        const [type, property, name] = compact(match.split('/'));
+        return { type, property, name };
+    }) ?? [];
+    return blocks;
+};
+const parsePath = (path) => {
+    const segments = path.split('/');
+    let module;
+    let variable;
+    if (segments[0]?.startsWith('@')) {
+        module = segments.shift()?.substring(1);
+    }
+    if (segments[segments.length - 1]?.[0] === ':') {
+        variable = segments.pop()?.substring(1);
+    }
+    const isAbsolute = !segments[0];
+    const nonEmptySegments = segments.filter(Boolean);
+    if (!isAbsolute && nonEmptySegments[0] === '.') {
+        nonEmptySegments.shift();
+    }
+    return {
+        isAbsolute,
+        segments: nonEmptySegments,
+        module,
+        variable,
+    };
+};
+const getAbsolutePath = (elements, subject, path) => {
+    if (path.module) {
+        return findElementByModule(elements, path.module, path.segments[0])?.path;
+    }
+    const subjectSegments = subject.path?.split('/') ?? [];
+    const segments = [...path.segments];
+    if (path.isAbsolute) {
+        return segments.join('/');
+    }
+    while (segments.length) {
+        const segment = segments.shift();
+        if (segment === '..') {
+            subjectSegments.pop();
+        }
+        else if (segment) {
+            subjectSegments.push(segment);
+        }
+    }
+    return subjectSegments.join('/');
+};
+
+class IOProviderService {
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
+        this.inputs = {};
+    }
+    connect(el, name, target) {
+        return this.resolveTarget(el, name, target)?.asObservable();
+    }
+    provide(el, name, target) {
+        return this.resolveTarget(el, name, target);
+    }
+    resolveTarget(el, name, target) {
+        const isHost = !target;
+        if (isHost) {
+            return this.createSubjectSafe(el.path ?? '', name);
+        }
+        const elPath = parsePath(target);
+        const pathIsValue = elPath.segments.length === 1 && elPath.segments[0].startsWith('"') && elPath.segments[0].endsWith('"');
+        const finalName = elPath.variable ?? name;
+        const value = pathIsValue ? new BehaviorSubject(elPath.segments[0].slice(1, -1)) : undefined;
+        const absolutePath = !pathIsValue ? getAbsolutePath(this.runtimeService.applicationTree, el, elPath) : el.path;
+        return this.createSubjectSafe(absolutePath ?? '', finalName, value);
+    }
+    createSubjectSafe(path, name, subject) {
+        if (!this.inputs[path]) {
+            this.inputs[path] = {};
+        }
+        const subjectAlreadyExists = Boolean(this.inputs[path][name]);
+        if (!this.inputs[path][name]) {
+            this.inputs[path][name] = subject ?? new BehaviorSubject(undefined);
+        }
+        if (subject && subjectAlreadyExists) {
+            // push delayed value to workaround 'changed after it was checked' issue
+            setTimeout(() => this.inputs[path][name].next(subject.value));
+        }
+        return this.inputs[path][name];
+    }
+}
+IOProviderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IOProviderService, deps: [{ token: RuntimeService }], target: i0.ɵɵFactoryTarget.Injectable });
+IOProviderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IOProviderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IOProviderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: RuntimeService }]; } });
+
+class ElementContextService {
+}
+ElementContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ElementContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementContextService, decorators: [{
+            type: Injectable
+        }] });
+
+class ElementRendererComponent {
+    constructor(parentInjector, runtimeService, elementContext, ioProviderService, configurationService, elementRef, cdr) {
+        this.parentInjector = parentInjector;
+        this.runtimeService = runtimeService;
+        this.elementContext = elementContext;
+        this.ioProviderService = ioProviderService;
+        this.configurationService = configurationService;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.refs = {};
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.elementContext.metadata = this.meta;
+        this.factory = this.meta.path ? this.runtimeService.componentFactories[this.meta.path] : undefined;
+        this.createComponents();
+    }
+    ngOnDestroy() {
+        this.destroyComponents();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    createComponents() {
+        const modelMeta = this.meta.model;
+        if (!modelMeta) {
+            this.refs[UUID.UUID()] = this.createComponent();
+            return;
+        }
+        if (modelMeta.lineItem) {
+            this.createFromLineItem(modelMeta.lineItem);
+        }
+        else if (modelMeta.path) {
+            this.createFromPath(modelMeta.path);
+        }
+    }
+    createFromPath(path) {
+        const array$ = this.ioProviderService.connect(this.meta, 'children$', path);
+        array$?.pipe(takeUntil(this.destroy$)).subscribe(children => {
+            if (!isArray(children)) {
+                return;
+            }
+            this.processChildren(children);
+        });
+    }
+    getModelComponent() {
+        let component = null;
+        let injector = this.parentInjector;
+        while (!component) {
+            const parentComp = injector.get(ElementRendererComponent, null);
+            if (parentComp?.meta.model) {
+                component = parentComp;
+                break;
+            }
+            if (parentComp) {
+                injector = parentComp.parentInjector;
+            }
+            else {
+                break;
+            }
+        }
+        return component;
+    }
+    createFromLineItem(path) {
+        const parentComp = this.getModelComponent();
+        const parentPath = parentComp?.meta.model?.lineItem;
+        const pathBlocks = parseBoundPath(path).reverse();
+        const { property, name } = pathBlocks[1] ?? {};
+        const finalPath = pathBlocks[0];
+        const children$ = this.getParentLineItem$(parentComp).pipe(map(model => {
+            if (!model) {
+                return [];
+            }
+            if (property === 'ports' && !finalPath.property && parentPath !== path) {
+                return model.lineItems.filter(({ port }) => port === name) ?? [];
+            }
+            return [model];
+        }));
+        children$.pipe(takeUntil(this.destroy$)).subscribe(children => {
+            this.processChildren(children);
+        });
+    }
+    processChildren(children) {
+        const refs = children.reduce((acc, data, index) => {
+            const key = String(data?.id ?? UUID.UUID());
+            const existingRef = this.refs[key];
+            const ref = existingRef ?? this.createComponent(data, index);
+            if (existingRef) {
+                this.updateComponent(existingRef, data, index);
+            }
+            return ref ? { ...acc, [key]: ref } : acc;
+        }, {});
+        const existingKeys = Object.keys(this.refs);
+        const newKeys = Object.keys(refs);
+        pull(existingKeys, ...newKeys).forEach(key => {
+            this.destroyComponent(key);
+        });
+        this.refs = refs;
+        this.cdr.detectChanges();
+    }
+    getParentLineItem$(parentComp) {
+        const parentRefs = Object.values(parentComp?.refs ?? {});
+        const parentRef = parentRefs.find(ref => ref?.location.nativeElement?.contains(this.elementRef.nativeElement));
+        const parentModel$ = parentRef?.instance.model$;
+        return parentModel$ ?? this.configurationService.get();
+    }
+    createComponent(data, index) {
+        if (!this.factory) {
+            return;
+        }
+        const componentRef = this.el?.createComponent(this.factory, index);
+        if (componentRef) {
+            componentRef.location.nativeElement.setAttribute('name', this.meta.name);
+            componentRef.location.nativeElement.setAttribute('path', this.meta.path);
+            componentRef.instance?.model$.next(data);
+        }
+        return componentRef;
+    }
+    updateComponent(ref, data, index) {
+        ref.instance.model$.next(data);
+        if (this.el && this.el.indexOf(ref.hostView) !== index) {
+            this.el.move(ref.hostView, index);
+        }
+    }
+    destroyComponent(key) {
+        this.refs[key]?.destroy();
+        delete this.refs[key];
+    }
+    destroyComponents() {
+        Object.values(this.refs).forEach(ref => ref?.destroy());
+        this.refs = {};
+    }
+}
+ElementRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementRendererComponent, deps: [{ token: i0.Injector, skipSelf: true }, { token: RuntimeService }, { token: ElementContextService }, { token: IOProviderService }, { token: i2.ConfigurationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ElementRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: { meta: "meta" }, providers: [ElementContextService], viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-cms-element-renderer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ElementContextService], template: "<ng-template #el></ng-template>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
+                    type: SkipSelf
+                }] }, { type: RuntimeService }, { type: ElementContextService }, { type: IOProviderService }, { type: i2.ConfigurationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { el: [{
+                type: ViewChild,
+                args: ['el', { read: ViewContainerRef, static: true }]
+            }], meta: [{
+                type: Input
+            }] } });
+
+class PreviewComponent {
+    constructor(runtimeService, configurationService, messageService, configurationRuntimeService, integrationState, cdr) {
+        this.runtimeService = runtimeService;
+        this.configurationService = configurationService;
+        this.messageService = messageService;
+        this.configurationRuntimeService = configurationRuntimeService;
+        this.integrationState = integrationState;
+        this.cdr = cdr;
+        this.state$ = new BehaviorSubject({ loading: true, failure: false });
+        this.destroy$ = new Subject();
+        this.runtimeService.updated$.pipe(takeUntil(this.destroy$)).subscribe(() => this.cdr.detectChanges());
+        this.elements$ = this.state$.pipe(switchMap(({ loading, failure }) => {
+            if (loading || failure) {
+                return of([]);
+            }
+            const elements = this.runtimeService.applicationTree;
+            // If UI definition contains pages, return page by SelectedPageName
+            if (this.uiDefinition?.pages?.length) {
+                return this.integrationState.listen$(CmsAction.GO_TO_PAGE).pipe(map(({ pageName }) => pageName), startWith(elements[0].name), distinctUntilChanged(), map(pageName => {
+                    const page = elements.find(el => el.name === pageName);
+                    return page ? [page] : elements.slice(0, 1);
+                }));
+            }
+            return of(elements);
+        }));
+    }
+    ngOnInit() {
+        if (this.config?.clearStateOnInit) {
+            this.integrationState.clear();
+        }
+        this.startPreview();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.configurationService.reset();
+        this.runtimeService.clear();
+    }
+    trackBy(_, el) {
+        return el.path;
+    }
+    initializeConfiguration$() {
+        const isAlreadyInitialized = this.configurationRuntimeService.isInitialized;
+        if (!this.uiDefinition || this.uiDefinition.type !== 'CONFIGURATION' || isAlreadyInitialized) {
+            return of({});
+        }
+        if (!this.modelId) {
+            console.warn(`No modelId is given for uiDefinition with '${this.uiDefinition.type}' type`);
+            return of({});
+        }
+        // If still not initialized - init configuration in Test mode
+        return this.configurationRuntimeService
+            .initTestMode(this.modelId, this.uiDefinition)
+            .pipe(switchMap(() => this.configurationService.configure()));
+    }
+    startPreview() {
+        if (!this.uiDefinition) {
+            return;
+        }
+        forkJoin([this.runtimeService.initialize$(this.uiDefinition, this.config), this.initializeConfiguration$()])
+            .pipe(tap(() => {
+            this.state$.next({ loading: false, failure: false });
+        }), catchError(error => {
+            console.error(error);
+            if (!this.uiDefinition?.properties?.suppressToastMessages) {
+                this.messageService.add({ severity: 'error', summary: error });
+            }
+            this.state$.next({ loading: false, failure: true });
+            return of();
+        }), takeUntil(this.destroy$))
+            .subscribe();
+    }
+}
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewComponent, deps: [{ token: RuntimeService }, { token: i2.ConfigurationService }, { token: i3.MessageService }, { token: i2.ConfigurationRuntimeService }, { token: IntegrationState }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: PreviewComponent, selector: "vl-cms-preview", inputs: { modelId: "modelId", uiDefinition: "uiDefinition", config: "config" }, providers: [IOProviderService, TemplatesService], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer\n        *ngFor=\"let el of elements$ | async; trackBy: trackBy\"\n        [meta]=\"el\"\n      ></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "component", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-cms-preview', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IOProviderService, TemplatesService], encapsulation: ViewEncapsulation.ShadowDom, template: "<ng-container *ngIf=\"state$ | async as state\">\n  <vl-loader *ngIf=\"state.loading; else content\" [label]=\"'Loading UI'\"></vl-loader>\n\n  <ng-template #content>\n    <ng-container *ngIf=\"!state.failure\">\n      <vl-cms-element-renderer\n        *ngFor=\"let el of elements$ | async; trackBy: trackBy\"\n        [meta]=\"el\"\n      ></vl-cms-element-renderer>\n    </ng-container>\n  </ng-template>\n</ng-container>\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: RuntimeService }, { type: i2.ConfigurationService }, { type: i3.MessageService }, { type: i2.ConfigurationRuntimeService }, { type: IntegrationState }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { modelId: [{
+                type: Input
+            }], uiDefinition: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }] } });
+
+class RuntimeEditorService {
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
+        this.editorModeSubj$ = new BehaviorSubject(false);
+        this.dragMode$ = new BehaviorSubject(false);
+        this.elementDropped$ = new ReplaySubject();
+        this.elementDeleted$ = new ReplaySubject();
+        this.editorMode$ = this.editorModeSubj$.asObservable();
+        this.runtimeService.isInitialized$.subscribe(() => this.editorModeSubj$.next(Boolean(this.runtimeService.config?.uiBuilderMode)));
+    }
+    applyPatch$(patch) {
+        return this.runtimeService.applyPatch$(patch);
+    }
+    toggleEditorMode() {
+        this.editorModeSubj$.next(!this.editorModeSubj$.value);
+    }
+}
+RuntimeEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeEditorService, deps: [{ token: RuntimeService }], target: i0.ɵɵFactoryTarget.Injectable });
+RuntimeEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeEditorService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeEditorService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: RuntimeService }]; } });
+
+class ElementDropHandleComponent {
+    constructor(runtimeService) {
+        this.runtimeService = runtimeService;
+    }
+    handleDrop(e) {
+        this.runtimeService.elementDropped$.next({
+            element: e.data,
+            index: this.index,
+            path: this.parentPath,
+        });
+    }
+}
+ElementDropHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementDropHandleComponent, deps: [{ token: RuntimeEditorService }], target: i0.ɵɵFactoryTarget.Component });
+ElementDropHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ElementDropHandleComponent, selector: "vl-element-drop-handle", inputs: { index: "index", parentPath: "parentPath" }, ngImport: i0, template: "<div class=\"container\" dndDropzone (dndDrop)=\"handleDrop($event)\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{width:0;position:relative}.container{width:40px;height:100%;position:absolute;transform:translate(-50%);display:flex;justify-content:center;align-items:center}.handle{display:none;background:red;height:calc(100% - 10px);width:2px;pointer-events:none}.container.dndDragover .handle{display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementDropHandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vl-element-drop-handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" dndDropzone (dndDrop)=\"handleDrop($event)\">\n  <div class=\"handle\"></div>\n</div>\n", styles: [":host{width:0;position:relative}.container{width:40px;height:100%;position:absolute;transform:translate(-50%);display:flex;justify-content:center;align-items:center}.handle{display:none;background:red;height:calc(100% - 10px);width:2px;pointer-events:none}.container.dndDragover .handle{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: RuntimeEditorService }]; }, propDecorators: { index: [{
+                type: Input
+            }], parentPath: [{
+                type: Input
+            }] } });
+
+class ElementDropHandleModule {
+}
+ElementDropHandleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementDropHandleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementDropHandleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: ElementDropHandleModule, declarations: [ElementDropHandleComponent], imports: [CommonModule, DndModule], exports: [ElementDropHandleComponent] });
+ElementDropHandleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementDropHandleModule, imports: [CommonModule, DndModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementDropHandleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementDropHandleComponent],
+                    imports: [CommonModule, DndModule],
+                    exports: [ElementDropHandleComponent],
+                }]
+        }] });
+
+class ElementRendererModule {
+}
+ElementRendererModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementRendererModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementRendererModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: ElementRendererModule, declarations: [ElementRendererComponent], exports: [ElementRendererComponent] });
+ElementRendererModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementRendererModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementRendererModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementRendererComponent],
+                    exports: [ElementRendererComponent],
+                }]
+        }] });
+
+class ElementChildrenComponent {
+    constructor(elementContext, runtimeService, runtimeEditorService, cdr) {
+        this.elementContext = elementContext;
+        this.runtimeService = runtimeService;
+        this.runtimeEditorService = runtimeEditorService;
+        this.cdr = cdr;
+        this.destroyed$ = new Subject();
+        const path = this.elementContext?.metadata?.path;
+        this.metadata$ = path ? this.runtimeService.getCompiledElement$(path) : of(undefined);
+        this.dragMode$ = combineLatest([this.runtimeEditorService.editorMode$, this.runtimeEditorService.dragMode$]).pipe(map(flags => flags.every(Boolean)));
+        this.runtimeService.updated$.pipe(takeUntil(this.destroyed$)).subscribe(() => this.cdr.detectChanges());
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+}
+ElementChildrenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenComponent, deps: [{ token: ElementContextService }, { token: RuntimeService }, { token: RuntimeEditorService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ElementChildrenComponent, selector: "element-children", ngImport: i0, template: "<ng-container *ngIf=\"metadata$ | async as metadata\">\n  <vl-element-drop-handle *ngIf=\"dragMode$ | async\" [index]=\"0\" [parentPath]=\"metadata.path\"></vl-element-drop-handle>\n  <ng-container *ngFor=\"let child of metadata.children; let i = index\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n    <vl-element-drop-handle\n      *ngIf=\"dragMode$ | async\"\n      [index]=\"i + 1\"\n      [parentPath]=\"metadata.path\"\n    ></vl-element-drop-handle>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }, { kind: "component", type: ElementDropHandleComponent, selector: "vl-element-drop-handle", inputs: ["index", "parentPath"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'element-children', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"metadata$ | async as metadata\">\n  <vl-element-drop-handle *ngIf=\"dragMode$ | async\" [index]=\"0\" [parentPath]=\"metadata.path\"></vl-element-drop-handle>\n  <ng-container *ngFor=\"let child of metadata.children; let i = index\">\n    <vl-cms-element-renderer [meta]=\"child\"></vl-cms-element-renderer>\n    <vl-element-drop-handle\n      *ngIf=\"dragMode$ | async\"\n      [index]=\"i + 1\"\n      [parentPath]=\"metadata.path\"\n    ></vl-element-drop-handle>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:contents}\n"] }]
+        }], ctorParameters: function () { return [{ type: ElementContextService }, { type: RuntimeService }, { type: RuntimeEditorService }, { type: i0.ChangeDetectorRef }]; } });
+
+class ElementChildrenModule {
+}
+ElementChildrenModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [LetDirectiveModule, ElementRendererModule, ElementDropHandleModule], exports: [ElementChildrenComponent] });
+ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenModule, imports: [LetDirectiveModule, ElementRendererModule, ElementDropHandleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ElementChildrenComponent],
+                    imports: [LetDirectiveModule, ElementRendererModule, ElementDropHandleModule],
+                    exports: [ElementChildrenComponent],
+                }]
+        }] });
+
+class PreviewModule {
+}
+PreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: PreviewModule, declarations: [PreviewComponent], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule, ElementDropHandleModule], exports: [PreviewComponent] });
+PreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewModule, providers: [IntegrationState], imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule, ElementDropHandleModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: PreviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PreviewComponent],
+                    imports: [CommonModule, LoaderModule, ElementRendererModule, ElementChildrenModule, ElementDropHandleModule],
+                    providers: [IntegrationState],
+                    exports: [PreviewComponent],
+                }]
+        }] });
+
+function ElementDefinition(definition) {
+    return function (constructor) {
+        return constructor;
+    };
+}
+
+// eslint-disable-next-line @angular-eslint/directive-selector
+class CustomTemplateDirective {
+    constructor(templateRef, templatesService) {
+        this.templateRef = templateRef;
+        this.templatesService = templatesService;
+    }
+    ngAfterViewInit() {
+        if (!this.customTemplate) {
+            return;
+        }
+        this.templatesService.register(this.customTemplate, this.templateRef);
+    }
+}
+CustomTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomTemplateDirective, deps: [{ token: i0.TemplateRef }, { token: TemplatesService }], target: i0.ɵɵFactoryTarget.Directive });
+CustomTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: CustomTemplateDirective, selector: "[customTemplate]", inputs: { customTemplate: "customTemplate" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[customTemplate]' }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
+                type: Input
+            }] } });
+
+class IOPlugin {
+    constructor(host) {
+        this.host = host;
+        const elementMetadata = this.host.injector.get(ELEMENT_METADATA);
+        const inputProvider = this.host.injector.get(IOProviderService);
+        const inputs = Object.entries(elementMetadata.inputs ?? {});
+        const outputs = Object.entries(elementMetadata.outputs ?? {});
+        inputs.forEach(([key, path]) => {
+            if (path && typeof path !== 'string') {
+                console.error(`The value of '${key}' input should be a string`);
+            }
+            if (elementMetadata.outputs?.[key] !== undefined) {
+                console.warn(`'${key}' appears both in inputs and outputs. To prevent inconsistent behavior please keep them unique `);
+            }
+            this.host[key] = inputProvider.connect(elementMetadata, key, path);
+        });
+        outputs.forEach(([key, path]) => {
+            if (path && typeof path !== 'string') {
+                console.error(`The value of '${key}' output should be a string`);
+            }
+            this.host[key] = inputProvider.provide(elementMetadata, key, path);
+        });
+    }
+}
+IOPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IOPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+IOPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: IOPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: IOPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
+class RegionPlugin {
+    constructor(host) {
+        this.host = host;
+        this.destroy$ = new Subject();
+        this.metadata = this.host.injector.get(ELEMENT_METADATA);
+        this.document = this.host.injector.get(DOCUMENT);
+        this.el = this.host.injector.get(ElementRef);
+        const runtimeEditorService = this.host.injector.get(RuntimeEditorService);
+        runtimeEditorService.editorMode$
+            .pipe(tap(editMode => {
+            this.el.nativeElement.style.outline = editMode ? 'solid 1px #dce5ef' : '';
+            if (editMode && !this.metadata.children.length) {
+                this.addRegionName();
+            }
+            else {
+                this.regionNameEl?.remove();
+            }
+        }), takeUntil(this.destroy$))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    addRegionName() {
+        if (this.regionNameEl) {
+            this.regionNameEl.remove();
+        }
+        this.regionNameEl = this.document.createElement('div');
+        this.regionNameEl.innerHTML = this.metadata.name;
+        merge(this.regionNameEl.style, {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#AEB5BD',
+            pointerEvents: 'none',
+            userSelect: 'none',
+        });
+        this.el.nativeElement.append(this.regionNameEl);
+    }
+}
+RegionPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RegionPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+RegionPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: RegionPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RegionPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
+class ScriptPlugin {
+    constructor(host) {
+        this.host = host;
+        this.normalizeImports = (script, elementPath) => {
+            const regexp = new RegExp(`import([ \\n\\t]*(?:[^ \\n\\t\\{\\}]+[ \\n\\t]*,?)?(?:[ \\n\\t]*\\{(?:[ \\n\\t]*[^ \\n\\t"'\\{\\}]+[ \\n\\t]*,?)+\\})?[ \\n\\t]*)from[ \\n\\t]*(['"])([^'"\\n]+)(?:['"]);`, 'g');
+            const result = script.replace(regexp, (match, g1, g2, src) => {
+                const imports = g1
+                    .trim()
+                    .slice(1, -1)
+                    .split(',')
+                    .map(item => item.trim());
+                imports.forEach(item => {
+                    if (!this.vendorMap[src]?.[item]) {
+                        throw new Error(`Failed to import ${item} from '${src}' in ${elementPath}/script.ts`);
+                    }
+                });
+                return `const ${g1} = vendor['${src}'];`;
+            });
+            return result;
+        };
+        this.document = this.host.injector.get(DOCUMENT);
+        this.vendorMap = this.host.injector.get(VENDOR_MAP);
+        const elementMetadata = this.host.injector.get(ELEMENT_METADATA);
+        const sharedElementMetadata = this.host.injector.get(SHARED_ELEMENT_METADATA);
+        this.addScript(sharedElementMetadata);
+        this.addScript(elementMetadata);
+    }
+    addScript(metadata) {
+        if (!metadata?.script) {
+            return;
+        }
+        const id = btoa(UUID.UUID());
+        const script = this.document.createElement('script');
+        script.type = `text/javascript`;
+        let scriptContent = this.normalizeImports(metadata.script, metadata.path ?? metadata.name);
+        const classMatch = /export class (\S+)/.exec(scriptContent);
+        const className = classMatch?.[1];
+        if (!classMatch || !className) {
+            console.error("Script doesn't have exported class");
+            return;
+        }
+        scriptContent = scriptContent.replace(classMatch[0], `class ${className}`);
+        script.text = `var ${id} = function(vendor) {${scriptContent}
+        return ${className}; };`;
+        this.document.body.appendChild(script);
+        const ScriptClass = window[id](this.vendorMap);
+        if (ScriptClass instanceof Object) {
+            this.host.registerPlugin(new ScriptClass(this.host));
+        }
+        this.document.body.removeChild(script);
+    }
+}
+ScriptPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ScriptPlugin, deps: [{ token: ElementComponent }], target: i0.ɵɵFactoryTarget.Directive });
+ScriptPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ScriptPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ScriptPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
+
+/*
+ * ScriptPlugin must always be the last plugin in the list to make sure user code is running after all pre-initializers.
+ */
+const CONFIG = {
+    CUSTOM: {
+        component: ElementComponent,
+        plugins: [IOPlugin, ScriptPlugin],
+    },
+    CONTAINER: {
+        component: ElementComponent,
+        defaultTemplate: '<element-children></element-children>',
+        plugins: [ScriptPlugin],
+    },
+    SERVICE: {
+        component: ElementComponent,
+        plugins: [IOPlugin, ScriptPlugin],
+        suppressTemplate: true,
+        suppressStyles: true,
+    },
+    REFERENCE: {
+        component: ElementComponent,
+        plugins: [IOPlugin, ScriptPlugin],
+        suppressTemplate: true,
+    },
+    PAGE: {
+        component: ElementComponent,
+        defaultTemplate: '<element-children></element-children>',
+        plugins: [IOPlugin, ScriptPlugin],
+    },
+    REGION: {
+        component: ElementComponent,
+        defaultTemplate: '<element-children></element-children>',
+        plugins: [IOPlugin, ScriptPlugin, RegionPlugin],
+    },
+};
+
+const EXPORTED_CLASS_REGEX = /export class (\S+)/;
+const METADATA_DECORATOR_REGEX = /@ElementDefinition\(([\s\S]+)\)(\n|\r\n|.)*export class/g;
+class UiBuildError extends Error {
+    constructor(message, affectedMetadata) {
+        super(message);
+        this.name = this.constructor.name;
+        this.affectedMetadata = affectedMetadata;
+    }
+}
+const elementToMetadata = (el, parentPath) => {
+    const script = el.script && window.atob(el.script);
+    const template = el.template && window.atob(el.template);
+    const styles = el.styles && window.atob(el.styles);
+    const exportedClassName = script && (EXPORTED_CLASS_REGEX.exec(script) ?? [])[1];
+    if (!exportedClassName) {
+        throw new Error("Script doesn't have exported class");
+    }
+    const elementMetadata = extractElementMetadata(script || '');
+    const path = (parentPath ? parentPath + '/' : '') + elementMetadata.name;
+    return {
+        ...elementMetadata,
+        path,
+        script: script?.replace(METADATA_DECORATOR_REGEX, 'export class'),
+        template,
+        styles,
+        children: el.children.map(child => elementToMetadata(child, path)),
+    };
+};
+const metadataToElement = (metadata, recursive = true) => {
+    const cleanMetadata = omit(metadata, [
+        'path',
+        'template',
+        'styles',
+        'script',
+        'metadata',
+    ]);
+    const elMetadata = {
+        ...cleanMetadata,
+        children: metadata.children.map(({ name }) => name),
+    };
+    const normalizedElMetadata = normalizeElementMetadata(elMetadata);
+    if (!metadata.script || !EXPORTED_CLASS_REGEX.test(metadata.script)) {
+        throw new UiBuildError(`'${metadata.name}' component script is missing an exported class`, metadata);
+    }
+    const script = metadata.script &&
+        window.btoa(metadata.script.replace(EXPORTED_CLASS_REGEX, `@ElementDefinition(${stringifyElementMetadata(normalizedElMetadata)})\nexport class Script`));
+    const template = metadata.template && window.btoa(metadata.template);
+    const styles = metadata.styles && window.btoa(metadata.styles);
+    return {
+        script,
+        template,
+        styles,
+        children: recursive ? metadata.children.map(meta => metadataToElement(meta)) : [],
+    };
+};
+const normalizeElementMetadata = (elementMetadata) => {
+    const metadata = { ...elementMetadata };
+    // model
+    const { lineItem, path } = metadata.model ?? {};
+    const model = lineItem ? { lineItem } : path ? { path } : undefined;
+    if (model) {
+        metadata.model = model;
+    }
+    else {
+        delete metadata.model;
+    }
+    // module
+    if (!metadata.module) {
+        delete metadata.module;
+    }
+    // reference
+    if (!metadata.reference) {
+        delete metadata.reference;
+    }
+    // inputs
+    const inputs = Object.entries(metadata.inputs ?? {}).reduce((acc, [key, value]) => {
+        return { ...acc, [key]: value || null };
+    }, {});
+    if (inputs && Object.keys(inputs).length > 0) {
+        metadata.inputs = inputs;
+    }
+    else {
+        delete metadata.inputs;
+    }
+    // outputs
+    const outputs = Object.entries(metadata.outputs ?? {}).reduce((acc, [key, value]) => {
+        return { ...acc, [key]: value || null };
+    }, {});
+    if (outputs && Object.keys(outputs).length > 0) {
+        metadata.outputs = outputs;
+    }
+    else {
+        delete metadata.outputs;
+    }
+    // children
+    if (!metadata.children?.length) {
+        delete metadata.children;
+    }
+    // isShared
+    if (!metadata.isShared) {
+        delete metadata.isShared;
+    }
+    // configuredStyles
+    if (!metadata.configuredStyles) {
+        delete metadata.configuredStyles;
+    }
+    return metadata;
+};
+const extractElementMetadata = (script) => {
+    const metadataString = (METADATA_DECORATOR_REGEX.exec(script) ?? [])[1];
+    // need to reset regex last index to prevent null result for next execution
+    METADATA_DECORATOR_REGEX.lastIndex = 0;
+    return new Function(`return ${metadataString}`)();
+};
+const extendElementMetadata = (script, extend) => {
+    const metadataString = (METADATA_DECORATOR_REGEX.exec(script) ?? [])[1];
+    // need to reset regex last index to prevent null result for next execution
+    METADATA_DECORATOR_REGEX.lastIndex = 0;
+    if (!metadataString) {
+        return script;
+    }
+    const updated = { ...new Function(`return ${metadataString}`)(), ...extend };
+    return script.replace(metadataString, stringifyElementMetadata(updated));
+};
+const getElementConfig = (type) => {
+    return CONFIG[type];
+};
+const doesElementSupportIO = (type) => {
+    return getElementConfig(type).plugins?.includes(IOPlugin) ?? false;
+};
+function stringifyElementMetadata(elementMetadata) {
+    const cleaned = JSON.stringify(elementMetadata, null, 2);
+    return cleaned.replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, function (match) {
+        return match.replace(/"/g, '');
+    });
+}
+const isValidScript = (script) => {
+    if (!script) {
+        return false;
+    }
+    const exportedClassName = script && (EXPORTED_CLASS_REGEX.exec(script) ?? [])[1];
+    if (!exportedClassName) {
+        return false;
+    }
+    const meta = extractElementMetadata(script);
+    if (!meta.name || !meta.type) {
+        return false;
+    }
+    return true;
+};
+function flattenElements(elements) {
+    return flatten(elements.map(el => [el, ...flattenElements(el.children)]));
+}
+function isSharedElement(el) {
+    return Boolean(el.isShared) && el.type !== 'REFERENCE';
+}
+
+class ConfigurationPlugin {
+    constructor(host) {
+        this.host = host;
+        this.destroy$ = new Subject();
+        this.elementMetadata = this.host.injector.get(ELEMENT_METADATA);
+        this.configurationService = this.host.injector.get(ConfigurationService);
+        if (this.elementMetadata.model?.lineItem) {
+            this.host.model$.pipe(takeUntil(this.destroy$)).subscribe(model => (this.modelSnapshot = model));
+            const pathBlocks = parseBoundPath(this.elementMetadata.model?.lineItem);
+            const { type, property, name } = pathBlocks.reverse()[0];
+            this.host.boundName = name ?? type;
+            this.register(type, property, name);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    register(type, property, name) {
+        if (!type) {
+            return;
+        }
+        if (!property) {
+            this.registerType();
+        }
+        else if (property === 'ports' && name) {
+            this.registerPort(name);
+        }
+        else if (property === 'attributes' && name) {
+            this.registerAttribute(name);
+        }
+    }
+    registerType() {
+        const remove = () => {
+            const rootLineItem = this.configurationService.getSnapshot();
+            if (!rootLineItem || !this.modelSnapshot) {
+                return;
+            }
+            this.configurationService.patch(new LineItemWorker(rootLineItem).remove(this.modelSnapshot.id).li);
+        };
+        const updateQty = (qty) => {
+            const rootLineItem = this.configurationService.getSnapshot();
+            if (!rootLineItem || !this.modelSnapshot) {
+                return;
+            }
+            this.configurationService.patch(new LineItemWorker(rootLineItem).replace({ ...this.modelSnapshot, qty }).li);
+        };
+        this.typeHost.remove = remove;
+        this.typeHost.updateQty = updateQty;
+    }
+    registerPort(name) {
+        const model$ = this.host.model$;
+        const portItems$ = model$.pipe(map(model => model?.lineItems.filter(li => li.port === this.host.boundName) ?? []));
+        const portDomain$ = model$.pipe(map(model => model?.portDomains[this.host.boundName]));
+        const add = (type, attributes = []) => {
+            if (!this.modelSnapshot) {
+                return;
+            }
+            const portDomain = this.modelSnapshot.portDomains[name];
+            if (!portDomain) {
+                return;
+            }
+            const generated = generateLineItem(portDomain.name, type, this.modelSnapshot.id, attributes);
+            this.configurationService.patch(new LineItemWorker(this.modelSnapshot).insert(this.modelSnapshot.id, generated).li);
+        };
+        this.portHost.portItems$ = portItems$;
+        this.portHost.portDomain$ = portDomain$;
+        this.portHost.addPortItem = add;
+    }
+    registerAttribute(name) {
+        if (!this.host.model$) {
+            return;
+        }
+        const value$ = this.host.model$.pipe(map(model => getAttributeValue(model?.attributes ?? [], name)));
+        const patch = (value) => {
+            if (!this.modelSnapshot) {
+                return;
+            }
+            this.configurationService.patch(new LineItemWorker(this.modelSnapshot).patchAttribute([{ name, value }]).li);
+        };
+        this.attributeHost.value$ = value$;
+        this.attributeHost.patch = patch;
+    }
+    get attributeHost() {
+        return this.host;
+    }
+    get typeHost() {
+        return this.host;
+    }
+    get portHost() {
+        return this.host;
+    }
+}
+ConfigurationPlugin.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfigurationPlugin, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+ConfigurationPlugin.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: ConfigurationPlugin, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfigurationPlugin, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }]; } });
+
+const DEFAULT_PLUGINS = {
+    CONFIGURATION: [ConfigurationPlugin],
+    DEFAULT: [],
+};
+
+const LAYOUT = {
+    LAYOUT_1: {
+        styles: `
+/* start of LAYOUT_1 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "header" auto
+    "main" 1fr
+    "footer" auto
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    min-height: 80px;
+    grid-area: header;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: main;
+  }
+
+  &:nth-child(3) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_1 styles */
+`,
+    },
+    LAYOUT_2: {
+        styles: `
+/* start of LAYOUT_2 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "header header" auto
+    "left right" 1fr
+    "footer footer" auto
+    / 1fr 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    min-height: 80px;
+    grid-area: header;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: left;
+  }
+
+  &:nth-child(3) > vl-element {
+    grid-area: right;
+  }
+
+  &:nth-child(4) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_2 styles */
+`,
+    },
+    LAYOUT_3: {
+        styles: `
+/* start of LAYOUT_3 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "main" 1fr
+    "footer" auto
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    grid-area: main;
+  }
+
+  &:nth-child(2) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_3 styles */
+`,
+    },
+    LAYOUT_4: {
+        styles: `
+/* start of LAYOUT_4 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "left right" 1fr
+    "footer footer" auto
+    / auto auto;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    grid-area: left;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: right;
+  }
+
+  &:nth-child(3) > vl-element {
+    min-height: 80px;
+    grid-area: footer;
+  }
+}
+/* end of LAYOUT_4 styles */
+`,
+    },
+    LAYOUT_5: {
+        styles: `
+/* start of LAYOUT_5 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "header" auto
+    "main" 1fr
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    min-height: 80px;
+    grid-area: header;
+  }
+
+  &:nth-child(2) > vl-element {
+    grid-area: main;
+  }
+}
+/* end of LAYOUT_5 styles */
+`,
+    },
+    LAYOUT_6: {
+        styles: `
+/* start of LAYOUT_6 styles */
+:host {
+  height: 100%;
+  display: grid;
+  grid:
+    "main" 1fr
+    / 1fr;
+  gap: 10px;
+  padding: 10px;
+}
+
+:host ::ng-deep element-children > vl-cms-element-renderer {
+  &:nth-child(1) > vl-element {
+    grid-area: main;
+  }
+}
+/* end of LAYOUT_6 styles */
+`,
+    },
+};
+
+const VELOCE_LIBS = {
+    '@veloceapps/core': {
+        isDefined,
+        Operator,
+        Predicate,
+        parseJsonSafely,
+    },
+    '@veloceapps/components': {
+        ToastService,
+    },
+    '@veloceapps/api': {
+        SalesforceApiService,
+        QuoteApiService,
+        DocumentTemplatesApiService,
+        DocumentAttachmentApiService,
+        RampApiService,
+        CatalogApiService,
+        DeltaApiService,
+        PicklistsApiService,
+        PriceApiService,
+        ShoppingCartSettingsApiService,
+        ConfigurationSettingsApiService,
+        GuidedSellingApiService,
+    },
+    '@veloceapps/sdk/core': {
+        ConfigurationService,
+        QuoteDraftService,
+        FlowConfigurationService,
+        LineItemWorker,
+        ProductImagesService,
+        ContextService,
+        ...lineItemUtils,
+    },
+    '@veloceapps/sdk/cms': {
+        ...cmsInjectionTokens,
+        ...cmsActions,
+        TemplatesService,
+        IntegrationState,
+        ResourcesService,
+    },
+};
+const VELOCE_LIBS_BACKWARDS_COMPATIBLE = Object.entries(VELOCE_LIBS).reduce((trunk, [key, value]) => ({ ...trunk, [key.replace('@veloceapps/', '@veloce/')]: value }), {});
+const vendorMap = {
+    ...VELOCE_LIBS,
+    // TODO: remove when projects/demos are migrated to @veloceapps organization libraries
+    ...VELOCE_LIBS_BACKWARDS_COMPATIBLE,
+    '@angular/core': i0,
+    '@angular/forms': angularForms,
+    rxjs: rxjs,
+    'rxjs/operators': rxjsOperators,
+    lodash: lodash,
+};
+
+class ElementsResolver {
+    constructor(uiDef, elements, sharedElements = []) {
+        this.uiDef = uiDef;
+        this.renderableElements = [];
+        this.sharedElements = [];
+        const transpiledElements = this.transpileScripts(elements);
+        const transpiledSharedElements = this.transpileScripts(sharedElements);
+        this.sharedElements = this.flattenElements(transpiledElements)
+            .filter(el => this.isSharedElement(el))
+            .concat(transpiledSharedElements);
+        this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(isDefined);
+        this.renderableElements = this.getRenderableElements(this.elements);
+    }
+    addElement(element) {
+        if (element.isShared) {
+            return;
+        }
+        const transpiledElements = this.transpileScripts([element]);
+        this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(isDefined);
+        this.renderableElements = this.getRenderableElements(this.elements);
+    }
+    getNgComponents() {
+        return this.renderableElements.map(el => this.resolveElement(el)).filter(isDefined);
+    }
+    transpile(el) {
+        if (!el.script) {
+            return;
+        }
+        const transformed = transform(el.script, {
+            filename: el.name + '.ts',
+            presets: ['typescript'],
+            sourceMaps: 'inline',
+        });
+        return transformed.code ?? undefined;
+    }
+    transpileScripts(elements) {
+        return elements.map(el => ({
+            ...el,
+            script: this.transpile(el),
+            children: this.transpileScripts(el.children),
+        }));
+    }
+    flattenElements(elements) {
+        return flatten(elements.map(el => [el, ...this.flattenElements(el.children)]));
+    }
+    isSharedElement(el) {
+        return Boolean(el.isShared) && el.type !== 'REFERENCE';
+    }
+    getRenderableElements(elements) {
+        const renderable = [];
+        for (const el of elements) {
+            if (!this.isSharedElement(el)) {
+                const children = el.children.filter(child => !this.isSharedElement(child));
+                const renderableChildren = this.getRenderableElements(children);
+                renderable.push({ ...el, children }, ...renderableChildren);
+            }
+        }
+        return renderable;
+    }
+    getSharedElement(element) {
+        if (!element.reference) {
+            return;
+        }
+        return this.sharedElements.find(el => element.reference === el.name);
+    }
+    resolveElementTemplate(element) {
+        const config = CONFIG[element.type];
+        const template = !config.suppressTemplate ? element.template : '';
+        return template || config.defaultTemplate || '';
+    }
+    resolveElementStyles(element) {
+        const config = CONFIG[element.type];
+        let styles = !config.suppressStyles ? element.styles ?? '' : '';
+        const layout = element.layout && LAYOUT[element.layout];
+        if (layout?.styles) {
+            styles += layout.styles;
+        }
+        return styles;
+    }
+    processElementMetadata(sourceElement) {
+        let finalElement;
+        if (sourceElement.type === 'REFERENCE') {
+            const sharedElement = this.getSharedElement(sourceElement);
+            if (!sharedElement) {
+                console.warn(`Shared element "${sourceElement.reference}" not found`);
+                return;
+            }
+            finalElement = {
+                ...sourceElement,
+                children: this.getSharedChildren(sharedElement.children, sourceElement.path),
+                type: sharedElement.type,
+                template: sharedElement.template,
+                styles: (sharedElement.styles ?? '') + '\n' + (sourceElement.styles ?? ''),
+                inputs: {
+                    ...sharedElement.inputs,
+                    ...sourceElement.inputs,
+                },
+                outputs: {
+                    ...sharedElement.outputs,
+                    ...sourceElement.outputs,
+                },
+            };
+        }
+        else {
+            finalElement = sourceElement;
+            delete sourceElement.reference;
+        }
+        finalElement.template = this.resolveElementTemplate(finalElement);
+        finalElement.styles = this.resolveElementStyles(finalElement);
+        return {
+            ...finalElement,
+            children: finalElement.children.map(child => this.processElementMetadata(child)).filter(isDefined),
+        };
+    }
+    getSharedChildren(children, parentPath) {
+        return children.map(c => {
+            if (!c.path) {
+                return c;
+            }
+            const [elName] = c.path.split('/').reverse();
+            const path = parentPath + '/' + elName;
+            return {
+                ...c,
+                path,
+                children: this.getSharedChildren(c.children, path),
+            };
+        });
+    }
+    resolveElement(element) {
+        const config = CONFIG[element.type];
+        const defaultPlugins = DEFAULT_PLUGINS[this.uiDef.type] ?? [];
+        if (!config) {
+            console.warn(`Unknown element type "${element.type}"`);
+            return;
+        }
+        const styles = this.getElementStyles(element);
+        const component = {
+            selector: 'vl-element',
+            template: element.template,
+            ...(styles ? { styles: [styles] } : {}),
+            providers: [
+                { provide: DEFAULT_PLUGINS_TOKEN, useValue: defaultPlugins },
+                { provide: UI_DEFINITION_METADATA, useValue: this.uiDef },
+                { provide: ELEMENT_METADATA, useValue: element },
+                { provide: SHARED_ELEMENT_METADATA, useValue: this.getSharedElement(element) },
+                { provide: ELEMENT_CONFIG, useValue: config },
+                { provide: VENDOR_MAP, useValue: vendorMap },
+            ],
+        };
+        const cmp = Component(component)(class C extends config.component {
+        });
+        set(cmp, 'path', element.path);
+        return cmp;
+    }
+    getElementStyles(element) {
+        let result = '';
+        const configuredStyles = this.convertInlineStylesToCSS(element.configuredStyles);
+        if (configuredStyles) {
+            // order is important: styles written by user in CSS code should has higher priority
+            result += configuredStyles;
+        }
+        if (element.styles) {
+            result += element.styles;
+        }
+        return result || undefined;
+    }
+    convertInlineStylesToCSS(styles) {
+        if (!styles) {
+            return '';
+        }
+        const entries = Object.entries(styles);
+        let result = ':host {\n';
+        entries.forEach(([style, value]) => {
+            result += `  ${kebabCase(style)}:${value};\n`;
+        });
+        result += '}\n';
+        return result;
+    }
+}
+
+class FederatedHostDirective {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+FederatedHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+FederatedHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: FederatedHostDirective, selector: "[vlFederatedHost]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedHostDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[vlFederatedHost]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+const defaultOptions = {
+    suppressLoading: false,
+    loadingLabel: 'LOADING',
+};
+
+class FederatedComponent {
+    constructor(injector) {
+        this.injector = injector;
+        this.isLoading$ = new BehaviorSubject(false);
+        // configs
+        this.suppressLoading = defaultOptions.suppressLoading;
+        this.loadingLabel = defaultOptions.loadingLabel;
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] && this.instance) {
+            this.instance.data = this.data;
+        }
+        if (changes['options']) {
+            this.suppressLoading = this.options?.suppressLoading ?? defaultOptions.suppressLoading;
+            this.loadingLabel = this.options?.loadingLabel ?? defaultOptions.loadingLabel;
+        }
+    }
+    ngOnInit() {
+        this.isLoading$.next(true);
+    }
+    ngAfterViewInit() {
+        const remoteEntry = this.options?.remoteEntry ?? this.remoteEntry;
+        const exposedModule = this.options?.exposedModule ?? this.exposedModule;
+        if (!remoteEntry || !exposedModule) {
+            return;
+        }
+        loadRemoteModule({ type: 'module', remoteEntry, exposedModule }).then(federated => {
+            const moduleRef = createNgModule(federated[exposedModule], this.injector);
+            const componentRef = this.host.viewContainerRef.createComponent(federated[exposedModule].rootComponent, { ngModuleRef: moduleRef });
+            componentRef.instance.data = this.data;
+            this.options?.onReady?.();
+            this.isLoading$.next(false);
+        });
+    }
+}
+FederatedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FederatedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: FederatedComponent, selector: "veloce-host-federated", inputs: { remoteEntry: "remoteEntry", remoteName: "remoteName", exposedModule: "exposedModule", data: "data", options: "options" }, viewQueries: [{ propertyName: "host", first: true, predicate: FederatedHostDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template vlFederatedHost></ng-template>\n\n<vl-loader *ngIf=\"!suppressLoading && (isLoading$ | async)\" [label]=\"loadingLabel\"></vl-loader>\n", styles: [":host{display:block}div{height:100%}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.LoaderComponent, selector: "vl-loader", inputs: ["label", "overlayVisible"] }, { kind: "directive", type: FederatedHostDirective, selector: "[vlFederatedHost]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'veloce-host-federated', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vlFederatedHost></ng-template>\n\n<vl-loader *ngIf=\"!suppressLoading && (isLoading$ | async)\" [label]=\"loadingLabel\"></vl-loader>\n", styles: [":host{display:block}div{height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { host: [{
+                type: ViewChild,
+                args: [FederatedHostDirective, { static: true }]
+            }], remoteEntry: [{
+                type: Input
+            }], remoteName: [{
+                type: Input
+            }], exposedModule: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class FederatedModule {
+}
+FederatedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FederatedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: FederatedModule, declarations: [FederatedComponent, FederatedHostDirective], imports: [CommonModule, LoaderModule], exports: [FederatedComponent] });
+FederatedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedModule, imports: [CommonModule, LoaderModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FederatedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FederatedComponent, FederatedHostDirective],
+                    imports: [CommonModule, LoaderModule],
+                    exports: [FederatedComponent],
+                }]
+        }] });
+
+class CompilationService {
+    constructor(compiler) {
+        this.compiler = compiler;
+    }
+    compileUIDefinition$(uiDefinition) {
+        return of([]).pipe(switchMap(() => {
+            const { children, pages, components, ...uiDefinitionMeta } = uiDefinition;
+            this.uiDefinitionMeta = uiDefinitionMeta;
+            const elements = [...(children ?? []), ...(pages ?? [])];
+            const sharedElements = components ?? [];
+            const metadata = elements.map(element => elementToMetadata(element));
+            const sharedMetadata = sharedElements.map(element => elementToMetadata(element));
+            this.elementsResolver = new ElementsResolver(uiDefinition, metadata, sharedMetadata);
+            const module = this.getModule(this.elementsResolver.getNgComponents());
+            return combineLatest([
+                from(this.compiler.compileModuleAndAllComponentsAsync(module)),
+                of(this.elementsResolver),
+            ]);
+        }), map(([module, elementsResolver]) => ({ module, elements: elementsResolver.elements })));
+    }
+    compileElement$(element) {
+        if (!this.uiDefinitionMeta) {
+            throw 'No UI Definition context';
+        }
+        return of(this.uiDefinitionMeta).pipe(switchMap(uiDefinition => {
+            const elementsResolver = this.elementsResolver ?? new ElementsResolver(uiDefinition, []);
+            elementsResolver.addElement(element);
+            const module = this.getModule(elementsResolver.getNgComponents());
+            return combineLatest([from(this.compiler.compileModuleAndAllComponentsAsync(module)), of(elementsResolver)]);
+        }), map(([module, elementsResolver]) => ({ module, elements: elementsResolver.elements })));
+    }
+    clearModuleCache(modules) {
+        modules.forEach(module => this.compiler.clearCacheFor(module));
+        this.uiDefinitionMeta = undefined;
+    }
+    getModule(components) {
+        const staticComponents = [
+            ElementChildrenComponent,
+            ElementRendererComponent,
+            ElementDropHandleComponent,
+            CustomTemplateDirective,
+        ];
+        let DynamicModule = class DynamicModule {
+        };
+        DynamicModule = __decorate([
+            NgModule({
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    FederatedModule,
+                    DragDropModule,
+                    DndModule,
+                    ScrollingModule,
+                ],
+                declarations: [...staticComponents, ...components],
+                jit: true,
+            })
+        ], DynamicModule);
+        return DynamicModule;
+    }
+}
+CompilationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CompilationService, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
+CompilationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CompilationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CompilationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Compiler }]; } });
+
+class RuntimeModule {
+}
+RuntimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RuntimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, imports: [CommonModule, CoreModule] });
+RuntimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, providers: [
+        DialogService,
+        RuntimeService,
+        RuntimeEditorService,
+        { provide: CMS_COMPILATION_SERVICE, useClass: CompilationService },
+    ], imports: [CommonModule, CoreModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: RuntimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, CoreModule],
+                    providers: [
+                        DialogService,
+                        RuntimeService,
+                        RuntimeEditorService,
+                        { provide: CMS_COMPILATION_SERVICE, useClass: CompilationService },
+                    ],
+                }]
+        }] });
+
+class LauncherModule {
+}
+LauncherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LauncherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LauncherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: LauncherModule, imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule, RuntimeModule, PreviewModule], exports: [PreviewModule] });
+LauncherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LauncherModule, providers: [IntegrationState, DialogService, ResourcesService], imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule, RuntimeModule, PreviewModule, PreviewModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: LauncherModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, CoreModule, ApiModule, SdkCoreModule, RuntimeModule, PreviewModule],
+                    providers: [IntegrationState, DialogService, ResourcesService],
+                    exports: [PreviewModule],
+                }]
+        }] });
+
+const migrations = {
+    2: () => {
+        throw 'Migration from Legacy UI definition is not possible';
+    },
+    3: uiDef => {
+        const children = uiDef.children ?? [];
+        return {
+            ...uiDef,
+            children: undefined,
+            pages: children,
+            version: 3,
+        };
+    },
+};
+
+class MigrationsService {
+    constructor(toastService) {
+        this.toastService = toastService;
+    }
+    migrateUIDefinition(uiDef) {
+        const currentVersion = uiDef.version;
+        const targetVersion = UI_DEFINITION_VERSION;
+        const migrateVersions = Object.keys(migrations)
+            .reduce((acc, version) => {
+            const v = Number(version);
+            if (v > currentVersion && v <= targetVersion) {
+                acc.push(v);
+            }
+            return acc;
+        }, [])
+            .sort();
+        try {
+            let result = cloneDeep(uiDef);
+            for (const version of migrateVersions) {
+                result = migrations[version](result);
+            }
+            return result;
+        }
+        catch (e) {
+            this.toastService.add({ summary: String(e), severity: ToastType.error });
+            return;
+        }
+    }
+}
+MigrationsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MigrationsService, deps: [{ token: i1.ToastService }], target: i0.ɵɵFactoryTarget.Injectable });
+MigrationsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MigrationsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MigrationsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i1.ToastService }]; } });
+
+class MigrationsModule {
+}
+MigrationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MigrationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MigrationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: MigrationsModule });
+MigrationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MigrationsModule, providers: [MigrationsService] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: MigrationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [MigrationsService],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApplyProductConfigurationAction, CloseDocGenAction, CmsAction, ConfigureProductAction, DEFAULT_PLUGINS_TOKEN, ELEMENT_CONFIG, ELEMENT_METADATA, ElementComponent, ElementDefinition, ElementsResolver, FlowAction, IntegrationState, LauncherModule, MigrationsModule, MigrationsService, NavigateBackAction, NavigateToCatalogAction, OpenDocGenAction, PreviewComponent, PreviewModule, RemoteApplyAction, RemoteCancelAction, ResourcesService, RuntimeEditorService, RuntimeModule, SHARED_ELEMENT_METADATA, SwitchObjectAction, TemplatesService, UI_DEFINITION_METADATA, UiBuildError, VENDOR_MAP, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, getElementUniqueName, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
+//# sourceMappingURL=veloceapps-sdk-cms.mjs.map