@pepperi-addons/ngx-lib 0.4.0-angular14.6 → 0.4.0-angular14.62

package/fesm2020/pepperi-addons-ngx-lib-remote-loader.mjs

@@ -1,74 +1,95 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, ViewContainerRef, Component, ViewChild, Input, Output, TemplateRef, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, createNgModuleRef, ViewContainerRef, Component, ViewChild, Input, Output, Optional, TemplateRef, NgModule } from '@angular/core';
 import * as i1 from '@pepperi-addons/ngx-lib';
 import { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
-import * as i2 from '@angular/router';
-import * as i2$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@pepperi-addons/ngx-lib/dialog';
 import { PepDialogModule } from '@pepperi-addons/ngx-lib/dialog';
 import { loadRemoteModule } from '@angular-architects/module-federation';
+import * as i3 from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 import { MatDialogModule } from '@angular/material/dialog';
+import { ModuleFederationToolsModule } from '@angular-architects/module-federation-tools';
 
 class PepRemoteLoaderService {
-    constructor(httpService, sessionService, addonService, route) {
+    constructor(httpService, sessionService, addonService) {
         this.httpService = httpService;
         this.sessionService = sessionService;
         this.addonService = addonService;
-        this.route = route;
         //
     }
-    getRemoteLoaderOptions(blockLoaderData, remoteEntry = '') {
-        return {
-            addonId: blockLoaderData.relation.AddonUUID,
-            remoteEntry: remoteEntry.length > 0 ? remoteEntry : `${blockLoaderData.addonPublicBaseURL}${blockLoaderData.relation.AddonRelativeURL}.js`,
+    getRemoteLoaderOptions(blockLoaderData, blockRemoteEntry = '', type = 'module') {
+        const exposedModule = blockLoaderData.relation.ElementsModule?.length > 0 ? blockLoaderData.relation.ElementsModule : blockLoaderData.relation.ModuleName;
+        const res = {
+            type: type,
+            remoteEntry: blockRemoteEntry.length > 0 ? blockRemoteEntry : `${blockLoaderData.addonPublicBaseURL}${blockLoaderData.relation.AddonRelativeURL}.js`,
             remoteName: blockLoaderData.relation.AddonRelativeURL,
-            exposedModule: `./${blockLoaderData.relation.ModuleName}`,
-            componentName: blockLoaderData.relation.ComponentName,
+            exposedModule: `./${exposedModule}`,
+            addonId: blockLoaderData.relation.AddonUUID, // For local use (adding the relative path to the assets).
         };
+        // If it's web components
+        if (blockLoaderData.relation.ElementsModule?.length > 0) {
+            res['elementName'] = blockLoaderData.relation.ElementName;
+        }
+        else { // For load the component from the module.
+            res['componentName'] = blockLoaderData.relation.ComponentName;
+        }
+        return res;
     }
-    getAddonBaseUrl(addonUUID, fileName = 'api') {
+    getBlockLoaderDataUrl(options) {
+        const fileName = 'addon_blocks';
+        const pagesAddonUuid = this.addonService.getPagesAddonUUID();
+        let pagesBaseUrl;
         // For devServer run server on localhost.
-        const devServer = this.route.snapshot.queryParamMap.get('devServer') === 'true';
-        if (devServer) {
-            return `http://localhost:4500/${fileName}`;
+        if (options.pagesDevServer?.length > 0) {
+            pagesBaseUrl = `${options.pagesDevServer}/${fileName}`;
         }
         else {
             const baseUrl = this.sessionService.getPapiBaseUrl();
-            return `${baseUrl}/addons/api/${addonUUID}/${fileName}`;
+            pagesBaseUrl = `${baseUrl}/addons/api/${pagesAddonUuid}/${fileName}`;
         }
+        const url = `${pagesBaseUrl}/get_addon_block_loader_data?name=${options.name}&slugName=${options.slugName}&blockType=${options.blockType}&addonUUID=${options.addonUUID}`;
+        return url;
     }
-    async getBlockRemoteLoaderOptions(name, blockType = 'AddonBlock', remoteEntry = '') {
+    async getBlockRemoteLoaderOptions(options) {
+        // name: string, blockType: PepBlockDataType = 'AddonBlock', addonUUID = '', blockRemoteEntry = '', pagesDevServer = ''
+        options.blockType = options.blockType ?? 'AddonBlock';
+        options.name = options.name ?? '';
+        options.slugName = options.slugName ?? '';
+        options.addonUUID = options.addonUUID ?? '';
         return new Promise((resolve, reject) => {
-            const pagesAddonUuid = this.addonService.getPagesAddonUUID();
-            const pagesBaseUrl = this.getAddonBaseUrl(pagesAddonUuid, 'addon_blocks');
-            const url = `${pagesBaseUrl}/get_addon_block_loader_data?name=${name}&blockType=${blockType}`;
-            this.httpService.getHttpCall(url).toPromise().then((data) => {
-                if (data) {
-                    resolve(this.getRemoteLoaderOptions(data, remoteEntry));
+            if (options.name?.length > 0 || (options.slugName?.length > 0 && options.blockType === 'SettingsBlock')) {
+                const blockLoaderDataUrl = this.getBlockLoaderDataUrl(options);
+                this.httpService.getHttpCall(blockLoaderDataUrl).toPromise().then((data) => {
+                    resolve(this.getRemoteLoaderOptions(data, options.blockRemoteEntry));
+                }).catch(err => {
+                    reject(`Addon block with name - ${options.name} is not found for type - ${options.blockType}`);
+                });
+            }
+            else {
+                if (options.blockType === 'SettingsBlock') {
+                    reject(`name is not supplied`);
                 }
                 else {
-                    reject(`Addon block with name - ${name} is not found for type - ${blockType}`);
+                    reject(`slugName is not supplied`);
                 }
-            });
+            }
         });
     }
 }
-PepRemoteLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderService, deps: [{ token: i1.PepHttpService }, { token: i1.PepSessionService }, { token: i1.PepAddonService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+PepRemoteLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderService, deps: [{ token: i1.PepHttpService }, { token: i1.PepSessionService }, { token: i1.PepAddonService }], target: i0.ɵɵFactoryTarget.Injectable });
 PepRemoteLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.PepHttpService }, { type: i1.PepSessionService }, { type: i1.PepAddonService }, { type: i2.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: i1.PepHttpService }, { type: i1.PepSessionService }, { type: i1.PepAddonService }]; } });
 
 class PepRemoteLoaderComponent {
-    constructor(injector, cfr, compiler, pepAddonService) {
+    constructor(injector, pepAddonService) {
         this.injector = injector;
-        this.cfr = cfr;
-        this.compiler = compiler;
         this.pepAddonService = pepAddonService;
         this._options = null;
         // This is the data passed by the API Design documentation.
@@ -96,74 +117,53 @@ class PepRemoteLoaderComponent {
         if (this.hostObject && this.compRef?.instance) {
             this.compRef.instance.hostObject = this.hostObject;
             // TODO: Check if this is needed?? if not remove this.
-            if (this.compRef?.instance?.ngOnChanges) {
-                this.compRef.instance.ngOnChanges(this.hostObject);
-            }
+            // if (this.compRef?.instance?.ngOnChanges) {
+            //     this.compRef.instance.ngOnChanges(this.hostObject);
+            // }
         }
     }
-    async ngOnChanges(changes) {
+    ngOnChanges(changes) {
         // if (changes?.options?.currentValue) {
         //     this.loadModule(changes?.options?.currentValue);
         // }
     }
     async loadModule() {
-        const t0 = performance.now();
-        // Check if only need update
-        if (!this.options?.update) {
+        try {
+            const t0 = performance.now();
             this.viewContainer?.clear();
-            try {
-                if (this.options.addonId) {
-                    const publicPathArr = this.options.remoteEntry.split('/');
-                    const publicPath = publicPathArr.slice(0, publicPathArr.length - 1).join('/') + '/';
-                    __webpack_public_path__ = publicPath;
-                    this.pepAddonService.setAddonStaticFolder(publicPath, this.options.addonId);
+            if (this.options.exposedModule?.length > 0) { // Load module
+                if (this.options?.addonId && (this.options.type === 'module' || this.options.type === 'script')) {
+                    const lastSlashIndex = this.options.remoteEntry?.lastIndexOf('/') || -1;
+                    if (lastSlashIndex > 0) {
+                        const publicPath = this.options.remoteEntry.substring(0, lastSlashIndex + 1);
+                        this.pepAddonService.setAddonStaticFolder(publicPath, this.options.addonId);
+                    }
                 }
                 const module = await loadRemoteModule(this.options).then(m => m);
-                const component = module[this.options.componentName];
-                this.compRef = this.viewContainer.createComponent(component);
-            }
-            catch (e) {
-                this.viewContainer?.clear();
-                // Load Component
-                if (this.options?.noModule) {
-                    const component = await loadRemoteModule(this.options).then(m => m[this.options.componentName]);
-                    // New code
-                    // this.compRef = this.viewContainer.createComponent(component, { injector: this.injector });
-                    // Old code
-                    const componentFactory = this.cfr.resolveComponentFactory(component);
-                    this.compRef = this.viewContainer.createComponent(componentFactory, null, this.injector);
-                }
-                // Load Module
-                else {
-                    // const publicPathArr = this.options.remoteEntry.split('/');
-                    // const publicPath = publicPathArr.slice(0, publicPathArr.length - 1).join('/')+'/';
-                    // __webpack_public_path__ = publicPath;
-                    // this.pepAddonService.setAddonStaticFolder(publicPath, this.options.addonId);
-                    const module = await loadRemoteModule(this.options).then(m => m);
-                    // New code
-                    // const moduleRef = createNgModuleRef(module, this.injector);
-                    // const component = module[this.options.componentName];
-                    // this.compRef = this.viewContainer.createComponent(component, { injector: this.injector, ngModuleRef: moduleRef });
-                    // Old code
-                    const moduleFactory = this.compiler.compileModuleSync(module[this.options.exposedModule.replace('./', '')]);
-                    const moduleRef = moduleFactory.create(this.injector);
-                    const componentFactory = moduleRef?.componentFactoryResolver?.resolveComponentFactory(module[this.options.componentName]);
-                    this.compRef = this.viewContainer.createComponent(componentFactory, null, this.injector, null, moduleRef);
-                    const t1 = performance.now();
-                    console.log('remote module load performance: ' + (t1 - t0) / 1000);
-                }
+                const moduleRef = createNgModuleRef(module[this.options.exposedModule.replace('./', '')], this.injector);
+                this.compRef = this.viewContainer.createComponent(module[this.options.componentName], { injector: this.injector, ngModuleRef: moduleRef });
+                const t1 = performance.now();
+                console.log('remote module load performance: ' + (t1 - t0) / 1000);
             }
+            // Check if this is in use??? (comment out in Angular 14 version)
+            // else { // Load Component
+            //     const componentType = await loadRemoteModule(this.options).then(m => m[this.options.componentName]);
+            //     this.compRef = this.viewContainer.createComponent(componentType, { injector: this.injector });
+            // }
             this.load.emit();
+            if (this.compRef) {
+                this.setHostComponentIntoComponentRef();
+                this.compRef?.instance['hostEvents']?.subscribe(e => {
+                    // switch(e.action){
+                    //     case 'addon-loaded':
+                    //         this.showSpinner = false;
+                    // }
+                    this.hostEvents.emit(e);
+                });
+            }
         }
-        if (this.compRef) {
-            this.setHostComponentIntoComponentRef();
-            this.compRef?.instance['hostEvents']?.subscribe(e => {
-                // switch(e.action){
-                //     case 'addon-loaded':
-                //         this.showSpinner = false;
-                // }
-                this.hostEvents.emit(e);
-            });
+        catch (error) {
+            console.error(error);
         }
     }
     ngOnDestroy() {
@@ -171,7 +171,7 @@ class PepRemoteLoaderComponent {
         this.viewContainer?.clear();
     }
 }
-PepRemoteLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderComponent, deps: [{ token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i0.Compiler }, { token: i1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
+PepRemoteLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderComponent, deps: [{ token: i0.Injector }, { token: i1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
 PepRemoteLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepRemoteLoaderComponent, selector: "pep-remote-loader", inputs: { options: "options", hostObject: "hostObject" }, outputs: { hostEvents: "hostEvents", load: "load" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["placeHolder"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <!-- <mat-spinner *ngIf="showSpinner; else placeHolder"></mat-spinner> -->
         <ng-template #placeHolder></ng-template>
@@ -185,7 +185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         <ng-template #placeHolder></ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i0.Compiler }, { type: i1.PepAddonService }]; }, propDecorators: { viewContainer: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.PepAddonService }]; }, propDecorators: { viewContainer: [{
                 type: ViewChild,
                 args: ['placeHolder', { read: ViewContainerRef, static: true }]
             }], options: [{
@@ -198,10 +198,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }] } });
 
+class PepRemoteLoaderElementComponent {
+    constructor(renderer, el, pepAddonService, remoteLoaderService, route) {
+        this.renderer = renderer;
+        this.el = el;
+        this.pepAddonService = pepAddonService;
+        this.remoteLoaderService = remoteLoaderService;
+        this.route = route;
+        this.load = new EventEmitter();
+        this.element = null;
+    }
+    ngOnChanges() {
+        if (!this.element)
+            return;
+        this.populateProps();
+    }
+    populateProps() {
+        for (const prop in this.props) {
+            this.element[prop] = this.props[prop];
+        }
+    }
+    setupEvents() {
+        for (const event in this.events) {
+            this.element.addEventListener(event, this.events[event]);
+        }
+    }
+    async loadOptionsFromRoute() {
+        const params = this.route?.snapshot.params;
+        const data = this.route?.snapshot.data;
+        const blockType = data?.blockType || 'SettingsBlock';
+        const slugName = params?.slugName || data?.slugName;
+        const blockName = params?.blockName || data?.blockName;
+        if (blockName?.length > 0 || (slugName?.length > 0 && blockType === 'SettingsBlock')) {
+            const addonUUID = params?.addonUUID || data?.addonUUID || '';
+            const blockRemoteEntry = data?.blockRemoteEntry || '';
+            this.options = await this.remoteLoaderService.getBlockRemoteLoaderOptions({
+                name: blockName,
+                slugName,
+                blockType,
+                addonUUID,
+                blockRemoteEntry
+            });
+            const fileName = `${this.options['remoteName']}.js`;
+            if (window.location.search.indexOf('dev=true') > 0) {
+                this.options['remoteEntry'] = `http://localhost:4400/${fileName}`;
+            }
+        }
+    }
+    async ngAfterContentInit() {
+        try {
+            const t0 = performance.now();
+            // If the options is not supplied then we need to get it from the route.
+            if (!this.options) {
+                await this.loadOptionsFromRoute();
+            }
+            if (!this.options) {
+                throw new Error('No options supplied to the component.');
+            }
+            else {
+                if (this.options?.addonId && (this.options.type === 'module' || this.options.type === 'script')) {
+                    const lastSlashIndex = this.options.remoteEntry?.lastIndexOf('/') || -1;
+                    if (lastSlashIndex > 0) {
+                        const publicPath = this.options.remoteEntry.substring(0, lastSlashIndex + 1);
+                        this.pepAddonService.setAddonStaticFolder(publicPath, this.options.addonId);
+                    }
+                }
+                await loadRemoteModule(this.options);
+                this.element = this.renderer.createElement(this.options.elementName);
+                this.populateProps();
+                this.setupEvents();
+                this.renderer.appendChild(this.el.nativeElement, this.element);
+                const t1 = performance.now();
+                console.log('remote module wc load performance: ' + (t1 - t0) / 1000);
+                this.load.emit();
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+}
+PepRemoteLoaderElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.PepAddonService }, { token: PepRemoteLoaderService }, { token: i3.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+PepRemoteLoaderElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepRemoteLoaderElementComponent, selector: "pep-remote-loader-element", inputs: { options: "options", props: "props", events: "events" }, outputs: { load: "load" }, usesOnChanges: true, ngImport: i0, template: `
+        <!--<div #vc style="height: inherit;"></div>-->
+    `, isInline: true, styles: [":host{width:100%;height:inherit}:host::ng-deep>*{height:inherit}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-remote-loader-element', template: `
+        <!--<div #vc style="height: inherit;"></div>-->
+    `, styles: [":host{width:100%;height:inherit}:host::ng-deep>*{height:inherit}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.PepAddonService }, { type: PepRemoteLoaderService }, { type: i3.ActivatedRoute, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { options: [{
+                type: Input
+            }], props: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }], load: [{
+                type: Output
+            }] } });
+
 class PepAddonBlockLoaderComponent {
     constructor(remoteLoaderService) {
         this.remoteLoaderService = remoteLoaderService;
+        this.addonId = '';
         this.remoteEntry = '';
+        this.slugName = '';
         this._blockType = 'AddonBlock';
         this._name = '';
         this.hostObject = null;
@@ -210,7 +313,10 @@ class PepAddonBlockLoaderComponent {
         this.blockLoad = new EventEmitter();
         this.inDialog = false;
         this.remotePathOptions = null;
-        //
+        this.loadElement = false;
+        this.onHostEventsCallback = (event) => {
+            this.onHostEvents(event.detail);
+        };
     }
     set blockType(value) {
         this._blockType = value;
@@ -232,7 +338,15 @@ class PepAddonBlockLoaderComponent {
         return this._dialogRef;
     }
     ngOnInit() {
-        this.remoteLoaderService.getBlockRemoteLoaderOptions(this.name, this.blockType, this.remoteEntry).then(options => {
+        const options = {
+            name: this.name,
+            slugName: this.slugName,
+            blockType: this.blockType,
+            addonUUID: this.addonId,
+            blockRemoteEntry: this.remoteEntry
+        };
+        this.remoteLoaderService.getBlockRemoteLoaderOptions(options).then((options) => {
+            this.loadElement = options.elementName?.length > 0;
             this.remotePathOptions = options;
         });
     }
@@ -253,15 +367,19 @@ class PepAddonBlockLoaderComponent {
     }
 }
 PepAddonBlockLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddonBlockLoaderComponent, deps: [{ token: PepRemoteLoaderService }], target: i0.ɵɵFactoryTarget.Component });
-PepAddonBlockLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepAddonBlockLoaderComponent, selector: "pep-addon-block-loader", inputs: { remoteEntry: "remoteEntry", blockType: "blockType", name: "name", hostObject: "hostObject", dialogRef: "dialogRef" }, outputs: { hostEvents: "hostEvents", blockLoad: "blockLoad" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inDialog\">\n    <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #dialogTemplate let-data>\n    <pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\" [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n        </ng-container>\n    </pep-dialog>\n</ng-template>\n\n<ng-template #remoteLoaderTemplate>\n    <pep-remote-loader *ngIf=\"remotePathOptions\"\n        [options]=\"remotePathOptions\"\n        [hostObject]=\"hostObject\"\n        (hostEvents)=\"onHostEvents($event);\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: PepRemoteLoaderComponent, selector: "pep-remote-loader", inputs: ["options", "hostObject"], outputs: ["hostEvents", "load"] }] });
+PepAddonBlockLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepAddonBlockLoaderComponent, selector: "pep-addon-block-loader", inputs: { addonId: "addonId", remoteEntry: "remoteEntry", slugName: "slugName", blockType: "blockType", name: "name", hostObject: "hostObject", dialogRef: "dialogRef" }, outputs: { hostEvents: "hostEvents", blockLoad: "blockLoad" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"!inDialog\">\n    <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #dialogTemplate let-data>\n    <pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\" [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n        </ng-container>\n    </pep-dialog>\n</ng-template>\n\n<ng-template #remoteLoaderTemplate>\n    <pep-remote-loader *ngIf=\"remotePathOptions && !loadElement\"\n        [options]=\"remotePathOptions\"\n        [hostObject]=\"hostObject\"\n        (hostEvents)=\"onHostEvents($event);\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader>\n\n    <pep-remote-loader-element *ngIf=\"remotePathOptions && loadElement\" \n        [options]=\"remotePathOptions\"\n        [props]=\"{ hostObject: hostObject }\"\n        [events]=\"{ hostEvents: onHostEventsCallback }\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader-element>\n\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: PepRemoteLoaderComponent, selector: "pep-remote-loader", inputs: ["options", "hostObject"], outputs: ["hostEvents", "load"] }, { kind: "component", type: PepRemoteLoaderElementComponent, selector: "pep-remote-loader-element", inputs: ["options", "props", "events"], outputs: ["load"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddonBlockLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-addon-block-loader', template: "<ng-container *ngIf=\"!inDialog\">\n    <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #dialogTemplate let-data>\n    <pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\" [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n        </ng-container>\n    </pep-dialog>\n</ng-template>\n\n<ng-template #remoteLoaderTemplate>\n    <pep-remote-loader *ngIf=\"remotePathOptions\"\n        [options]=\"remotePathOptions\"\n        [hostObject]=\"hostObject\"\n        (hostEvents)=\"onHostEvents($event);\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader>\n</ng-template>" }]
+            args: [{ selector: 'pep-addon-block-loader', template: "<ng-container *ngIf=\"!inDialog\">\n    <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #dialogTemplate let-data>\n    <pep-dialog [showClose]=\"data?.showClose\" [showHeader]=\"data?.showHeader\" [showFooter]=\"data?.showFooter\" [title]=\"data?.title\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <ng-container *ngTemplateOutlet=\"remoteLoaderTemplate\"></ng-container>\n        </ng-container>\n    </pep-dialog>\n</ng-template>\n\n<ng-template #remoteLoaderTemplate>\n    <pep-remote-loader *ngIf=\"remotePathOptions && !loadElement\"\n        [options]=\"remotePathOptions\"\n        [hostObject]=\"hostObject\"\n        (hostEvents)=\"onHostEvents($event);\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader>\n\n    <pep-remote-loader-element *ngIf=\"remotePathOptions && loadElement\" \n        [options]=\"remotePathOptions\"\n        [props]=\"{ hostObject: hostObject }\"\n        [events]=\"{ hostEvents: onHostEventsCallback }\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader-element>\n\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: PepRemoteLoaderService }]; }, propDecorators: { dialogTemplate: [{
                 type: ViewChild,
                 args: ['dialogTemplate', { static: true, read: TemplateRef }]
+            }], addonId: [{
+                type: Input
             }], remoteEntry: [{
                 type: Input
+            }], slugName: [{
+                type: Input
             }], blockType: [{
                 type: Input
             }], name: [{
@@ -277,15 +395,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PepAddonBlockLoaderService {
-    constructor(resolver, dialogService) {
-        this.resolver = resolver;
+    constructor(dialogService) {
         this.dialogService = dialogService;
         //
     }
     loadAddonBlockInternal(options) {
         if (options.container !== null) {
-            const factory = this.resolver.resolveComponentFactory(PepAddonBlockLoaderComponent);
-            const componentRef = options.container.createComponent(factory);
+            // const factory = this.resolver.resolveComponentFactory(PepAddonBlockLoaderComponent);
+            const componentRef = options.container.createComponent(PepAddonBlockLoaderComponent);
             const addonBlockInstance = componentRef.instance;
             addonBlockInstance.blockType = options.blockType || 'AddonBlock';
             addonBlockInstance.name = options.name;
@@ -324,32 +441,36 @@ class PepAddonBlockLoaderService {
         }
     }
 }
-PepAddonBlockLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddonBlockLoaderService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i1$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+PepAddonBlockLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddonBlockLoaderService, deps: [{ token: i1$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
 PepAddonBlockLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddonBlockLoaderService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddonBlockLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i1$1.PepDialogService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.PepDialogService }]; } });
 
 class PepRemoteLoaderModule {
 }
 PepRemoteLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 PepRemoteLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderModule, declarations: [PepAddonBlockLoaderComponent,
-        PepRemoteLoaderComponent], imports: [CommonModule,
+        PepRemoteLoaderComponent,
+        PepRemoteLoaderElementComponent], imports: [CommonModule,
         HttpClientModule,
+        ModuleFederationToolsModule,
         // Material modules,
         MatDialogModule,
         // ngx-lib modules
         PepNgxLibModule,
         PepDialogModule], exports: [PepAddonBlockLoaderComponent,
-        PepRemoteLoaderComponent] });
+        PepRemoteLoaderComponent,
+        PepRemoteLoaderElementComponent] });
 PepRemoteLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderModule, providers: [
         PepAddonBlockLoaderService,
         PepRemoteLoaderService
     ], imports: [CommonModule,
         HttpClientModule,
+        ModuleFederationToolsModule,
         // Material modules,
         MatDialogModule,
         // ngx-lib modules
@@ -361,10 +482,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                     declarations: [
                         PepAddonBlockLoaderComponent,
                         PepRemoteLoaderComponent,
+                        PepRemoteLoaderElementComponent,
                     ],
                     imports: [
                         CommonModule,
                         HttpClientModule,
+                        ModuleFederationToolsModule,
                         // Material modules,
                         MatDialogModule,
                         // ngx-lib modules
@@ -374,6 +497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                     exports: [
                         PepAddonBlockLoaderComponent,
                         PepRemoteLoaderComponent,
+                        PepRemoteLoaderElementComponent
                     ],
                     providers: [
                         PepAddonBlockLoaderService,
@@ -390,5 +514,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PepAddonBlockLoaderComponent, PepAddonBlockLoaderService, PepRemoteLoaderComponent, PepRemoteLoaderModule, PepRemoteLoaderService };
+export { PepAddonBlockLoaderComponent, PepAddonBlockLoaderService, PepRemoteLoaderComponent, PepRemoteLoaderElementComponent, PepRemoteLoaderModule, PepRemoteLoaderService };
 //# sourceMappingURL=pepperi-addons-ngx-lib-remote-loader.mjs.map