ngx-rendering-service-lib 0.0.37 → 0.0.39

package/fesm2022/ngx-rendering-service-lib.mjs

@@ -87,18 +87,12 @@ class ImageComponent {
         this.loadOptimalSize();
     }
     loadOptimalSize() {
-        console.log("nativeElement:");
-        console.log(this.element.nativeElement);
         const size = this.element.nativeElement.getBoundingClientRect();
-        console.log("Size: ");
-        console.log(size);
         const allFinishedItems = this.data?.items?.filter(item => item.link !== "");
         const matchingItem = allFinishedItems?.sort((a, b) => {
             // sort by the image size closest to the viewport
             return Math.abs(a.width - size.width) > Math.abs(b.width - size.width) ? 1 : -1;
         })[0];
-        console.log("Item matching size: ");
-        console.log(matchingItem);
         this.activeObject.set(matchingItem);
     }
     toggleFullscreen() {
@@ -267,98 +261,47 @@ var pdf_component = /*#__PURE__*/Object.freeze({
     PdfComponent: PdfComponent
 });
 
+var UrlEmbeddings;
+(function (UrlEmbeddings) {
+    UrlEmbeddings[UrlEmbeddings["YOUTUBE"] = 0] = "YOUTUBE";
+    UrlEmbeddings[UrlEmbeddings["VIMEO"] = 1] = "VIMEO";
+    UrlEmbeddings[UrlEmbeddings["VIDEO"] = 2] = "VIDEO";
+    UrlEmbeddings[UrlEmbeddings["AUDIO"] = 3] = "AUDIO";
+    UrlEmbeddings[UrlEmbeddings["IMAGE"] = 4] = "IMAGE";
+    UrlEmbeddings[UrlEmbeddings["LTI13TOOL"] = 5] = "LTI13TOOL";
+    UrlEmbeddings[UrlEmbeddings["H5P"] = 6] = "H5P";
+    UrlEmbeddings[UrlEmbeddings["PREZI"] = 7] = "PREZI";
+})(UrlEmbeddings || (UrlEmbeddings = {}));
+
 class UrlComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
         this.gdpr = undefined;
         this.gdprOk = false;
-        this.embedding = null;
-        this.externalId = null;
+        this.sanitizedUrl = null;
         this.url = "";
-        this.isRemoteRepoResource = false;
+        this.UrlEmbeddings = UrlEmbeddings;
     }
