@veloceapps/sdk 7.0.1-0 → 7.0.1-2

package/fesm2020/veloceapps-sdk-cms.mjs

@@ -2,7 +2,7 @@ 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 { 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 * as i3 from 'primeng/api';
@@ -261,8 +261,8 @@ const CMS_COMPILATION_SERVICE = new InjectionToken('VENDOR_MAP');
 class RuntimeService {
     constructor(injector) {
         this.injector = injector;
-        this.modules = [];
-        this.componentFactories = {};
+        this.moduleRefs = [];
+        this.componentTypes = {};
         this.applicationTree = [];
         this.isInitialized$ = new BehaviorSubject(false);
         this.updated$ = new Subject();
@@ -275,7 +275,11 @@ class RuntimeService {
         }
         return this.compilationService.compileUIDefinition$(uiDefinition).pipe(map(result => {
             this.applicationTree = result.elements;
-            this.addComponentFactories(result.module.componentFactories);
+            this.componentTypes = {
+                ...this.componentTypes,
+                ...result.componentTypes,
+            };
+            this.moduleRefs.push(result.moduleRef);
             return result.elements;
         }), tap(() => this.isInitialized$.next(true)));
     }
@@ -301,24 +305,26 @@ class RuntimeService {
         return this.updated$.pipe(startWith(undefined), map(() => findElementByPath(this.applicationTree, path)), distinctUntilChanged());
     }
     clear() {
-        this.compilationService.clearModuleCache(this.modules);
-        this.modules = [];
+        this.compilationService.clear();
+        this.moduleRefs.forEach(m => m.destroy());
+        this.moduleRefs = [];
         this.applicationTree = [];
-        this.componentFactories = {};
+        this.componentTypes = {};
         this.isInitialized$.next(false);
     }
     addElement$(operation) {
         return this.compilationService.compileElement$(operation.value).pipe(map(result => {
-            this.addComponentFactories(result.module.componentFactories);
+            this.componentTypes = {
+                ...this.componentTypes,
+                ...result.componentTypes,
+            };
+            this.moduleRefs.push(result.moduleRef);
             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 });
@@ -554,7 +560,7 @@ class ElementRendererComponent {
     }
     ngOnInit() {
         this.elementContext.metadata = this.meta;
-        this.factory = this.meta.path ? this.runtimeService.componentFactories[this.meta.path] : undefined;
+        this.type = this.meta.path ? this.runtimeService.componentTypes[this.meta.path] : undefined;
         this.createComponents();
     }
     ngOnDestroy() {
@@ -622,43 +628,52 @@ class ElementRendererComponent {
         });
     }
     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.runtimeService.moduleRefs[0].injector.runInContext(() => {
+            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();
         });
-        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$;
+        let parentModel$;
+        if (parentRef?.instance instanceof ElementComponent) {
+            parentModel$ = parentRef?.instance.model$;
+        }
         return parentModel$ ?? this.configurationService.get();
     }
     createComponent(data, index) {
-        if (!this.factory) {
+        if (!this.type) {
             return;
         }
-        const componentRef = this.el?.createComponent(this.factory, index);
+        const componentRef = this.el?.createComponent(this.type, { index });
         if (componentRef) {
             componentRef.location.nativeElement.setAttribute('name', this.meta.name);
             componentRef.location.nativeElement.setAttribute('path', this.meta.path);
-            componentRef.instance?.model$.next(data);
+            if (componentRef.instance instanceof ElementComponent) {
+                componentRef.instance.model$.next(data);
+            }
         }
         return componentRef;
     }
     updateComponent(ref, data, index) {
-        ref.instance.model$.next(data);
+        if (ref.instance instanceof ElementComponent) {
+            ref.instance.model$.next(data);
+        }
         if (this.el && this.el.indexOf(ref.hostView) !== index) {
             this.el.move(ref.hostView, index);
         }
@@ -863,7 +878,7 @@ class ElementChildrenComponent {
     }
 }
 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 });
+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 });
 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"] }]
@@ -872,13 +887,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
 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] });
+ElementChildrenModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenModule, declarations: [ElementChildrenComponent], imports: [CommonModule, LetDirectiveModule, ElementRendererModule, ElementDropHandleModule], exports: [ElementChildrenComponent] });
+ElementChildrenModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ElementChildrenModule, imports: [CommonModule, 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],
+                    imports: [CommonModule, LetDirectiveModule, ElementRendererModule, ElementDropHandleModule],
                     exports: [ElementChildrenComponent],
                 }]
         }] });
@@ -925,6 +940,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: TemplatesService }]; }, propDecorators: { customTemplate: [{
                 type: Input
             }] } });
+class CustomTemplateDirectiveModule {
+}
+CustomTemplateDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomTemplateDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CustomTemplateDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: CustomTemplateDirectiveModule, declarations: [CustomTemplateDirective], exports: [CustomTemplateDirective] });
+CustomTemplateDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomTemplateDirectiveModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CustomTemplateDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CustomTemplateDirective],
+                    exports: [CustomTemplateDirective],
+                }]
+        }] });
 
 class IOPlugin {
     constructor(host) {
@@ -1614,7 +1641,10 @@ class ElementsResolver {
         this.renderableElements = this.getRenderableElements(this.elements);
     }
     getNgComponents() {
-        return this.renderableElements.map(el => this.resolveElement(el)).filter(isDefined);
+        return this.renderableElements.filter(isDefined).reduce((trunk, el) => ({
+            ...trunk,
+            [el.path]: this.resolveElement(el),
+        }), {});
     }
     transpile(el) {
         if (!el.script) {
@@ -1795,7 +1825,6 @@ class FederatedComponent {
     constructor(injector) {
         this.injector = injector;
         this.isLoading$ = new BehaviorSubject(false);
-        // configs
         this.suppressLoading = defaultOptions.suppressLoading;
         this.loadingLabel = defaultOptions.loadingLabel;
     }
@@ -1861,11 +1890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
         }] });
 
 class CompilationService {
-    constructor(compiler) {
-        this.compiler = compiler;
+    constructor(injector) {
+        this.injector = injector;
     }
     compileUIDefinition$(uiDefinition) {
-        return of([]).pipe(switchMap(() => {
+        return of([]).pipe(map(() => {
             const { children, pages, components, ...uiDefinitionMeta } = uiDefinition;
             this.uiDefinitionMeta = uiDefinitionMeta;
             const elements = [...(children ?? []), ...(pages ?? [])];
@@ -1873,35 +1902,35 @@ class CompilationService {
             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 })));
+            const componentTypes = this.elementsResolver.getNgComponents();
+            const module = this.getModule(componentTypes);
+            return {
+                moduleRef: createNgModule(module, this.injector),
+                elements: this.elementsResolver?.elements ?? [],
+                componentTypes,
+            };
+        }));
     }
     compileElement$(element) {
         if (!this.uiDefinitionMeta) {
             throw 'No UI Definition context';
         }
-        return of(this.uiDefinitionMeta).pipe(switchMap(uiDefinition => {
+        return of(this.uiDefinitionMeta).pipe(map(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 })));
+            const componentTypes = elementsResolver.getNgComponents();
+            const module = this.getModule(componentTypes);
+            return {
+                moduleRef: createNgModule(module, this.injector),
+                elements: this.elementsResolver?.elements ?? [],
+                componentTypes,
+            };
+        }));
     }
-    clearModuleCache(modules) {
-        modules.forEach(module => this.compiler.clearCacheFor(module));
+    clear() {
         this.uiDefinitionMeta = undefined;
     }
     getModule(components) {
-        const staticComponents = [
-            ElementChildrenComponent,
-            ElementRendererComponent,
-            ElementDropHandleComponent,
-            CustomTemplateDirective,
-        ];
         let DynamicModule = class DynamicModule {
         };
         DynamicModule = __decorate([
@@ -1910,23 +1939,27 @@ class CompilationService {
                     CommonModule,
                     FormsModule,
                     ReactiveFormsModule,
-                    FederatedModule,
                     DragDropModule,
                     DndModule,
                     ScrollingModule,
+                    ElementChildrenModule,
+                    ElementRendererModule,
+                    ElementDropHandleModule,
+                    CustomTemplateDirectiveModule,
+                    FederatedModule,
                 ],
-                declarations: [...staticComponents, ...components],
+                declarations: Object.values(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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CompilationService, deps: [{ token: i0.Injector }], 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 }]; } });
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 class RuntimeModule {
 }