@veloceapps/sdk 7.0.2-16 → 7.0.2-18

package/fesm2020/veloceapps-sdk-cms.mjs

@@ -4,7 +4,7 @@ import { InjectionToken, Component, ChangeDetectionStrategy, Inject, Injector, I
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, Subject, of, map, tap, switchMap, startWith, distinctUntilChanged, filter, ReplaySubject, noop, take, Observable, takeUntil, forkJoin, catchError, combineLatest } 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 { ConfigurationService, QuoteDraftService, FlowConfigurationService, LineItemWorker, ProductImagesService, ContextService, lineItemUtils, generateLineItem, getAttributeValue, SdkCoreModule, UI_DEFINITION_VERSION } from '@veloceapps/sdk/core';
 import * as i3 from 'primeng/api';
 import { applyPatch } from 'rfc6902';
 import { getCollectionUniqueName, UUID, isDefined, Operator, Predicate, parseJsonSafely, CoreModule } from '@veloceapps/core';
@@ -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 {
@@ -257,7 +264,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 = {
                 ...this.componentTypes,
@@ -316,12 +323,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
             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);
+        this.action$ = new Subject();
     }
     get state$() {
         return this.stateSubj$.asObservable();
@@ -343,7 +348,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 });
@@ -864,13 +868,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 {
 }
@@ -891,7 +900,7 @@ class ElementToolsPanelComponent {
         this.metadata = inject(ELEMENT_METADATA);
         this.config = inject(ELEMENT_CONFIG);
         this.elementRef = inject(ElementRef);
-        this.showDeleteButton = !this.config.builder.suppressRemovable;
+        this.showDeleteButton = !this.config.builder?.suppressRemovable;
         const hostRect = this.elementRef.nativeElement.parentElement?.getBoundingClientRect();
         if (hostRect) {
             merge(this.elementRef.nativeElement.style, {
@@ -1001,6 +1010,7 @@ class ElementHoverPlugin {
         this.destroyed$ = new Subject();
         this.mouseOverListenerBound = this.mouseOverListener.bind(this);
         this.mouseLeaveListenerBound = this.mouseLeaveListener.bind(this);
+        this.clickListenerBound = this.clickListener.bind(this);
         combineLatest([this.runtimeEditorService.editorMode$, this.isHovered$, this.isSelected$])
             .pipe(takeUntil(this.destroyed$))
             .subscribe(([editorMode]) => {
@@ -1027,10 +1037,12 @@ class ElementHoverPlugin {
     attachListeners() {
         this.el.nativeElement.addEventListener('mouseover', this.mouseOverListenerBound);
         this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListenerBound);
+        this.el.nativeElement.addEventListener('click', this.clickListenerBound);
     }
     detachListeners() {
         this.el.nativeElement.removeEventListener('mouseover', this.mouseOverListenerBound);
         this.el.nativeElement.removeEventListener('mouseleave', this.mouseLeaveListenerBound);
+        this.el.nativeElement.removeEventListener('click', this.clickListenerBound);
     }
     mouseOverListener(e) {
         const path = e.composedPath();
@@ -1044,6 +1056,11 @@ class ElementHoverPlugin {
             this.isHovered$.next(isHovered);
         }
     }
+    clickListener(e) {
+        if (this.el.nativeElement === e.target) {
+            this.runtimeEditorService.selectedElementPath$.next(this.metadata.path);
+        }
+    }
     mouseLeaveListener() {
         this.isHovered$.next(false);
     }
@@ -1161,28 +1178,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': {
+        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,
+};
+
+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 => {
+            if (!vendorMap[src]?.[item]) {
+                throw new Error(`Failed to import ${item} from '${src}' in ${elementPath}/script.ts`);
+            }
+        });
+        return `const ${g1} = vendor['${src}'];`;
+    });
+    return result;
+};
+const getScriptClass = (metadata) => {
+    if (!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?.[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 = window?.[id]?.(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 => {
-                    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);
@@ -1192,25 +1284,11 @@ class ScriptPlugin {
         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);
+        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 });
@@ -1223,29 +1301,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,
@@ -1743,63 +1821,10 @@ 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': {
-        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 = []) {
+    constructor(uiDef, elements, sharedElements = [], config) {
         this.uiDef = uiDef;
+        this.config = config;
         this.renderableElements = [];
         this.sharedElements = [];
         const transpiledElements = this.transpileScripts(elements);
@@ -1809,6 +1834,10 @@ class ElementsResolver {
             .concat(transpiledSharedElements);
         this.elements = transpiledElements.map(el => this.processElementMetadata(el)).filter(isDefined);
         this.renderableElements = this.getRenderableElements(this.elements);
+        this.uiDefMetadata = {
+            ...this.uiDef,
+            customization: this.uiDef.customization ?? this.getDefaultCustomizationState(),
+        };
     }
     addElement(element) {
         if (element.isShared) {
@@ -1851,7 +1880,9 @@ class ElementsResolver {
     getRenderableElements(elements) {
         const renderable = [];
         for (const el of elements) {
-            if (!this.isSharedElement(el)) {
+            // In `customizationMode` render only element with CUSTOMIZATION_PAGE type
+            const typePerMode = Boolean(this.config?.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({ ...el, children }, ...renderableChildren);
@@ -1930,7 +1961,7 @@ class ElementsResolver {
     }
     resolveElement(element) {
         const config = CONFIG[element.type];
-        const defaultPlugins = DEFAULT_PLUGINS[this.uiDef.type] ?? [];
+        const defaultPlugins = DEFAULT_PLUGINS[this.uiDefMetadata.type] ?? [];
         if (!config) {
             console.warn(`Unknown element type "${element.type}"`);
             return;
@@ -1942,11 +1973,10 @@ class ElementsResolver {
             ...(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 {
@@ -1978,6 +2008,14 @@ class ElementsResolver {
         result += '}\n';
         return result;
     }
+    getDefaultCustomizationState() {
+        const customizationPage = this.elements.find(el => el.type === 'CUSTOMIZATION_PAGE');
+        if (!customizationPage?.script) {
+            return;
+        }
+        const c = getScriptClass(customizationPage);
+        return c && 'default' in c ? c.default : undefined;
+    }
 }
 
 class FederatedHostDirective {
@@ -2082,7 +2120,7 @@ class CompilationService {
     constructor(injector) {
         this.injector = injector;
     }
-    compileUIDefinition$(uiDefinition) {
+    compileUIDefinition$(uiDefinition, config) {
         return of([]).pipe(map(() => {
             const { children, pages, components, ...uiDefinitionMeta } = uiDefinition;
             this.uiDefinitionMeta = uiDefinitionMeta;
@@ -2090,7 +2128,7 @@ class CompilationService {
             const sharedElements = 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 {
@@ -2324,5 +2362,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