-    ngOnChanges(changes) {
+    ngOnInit() {
+        this.embedding = this.data?.frontendModuleConfig?.urlModuleConfig?.embedding;
+        this.externalId = this.data?.frontendModuleConfig?.urlModuleConfig?.externalId;
         this.url = this.node?.properties?.["ccm:wwwurl"]?.[0] || '';
-        this.setEmbeddingType();
+        if (this.embedding === UrlEmbeddings.VIMEO) {
+            this.sanitizedUrl = this.getVimeoUri();
+        }
     }
     isProtected() {
         return this.gdpr === undefined;
     }
-    setEmbeddingType() {
-        if (this.detectYouTube()) {
-            this.embedding = "youtube";
-            this.getExternalId();
-        }
-        else if (this.url.includes("vimeo.com")) {
-            this.embedding = "vimeo";
-            this.getExternalId();
-        }
-        else if (this.node?.mediatype?.includes("audio")) {
-            this.embedding = "audio";
-        }
-        else if (this.detectImage()) {
-            this.embedding = "image";
-        }
-        else if (this.detectPixabay()) {
-            this.url = this.node?.preview?.url ?? "";
-            this.embedding = "image";
-        }
-        else if (this.detectVideo()) { }
-    }
     consentToGdprWarning() {
         this.gdprOk = true;
     }
-    getExternalId() {
-        if (this.embedding === "youtube") {
-            if (this.isRemoteRepoResource) {
-                this.externalId = this.node?.remote?.id ?? "";
-            }
-            else if (this.url.includes("youtu.be")) {
-                const split = this.url.split("/");
-                this.externalId = split[split.length - 1];
-            }
-            else {
-                const url = new URL(this.url);
-                this.externalId = url.searchParams.get("v");
-            }
-        }
-        else if (this.embedding === "vimeo") {
-            const split = this.url.split("/");
-            this.externalId = split[split.length - 1];
-        }
-    }
     getVimeoUri() {
         let url = '//player.vimeo.com/video/' + this.externalId;
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    detectImage() {
-        if (this.node?.properties?.["ccm:remoterepositorytype"]?.[0] === "DDB") {
-            return false;
-        }
-        if (this.node?.mediatype === 'file-image') {
-            return true;
-        }
-        const mimeTypeSplit = this.node?.mimetype?.split("/") ?? [];
-        return mimeTypeSplit.length === 2 && ['png', 'jpg', 'jpeg', 'gif'].includes(mimeTypeSplit[1]);
-    }
-    detectYouTube() {
-        if (this.url.includes(".youtube.com/watch?") || this.url.includes("youtu.be")) {
-            return true;
-        }
-        if (this.node?.remote?.repository?.repositoryType?.toLowerCase() === "youtube") {
-            this.isRemoteRepoResource = true;
-            return true;
-        }
-        return false;
-    }
-    detectPixabay() {
-        return this.node?.remote?.repository?.repositoryType?.toLowerCase() === "pixabay";
-    }
-    detectVideo() {
-        return (["mp4", "webm"].includes(this.url.split(".").pop() ?? ""));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: UrlComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: UrlComponent, isStandalone: true, selector: "rs-module-url", inputs: { data: "data", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"url-wrapper\">\n  <div *ngIf=\"gdprOk\">\n    <ng-container *ngIf=\"embedding === 'youtube' && externalId !== ''\">\n      <youtube-player\n        [videoId]=\"externalId ?? ''\"\n        [disableCookies]=\"true\"\n      ></youtube-player>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'vimeo' && externalId !== ''\">\n      <iframe [src]=\"getVimeoUri()\"></iframe>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'audio' &&  url !== ''\" >\n      <div class=\"audio-wrapper\">\n        <video\n          controls\n          style=\"max-width: 100%\"\n          [src]=\"url\"\n          poster=\"assets/img/audio.svg\"\n        >\n        </video>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'image' && url !== ''\">\n      <div class=\"image-wrapper\">\n        <img\n          [ngSrc]=\"url\"\n          [alt]=\"node?.title ?? 'Edu-Sharing image'\"\n          [title]=\"node?.title ?? 'Edu-Sharing image'\"\n          width=\"100%\"\n          height=\"auto\"\n        >\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'video' && url !== ''\">\n      <div class=\"video-wrapper\">\n        <video\n          controls\n          [src]=\"url\"\n        >\n        </video>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"!gdprOk\">\n    Halt! Stop!\n    <button mat-button (click)=\"consentToGdprWarning()\">Weiter!</button>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.url-wrapper{width:100%}.url-wrapper .audio-wrapper video[poster]{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: UrlComponent, isStandalone: true, selector: "rs-module-url", inputs: { data: "data", node: "node" }, ngImport: i0, template: "<div class=\"url-wrapper\">\n  <div *ngIf=\"gdprOk\">\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.YOUTUBE && externalId !== ''\">\n      <youtube-player\n        [videoId]=\"externalId ?? ''\"\n        [disableCookies]=\"true\"\n      ></youtube-player>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.VIMEO && externalId !== ''\">\n      <iframe [src]=\"sanitizedUrl\"></iframe>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.AUDIO &&  url !== ''\" >\n      <div class=\"audio-wrapper\">\n        <video\n          controls\n          style=\"max-width: 100%\"\n          [src]=\"url\"\n          poster=\"assets/img/audio.svg\"\n        >\n        </video>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.IMAGE && url !== ''\">\n      <div class=\"image-wrapper\">\n        <img\n          [ngSrc]=\"url\"\n          [alt]=\"node?.title ?? 'Edu-Sharing image'\"\n          [title]=\"node?.title ?? 'Edu-Sharing image'\"\n          width=\"100%\"\n          height=\"auto\"\n        >\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.VIDEO && url !== ''\">\n      <div class=\"video-wrapper\">\n        <video\n          controls\n          [src]=\"url\"\n        >\n        </video>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"!gdprOk\">\n    Halt! Stop!\n    <button mat-button (click)=\"consentToGdprWarning()\">Weiter!</button>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.url-wrapper{width:100%}.url-wrapper .audio-wrapper video[poster]{object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: UrlComponent, decorators: [{
             type: Component,
@@ -368,7 +311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         MatIconModule,
                         YouTubePlayer,
                         NgOptimizedImage,
-                    ], template: "<div class=\"url-wrapper\">\n  <div *ngIf=\"gdprOk\">\n    <ng-container *ngIf=\"embedding === 'youtube' && externalId !== ''\">\n      <youtube-player\n        [videoId]=\"externalId ?? ''\"\n        [disableCookies]=\"true\"\n      ></youtube-player>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'vimeo' && externalId !== ''\">\n      <iframe [src]=\"getVimeoUri()\"></iframe>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'audio' &&  url !== ''\" >\n      <div class=\"audio-wrapper\">\n        <video\n          controls\n          style=\"max-width: 100%\"\n          [src]=\"url\"\n          poster=\"assets/img/audio.svg\"\n        >\n        </video>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'image' && url !== ''\">\n      <div class=\"image-wrapper\">\n        <img\n          [ngSrc]=\"url\"\n          [alt]=\"node?.title ?? 'Edu-Sharing image'\"\n          [title]=\"node?.title ?? 'Edu-Sharing image'\"\n          width=\"100%\"\n          height=\"auto\"\n        >\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === 'video' && url !== ''\">\n      <div class=\"video-wrapper\">\n        <video\n          controls\n          [src]=\"url\"\n        >\n        </video>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"!gdprOk\">\n    Halt! Stop!\n    <button mat-button (click)=\"consentToGdprWarning()\">Weiter!</button>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.url-wrapper{width:100%}.url-wrapper .audio-wrapper video[poster]{object-fit:cover}\n"] }]
+                    ], template: "<div class=\"url-wrapper\">\n  <div *ngIf=\"gdprOk\">\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.YOUTUBE && externalId !== ''\">\n      <youtube-player\n        [videoId]=\"externalId ?? ''\"\n        [disableCookies]=\"true\"\n      ></youtube-player>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.VIMEO && externalId !== ''\">\n      <iframe [src]=\"sanitizedUrl\"></iframe>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.AUDIO &&  url !== ''\" >\n      <div class=\"audio-wrapper\">\n        <video\n          controls\n          style=\"max-width: 100%\"\n          [src]=\"url\"\n          poster=\"assets/img/audio.svg\"\n        >\n        </video>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.IMAGE && url !== ''\">\n      <div class=\"image-wrapper\">\n        <img\n          [ngSrc]=\"url\"\n          [alt]=\"node?.title ?? 'Edu-Sharing image'\"\n          [title]=\"node?.title ?? 'Edu-Sharing image'\"\n          width=\"100%\"\n          height=\"auto\"\n        >\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"embedding === UrlEmbeddings.VIDEO && url !== ''\">\n      <div class=\"video-wrapper\">\n        <video\n          controls\n          [src]=\"url\"\n        >\n        </video>\n      </div>\n    </ng-container>\n  </div>\n  <div *ngIf=\"!gdprOk\">\n    Halt! Stop!\n    <button mat-button (click)=\"consentToGdprWarning()\">Weiter!</button>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.url-wrapper{width:100%}.url-wrapper .audio-wrapper video[poster]{object-fit:cover}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { data: [{
                 type: Input
             }], node: [{
@@ -527,6 +470,155 @@ class ModuleInfoService {
             + this.availableReplicationSources.length
             + this.availableResourceTypes.length !== 0;
     }
+    getFrontendModuleSetting(node) {
+        const urlModuleConfig = this.checkUrlModule(node);
+        if (urlModuleConfig !== null) {
+            return urlModuleConfig;
+        }
+        return {
+            module: "default",
+            urlModuleConfig: null
+        };
+    }
+    checkUrlModule(node) {
+        const url = node.properties?.["ccm:wwwurl"]?.[0] || '';
+        /**
+         * Function checkYouTube
+         */
+        const checkYouTube = () => {
+            if (node.remote?.repository?.repositoryType?.toLowerCase() === "youtube") {
+                return {
+                    embedding: UrlEmbeddings.YOUTUBE,
+                    externalId: node.remote?.id ?? ""
+                };
+            }
+            if (url.includes("youtu.be")) {
+                const split = url.split("/");
+                return {
+                    embedding: UrlEmbeddings.YOUTUBE,
+                    externalId: split[split.length - 1]
+                };
+            }
+            if (url.includes(".youtube.com/watch?")) {
+                const urlObject = new URL(url);
+                return {
+                    embedding: UrlEmbeddings.YOUTUBE,
+                    externalId: urlObject.searchParams.get("v") ?? ""
+                };
+            }
+            return null;
+        };
+        /**
+         * Function checkVimeo
+         */
+        const checkVimeo = () => {
+            if (url.includes("vimeo.com")) {
+                const split = url.split("/");
+                return {
+                    embedding: UrlEmbeddings.VIMEO,
+                    externalId: split[split.length - 1]
+                };
+            }
+            return null;
+        };
+        const checkGenericVideo = () => {
+            if (url.length > 0 && ["mp4", "webm"].includes(url.split(".").pop() ?? "")) {
+                return {
+                    embedding: UrlEmbeddings.VIDEO,
+                    externalId: ""
+                };
+            }
+            return null;
+        };
+        /**
+         * Function checkAudio
+         */
+        const checkAudio = () => {
+            if (url.length > 0 && node.mimetype?.startsWith("audio")) {
+                return {
+                    embedding: UrlEmbeddings.AUDIO,
+                    externalId: ""
+                };
+            }
+            return null;
+        };
+        /**
+         * Function checkLti13ToolObject
+         */
+        const checkLti13ToolObject = () => {
+            if (node.aspects?.includes('ccm:ltitool_node')) {
+                return {
+                    embedding: UrlEmbeddings.LTI13TOOL,
+                    externalId: ""
+                };
+            }
+            return null;
+        };
+        /**
+         * Function checkImage
+         */
+        const checkImage = () => {
+            if (node.properties?.["ccm:remoterepositorytype"]?.[0] === "DDB") {
+                return null;
+            }
+            if (node.mediatype === "file-image") {
+                return {
+                    embedding: UrlEmbeddings.IMAGE,
+                    externalId: ""
+                };
+            }
+            const mimeTypeSplit = node.mimetype?.split("/") ?? [];
+            if (mimeTypeSplit.length === 2 && ['png', 'jpg', 'jpeg', 'gif'].includes(mimeTypeSplit[1])) {
+                return {
+                    embedding: UrlEmbeddings.IMAGE,
+                    externalId: ""
+                };
+            }
+            return null;
+        };
+        /**
+         *  Function detectH5P
+         */
+        const detectH5P = () => {
+            if (url.length > 0 && url.includes('h5p.org/h5p/embed')) {
+                return {
+                    embedding: UrlEmbeddings.H5P,
+                    externalId: ""
+                };
+            }
+            return null;
+        };
+        /**
+         * Function detectPrezi
+         */
+        const detectPrezi = () => {
+            if (url.length > 0 && (url.includes('prezi.com/view/')) || url.includes('prezi.com/embed/')) {
+                return {
+                    embedding: UrlEmbeddings.PREZI,
+                    externalId: ""
+                };
+            }
+            return null;
+        };
+        /**
+         * embedding if applicable to node
+         */
+        const embedding = checkYouTube()
+            ?? checkVimeo()
+            ?? checkGenericVideo()
+            ?? checkAudio()
+            ?? checkImage()
+            ?? checkLti13ToolObject()
+            ?? detectH5P()
+            ?? detectPrezi();
+        if (embedding !== null) {
+            return {
+                module: "url",
+                urlModuleConfig: embedding
+            };
+        }
+        return null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ModuleInfoService, deps: [{ token: i1$1.ModuleInfoControllerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ModuleInfoService, providedIn: "root" }); }
 }
@@ -551,7 +643,8 @@ class RenderComponent {
         this.loadData.pipe(filter(() => this.node !== undefined && this.serviceWorkerReady), debounceTime(10), switchMap(() => { return this.checkModule(); })).subscribe(async (frontendModule) => {
             if (frontendModule !== null) {
                 const data = {
-                    module: frontendModule
+                    module: frontendModule.module,
+                    frontendModuleConfig: frontendModule
                 };
                 this.renderData$.next(data);
                 this.finished.next();
@@ -673,22 +766,28 @@ class RenderComponent {
             console.log('Service Worker controlling this page.');
         });
     }
-    async ngOnChanges(changes) {
+    async ngOnChanges(_) {
         this.loadData.next();
     }
     async checkModule() {
         console.log("Checking module");
         if (!await this.moduleInfoService.isAvailableBackendObject(this.request)) {
             console.log("using frontend only module");
-            return "default";
+            if (this.node !== undefined) {
+                return this.moduleInfoService.getFrontendModuleSetting(this.node);
+            }
+            return { module: "default", urlModuleConfig: null };
         }
         else {
             console.log("using backend module");
             return null;
         }
     }
+    getFrontendModule() {
+        return "default";
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderComponent, deps: [{ token: i0.Injector }, { token: i1$1.RenderControllerWrapperService }, { token: i1$1.JobInfoControllerService }, { token: ModuleInfoService }, { token: i3.PlatformLocation }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: RenderComponent, isStandalone: true, selector: "rs-root", inputs: { request: "request", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"module module-{{(renderData$ | async)?.module}}\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML' || data?.module === 'H5P' || data?.module === 'JUPYTER') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    <ng-container *ngIf=\"data.module === 'default'\">\n      @defer (when data.module === 'default') {\n        <rs-module-default [node]=\"node\"></rs-module-default>\n      }\n    </ng-container>\n    <ng-container *ngIf=\"data.module === 'url'\">\n      @defer (when data.module === 'url') {\n        <rs-module-url [node]=\"node\"></rs-module-url>\n      }\n    </ng-container>\n  </ng-container>\n\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: RenderingApiModule }, { kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], () => [Promise.resolve().then(function () { return video_component; }).then(m => m.VideoComponent)], () => [Promise.resolve().then(function () { return pdf_component; }).then(m => m.PdfComponent)], () => [Promise.resolve().then(function () { return eduHtml_component; }).then(m => m.EduHtmlComponent)], () => [Promise.resolve().then(function () { return spreadsheet_component; }).then(m => m.SpreadsheetComponent)], () => [import('./ngx-rendering-service-lib-default.component-BiI-arRn.mjs').then(m => m.DefaultComponent)], () => [Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: RenderComponent, isStandalone: true, selector: "rs-root", inputs: { request: "request", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"module module-{{(renderData$ | async)?.module}}\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML' || data?.module === 'H5P' || data?.module === 'JUPYTER') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    <ng-container *ngIf=\"data.module === 'default'\">\n      @defer (when data.module === 'default') {\n        <rs-module-default [node]=\"node\"></rs-module-default>\n      }\n    </ng-container>\n    <ng-container *ngIf=\"data.module === 'url'\">\n      @defer (when data.module === 'url') {\n        <rs-module-url [node]=\"node\" [data]=\"data\"></rs-module-url>\n      }\n    </ng-container>\n  </ng-container>\n\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: RenderingApiModule }, { kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], deferBlockDependencies: [() => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent)], () => [Promise.resolve().then(function () { return video_component; }).then(m => m.VideoComponent)], () => [Promise.resolve().then(function () { return pdf_component; }).then(m => m.PdfComponent)], () => [Promise.resolve().then(function () { return eduHtml_component; }).then(m => m.EduHtmlComponent)], () => [Promise.resolve().then(function () { return spreadsheet_component; }).then(m => m.SpreadsheetComponent)], () => [import('./ngx-rendering-service-lib-default.component-BiI-arRn.mjs').then(m => m.DefaultComponent)], () => [Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.6", ngImport: i0, type: RenderComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return image_component; }).then(m => m.ImageComponent), Promise.resolve().then(function () { return video_component; }).then(m => m.VideoComponent), Promise.resolve().then(function () { return pdf_component; }).then(m => m.PdfComponent), Promise.resolve().then(function () { return eduHtml_component; }).then(m => m.EduHtmlComponent), Promise.resolve().then(function () { return spreadsheet_component; }).then(m => m.SpreadsheetComponent), import('./ngx-rendering-service-lib-default.component-BiI-arRn.mjs').then(m => m.DefaultComponent), Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)], resolveMetadata: (ImageComponent, VideoComponent, PdfComponent, EduHtmlComponent, SpreadsheetComponent, DefaultComponent, UrlComponent) => ({ decorators: [{
                 type: Component,
@@ -704,7 +803,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.6", ng
                             EduHtmlComponent,
                             SpreadsheetComponent,
                             DefaultComponent,
-                        ], template: "<div class=\"module module-{{(renderData$ | async)?.module}}\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML' || data?.module === 'H5P' || data?.module === 'JUPYTER') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    <ng-container *ngIf=\"data.module === 'default'\">\n      @defer (when data.module === 'default') {\n        <rs-module-default [node]=\"node\"></rs-module-default>\n      }\n    </ng-container>\n    <ng-container *ngIf=\"data.module === 'url'\">\n      @defer (when data.module === 'url') {\n        <rs-module-url [node]=\"node\"></rs-module-url>\n      }\n    </ng-container>\n  </ng-container>\n\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"] }]
+                        ], template: "<div class=\"module module-{{(renderData$ | async)?.module}}\">\n  <ng-container *ngIf=\"renderData$ | async as data\">\n    @defer (when data?.module === 'IMAGE'){\n      <rs-module-image [data]=\"data\" [node]=\"node\"></rs-module-image>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'VIDEO' || data?.module === 'AUDIO'){\n      <rs-module-video [data]=\"data\" [node]=\"node\"></rs-module-video>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'PDF' || data?.module === 'DOCUMENT') {\n      <rs-module-pdf [data]=\"data\" [node]=\"node\"></rs-module-pdf>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'EDUHTML' || data?.module === 'H5P' || data?.module === 'JUPYTER') {\n      <rs-module-eduHtml [data]=\"data\" [node]=\"node\"></rs-module-eduHtml>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    @defer (when data?.module === 'SPREADSHEET') {\n      <rs-module-spreadsheet [data]=\"data\" [node]=\"node\"></rs-module-spreadsheet>\n    } @loading {\n      <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n    }\n    <ng-container *ngIf=\"data.module === 'default'\">\n      @defer (when data.module === 'default') {\n        <rs-module-default [node]=\"node\"></rs-module-default>\n      }\n    </ng-container>\n    <ng-container *ngIf=\"data.module === 'url'\">\n      @defer (when data.module === 'url') {\n        <rs-module-url [node]=\"node\" [data]=\"data\"></rs-module-url>\n      }\n    </ng-container>\n  </ng-container>\n\n  <div class=\"progress\" *ngIf=\"(renderData$ | async) === null;\">\n    <ng-container *ngIf=\"progress$ | async as progress\">\n      <ng-container [ngSwitch]=\"['VIDEO', 'AUDIO'].includes(progress.module) ? 'bar' : 'spinner'\">\n        <ng-container *ngSwitchCase=\"'bar'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}}</div>\n          <mat-progress-bar [value]=\"(progress.progress ?? 0)\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-progress-bar>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'spinner'\">\n          <div *ngIf=\"(progress.progress ?? 0) < 0\">Queue position: {{-(progress.progress ?? 0)}</div>\n          <mat-spinner [diameter]=\"50\" *ngIf=\"(progress.progress ?? 0) >= 0\"></mat-spinner>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #loading>\n  <div class=\"progress\">\n    <mat-spinner></mat-spinner>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;gap:20px;padding:10px 30px}.module{overflow:auto;display:flex;flex-grow:1;height:auto;border:1px solid #aaa;padding:20px}.module rs-module-image,.module rs-module-video{width:100%}.module .progress{display:flex;justify-content:center;flex-grow:1}\n"] }]
             }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.RenderControllerWrapperService }, { type: i1$1.JobInfoControllerService }, { type: ModuleInfoService }, { type: i3.PlatformLocation }], propDecorators: { request: [{
                     type: Input
                 }], node: [{