@veloceapps/sdk 7.0.2-17 → 7.0.2-19

package/fesm2015/veloceapps-sdk-cms.mjs

@@ -7,7 +7,7 @@ import lodash, { compact, isArray, pull, merge, omit, flatten, set, kebabCase, c
 import { getCollectionUniqueName, UUID, isDefined, Operator, Predicate, parseJsonSafely, CoreModule } from '@veloceapps/core';
 import { applyPatch } from 'rfc6902';
 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 { ConfigurationService, QuoteDraftService, FlowConfigurationService, LineItemWorker, ProductImagesService, ContextService, lineItemUtils, generateLineItem, getAttributeValue, SdkCoreModule, UI_DEFINITION_VERSION } from '@veloceapps/sdk/core';
 import * as i3 from 'primeng/api';
 import * as i5 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
@@ -21,8 +21,8 @@ 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 { transform } from '@babel/standalone';
 import { loadRemoteModule } from '@angular-architects/module-federation';
 
 var FlowAction;
@@ -69,16 +69,25 @@ const SwitchObjectAction = (payload) => ({
 var CmsAction;
 (function (CmsAction) {
     CmsAction.GO_TO_PAGE = '[CMS]_GO_TO_PAGE';
+    CmsAction.UPDATE_CUSTOMIZATION = '[CMS]_UPDATE_CUSTOMIZATION';
     /**
      * 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 },
     });
+    /**
+     * Update UI definition customization state
+     *
+     * @param pageName name of the page
+     */
+    CmsAction.UpdateCustomization = (value) => ({
+        type: CmsAction.UPDATE_CUSTOMIZATION,
+        payload: { value },
+    });
 })(CmsAction || (CmsAction = {}));
 
 var cmsActions = /*#__PURE__*/Object.freeze({
@@ -101,7 +110,6 @@ 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,
@@ -109,8 +117,7 @@ var cmsInjectionTokens = /*#__PURE__*/Object.freeze({
     ELEMENT_CONFIG: ELEMENT_CONFIG,
     ELEMENT_METADATA: ELEMENT_METADATA,
     SHARED_ELEMENT_METADATA: SHARED_ELEMENT_METADATA,
-    UI_DEFINITION_METADATA: UI_DEFINITION_METADATA,
-    VENDOR_MAP: VENDOR_MAP
+    UI_DEFINITION_METADATA: UI_DEFINITION_METADATA
 });
 
 class Entity {
@@ -307,7 +314,7 @@ class RuntimeService {
         if (!uiDefinition) {
             return of([]);
         }
-        return this.compilationService.compileUIDefinition$(uiDefinition).pipe(map(result => {
+        return this.compilationService.compileUIDefinition$(uiDefinition, config).pipe(map(result => {
             this.applicationTree = result.elements;
             this.componentTypes = Object.assign(Object.assign({}, this.componentTypes), result.componentTypes);
             this.moduleRefs.push(result.moduleRef);
@@ -436,12 +443,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             type: Injectable
         }] });
 
-const InitAction = { type: 'INIT' };
-const ClearAction = { type: 'CLEAR' };
 class IntegrationState {
     constructor() {
         this.stateSubj$ = new BehaviorSubject({});
-        this.action$ = new BehaviorSubject(InitAction);
+        this.action$ = new Subject();
     }
     get state$() {
         return this.stateSubj$.asObservable();
@@ -463,7 +468,6 @@ class IntegrationState {
     }
     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 });
@@ -872,13 +876,18 @@ class ElementChildrenComponent {
         this.destroyed$.next();
         this.destroyed$.complete();
     }
+    getFilteredChildren(elements) {
+        return this.filter ? this.filter(elements) : elements;
+    }
 }
 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: "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: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }, { kind: "component", type: ElementDropHandleComponent, selector: "vl-element-drop-handle", inputs: ["index", "parentPath"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElementChildrenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ElementChildrenComponent, selector: "element-children", inputs: { filter: "filter" }, 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 getFilteredChildren(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: "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: ElementRendererComponent, selector: "vl-cms-element-renderer", inputs: ["meta"] }, { kind: "component", type: ElementDropHandleComponent, selector: "vl-element-drop-handle", inputs: ["index", "parentPath"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], 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 }]; } });
+            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 getFilteredChildren(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 }]; }, propDecorators: { filter: [{
+                type: Input
+            }] } });
 
 class ElementChildrenModule {
 }
@@ -896,12 +905,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 
 class ElementToolsPanelComponent {
     constructor() {
-        var _a;
+        var _a, _b;
         this.metadata = inject(ELEMENT_METADATA);
         this.config = inject(ELEMENT_CONFIG);
         this.elementRef = inject(ElementRef);
-        this.showDeleteButton = !this.config.builder.suppressRemovable;
-        const hostRect = (_a = this.elementRef.nativeElement.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        this.showDeleteButton = !((_a = this.config.builder) === null || _a === void 0 ? void 0 : _a.suppressRemovable);
+        const hostRect = (_b = this.elementRef.nativeElement.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
         if (hostRect) {
             merge(this.elementRef.nativeElement.style, {
                 width: `${hostRect.width}px`,
@@ -1184,58 +1193,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             type: Directive
         }], ctorParameters: function () { return [{ type: ElementComponent }]; } });
 
+const VELOCE_LIBS = {
+    '@veloceapps/core': {
+        isDefined,
+        Operator,
+        Predicate,
+        parseJsonSafely,
+    },
+    '@veloceapps/components': {
+        ToastService,
+        ToastType,
+    },
+    '@veloceapps/api': {
+        SalesforceApiService,
+        QuoteApiService,
+        DocumentTemplatesApiService,
+        DocumentAttachmentApiService,
+        RampApiService,
+        CatalogApiService,
+        DeltaApiService,
+        PicklistsApiService,
+        PriceApiService,
+        ShoppingCartSettingsApiService,
+        ConfigurationSettingsApiService,
+        GuidedSellingApiService,
+    },
+    '@veloceapps/sdk/core': Object.assign({ ConfigurationService,
+        QuoteDraftService,
+        FlowConfigurationService,
+        LineItemWorker,
+        ProductImagesService,
+        ContextService }, lineItemUtils),
+    '@veloceapps/sdk/cms': Object.assign(Object.assign(Object.assign({}, cmsInjectionTokens), cmsActions), { TemplatesService,
+        IntegrationState,
+        ResourcesService }),
+};
+const VELOCE_LIBS_BACKWARDS_COMPATIBLE = Object.entries(VELOCE_LIBS).reduce((trunk, [key, value]) => (Object.assign(Object.assign({}, trunk), { [key.replace('@veloceapps/', '@veloce/')]: value })), {});
+const vendorMap = Object.assign(Object.assign(Object.assign({}, VELOCE_LIBS), VELOCE_LIBS_BACKWARDS_COMPATIBLE), { '@angular/core': i0, '@angular/forms': angularForms, rxjs: rxjs, 'rxjs/operators': rxjsOperators, lodash: lodash });
+
+const importRegexp = 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 normalizeImports = (script, elementPath) => {
+    const result = script.replace(importRegexp, (match, g1, g2, src) => {
+        const imports = g1
+            .trim()
+            .slice(1, -1)
+            .split(',')
+            .map(item => item.trim());
+        imports.forEach(item => {
+            var _a;
+            if (!((_a = vendorMap[src]) === null || _a === void 0 ? void 0 : _a[item])) {
+                throw new Error(`Failed to import ${item} from '${src}' in ${elementPath}/script.ts`);
+            }
+        });
+        return `const ${g1} = vendor['${src}'];`;
+    });
+    return result;
+};
+const getScriptClass = (metadata) => {
+    var _a;
+    if (!(metadata === null || metadata === void 0 ? void 0 : metadata.script)) {
+        return;
+    }
+    const id = btoa(UUID.UUID());
+    const script = document.createElement('script');
+    script.type = `text/javascript`;
+    let scriptContent = normalizeImports(metadata.script, metadata.path);
+    const classMatch = /export class (\S+)/.exec(scriptContent);
+    const className = classMatch === null || classMatch === void 0 ? void 0 : 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}; };`;
+    document.body.appendChild(script);
+    const ScriptClass = (_a = window === null || window === void 0 ? void 0 : window[id]) === null || _a === void 0 ? void 0 : _a.call(window, vendorMap);
+    document.body.removeChild(script);
+    return ScriptClass;
+};
+
 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 => {
-                    var _a;
-                    if (!((_a = this.vendorMap[src]) === null || _a === void 0 ? void 0 : _a[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) {
-        var _a;
         if (!(metadata === null || metadata === void 0 ? void 0 : metadata.script)) {
             return;
         }
-        const id = btoa(UUID.UUID());
-        const script = this.document.createElement('script');
-        script.type = `text/javascript`;
-        let scriptContent = this.normalizeImports(metadata.script, (_a = metadata.path) !== null && _a !== void 0 ? _a : metadata.name);
-        const classMatch = /export class (\S+)/.exec(scriptContent);
-        const className = classMatch === null || classMatch === void 0 ? void 0 : 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);
+        const ScriptClass = getScriptClass(metadata);
         if (ScriptClass instanceof Object) {
-            this.host.registerPlugin(new ScriptClass(this.host));
+            const instance = new ScriptClass(this.host);
+            this.host.registerPlugin(instance);
         }
-        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 });
@@ -1248,29 +1302,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
  * ScriptPlugin must always be the last plugin in the list to make sure user code is running after all pre-initializers.
  */
 const CONFIG = {
+    CUSTOMIZATION_PAGE: {
+        component: ElementComponent,
+        plugins: [IOPlugin, ScriptPlugin],
+    },
     CUSTOM: {
         component: ElementComponent,
         plugins: [IOPlugin, ElementHoverPlugin, ScriptPlugin],
-        builder: {},
     },
     CONTAINER: {
         component: ElementComponent,
         defaultTemplate: '<element-children></element-children>',
         plugins: [ScriptPlugin],
-        builder: {},
     },
     SERVICE: {
         component: ElementComponent,
         plugins: [IOPlugin, ScriptPlugin],
         suppressTemplate: true,
         suppressStyles: true,
-        builder: {},
     },
     REFERENCE: {
         component: ElementComponent,
         plugins: [IOPlugin, ScriptPlugin],
         suppressTemplate: true,
-        builder: {},
     },
     PAGE: {
         component: ElementComponent,
@@ -1766,47 +1820,11 @@ const LAYOUT = {
     },
 };
 
-const VELOCE_LIBS = {
-    '@veloceapps/core': {
-        isDefined,
-        Operator,
-        Predicate,
-        parseJsonSafely,
-    },
-    '@veloceapps/components': {
-        ToastService,
-        ToastType,
-    },
-    '@veloceapps/api': {
-        SalesforceApiService,
-        QuoteApiService,
-        DocumentTemplatesApiService,
-        DocumentAttachmentApiService,
-        RampApiService,
-        CatalogApiService,
-        DeltaApiService,
-        PicklistsApiService,
-        PriceApiService,
-        ShoppingCartSettingsApiService,
-        ConfigurationSettingsApiService,
-        GuidedSellingApiService,
-    },
-    '@veloceapps/sdk/core': Object.assign({ ConfigurationService,
-        QuoteDraftService,
-        FlowConfigurationService,
-        LineItemWorker,
-        ProductImagesService,
-        ContextService }, lineItemUtils),
-    '@veloceapps/sdk/cms': Object.assign(Object.assign(Object.assign({}, cmsInjectionTokens), cmsActions), { TemplatesService,
-        IntegrationState,
-        ResourcesService }),
-};
-const VELOCE_LIBS_BACKWARDS_COMPATIBLE = Object.entries(VELOCE_LIBS).reduce((trunk, [key, value]) => (Object.assign(Object.assign({}, trunk), { [key.replace('@veloceapps/', '@veloce/')]: value })), {});
-const vendorMap = Object.assign(Object.assign(Object.assign({}, VELOCE_LIBS), VELOCE_LIBS_BACKWARDS_COMPATIBLE), { '@angular/core': i0, '@angular/forms': angularForms, rxjs: rxjs, 'rxjs/operators': rxjsOperators, lodash: lodash });
-
 class ElementsResolver {
-    constructor(uiDef, elements, sharedElements = []) {
+    constructor(uiDef, elements, sharedElements = [], config) {
+        var _a;
         this.uiDef = uiDef;
+        this.config = config;
         this.renderableElements = [];
         this.sharedElements = [];
         const transpiledElements = this.transpileScripts(elements);
@@ -1816,6 +1834,7 @@ class ElementsResolver {
             .concat(transpiledSharedElements);
         this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(isDefined);
         this.renderableElements = this.getRenderableElements(this.elements);
+        this.uiDefMetadata = Object.assign(Object.assign({}, this.uiDef), { customization: (_a = this.uiDef.customization) !== null && _a !== void 0 ? _a : this.getDefaultCustomizationState() });
     }
     addElement(element) {
         if (element.isShared) {
@@ -1850,9 +1869,12 @@ class ElementsResolver {
         return Boolean(el.isShared) && el.type !== 'REFERENCE';
     }
     getRenderableElements(elements) {
+        var _a;
         const renderable = [];
         for (const el of elements) {
-            if (!this.isSharedElement(el)) {
+            // In `customizationMode` render only element with CUSTOMIZATION_PAGE type
+            const typePerMode = Boolean((_a = this.config) === null || _a === void 0 ? void 0 : _a.customizationMode) === (el.type === 'CUSTOMIZATION_PAGE');
+            if (!this.isSharedElement(el) && typePerMode) {
                 const children = el.children.filter(child => !this.isSharedElement(child));
                 const renderableChildren = this.getRenderableElements(children);
                 renderable.push(Object.assign(Object.assign({}, el), { children }), ...renderableChildren);
@@ -1913,7 +1935,7 @@ class ElementsResolver {
     resolveElement(element) {
         var _a;
         const config = CONFIG[element.type];
-        const defaultPlugins = (_a = DEFAULT_PLUGINS[this.uiDef.type]) !== null && _a !== void 0 ? _a : [];
+        const defaultPlugins = (_a = DEFAULT_PLUGINS[this.uiDefMetadata.type]) !== null && _a !== void 0 ? _a : [];
         if (!config) {
             console.warn(`Unknown element type "${element.type}"`);
             return;
@@ -1921,11 +1943,10 @@ class ElementsResolver {
         const styles = this.getElementStyles(element);
         const component = Object.assign(Object.assign({ selector: 'vl-element', template: element.template }, (styles ? { styles: [styles] } : {})), { providers: [
                 { provide: DEFAULT_PLUGINS_TOKEN, useValue: defaultPlugins },
-                { provide: UI_DEFINITION_METADATA, useValue: this.uiDef },
+                { provide: UI_DEFINITION_METADATA, useValue: this.uiDefMetadata },
                 { 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 {
         });
@@ -1956,6 +1977,14 @@ class ElementsResolver {
         result += '}\n';
         return result;
     }
+    getDefaultCustomizationState() {
+        const customizationPage = this.elements.find(el => el.type === 'CUSTOMIZATION_PAGE');
+        if (!(customizationPage === null || customizationPage === void 0 ? void 0 : customizationPage.script)) {
+            return;
+        }
+        const c = getScriptClass(customizationPage);
+        return c && 'default' in c ? c.default : undefined;
+    }
 }
 
 class FederatedHostDirective {
@@ -2063,7 +2092,7 @@ class CompilationService {
     constructor(injector) {
         this.injector = injector;
     }
-    compileUIDefinition$(uiDefinition) {
+    compileUIDefinition$(uiDefinition, config) {
         return of([]).pipe(map(() => {
             var _a, _b;
             const { children, pages, components } = uiDefinition, uiDefinitionMeta = __rest(uiDefinition, ["children", "pages", "components"]);
@@ -2072,7 +2101,7 @@ class CompilationService {
             const sharedElements = components !== null && components !== void 0 ? components : [];
             const metadata = elements.map(element => elementToMetadata(element));
             const sharedMetadata = sharedElements.map(element => elementToMetadata(element));
-            this.elementsResolver = new ElementsResolver(uiDefinition, metadata, sharedMetadata);
+            this.elementsResolver = new ElementsResolver(uiDefinition, metadata, sharedMetadata, config);
             const componentTypes = this.elementsResolver.getNgComponents();
             const module = this.getModule(componentTypes);
             return {
@@ -2233,5 +2262,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
  * 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, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
+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, doesElementSupportIO, elementToMetadata, extendElementMetadata, extractElementMetadata, findElementByModule, findElementByPath, flattenElements, getAbsolutePath, getElementConfig, insertElement, isSharedElement, isValidScript, metadataToElement, normalizeElementMetadata, parseBoundPath, parsePath, removeElement, stringifyElementMetadata };
 //# sourceMappingURL=veloceapps-sdk-cms.mjs.map