@pepperi-addons/ngx-lib 0.4.2-storybook.1 → 0.5.0-ng15.2

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

@@ -36,7 +36,8 @@ class PepRemoteLoaderService {
         return url;
     }
     getRemoteLoaderOptions(blockLoaderData, blockRemoteEntry = '', type = 'module') {
-        const exposedModule = blockLoaderData.relation.ElementsModule?.length > 0 ? blockLoaderData.relation.ElementsModule : blockLoaderData.relation.ModuleName;
+        const loadAsElement = blockLoaderData.relation.ElementName?.length > 0;
+        const exposedModule = loadAsElement ? (blockLoaderData.relation.ElementsModule || 'WebComponents') : blockLoaderData.relation.ModuleName;
         const res = {
             type: type,
             remoteEntry: blockRemoteEntry.length > 0 ? blockRemoteEntry : `${blockLoaderData.addonPublicBaseURL}${blockLoaderData.relation.AddonRelativeURL}.js`,
@@ -45,7 +46,7 @@ class PepRemoteLoaderService {
             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) {
+        if (loadAsElement) {
             res['elementName'] = blockLoaderData.relation.ElementName;
         }
         else { // For load the component from the module.
@@ -53,6 +54,15 @@ class PepRemoteLoaderService {
         }
         return res;
     }
+    getBlockLoaderDataSuccess(data, options) {
+        const ngVersionNumber = coerceNumberProperty(data.relation?.SubType?.toLocaleLowerCase().replace('ng', ''), 14);
+        const type = ngVersionNumber >= 14 ? 'module' : 'script';
+        return this.getRemoteLoaderOptions(data, options.blockRemoteEntry, type);
+    }
+    getBlockLoaderDataError(options) {
+        const nameMsg = options.blockType === 'SettingsBlock' ? `slugName - ${options.slugName}` : `name - ${options.name}`;
+        return (`Block with ${nameMsg} is not found for type - ${options.blockType}`);
+    }
     async getBlockRemoteLoaderOptions(options) {
         options.blockType = options.blockType ?? 'AddonBlock';
         options.name = options.name ?? '';
@@ -60,15 +70,28 @@ class PepRemoteLoaderService {
         options.addonUUID = options.addonUUID ?? '';
         return new Promise((resolve, reject) => {
             if (options.name?.length > 0 || (options.slugName?.length > 0 && options.blockType === 'SettingsBlock')) {
-                const blockLoaderDataUrl = this.getBlockLoaderDataUrl(options);
-                this.httpService.getHttpCall(blockLoaderDataUrl).toPromise().then((data) => {
-                    const ngVersionNumber = coerceNumberProperty(data.relation?.SubType?.toLocaleLowerCase().replace('ng', ''), 14);
-                    const type = ngVersionNumber >= 14 ? 'module' : 'script';
-                    resolve(this.getRemoteLoaderOptions(data, options.blockRemoteEntry, type));
-                }).catch(err => {
-                    const nameMsg = options.blockType === 'SettingsBlock' ? `slugName - ${options.slugName}` : `name - ${options.name}`;
-                    reject(`Block with ${nameMsg} is not found for type - ${options.blockType}`);
-                });
+                if (options.blockType === 'SettingsBlock' || options.blockType === 'LogicBlock' || options.pagesDevServer?.length > 0) {
+                    // Work online for settings blocks or logic blocks or debug only !!!
+                    const blockLoaderDataUrl = this.getBlockLoaderDataUrl(options);
+                    this.httpService.getHttpCall(blockLoaderDataUrl).toPromise().then((data) => {
+                        resolve(this.getBlockLoaderDataSuccess(data, options));
+                    }).catch(err => {
+                        reject(this.getBlockLoaderDataError(options));
+                    });
+                }
+                else {
+                    // Work offline !!!
+                    this.addonService.emitEvent("GetBlockLoaderData", {
+                        Name: options.name,
+                        // SlugName: options.slugName,
+                        BlockType: options.blockType,
+                        // AddonUUID: options.addonUUID
+                    }).then((res) => {
+                        resolve(this.getBlockLoaderDataSuccess(res, options));
+                    }).catch(err => {
+                        reject(this.getBlockLoaderDataError(options));
+                    });
+                }
             }
             else {
                 if (options.blockType === 'SettingsBlock') {
@@ -81,9 +104,9 @@ class PepRemoteLoaderService {
         });
     }
 }
-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: [{
+PepRemoteLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: PepRemoteLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -91,15 +114,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: i1.PepHttpService }, { type: i1.PepSessionService }, { type: i1.PepAddonService }]; } });
 
 class PepRemoteLoaderComponent {
-    constructor(injector, pepAddonService) {
-        this.injector = injector;
-        this.pepAddonService = pepAddonService;
-        this._options = null;
-        // This is the data passed by the API Design documentation.
-        this._hostObject = null;
-        this.hostEvents = new EventEmitter();
-        this.load = new EventEmitter();
-    }
     set options(value) {
         this._options = value;
         if (value) {
@@ -116,6 +130,15 @@ class PepRemoteLoaderComponent {
     get hostObject() {
         return this._hostObject;
     }
+    constructor(injector, pepAddonService) {
+        this.injector = injector;
+        this.pepAddonService = pepAddonService;
+        this._options = null;
+        // This is the data passed by the API Design documentation.
+        this._hostObject = null;
+        this.hostEvents = new EventEmitter();
+        this.load = new EventEmitter();
+    }
     setHostComponentIntoComponentRef() {
         if (this.hostObject && this.compRef?.instance) {
             this.compRef.instance.hostObject = this.hostObject;
@@ -174,12 +197,12 @@ 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: 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: `
+PepRemoteLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderComponent, deps: [{ token: i0.Injector }, { token: i1.PepAddonService }], target: i0.ɵɵFactoryTarget.Component });
+PepRemoteLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pep-remote-loader',
@@ -202,6 +225,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PepRemoteLoaderElementComponent {
+    // // This is for debounce.
+    // private _getBlockRemoteLoaderOptionsSubject = new BehaviorSubject<BlockRemoteLoaderOptionsData>(null);
+    // get getBlockRemoteLoaderOptionsDebouncedSubject$(): Observable<BlockRemoteLoaderOptionsData> {
+    //     return this._getBlockRemoteLoaderOptionsSubject.asObservable().pipe(debounceTime(250));
+    // }
     constructor(renderer, el, pepAddonService, remoteLoaderService, route) {
         this.renderer = renderer;
         this.el = el;
@@ -211,6 +239,8 @@ class PepRemoteLoaderElementComponent {
         this.load = new EventEmitter();
         this.element = null;
         this._elementName = '';
+        this._blockType = '';
+        this._alreadyLoaded = false;
     }
     populateProps() {
         for (const prop in this.props) {
@@ -225,16 +255,16 @@ class PepRemoteLoaderElementComponent {
     async loadOptionsFromRoute() {
         const params = this.route?.snapshot.params;
         const data = this.route?.snapshot.data;
-        const blockType = data?.blockType || 'SettingsBlock';
+        this._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')) {
+        if (blockName?.length > 0 || (slugName?.length > 0 && this._blockType === 'SettingsBlock')) {
             const addonUUID = params?.addonUUID || data?.addonUUID || '';
             const blockRemoteEntry = data?.blockRemoteEntry || '';
             this.options = await this.remoteLoaderService.getBlockRemoteLoaderOptions({
                 name: blockName,
                 slugName,
-                blockType,
+                blockType: this._blockType,
                 addonUUID,
                 blockRemoteEntry
             });
@@ -254,25 +284,54 @@ class PepRemoteLoaderElementComponent {
     ngOnDestroy() {
         // 
     }
-    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);
-                    }
+    /**
+     * Loads the remote JS bundle as a script tag for web component remotes.
+     * If the script is already loaded, resolves immediately.
+     */
+    // private async loadRemoteScript(remoteEntryUrl: string): Promise<any> {
+    //     return new Promise<any>((resolve, reject) => {
+    //         if (document.querySelector(`script[src="${remoteEntryUrl}"]`)) {
+    //             // If script is already loaded, try to get the module
+    //             import(remoteEntryUrl).then(module => {
+    //                 if (module && module.init) {
+    //                     module.init();
+    //                 }
+    //                 resolve(module);
+    //             }).catch(err => reject(err));
+    //             return;
+    //         }
+    //         const script = document.createElement('script');
+    //         script.type = 'module';
+    //         script.src = remoteEntryUrl;
+    //         script.onload = () => {
+    //             // After script is loaded, dynamically import it to get the module
+    //             import(remoteEntryUrl).then(module => {
+    //                 if (module && module.init) {
+    //                     module.init();
+    //                 }
+    //                 resolve(module);
+    //             }).catch(err => reject(err));
+    //         };
+    //         script.onerror = (err) => reject(err);
+    //         document.body.appendChild(script);
+    //     });
+    // }
+    loadElementFromModule() {
+        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);
+            }
+            const t0 = performance.now();
+            // debugger;
+            // this.loadRemoteScript(this.options['remoteEntry']).then(() => {
+            loadRemoteModule(this.options).then((m) => {
                 this._elementName = this.options.elementName;
                 this.element = this.renderer.createElement(this._elementName);
                 this.populateProps();
@@ -281,8 +340,27 @@ class PepRemoteLoaderElementComponent {
                 const t1 = performance.now();
                 console.log('remote module wc load performance: ' + (t1 - t0) / 1000);
                 // Fix internal routing bug.
-                this.pepAddonService.connectInternalRouter(this._elementName);
+                if (this._blockType === 'SettingsBlock') {
+                    this.pepAddonService.connectInternalRouter(this._elementName);
+                }
                 this.load.emit();
+            });
+        }
+    }
+    ngAfterContentInit() {
+        try {
+            // if (!this.element) { maybe the load of the element is too long so change to flag.
+            if (!this._alreadyLoaded) {
+                this._alreadyLoaded = true;
+                // If the options is not supplied then we need to get it from the route.
+                if (!this.options) {
+                    this.loadOptionsFromRoute().then(() => {
+                        this.loadElementFromModule();
+                    });
+                }
+                else {
+                    this.loadElementFromModule();
+                }
             }
         }
         catch (error) {
@@ -290,11 +368,11 @@ class PepRemoteLoaderElementComponent {
         }
     }
 }
-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: `
+PepRemoteLoaderElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-remote-loader-element', template: `
         <!--<div #vc style="height: inherit;"></div>-->
@@ -312,24 +390,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PepAddonBlockLoaderComponent {
-    constructor(remoteLoaderService) {
-        this.remoteLoaderService = remoteLoaderService;
-        this.addonId = '';
-        this.remoteEntry = '';
-        this.slugName = '';
-        this._blockType = 'AddonBlock';
-        this._name = '';
-        this.hostObject = null;
-        this._dialogRef = null;
-        this.hostEvents = new EventEmitter();
-        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;
     }
@@ -349,24 +409,50 @@ class PepAddonBlockLoaderComponent {
     get dialogRef() {
         return this._dialogRef;
     }
-    ngOnInit() {
-        const options = {
-            name: this.name,
-            slugName: this.slugName,
-            blockType: this.blockType,
-            addonUUID: this.addonId,
-            blockRemoteEntry: this.remoteEntry
+    set remoteLoaderOptions(value) {
+        this._remoteLoaderOptions = value;
+        this.loadElement = this.remoteLoaderOptions?.elementName?.length > 0;
+    }
+    get remoteLoaderOptions() {
+        return this._remoteLoaderOptions;
+    }
+    constructor(remoteLoaderService) {
+        this.remoteLoaderService = remoteLoaderService;
+        this.addonId = '';
+        this.remoteEntry = '';
+        this.slugName = '';
+        this._blockType = 'AddonBlock';
+        this._name = '';
+        this.hostObject = null;
+        this._dialogRef = null;
+        this._remoteLoaderOptions = null;
+        this.hostEvents = new EventEmitter();
+        this.blockLoad = new EventEmitter();
+        this.inDialog = false;
+        this.loadElement = false;
+        this.onHostEventsCallback = (event) => {
+            this.onHostEvents(event.detail);
         };
-        this.remoteLoaderService.getBlockRemoteLoaderOptions(options).then((options) => {
-            this.loadElement = options.elementName?.length > 0;
-            this.remotePathOptions = options;
-        });
+    }
+    ngOnInit() {
+        if (this.remoteLoaderOptions === null) {
+            const rlpOptions = {
+                name: this.name,
+                slugName: this.slugName,
+                blockType: this.blockType,
+                addonUUID: this.addonId,
+                blockRemoteEntry: this.remoteEntry
+            };
+            this.remoteLoaderService.getBlockRemoteLoaderOptions(rlpOptions).then((options) => {
+                this.remoteLoaderOptions = options;
+            });
+        }
     }
     ngOnDestroy() {
         if (this.dialogRef) {
             this.dialogRef = null;
         }
-        this.remotePathOptions = null;
+        this.remoteLoaderOptions = null;
     }
     onBlockLoad() {
         this.blockLoad.emit();
@@ -378,11 +464,11 @@ class PepAddonBlockLoaderComponent {
         this.dialogRef?.close(event);
     }
 }
-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: { 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: [{
+PepAddonBlockLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepAddonBlockLoaderComponent, deps: [{ token: PepRemoteLoaderService }], target: i0.ɵɵFactoryTarget.Component });
+PepAddonBlockLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PepAddonBlockLoaderComponent, selector: "pep-addon-block-loader", inputs: { addonId: "addonId", remoteEntry: "remoteEntry", slugName: "slugName", blockType: "blockType", name: "name", hostObject: "hostObject", dialogRef: "dialogRef", remoteLoaderOptions: "remoteLoaderOptions" }, 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=\"remoteLoaderOptions && !loadElement\"\n        [options]=\"remoteLoaderOptions\"\n        [hostObject]=\"hostObject\"\n        (hostEvents)=\"onHostEvents($event);\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader>\n\n    <pep-remote-loader-element *ngIf=\"remoteLoaderOptions && loadElement\" \n        [options]=\"remoteLoaderOptions\"\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: "15.2.10", 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 && !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>" }]
+            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=\"remoteLoaderOptions && !loadElement\"\n        [options]=\"remoteLoaderOptions\"\n        [hostObject]=\"hostObject\"\n        (hostEvents)=\"onHostEvents($event);\"\n        (load)=\"onBlockLoad()\">\n    </pep-remote-loader>\n\n    <pep-remote-loader-element *ngIf=\"remoteLoaderOptions && loadElement\" \n        [options]=\"remoteLoaderOptions\"\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 }]
@@ -400,6 +486,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], dialogRef: [{
                 type: Input
+            }], remoteLoaderOptions: [{
+                type: Input
             }], hostEvents: [{
                 type: Output
             }], blockLoad: [{
@@ -421,6 +509,9 @@ class PepAddonBlockLoaderService {
             addonBlockInstance.addonId = options.addonUUID;
             addonBlockInstance.remoteEntry = options.blockRemoteEntry;
             addonBlockInstance.hostObject = options.hostObject;
+            if (options.remoteLoaderOptions) {
+                addonBlockInstance.remoteLoaderOptions = options.remoteLoaderOptions;
+            }
             addonBlockInstance.hostEvents.subscribe((event) => {
                 if (options.hostEventsCallback) {
                     options.hostEventsCallback(event);
@@ -440,7 +531,7 @@ class PepAddonBlockLoaderService {
         if (componentRef) {
             const addonBlockInstance = componentRef.instance;
             const pepConfig = this.dialogService.getDialogConfig({ disableClose: false, panelClass: 'remote-loader-dialog' }, options.size || 'full-screen');
-            const mergeConfig = { ...options.config, ...pepConfig };
+            const mergeConfig = { ...pepConfig, ...options.config };
             const data = options.data || null;
             addonBlockInstance.dialogRef = this.dialogService.openDialog(addonBlockInstance.dialogTemplate, data, mergeConfig);
             addonBlockInstance.dialogRef.afterClosed().subscribe(() => {
@@ -455,9 +546,9 @@ class PepAddonBlockLoaderService {
         }
     }
 }
-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: [{
+PepAddonBlockLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepAddonBlockLoaderService, deps: [{ token: i1$1.PepDialogService }], target: i0.ɵɵFactoryTarget.Injectable });
+PepAddonBlockLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepAddonBlockLoaderService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepAddonBlockLoaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -466,8 +557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 
 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,
+PepRemoteLoaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PepRemoteLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderModule, declarations: [PepAddonBlockLoaderComponent,
         PepRemoteLoaderComponent,
         PepRemoteLoaderElementComponent], imports: [CommonModule,
         HttpClientModule,
@@ -479,7 +570,7 @@ PepRemoteLoaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         PepDialogModule], exports: [PepAddonBlockLoaderComponent,
         PepRemoteLoaderComponent,
         PepRemoteLoaderElementComponent] });
-PepRemoteLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderModule, providers: [
+PepRemoteLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderModule, providers: [
         PepAddonBlockLoaderService,
         PepRemoteLoaderService
     ], imports: [CommonModule,
@@ -490,7 +581,7 @@ PepRemoteLoaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         // ngx-lib modules
         PepNgxLibModule,
         PepDialogModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepRemoteLoaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PepRemoteLoaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [