ngx-rendering-service-lib 0.0.0

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

@@ -0,0 +1,613 @@
+import * as i0 from '@angular/core';
+import { NgModule, signal, Component, Input, HostListener, ViewChild, ViewEncapsulation } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import * as i1 from 'ngx-edu-sharing-api';
+import { EduSharingApiModule } from 'ngx-edu-sharing-api';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule, MatIconButton } from '@angular/material/button';
+import { MatSelect, MatOption } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatMenu, MatMenuTrigger, MatMenuItem } from '@angular/material/menu';
+import * as i3$1 from 'ng2-pdfjs-viewer';
+import { PdfJsViewerModule } from 'ng2-pdfjs-viewer';
+import * as i1$1 from 'ngx-rendering-service-api';
+import { RenderingServiceApiModule } from 'ngx-rendering-service-api';
+import { YouTubePlayer } from '@angular/youtube-player';
+import * as i1$2 from '@angular/platform-browser';
+import { BehaviorSubject, Subject, firstValueFrom, interval, takeUntil, switchMap } from 'rxjs';
+import * as i3$2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i4 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+const environment = {
+    production: false,
+    rootUrl: 'http://localhost:8080',
+    esRootUrl: 'http://repository.127.0.0.1.nip.io:8100/edu-sharing/rest',
+};
+
+class RenderingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: RenderingModule, imports: [CommonModule, i1.EduSharingApiModule], exports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingModule, imports: [CommonModule,
+            EduSharingApiModule.forRoot({ rootUrl: environment.esRootUrl }), CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        EduSharingApiModule.forRoot({ rootUrl: environment.esRootUrl })
+                    ],
+                    exports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class ImageComponent {
+    constructor(element) {
+        this.element = element;
+        this.activeObject = signal(undefined);
+    }
+    ngAfterViewInit() {
+        this.loadOptimalSize();
+    }
+    loadOptimalSize() {
+        const size = this.element.nativeElement.getBoundingClientRect();
+        const allFinishedItems = this.data?.items?.filter(item => item.link !== "");
+        this.activeObject.set(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]);
+    }
+    toggleFullscreen() {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            this.element.nativeElement.requestFullscreen();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: ImageComponent, isStandalone: true, selector: "rs-module-image", inputs: { data: "data", node: "node" }, host: { listeners: { "document:fullscreenchange": "loadOptimalSize()" } }, ngImport: i0, template: "<div class=\"image-wrapper\"\n  *ngIf=\"activeObject()\"\n>\n  <img\n    #image\n    [src]=\"activeObject()?.link\"\n    [alt]=\"node?.title\"\n  >\n  <button mat-icon-button (click)=\"toggleFullscreen()\"><mat-icon>fullscreen</mat-icon></button>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.image-wrapper{width:100%}.image-wrapper img{width:100%;position:relative}.image-wrapper button{position:absolute;right:0;color:#fff;background-color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-module-image', standalone: true, imports: [
+                        RenderingModule,
+                        MatButtonModule,
+                        MatIconModule,
+                    ], template: "<div class=\"image-wrapper\"\n  *ngIf=\"activeObject()\"\n>\n  <img\n    #image\n    [src]=\"activeObject()?.link\"\n    [alt]=\"node?.title\"\n  >\n  <button mat-icon-button (click)=\"toggleFullscreen()\"><mat-icon>fullscreen</mat-icon></button>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center}.image-wrapper{width:100%}.image-wrapper img{width:100%;position:relative}.image-wrapper button{position:absolute;right:0;color:#fff;background-color:#00000080}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }], loadOptimalSize: [{
+                type: HostListener,
+                args: ['document:fullscreenchange']
+            }] } });
+
+var image_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ImageComponent: ImageComponent
+});
+
+class VideoComponent {
+    constructor() {
+        this.activeObject = signal(undefined);
+    }
+    ngAfterViewInit() {
+        const downlink = navigator.connection?.downlink;
+        let optimalResolution = 720;
+        if (downlink < 2) {
+            optimalResolution = 240;
+        }
+        if (downlink > 6) {
+            optimalResolution = 1080;
+        }
+        const allFinishedItems = this.data?.items?.filter(item => item.link !== "");
+        this.activeObject.set(allFinishedItems?.sort((a, b) => {
+            // sort by the image size closest to the viewport
+            return Math.abs(a.width - optimalResolution) > Math.abs(b.width - optimalResolution) ? 1 : -1;
+        })[0]);
+    }
+    switchResolution(item) {
+        this.activeObject.set(item);
+        const currentTime = this.videoRef?.nativeElement.currentTime;
+        this.videoRef?.nativeElement.load();
+        if (currentTime !== undefined) {
+            this.videoRef.nativeElement.currentTime = currentTime;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: VideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: VideoComponent, isStandalone: true, selector: "rs-module-video", inputs: { data: "data", node: "node" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }], ngImport: i0, template: "<div class=\"video-wrapper\" *ngIf=\"activeObject()\">\n  <video\n    controls\n    #video\n  >\n    <source [src]=\"activeObject()?.link\" />\n  </video>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"resolutionMenu\"\n  >\n    <mat-icon>settings</mat-icon>\n  </button>\n  <mat-menu\n    #resolutionMenu=\"matMenu\"\n    xPosition=\"before\"\n  >\n    <button\n      mat-menu-item\n      *ngFor=\"let item of data?.items\"\n      [disabled]=\"item.link === ''\"\n      (click)=\"item.height !== activeObject()?.height && switchResolution(item)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"item.link !== '' ? ready : loading\"\n        [ngTemplateOutletContext]=\"{item:item}\"\n      >\n      </ng-container>\n    </button>\n\n  </mat-menu>\n</div>\n\n<ng-template #ready let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <mat-icon *ngIf=\"item.height === activeObject()?.height\">\n      done\n    </mat-icon>\n    <div *ngIf=\"item.height !== activeObject()?.height\"></div>\n    <div>\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loading let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <div>\n      {{item.progress >= 0 ? \"Converting: \" + item.progress + \"%\" : \"Queue position: \" + -item.progress}}\n    </div>\n    <div style=\"padding-left: .5em\">\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n", styles: [".video-wrapper{width:100%;position:relative}.video-wrapper video{width:100%;display:block}.video-wrapper button{position:absolute;right:0;top:0;color:#fff;background-color:#00000080}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: VideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-module-video', standalone: true, imports: [
+                        RenderingModule,
+                        MatIcon,
+                        MatIconButton,
+                        MatSelect,
+                        FormsModule,
+                        MatOption,
+                        MatMenu,
+                        MatMenuTrigger,
+                        MatMenuItem
+                    ], template: "<div class=\"video-wrapper\" *ngIf=\"activeObject()\">\n  <video\n    controls\n    #video\n  >\n    <source [src]=\"activeObject()?.link\" />\n  </video>\n  <button\n    mat-icon-button\n    [matMenuTriggerFor]=\"resolutionMenu\"\n  >\n    <mat-icon>settings</mat-icon>\n  </button>\n  <mat-menu\n    #resolutionMenu=\"matMenu\"\n    xPosition=\"before\"\n  >\n    <button\n      mat-menu-item\n      *ngFor=\"let item of data?.items\"\n      [disabled]=\"item.link === ''\"\n      (click)=\"item.height !== activeObject()?.height && switchResolution(item)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"item.link !== '' ? ready : loading\"\n        [ngTemplateOutletContext]=\"{item:item}\"\n      >\n      </ng-container>\n    </button>\n\n  </mat-menu>\n</div>\n\n<ng-template #ready let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <mat-icon *ngIf=\"item.height === activeObject()?.height\">\n      done\n    </mat-icon>\n    <div *ngIf=\"item.height !== activeObject()?.height\"></div>\n    <div>\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #loading let-item='item'>\n  <div style=\"display: flex; justify-content: space-between\">\n    <div>\n      {{item.progress >= 0 ? \"Converting: \" + item.progress + \"%\" : \"Queue position: \" + -item.progress}}\n    </div>\n    <div style=\"padding-left: .5em\">\n      {{item.height}}p\n    </div>\n  </div>\n</ng-template>\n", styles: [".video-wrapper{width:100%;position:relative}.video-wrapper video{width:100%;display:block}.video-wrapper button{position:absolute;right:0;top:0;color:#fff;background-color:#00000080}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }], videoRef: [{
+                type: ViewChild,
+                args: ["video"]
+            }] } });
+
+var video_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    VideoComponent: VideoComponent
+});
+
+class PdfComponent {
+    constructor(assetControllerService) {
+        this.assetControllerService = assetControllerService;
+        this.restrictedView = false;
+    }
+    ngOnChanges(changes) {
+        this.downloadFile();
+    }
+    downloadFile() {
+        if (this.data?.items === undefined || this.data.items[0].link === "") {
+            return;
+        }
+        const url = new URL(this.data.items[0].link);
+        const assetParams = url.searchParams.get('assetParams');
+        if (assetParams === null) {
+            return;
+        }
+        const params = {
+            assetParams: assetParams
+        };
+        this.assetControllerService.getAsset$Response(params)
+            .subscribe(async (response) => {
+            let responseData = response.body;
+            if (response.headers.get("content-type") === "application/octet-stream") {
+                this.restrictedView = true;
+                responseData = responseData.slice(0, responseData.size, "application/pdf");
+            }
+            this.fileData = responseData;
+        });
+    }
+    onDocumentLoad() {
+        if (this.restrictedView) {
+            const iFrameDocument = this.viewerRef?.iframe.nativeElement.contentWindow.document;
+            const iFrameWindow = this.viewerRef?.iframe.nativeElement.contentWindow;
+            iFrameWindow.print = () => { alert("Nice try!"); };
+            iFrameDocument.querySelector(".textLayer").style.display = "none";
+            iFrameDocument.body.addEventListener('contextmenu', (event) => { event.preventDefault(); });
+            ['keyup', 'keydown'].forEach(type => {
+                iFrameDocument.addEventListener(type, (event) => {
+                    if ((event.key === 's' && event.ctrlKey) || event.key === 'F12') {
+                        event.preventDefault();
+                        if (event.stopImmediatePropagation) {
+                            event.stopImmediatePropagation();
+                        }
+                        else {
+                            event.stopPropagation();
+                        }
+                    }
+                });
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PdfComponent, deps: [{ token: i1$1.AssetControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: PdfComponent, isStandalone: true, selector: "rs-module-pdf", inputs: { data: "data", node: "node" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pdf-wrapper\" *ngIf=\"fileData !== undefined\">\n  <ng2-pdfjs-viewer\n    #pdfViewer\n    [pdfSrc]=\"fileData\"\n    [print]=\"!restrictedView\"\n    [download]=\"!restrictedView\"\n    (onDocumentLoad)=\"onDocumentLoad()\"\n  >\n  </ng2-pdfjs-viewer>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.pdf-wrapper{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: PdfJsViewerModule }, { kind: "component", type: i3$1.PdfJsViewerComponent, selector: "ng2-pdfjs-viewer", inputs: ["viewerId", "viewerFolder", "externalWindow", "target", "showSpinner", "downloadFileName", "openFile", "download", "startDownload", "viewBookmark", "print", "startPrint", "fullScreen", "find", "zoom", "nameddest", "pagemode", "lastPage", "rotatecw", "rotateccw", "cursor", "scroll", "spread", "locale", "useOnlyCssZoom", "errorOverride", "errorAppend", "errorMessage", "diagnosticLogs", "externalWindowOptions", "page", "pdfSrc"], outputs: ["onBeforePrint", "onAfterPrint", "onDocumentLoad", "onPageChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: PdfComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-module-pdf', standalone: true, imports: [
+                        RenderingModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        PdfJsViewerModule
+                    ], template: "<div class=\"pdf-wrapper\" *ngIf=\"fileData !== undefined\">\n  <ng2-pdfjs-viewer\n    #pdfViewer\n    [pdfSrc]=\"fileData\"\n    [print]=\"!restrictedView\"\n    [download]=\"!restrictedView\"\n    (onDocumentLoad)=\"onDocumentLoad()\"\n  >\n  </ng2-pdfjs-viewer>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.pdf-wrapper{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.AssetControllerService }], propDecorators: { data: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }], viewerRef: [{
+                type: ViewChild,
+                args: ["pdfViewer"]
+            }] } });
+
+var pdf_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PdfComponent: PdfComponent
+});
+
+class UrlComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.gdpr = undefined;
+        this.gdprOk = false;
+        this.embedding = null;
+        this.externalId = null;
+        this.url = "";
+        this.isRemoteRepoResource = false;
+    }
+    ngOnChanges(changes) {
+        this.url = this.node?.properties !== undefined ? this.node.properties["ccm:wwwurl"][0] : "";
+        this.setEmbeddingType();
+    }
+    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 !== undefined && 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$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,
+            args: [{ selector: 'rs-module-url', standalone: true, imports: [
+                        RenderingModule,
+                        MatButtonModule,
+                        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"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { data: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+var url_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UrlComponent: UrlComponent
+});
+
+class EduHtmlComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    getSafeUri() {
+        if (this.data?.items !== undefined && this.data.items[0].link) {
+            return this.sanitizer.bypassSecurityTrustResourceUrl(this.data.items[0].link);
+        }
+        return new class {
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: EduHtmlComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: EduHtmlComponent, isStandalone: true, selector: "rs-module-eduHtml", inputs: { data: "data", node: "node" }, ngImport: i0, template: "<div class=\"eduHtml-wrapper\" *ngIf=\"data?.items !== undefined\">\n  <iframe [src]=\"getSafeUri()\"></iframe>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.eduHtml-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: EduHtmlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-module-eduHtml', standalone: true, imports: [
+                        RenderingModule,
+                        MatButtonModule,
+                        MatIconModule
+                    ], template: "<div class=\"eduHtml-wrapper\" *ngIf=\"data?.items !== undefined\">\n  <iframe [src]=\"getSafeUri()\"></iframe>\n</div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.eduHtml-wrapper{width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { data: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+var eduHtml_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    EduHtmlComponent: EduHtmlComponent
+});
+
+class SpreadsheetComponent {
+    constructor(assetControllerService) {
+        this.assetControllerService = assetControllerService;
+        this.fileData = "";
+    }
+    ngOnChanges(changes) {
+        this.downloadFile();
+    }
+    downloadFile() {
+        if (this.data?.items === undefined || this.data.items[0].link === "") {
+            return;
+        }
+        const url = new URL(this.data.items[0].link);
+        const assetParams = url.searchParams.get('assetParams');
+        if (assetParams === null) {
+            return;
+        }
+        const params = {
+            assetParams: assetParams
+        };
+        this.assetControllerService.getAsset$Response(params)
+            .subscribe(async (response) => {
+            this.fileData = await response.body.text();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i1$1.AssetControllerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: SpreadsheetComponent, isStandalone: true, selector: "rs-module-spreadsheet", inputs: { data: "data", node: "node" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"spreadsheet-wrapper\" [innerHTML]=\"fileData\"></div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.spreadsheet-wrapper{width:100%;max-height:30em;padding:.5em}table{border-collapse:collapse}tr{border:none}td{border-right:dotted 1px lightslategrey;border-left:dotted 1px lightslategrey}tr:nth-child(odd){background-color:#b0c4de}td{padding:.5em}td:hover{background-color:#ffa07a}\n"], dependencies: [{ kind: "ngmodule", type: RenderingModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: SpreadsheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rs-module-spreadsheet', standalone: true, imports: [
+                        RenderingModule,
+                        MatButtonModule,
+                        MatIconModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"spreadsheet-wrapper\" [innerHTML]=\"fileData\"></div>\n", styles: [":host{position:relative;display:flex;align-items:center;width:100%}.spreadsheet-wrapper{width:100%;max-height:30em;padding:.5em}table{border-collapse:collapse}tr{border:none}td{border-right:dotted 1px lightslategrey;border-left:dotted 1px lightslategrey}tr:nth-child(odd){background-color:#b0c4de}td{padding:.5em}td:hover{background-color:#ffa07a}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.AssetControllerService }], propDecorators: { data: [{
+                type: Input
+            }], node: [{
+                type: Input
+            }] } });
+
+var spreadsheet_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SpreadsheetComponent: SpreadsheetComponent
+});
+
+class RenderingApiModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingApiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: RenderingApiModule, imports: [i1$1.RenderingServiceApiModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingApiModule, imports: [RenderingServiceApiModule.forRoot({
+                rootUrl: environment.rootUrl
+            })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingApiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RenderingServiceApiModule.forRoot({
+                            rootUrl: environment.rootUrl
+                        })
+                    ]
+                }]
+        }] });
+
+class RenderComponent {
+    constructor(renderControllerService, jobInfoControllerService) {
+        this.renderControllerService = renderControllerService;
+        this.jobInfoControllerService = jobInfoControllerService;
+        this.renderData$ = new BehaviorSubject(null);
+        this.finished = new Subject();
+        this.someButNotAllFinished = new Subject();
+        this.progress$ = new BehaviorSubject(null);
+        this.useUrlModule = false;
+    }
+    async ngOnChanges(changes) {
+        if (this.node === undefined || !this.checkIfBackendModule()) {
+            return;
+        }
+        const renderResponseData = (await firstValueFrom(this.renderControllerService.getRenderData({
+            body: this.request
+        })));
+        // It is possible that there is completed data AND a job id (if there).
+        // We need the data then AND trigger the progress logic to keep loading the unfinished resolutions.
+        if (renderResponseData.jobId === null) {
+            const items = renderResponseData.objectLinks?.map(item => {
+                const assetItem = {
+                    link: item.link,
+                    progress: 100,
+                    height: item.height,
+                    width: item.width
+                };
+                return assetItem;
+            });
+            const data = {
+                module: renderResponseData.module,
+                items: items
+            };
+            renderResponseData.objectLinks !== undefined && this.renderData$.next(data);
+            this.finished.next();
+        }
+        else {
+            this.progress$.next({ module: renderResponseData.module });
+            interval(500).pipe(takeUntil(this.finished), switchMap(() => this.jobInfoControllerService.getJobInfo({ jobId: renderResponseData.jobId }).pipe())).subscribe(async (status) => {
+                // Some, but not all, jobs are finished ->
+                if (status.jobs.some(j => j.status === 'FINISHED') && status.status !== 'FINISHED') {
+                    const items = status.jobs.map(subJob => {
+                        const assetItem = {
+                            link: subJob.objectLink?.link ?? "",
+                            progress: subJob.status !== 'QUEUED' ? subJob.progress : -(subJob.progress + 1),
+                            height: subJob.objectLink?.height ?? subJob.quality,
+                            width: subJob.objectLink?.width ?? 0
+                        };
+                        return assetItem;
+                    });
+                    const data = {
+                        module: renderResponseData.module,
+                        items: items
+                    };
+                    this.renderData$.next(data);
+                    this.someButNotAllFinished.next(true);
+                    // all finished and/or failed
+                }
+                else if (status.status === 'FINISHED' || status.status === 'FAILED') {
+                    const items = status.jobs.map(subJob => {
+                        const assetItem = {
+                            link: subJob.objectLink?.link ?? "",
+                            progress: subJob.progress,
+                            height: subJob.objectLink?.height ?? subJob.quality,
+                            width: subJob.objectLink?.width ?? 0
+                        };
+                        return assetItem;
+                    });
+                    const data = {
+                        module: renderResponseData.module,
+                        items: items
+                    };
+                    this.renderData$.next(data);
+                    this.finished.next();
+                }
+                else {
+                    // no finished jobs -> show either one progress bar with race leader (progress 0-100)
+                    // or queue position (progress (-inf,-1])
+                    let progress = 0;
+                    if (status.jobs.some(j => j.status === 'PROCESSING')) {
+                        progress = Math.max(...status.jobs.map(j => j.progress));
+                    }
+                    else if (status.jobs.some(j => j.status === 'QUEUED')) {
+                        progress = -(Math.min(...status.jobs.map(j => j.progress + 1)));
+                    }
+                    this.progress$.next({
+                        module: status.module,
+                        progress: progress
+                    });
+                }
+            });
+        }
+    }
+    checkIfBackendModule() {
+        if (["youtube", "pixabay"].includes((this.node?.remote?.repository?.repositoryType ?? "").toLowerCase())) {
+            this.useUrlModule = true;
+            return false;
+        }
+        if (this.node?.properties === undefined) {
+            return true;
+        }
+        if (this.node?.properties["ccm:replicationsource"] !== undefined && (this.node.properties["ccm:replicationsource"][0] ?? "") === "oai:dmglib.org") {
+            this.useUrlModule = true;
+            return false;
+        }
+        if (this.node?.properties["ccm:wwwurl"].length > 0) {
+            this.useUrlModule = true;
+            return false;
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderComponent, deps: [{ token: i1$1.RenderControllerService }, { token: i1$1.JobInfoControllerService }], 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\">\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') {\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>\n  <ng-container *ngIf=\"useUrlModule\">\n  @defer (when useUrlModule) {\n    <rs-module-url [node]=\"node\"></rs-module-url>\n  }\n  </ng-container>\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i4.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)], () => [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), Promise.resolve().then(function () { return url_component; }).then(m => m.UrlComponent)], resolveMetadata: (ImageComponent, VideoComponent, PdfComponent, EduHtmlComponent, SpreadsheetComponent, UrlComponent) => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'rs-root', standalone: true, imports: [
+                            RenderingApiModule,
+                            RenderingModule,
+                            ImageComponent,
+                            VideoComponent,
+                            MatProgressSpinnerModule,
+                            MatProgressBarModule,
+                            PdfComponent,
+                            UrlComponent,
+                            EduHtmlComponent,
+                            SpreadsheetComponent,
+                        ], template: "<div class=\"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') {\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>\n  <ng-container *ngIf=\"useUrlModule\">\n  @defer (when useUrlModule) {\n    <rs-module-url [node]=\"node\"></rs-module-url>\n  }\n  </ng-container>\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: i1$1.RenderControllerService }, { type: i1$1.JobInfoControllerService }], propDecorators: { request: [{
+                    type: Input
+                }], node: [{
+                    type: Input
+                }] } }) });
+
+class RenderingServiceLibModule {
+    static forRoot() {
+        return {
+            ngModule: RenderingServiceLibModule,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingServiceLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: RenderingServiceLibModule, imports: [RenderComponent,
+            CommonModule], exports: [CommonModule,
+            RenderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingServiceLibModule, imports: [RenderComponent,
+            CommonModule, CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: RenderingServiceLibModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        RenderComponent,
+                        CommonModule,
+                    ],
+                    exports: [
+                        CommonModule,
+                        RenderComponent
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of edu-sharing-ui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EduHtmlComponent, ImageComponent, PdfComponent, RenderComponent, RenderingModule, RenderingServiceLibModule, SpreadsheetComponent, UrlComponent, VideoComponent };
+//# sourceMappingURL=ngx-rendering-service-lib.mjs.map