@veloceapps/sdk 7.0.1-0 → 7.0.1-2

package/fesm2015/veloceapps-sdk-cms.mjs

@@ -2,7 +2,7 @@ import { __decorate, __param, __metadata, __rest } 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 lodash from 'lodash';
 import { compact, isArray, pull, merge, omit, flatten, set, kebabCase, cloneDeep } from 'lodash';
 import { applyPatch } from 'rfc6902';
@@ -311,8 +311,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();
@@ -325,7 +325,8 @@ class RuntimeService {
         }
         return this.compilationService.compileUIDefinition$(uiDefinition).pipe(map(result => {
             this.applicationTree = result.elements;
-            this.addComponentFactories(result.module.componentFactories);
+            this.componentTypes = Object.assign(Object.assign({}, this.componentTypes), result.componentTypes);
+            this.moduleRefs.push(result.moduleRef);
             return result.elements;
         }), tap(() => this.isInitialized$.next(true)));
     }
@@ -351,24 +352,23 @@ 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 = Object.assign(Object.assign({}, this.componentTypes), result.componentTypes);
+            this.moduleRefs.push(result.moduleRef);
             applyPatch(this.applicationTree, [Object.assign(Object.assign({}, 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 });
@@ -556,7 +556,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() {
@@ -626,46 +626,55 @@ class ElementRendererComponent {
         });
     }
     processChildren(children) {
-        const refs = children.reduce((acc, data, index) => {
-            var _a;
-            const key = String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : UUID.UUID());
-            const existingRef = this.refs[key];
-            const ref = existingRef !== null && existingRef !== void 0 ? existingRef : this.createComponent(data, index);
-            if (existingRef) {
-                this.updateComponent(existingRef, data, index);
-            }
-            return ref ? Object.assign(Object.assign({}, 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) => {
+                var _a;
+                const key = String((_a = data === null || data === void 0 ? void 0 : data.id) !== null && _a !== void 0 ? _a : UUID.UUID());
+                const existingRef = this.refs[key];
+                const ref = existingRef !== null && existingRef !== void 0 ? existingRef : this.createComponent(data, index);
+                if (existingRef) {
+                    this.updateComponent(existingRef, data, index);
+                }
+                return ref ? Object.assign(Object.assign({}, 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) {
         var _a;
         const parentRefs = Object.values((_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.refs) !== null && _a !== void 0 ? _a : {});
         const parentRef = parentRefs.find(ref => { var _a; return (_a = ref === null || ref === void 0 ? void 0 : ref.location.nativeElement) === null || _a === void 0 ? void 0 : _a.contains(this.elementRef.nativeElement); });
-        const parentModel$ = parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance.model$;
+        let parentModel$;
+        if ((parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance) instanceof ElementComponent) {
+            parentModel$ = parentRef === null || parentRef === void 0 ? void 0 : parentRef.instance.model$;
+        }
         return parentModel$ !== null && parentModel$ !== void 0 ? parentModel$ : this.configurationService.get();
     }
     createComponent(data, index) {
-        var _a, _b;
-        if (!this.factory) {
+        var _a;
+        if (!this.type) {
             return;
         }
-        const componentRef = (_a = this.el) === null || _a === void 0 ? void 0 : _a.createComponent(this.factory, index);
+        const componentRef = (_a = this.el) === null || _a === void 0 ? void 0 : _a.createComponent(this.type, { index });
         if (componentRef) {
             componentRef.location.nativeElement.setAttribute('name', this.meta.name);
             componentRef.location.nativeElement.setAttribute('path', this.meta.path);
-            (_b = componentRef.instance) === null || _b === void 0 ? void 0 : _b.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);
         }
@@ -877,7 +886,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"] }]
@@ -886,13 +895,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],
                 }]
         }] });
@@ -939,6 +948,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) {
@@ -1615,7 +1636,7 @@ 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) => (Object.assign(Object.assign({}, trunk), { [el.path]: this.resolveElement(el) })), {});
     }
     transpile(el) {
         var _a;
@@ -1770,7 +1791,6 @@ class FederatedComponent {
     constructor(injector) {
         this.injector = injector;
         this.isLoading$ = new BehaviorSubject(false);
-        // configs
         this.suppressLoading = defaultOptions.suppressLoading;
         this.loadingLabel = defaultOptions.loadingLabel;
     }
@@ -1839,11 +1859,12 @@ 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(() => {
+            var _a, _b;
             const { children, pages, components } = uiDefinition, uiDefinitionMeta = __rest(uiDefinition, ["children", "pages", "components"]);
             this.uiDefinitionMeta = uiDefinitionMeta;
             const elements = [...(children !== null && children !== void 0 ? children : []), ...(pages !== null && pages !== void 0 ? pages : [])];
@@ -1851,36 +1872,36 @@ 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: (_b = (_a = this.elementsResolver) === null || _a === void 0 ? void 0 : _a.elements) !== null && _b !== void 0 ? _b : [],
+                componentTypes,
+            };
+        }));
     }
     compileElement$(element) {
         if (!this.uiDefinitionMeta) {
             throw 'No UI Definition context';
         }
-        return of(this.uiDefinitionMeta).pipe(switchMap(uiDefinition => {
-            var _a;
+        return of(this.uiDefinitionMeta).pipe(map(uiDefinition => {
+            var _a, _b, _c;
             const elementsResolver = (_a = this.elementsResolver) !== null && _a !== void 0 ? _a : 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: (_c = (_b = this.elementsResolver) === null || _b === void 0 ? void 0 : _b.elements) !== null && _c !== void 0 ? _c : [],
+                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([
@@ -1889,23 +1910,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 {
 }