speechrecorderng 3.11.11 → 3.11.13

package/fesm2022/speechrecorderng.mjs

@@ -4,34 +4,34 @@ import { Observable, expand, EMPTY, map, BehaviorSubject } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpErrorResponse, HttpHeaders, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { timeout } from 'rxjs/operators';
-import * as i1$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4$1 from '@angular/material/checkbox';
+import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2 from '@angular/material/icon';
+import * as i1$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4 from '@angular/material/tooltip';
+import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$2 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i1$3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3 from '@angular/material/button';
+import * as i3$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { __decorate, __param } from 'tslib';
-import * as i3$1 from '@angular/material/progress-spinner';
+import * as i2$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i7 from '@angular/material/progress-bar';
+import * as i6 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i4$2 from '@angular/router';
+import * as i4 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import * as i3$2 from '@angular/material/card';
+import * as i2$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i6 from '@angular/material/snack-bar';
+import * as i6$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i4$3 from '@angular/material/table';
+import * as i4$1 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
@@ -4962,10 +4962,10 @@ class SpeechRecorderConfig {
         this.apiType = null;
         this.withCredentials = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechRecorderConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechRecorderConfig }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechRecorderConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechRecorderConfig }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechRecorderConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechRecorderConfig, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -5016,12 +5016,12 @@ class ProjectService {
         let prjUrl = this.projectUrl(id);
         return this.http.get(prjUrl, { withCredentials: this.withCredentials });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ProjectService, deps: [{ token: i1.HttpClient }, { token: i1$1.PlatformLocation }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ProjectService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProjectService, deps: [{ token: i1.HttpClient }, { token: i2.PlatformLocation }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProjectService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ProjectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProjectService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.PlatformLocation }, { type: SpeechRecorderConfig, decorators: [{
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.PlatformLocation }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
                     args: [SPEECHRECORDER_CONFIG]
                 }] }] });
@@ -5077,10 +5077,10 @@ class SessionService {
         });
         return wrapObs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -5118,8 +5118,8 @@ class SimpleTrafficLight {
             this.lightbottom = 'grey';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SimpleTrafficLight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: SimpleTrafficLight, isStandalone: false, selector: "app-simpletrafficlight", inputs: { status: "status" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SimpleTrafficLight, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SimpleTrafficLight, isStandalone: false, selector: "app-simpletrafficlight", inputs: { status: "status" }, ngImport: i0, template: `
 
     <div>
       <div class="circle {{lighttop}}"></div>
@@ -5128,7 +5128,7 @@ class SimpleTrafficLight {
     </div>
   `, isInline: true, styles: [".circle{width:50px;height:50px;border-radius:50%;margin:5px;background:gray}\n", ".red{background:red}\n", ".yellow{background:#ff0}\n", ".green{background:green}\n", ".black{background:#000}\n", ":host{display:flex;flex-direction:column;background:#000;padding:2px;height:170px;max-height:170px;flex:0 0 content}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SimpleTrafficLight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SimpleTrafficLight, decorators: [{
             type: Component,
             args: [{ selector: 'app-simpletrafficlight', template: `
 
@@ -5198,10 +5198,10 @@ class CanvasLayerComponent {
             return virtualPos;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CanvasLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: CanvasLayerComponent, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CanvasLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: CanvasLayerComponent, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CanvasLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CanvasLayerComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
@@ -5440,10 +5440,10 @@ class BasicAudioCanvasLayerComponent extends CanvasLayerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BasicAudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: BasicAudioCanvasLayerComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BasicAudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: BasicAudioCanvasLayerComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BasicAudioCanvasLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BasicAudioCanvasLayerComponent, decorators: [{
             type: Directive
         }] });
 class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
@@ -5619,10 +5619,10 @@ class AudioCanvasLayerComponent extends BasicAudioCanvasLayerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: AudioCanvasLayerComponent, isStandalone: true, inputs: { pointerPosition: "pointerPosition", selecting: "selecting", selection: "selection" }, outputs: { pointerPositionEventEmitter: "pointerPositionEventEmitter", selectingEventEmitter: "selectingEventEmitter", selectedEventEmitter: "selectedEventEmitter" }, host: { listeners: { "document:mouseup": "onMouseup($event)" } }, viewQueries: [{ propertyName: "bgCanvasRef", first: true, predicate: ["bg"], descendants: true, static: true }, { propertyName: "cursorCanvasRef", first: true, predicate: ["cursor"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioCanvasLayerComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: AudioCanvasLayerComponent, isStandalone: true, inputs: { pointerPosition: "pointerPosition", selecting: "selecting", selection: "selection" }, outputs: { pointerPositionEventEmitter: "pointerPositionEventEmitter", selectingEventEmitter: "selectingEventEmitter", selectedEventEmitter: "selectedEventEmitter" }, host: { listeners: { "document:mouseup": "onMouseup($event)" } }, viewQueries: [{ propertyName: "bgCanvasRef", first: true, predicate: ["bg"], descendants: true, static: true }, { propertyName: "cursorCanvasRef", first: true, predicate: ["cursor"], descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioCanvasLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioCanvasLayerComponent, decorators: [{
             type: Directive
         }], propDecorators: { bgCanvasRef: [{
                 type: ViewChild,
@@ -6151,15 +6151,15 @@ class AudioSignal extends AudioCanvasLayerComponent {
         this._audioDataHolder = audioData;
         this.playFramePosition = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioSignal, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioSignal, isStandalone: false, selector: "audio-signal", viewQueries: [{ propertyName: "audioSignalCanvasRef", first: true, predicate: ["audioSignal"], descendants: true, static: true }, { propertyName: "playPosCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioSignal, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AudioSignal, isStandalone: false, selector: "audio-signal", viewQueries: [{ propertyName: "audioSignalCanvasRef", first: true, predicate: ["audioSignal"], descendants: true, static: true }, { propertyName: "playPosCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <canvas #bg height="10"></canvas>
     <canvas #audioSignal height="10"></canvas>
     <canvas #cursor height="10" (mousedown)="selectionStart($event)" (mouseover)="updateCursorCanvas($event)" (mousemove)="updateCursorCanvas($event)"
             (mouseleave)="updateCursorCanvas($event, false)"></canvas>
     <canvas #marker height="10"></canvas>`, isInline: true, styles: [":host{min-height:0px}\n", "canvas{top:0;left:0;width:0;height:0;min-height:0px;position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioSignal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioSignal, decorators: [{
             type: Component,
             args: [{ selector: 'audio-signal', template: `
     <canvas #bg height="10"></canvas>
@@ -7297,15 +7297,15 @@ class Sonagram extends AudioCanvasLayerComponent {
         this._audioDataHolder = audioData;
         this.playFramePosition = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Sonagram, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: Sonagram, isStandalone: false, selector: "audio-sonagram", viewQueries: [{ propertyName: "sonagramCanvasRef", first: true, predicate: ["sonagram"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Sonagram, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: Sonagram, isStandalone: false, selector: "audio-sonagram", viewQueries: [{ propertyName: "sonagramCanvasRef", first: true, predicate: ["sonagram"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["marker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
         <canvas #sonagram height="10"></canvas>
         <canvas #bg height="10"></canvas>
         <canvas #cursor height="10" (mousedown)="selectionStart($event)" (mouseover)="updateCursorCanvas($event)" (mousemove)="updateCursorCanvas($event)"
                 (mouseleave)="updateCursorCanvas($event, false)"></canvas>
         <canvas #marker height="10"></canvas>`, isInline: true, styles: [":host{min-height:0px}\n", "canvas{top:0;left:0;width:0;height:0;min-height:0px;position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Sonagram, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Sonagram, decorators: [{
             type: Component,
             args: [{ selector: 'audio-sonagram', template: `
         <canvas #sonagram height="10"></canvas>
@@ -7676,8 +7676,8 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
         this.as.playFramePosition = playFramePosition;
         this.so.playFramePosition = playFramePosition;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioClipUIContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioClipUIContainer, isStandalone: false, selector: "app-audio", inputs: { audioData: "audioData", audioClip: "audioClip" }, outputs: { selectionEventEmitter: "selectionEventEmitter" }, host: { listeners: { "window:resize": "onResize($event)", "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["divider"], descendants: true, static: true }, { propertyName: "ceRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "as", first: true, predicate: AudioSignal, descendants: true, static: true }, { propertyName: "so", first: true, predicate: Sonagram, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioClipUIContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AudioClipUIContainer, isStandalone: false, selector: "app-audio", inputs: { audioData: "audioData", audioClip: "audioClip" }, outputs: { selectionEventEmitter: "selectionEventEmitter" }, host: { listeners: { "window:resize": "onResize($event)", "document:mouseup": "onMouseup($event)", "document:mousemove": "onMousemove($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["divider"], descendants: true, static: true }, { propertyName: "ceRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "as", first: true, predicate: AudioSignal, descendants: true, static: true }, { propertyName: "so", first: true, predicate: Sonagram, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <div #virtualCanvas>
     <canvas #divider (mousedown)="mousedown($event)" (mouseover)="mouseover($event)"
             (mouseleave)="mouseleave($event)" height="10"></canvas>
@@ -7686,7 +7686,7 @@ class AudioClipUIContainer extends BasicAudioCanvasLayerComponent {
     </div>
   `, isInline: true, styles: ["div{margin:0;padding:0;top:0;left:0;width:100%;height:100%;position:relative;box-sizing:border-box;transform:none;overflow:hidden}\n", "canvas{top:0;left:0;width:0;height:0;cursor:ns-resize;position:absolute;z-index:1;transform:none}\n", "audio-signal{top:0;left:0;position:absolute;z-index:1;transform:none}\n", "audio-sonagram{top:0;left:0;position:absolute;z-index:1;transform:none}\n"], dependencies: [{ kind: "component", type: AudioSignal, selector: "audio-signal" }, { kind: "component", type: Sonagram, selector: "audio-sonagram" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioClipUIContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioClipUIContainer, decorators: [{
             type: Component,
             args: [{ selector: 'app-audio', template: `
     <div #virtualCanvas>
@@ -7830,14 +7830,14 @@ class AudioDisplayScrollPane {
     set playFramePosition(framePos) {
         this.ac.playFramePosition = framePos;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplayScrollPane, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioDisplayScrollPane, isStandalone: false, selector: "audio-display-scroll-pane", inputs: { audioClip: "audioClip" }, outputs: { zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomSelectedAction: "zoomSelectedAction", zoomFitToPanelAction: "zoomFitToPanelAction" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ac", first: true, predicate: AudioClipUIContainer, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplayScrollPane, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AudioDisplayScrollPane, isStandalone: false, selector: "audio-display-scroll-pane", inputs: { audioClip: "audioClip" }, outputs: { zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomSelectedAction: "zoomSelectedAction", zoomFitToPanelAction: "zoomFitToPanelAction" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ac", first: true, predicate: AudioClipUIContainer, descendants: true, static: true }], ngImport: i0, template: `
 
     <app-audio #audioSignalContainer (selectionEventEmitter)="selectionChanged($event)"></app-audio>
 
   `, isInline: true, styles: [":host{flex:2;width:100%;background:#a9a9a9;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n", "app-audio{margin:0;padding:0;top:0;left:0;width:100%;height:100%;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: AudioClipUIContainer, selector: "app-audio", inputs: ["audioData", "audioClip"], outputs: ["selectionEventEmitter"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplayScrollPane, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplayScrollPane, decorators: [{
             type: Component,
             args: [{ selector: 'audio-display-scroll-pane', template: `
 
@@ -7893,97 +7893,99 @@ class AudioDisplayControl {
     error() {
         this.status = 'ERROR';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplayControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioDisplayControl, isStandalone: false, selector: "audio-display-control", inputs: { audioClip: "audioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", playStopAction: "playStopAction", zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomFitToPanelAction: "zoomFitToPanelAction", zoomSelectedAction: "zoomSelectedAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction" }, viewQueries: [{ propertyName: "autoplaySelectedCheckbox", first: true, predicate: MatCheckbox, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplayControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AudioDisplayControl, isStandalone: false, selector: "audio-display-control", inputs: { audioClip: "audioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", playStopAction: "playStopAction", zoomInAction: "zoomInAction", zoomOutAction: "zoomOutAction", zoomFitToPanelAction: "zoomFitToPanelAction", zoomSelectedAction: "zoomSelectedAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction" }, viewQueries: [{ propertyName: "autoplaySelectedCheckbox", first: true, predicate: MatCheckbox, descendants: true, static: true }], ngImport: i0, template: `
         <div #controlPanel style="display:flex;flex-direction: row;">
-            <fieldset>
+          <fieldset>
 
-                <legend>Play</legend>
+            <legend>Play</legend>
 
-                <button (click)="playStartAction?.perform()" [disabled]="playStartAction?.disabled"
-                        [style.color]="playStartAction?.disabled ? 'grey' : 'green'" matTooltip="Play all">
-                    <mat-icon>play_arrow</mat-icon>
-                </button>
-                <button (click)="playSelectionAction?.perform()" [disabled]="playSelectionAction?.disabled"
-                        [style.color]="playSelectionAction?.disabled ? 'grey' : 'green'" matTooltip="Play selection">
-                    <mat-icon>play_circle_outline</mat-icon>
-                </button>
-                <button (click)="playStopAction?.perform()" [disabled]="playStopAction?.disabled"
-                        [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
-                    <mat-icon>stop</mat-icon>
-                </button>&nbsp;
-                <mat-checkbox #autoplaySelectionCheckbox (change)="autoPlaySelectionChange($event)">Autoplay on select
-                </mat-checkbox>
-            </fieldset>
-            <fieldset>
+            <button (click)="playStartAction?.perform()" [disabled]="playStartAction?.disabled"
+              [style.color]="playStartAction?.disabled ? 'grey' : 'green'" matTooltip="Play all">
+              <mat-icon>play_arrow</mat-icon>
+            </button>
+            <button (click)="playSelectionAction?.perform()" [disabled]="playSelectionAction?.disabled"
+              [style.color]="playSelectionAction?.disabled ? 'grey' : 'green'" matTooltip="Play selection">
+              <mat-icon>play_circle_outline</mat-icon>
+            </button>
+            <button (click)="playStopAction?.perform()" [disabled]="playStopAction?.disabled"
+              [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
+              <mat-icon>stop</mat-icon>
+            </button>&nbsp;
+            <mat-checkbox #autoplaySelectionCheckbox (change)="autoPlaySelectionChange($event)">Autoplay on select
+            </mat-checkbox>
+          </fieldset>
+          <fieldset>
 
-                <legend>Zoom</legend>
-                <button (click)="zoomFitToPanelAction?.perform()"
-                        [disabled]="zoomFitToPanelAction?.disabled">{{zoomFitToPanelAction?.name}}</button>
-                <button (click)="zoomOutAction?.perform()"
-                        [disabled]="zoomOutAction?.disabled">{{zoomOutAction?.name}}</button>
-                <button (click)="zoomInAction?.perform()"
-                        [disabled]="zoomInAction?.disabled">{{zoomInAction?.name}}</button>
-                <button (click)="zoomSelectedAction?.perform()"
-                        [disabled]="zoomSelectedAction?.disabled">{{zoomSelectedAction?.name}}</button>
-            </fieldset>
-            <fieldset>
-                <legend>Selection</legend>
-                {{audioClip?.selection?.leftFrame}} <span
-                    *ngIf="audioClip?.selection">to</span> {{audioClip?.selection?.rightFrame}}
-                <button (click)="clearSelection()" [disabled]="audioClip?.selection==null"
-                        [style.color]="hasSelection() ? 'red' : 'grey'" matTooltip="Clear selection">
-                    <mat-icon>clear</mat-icon>
-                </button>
+            <legend>Zoom</legend>
+            <button (click)="zoomFitToPanelAction?.perform()"
+            [disabled]="zoomFitToPanelAction?.disabled">{{zoomFitToPanelAction?.name}}</button>
+            <button (click)="zoomOutAction?.perform()"
+            [disabled]="zoomOutAction?.disabled">{{zoomOutAction?.name}}</button>
+            <button (click)="zoomInAction?.perform()"
+            [disabled]="zoomInAction?.disabled">{{zoomInAction?.name}}</button>
+            <button (click)="zoomSelectedAction?.perform()"
+            [disabled]="zoomSelectedAction?.disabled">{{zoomSelectedAction?.name}}</button>
+          </fieldset>
+          <fieldset>
+            <legend>Selection</legend>
+            {{audioClip?.selection?.leftFrame}} @if (audioClip?.selection) {
+            <span>to</span>
+            } {{audioClip?.selection?.rightFrame}}
+            <button (click)="clearSelection()" [disabled]="audioClip?.selection==null"
+              [style.color]="hasSelection() ? 'red' : 'grey'" matTooltip="Clear selection">
+              <mat-icon>clear</mat-icon>
+            </button>
 
-            </fieldset>
-        </div>`, isInline: true, styles: [":host{flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+          </fieldset>
+        </div>`, isInline: true, styles: [":host{flex:0}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplayControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplayControl, decorators: [{
             type: Component,
             args: [{ selector: 'audio-display-control', template: `
         <div #controlPanel style="display:flex;flex-direction: row;">
-            <fieldset>
+          <fieldset>
 
-                <legend>Play</legend>
+            <legend>Play</legend>
 
-                <button (click)="playStartAction?.perform()" [disabled]="playStartAction?.disabled"
-                        [style.color]="playStartAction?.disabled ? 'grey' : 'green'" matTooltip="Play all">
-                    <mat-icon>play_arrow</mat-icon>
-                </button>
-                <button (click)="playSelectionAction?.perform()" [disabled]="playSelectionAction?.disabled"
-                        [style.color]="playSelectionAction?.disabled ? 'grey' : 'green'" matTooltip="Play selection">
-                    <mat-icon>play_circle_outline</mat-icon>
-                </button>
-                <button (click)="playStopAction?.perform()" [disabled]="playStopAction?.disabled"
-                        [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
-                    <mat-icon>stop</mat-icon>
-                </button>&nbsp;
-                <mat-checkbox #autoplaySelectionCheckbox (change)="autoPlaySelectionChange($event)">Autoplay on select
-                </mat-checkbox>
-            </fieldset>
-            <fieldset>
+            <button (click)="playStartAction?.perform()" [disabled]="playStartAction?.disabled"
+              [style.color]="playStartAction?.disabled ? 'grey' : 'green'" matTooltip="Play all">
+              <mat-icon>play_arrow</mat-icon>
+            </button>
+            <button (click)="playSelectionAction?.perform()" [disabled]="playSelectionAction?.disabled"
+              [style.color]="playSelectionAction?.disabled ? 'grey' : 'green'" matTooltip="Play selection">
+              <mat-icon>play_circle_outline</mat-icon>
+            </button>
+            <button (click)="playStopAction?.perform()" [disabled]="playStopAction?.disabled"
+              [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
+              <mat-icon>stop</mat-icon>
+            </button>&nbsp;
+            <mat-checkbox #autoplaySelectionCheckbox (change)="autoPlaySelectionChange($event)">Autoplay on select
+            </mat-checkbox>
+          </fieldset>
+          <fieldset>
 
-                <legend>Zoom</legend>
-                <button (click)="zoomFitToPanelAction?.perform()"
-                        [disabled]="zoomFitToPanelAction?.disabled">{{zoomFitToPanelAction?.name}}</button>
-                <button (click)="zoomOutAction?.perform()"
-                        [disabled]="zoomOutAction?.disabled">{{zoomOutAction?.name}}</button>
-                <button (click)="zoomInAction?.perform()"
-                        [disabled]="zoomInAction?.disabled">{{zoomInAction?.name}}</button>
-                <button (click)="zoomSelectedAction?.perform()"
-                        [disabled]="zoomSelectedAction?.disabled">{{zoomSelectedAction?.name}}</button>
-            </fieldset>
-            <fieldset>
-                <legend>Selection</legend>
-                {{audioClip?.selection?.leftFrame}} <span
-                    *ngIf="audioClip?.selection">to</span> {{audioClip?.selection?.rightFrame}}
-                <button (click)="clearSelection()" [disabled]="audioClip?.selection==null"
-                        [style.color]="hasSelection() ? 'red' : 'grey'" matTooltip="Clear selection">
-                    <mat-icon>clear</mat-icon>
-                </button>
+            <legend>Zoom</legend>
+            <button (click)="zoomFitToPanelAction?.perform()"
+            [disabled]="zoomFitToPanelAction?.disabled">{{zoomFitToPanelAction?.name}}</button>
+            <button (click)="zoomOutAction?.perform()"
+            [disabled]="zoomOutAction?.disabled">{{zoomOutAction?.name}}</button>
+            <button (click)="zoomInAction?.perform()"
+            [disabled]="zoomInAction?.disabled">{{zoomInAction?.name}}</button>
+            <button (click)="zoomSelectedAction?.perform()"
+            [disabled]="zoomSelectedAction?.disabled">{{zoomSelectedAction?.name}}</button>
+          </fieldset>
+          <fieldset>
+            <legend>Selection</legend>
+            {{audioClip?.selection?.leftFrame}} @if (audioClip?.selection) {
+            <span>to</span>
+            } {{audioClip?.selection?.rightFrame}}
+            <button (click)="clearSelection()" [disabled]="audioClip?.selection==null"
+              [style.color]="hasSelection() ? 'red' : 'grey'" matTooltip="Clear selection">
+              <mat-icon>clear</mat-icon>
+            </button>
 
-            </fieldset>
+          </fieldset>
         </div>`, standalone: false, styles: [":host{flex:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { audioClip: [{
                 type: Input
@@ -8071,8 +8073,8 @@ class AudioDisplay {
     error() {
         this.status = 'ERROR';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplay, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioDisplay, isStandalone: false, selector: "app-audiodisplay", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplay, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AudioDisplay, isStandalone: false, selector: "app-audiodisplay", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
 
@@ -8087,7 +8089,7 @@ class AudioDisplay {
     [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;bottom:0;height:100%;width:100%;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#e6e6e6}\n", "legend{margin-left:1em;padding:.2em .8em;font-size:.8em}\n", "fieldset{border:1px darkgray solid}\n"], dependencies: [{ kind: "component", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { kind: "component", type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplay, decorators: [{
             type: Component,
             args: [{ selector: 'app-audiodisplay', template: `
 
@@ -8133,10 +8135,10 @@ class ResponsiveComponent {
             //console.debug("Screen XS: "+this.screenXs);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResponsiveComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: ResponsiveComponent, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ResponsiveComponent, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: ResponsiveComponent, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResponsiveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ResponsiveComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }] });
 
@@ -8157,10 +8159,10 @@ class IntersectionObserverDirective {
             elIntersection.observer.unobserve(this.elRef.nativeElement);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IntersectionObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: IntersectionObserverDirective, isStandalone: true, selector: "[updateObservation]", inputs: { updateObservation: "updateObservation" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: IntersectionObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: IntersectionObserverDirective, isStandalone: true, selector: "[updateObservation]", inputs: { updateObservation: "updateObservation" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IntersectionObserverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: IntersectionObserverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[updateObservation]',
@@ -8218,68 +8220,72 @@ class Progress {
         }
         return cached;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Progress, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: Progress, isStandalone: false, selector: "app-sprprogress", inputs: { items: "items", selectedItemIdx: "selectedItemIdx", enableDownload: "enableDownload" }, outputs: { onRowSelect: "onRowSelect", rowSelect: "rowSelect", onShowDoneAction: "onShowDoneAction", clickDone: "clickDone", onDownloadDoneAction: "onDownloadDoneAction", clickDownloadDone: "clickDownloadDone" }, ngImport: i0, template: `
-
-    <table class="mat-typography">
-      <thead>
-      <tr>
-        <th>#</th><!--<th>Code</th>-->
-        <th>Prompt</th>
-        <th>Status</th>
-      </tr>
-      </thead>
-      <tbody>
-      <ng-container *ngIf="items">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Progress, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: Progress, isStandalone: false, selector: "app-sprprogress", inputs: { items: "items", selectedItemIdx: "selectedItemIdx", enableDownload: "enableDownload" }, outputs: { onRowSelect: "onRowSelect", rowSelect: "rowSelect", onShowDoneAction: "onShowDoneAction", clickDone: "clickDone", onDownloadDoneAction: "onDownloadDoneAction", clickDownloadDone: "clickDownloadDone" }, ngImport: i0, template: `
 
-        <tr *ngFor="let item of items; let itIdx=index;"
-            (click)="rowSelect=itIdx" [class.selRow]="itIdx===selectedItemIdx"
-            [updateObservation]="{observer:isObs,observe:(itIdx===selectedItemIdx)}">
+<table class="mat-typography">
+  <thead>
+    <tr>
+      <th>#</th><!--<th>Code</th>-->
+      <th>Prompt</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    @if (items) {
+      @for (item of items; track item; let itIdx = $index) {
+        <tr
+          (click)="rowSelect=itIdx" [class.selRow]="itIdx===selectedItemIdx"
+          [updateObservation]="{observer:isObs,observe:(itIdx===selectedItemIdx)}">
           <td>{{itIdx}}</td>
           <td class="promptDescriptor">{{item.promptAsString}}</td>
           <td>
-            <mat-icon  *ngIf="item.itemDone()">done</mat-icon>
+            @if (item.itemDone()) {
+              <mat-icon >done</mat-icon>
+            }
             <!--<mat-icon *ngIf="latestRecordingAvail(item)===false" style="font-size:0.6em;width:0.6em;height:0.6em">cloud_download</mat-icon>-->
-
           </td>
         </tr>
-      </ng-container>
+      }
+    }
 
-      </tbody>
-    </table>
-  `, isInline: true, styles: [":host{overflow-x:hidden;overflow-y:scroll;padding:10pt;flex:.1 0 content;background:#fff;min-height:1px}\n", "table{min-height:1px;border-collapse:collapse}table,th,td{border:1px solid lightgrey;padding:.5em}\n", ".selRow{background:#add8e6}\n", ".promptDescriptor{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: IntersectionObserverDirective, selector: "[updateObservation]", inputs: ["updateObservation"] }] }); }
+  </tbody>
+</table>
+`, isInline: true, styles: [":host{overflow-x:hidden;overflow-y:scroll;padding:10pt;flex:.1 0 content;background:#fff;min-height:1px}\n", "table{min-height:1px;border-collapse:collapse}table,th,td{border:1px solid lightgrey;padding:.5em}\n", ".selRow{background:#add8e6}\n", ".promptDescriptor{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: IntersectionObserverDirective, selector: "[updateObservation]", inputs: ["updateObservation"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Progress, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Progress, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprprogress', template: `
 
-    <table class="mat-typography">
-      <thead>
-      <tr>
-        <th>#</th><!--<th>Code</th>-->
-        <th>Prompt</th>
-        <th>Status</th>
-      </tr>
-      </thead>
-      <tbody>
-      <ng-container *ngIf="items">
-
-        <tr *ngFor="let item of items; let itIdx=index;"
-            (click)="rowSelect=itIdx" [class.selRow]="itIdx===selectedItemIdx"
-            [updateObservation]="{observer:isObs,observe:(itIdx===selectedItemIdx)}">
+<table class="mat-typography">
+  <thead>
+    <tr>
+      <th>#</th><!--<th>Code</th>-->
+      <th>Prompt</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    @if (items) {
+      @for (item of items; track item; let itIdx = $index) {
+        <tr
+          (click)="rowSelect=itIdx" [class.selRow]="itIdx===selectedItemIdx"
+          [updateObservation]="{observer:isObs,observe:(itIdx===selectedItemIdx)}">
           <td>{{itIdx}}</td>
           <td class="promptDescriptor">{{item.promptAsString}}</td>
           <td>
-            <mat-icon  *ngIf="item.itemDone()">done</mat-icon>
+            @if (item.itemDone()) {
+              <mat-icon >done</mat-icon>
+            }
             <!--<mat-icon *ngIf="latestRecordingAvail(item)===false" style="font-size:0.6em;width:0.6em;height:0.6em">cloud_download</mat-icon>-->
-
           </td>
         </tr>
-      </ng-container>
+      }
+    }
 
-      </tbody>
-    </table>
-  `, standalone: false, styles: [":host{overflow-x:hidden;overflow-y:scroll;padding:10pt;flex:.1 0 content;background:#fff;min-height:1px}\n", "table{min-height:1px;border-collapse:collapse}table,th,td{border:1px solid lightgrey;padding:.5em}\n", ".selRow{background:#add8e6}\n", ".promptDescriptor{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
+  </tbody>
+</table>
+`, standalone: false, styles: [":host{overflow-x:hidden;overflow-y:scroll;padding:10pt;flex:.1 0 content;background:#fff;min-height:1px}\n", "table{min-height:1px;border-collapse:collapse}table,th,td{border:1px solid lightgrey;padding:.5em}\n", ".selRow{background:#add8e6}\n", ".promptDescriptor{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
                 type: Input
             }], selectedItemIdx: [{
@@ -8311,13 +8317,13 @@ class Recinstructions {
         }
         return riTxt;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Recinstructions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: Recinstructions, isStandalone: false, selector: "spr-recinstructions", inputs: { recinstructions: "recinstructions", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Recinstructions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: Recinstructions, isStandalone: false, selector: "spr-recinstructions", inputs: { recinstructions: "recinstructions", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount" }, ngImport: i0, template: `
 
     {{displayText()}}
   `, isInline: true, styles: [":host{justify-content:left;align-items:flex-start;background:#fff;text-align:left;font-size:1em;flex:0;width:100%}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Recinstructions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Recinstructions, decorators: [{
             type: Component,
             args: [{ selector: 'spr-recinstructions', template: `
 
@@ -8490,14 +8496,14 @@ class Prompter {
             this._src = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Prompter, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ProjectService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: Prompter, isStandalone: false, selector: "app-sprprompter", inputs: { projectName: "projectName", prompterHeight: "prompterHeight", promptMediaItems: "promptMediaItems" }, host: { properties: { "class.fill": "this.prompterStyleFill" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Prompter, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ProjectService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: Prompter, isStandalone: false, selector: "app-sprprompter", inputs: { projectName: "projectName", prompterHeight: "prompterHeight", promptMediaItems: "promptMediaItems" }, host: { properties: { "class.fill": "this.prompterStyleFill" } }, ngImport: i0, template: `
 
     <!--<ng-template [ngIf]="text">{{text}}</ng-template>-->
     <!-- <img *ngIf="src" #promptImage [src]="srcUrl()" [height]="prompterHeight-20" /> -->
   `, isInline: true, styles: [":host{justify-content:center;align-items:center;background:#fff;text-align:center;line-height:1.2em;font-weight:700;flex:0 1}\n", ":host(.fill){flex:3;width:100%;height:100%;max-height:100%;max-width:100%;vertical-align:middle}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Prompter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Prompter, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprprompter', template: `
 
@@ -8643,12 +8649,12 @@ class PromptContainer {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PromptContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: PromptContainer, isStandalone: false, selector: "app-sprpromptcontainer", inputs: { projectName: "projectName", mediaitems: "mediaitems" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "prompter", first: true, predicate: Prompter, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PromptContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PromptContainer, isStandalone: false, selector: "app-sprpromptcontainer", inputs: { projectName: "projectName", mediaitems: "mediaitems" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "prompter", first: true, predicate: Prompter, descendants: true, static: true }], ngImport: i0, template: `
     <app-sprprompter #prompter [projectName]="projectName" [promptMediaItems]="mediaitems" [style.font-size]="fontSize+'px'" [style.visibility]="prDisplay" [prompterHeight]="prompterHeight"></app-sprprompter>
   `, isInline: true, styles: [":host{flex:3;padding:10pt;height:100%;max-height:100%;justify-content:center;align-items:center;background:#fff;text-align:center;display:flex;flex-direction:column;min-height:0px;width:100%}\n"], dependencies: [{ kind: "component", type: Prompter, selector: "app-sprprompter", inputs: ["projectName", "prompterHeight", "promptMediaItems"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PromptContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PromptContainer, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprpromptcontainer', template: `
     <app-sprprompter #prompter [projectName]="projectName" [promptMediaItems]="mediaitems" [style.font-size]="fontSize+'px'" [style.visibility]="prDisplay" [prompterHeight]="prompterHeight"></app-sprprompter>
@@ -8770,8 +8776,8 @@ class PromptingContainer {
         this.e.style.left = "0px";
         //ev.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PromptingContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: PromptingContainer, isStandalone: false, selector: "app-sprpromptingcontainer", inputs: { projectName: "projectName", promptItem: "promptItem", showPrompt: "showPrompt", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount", transportActions: "transportActions" }, host: { listeners: { "touchstart": "onTouchstart($event)", "touchend": "onTouchEnd($event)", "touchmove": "onTouchMove($event)", "touchcancel": "onTouchCancel($event)" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PromptingContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: PromptingContainer, isStandalone: false, selector: "app-sprpromptingcontainer", inputs: { projectName: "projectName", promptItem: "promptItem", showPrompt: "showPrompt", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount", transportActions: "transportActions" }, host: { listeners: { "touchstart": "onTouchstart($event)", "touchend": "onTouchEnd($event)", "touchmove": "onTouchMove($event)", "touchcancel": "onTouchCancel($event)" } }, ngImport: i0, template: `
     <spr-recinstructions [selectedItemIdx]="selectedItemIdx" [itemCount]="itemCount"
                          [recinstructions]="promptItem?.recinstructions?.recinstructions"></spr-recinstructions>
     <app-sprpromptcontainer [projectName]="projectName"
@@ -8779,7 +8785,7 @@ class PromptingContainer {
 
   `, isInline: true, styles: [":host{position:relative;flex:3;padding:10pt;justify-content:center;align-items:center;background:#fff;text-align:center;display:flex;flex-direction:column;min-height:0px}\n"], dependencies: [{ kind: "component", type: Recinstructions, selector: "spr-recinstructions", inputs: ["recinstructions", "selectedItemIdx", "itemCount"] }, { kind: "component", type: PromptContainer, selector: "app-sprpromptcontainer", inputs: ["projectName", "mediaitems"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PromptingContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PromptingContainer, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprpromptingcontainer', template: `
     <spr-recinstructions [selectedItemIdx]="selectedItemIdx" [itemCount]="itemCount"
@@ -8836,56 +8842,60 @@ class Prompting extends ResponsiveComponent {
     prevItem() {
         this.onPrevItem.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Prompting, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: Prompting, isStandalone: false, selector: "app-sprprompting", inputs: { projectName: "projectName", startStopSignalState: "startStopSignalState", promptItem: "promptItem", showPrompt: "showPrompt", items: "items", selectedItemIdx: "selectedItemIdx", transportActions: "transportActions", enableDownload: "enableDownload", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { onItemSelect: "onItemSelect", onNextItem: "onNextItem", onPrevItem: "onPrevItem" }, viewQueries: [{ propertyName: "simpleTrafficLight", first: true, predicate: SimpleTrafficLight, descendants: true, static: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Prompting, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: Prompting, isStandalone: false, selector: "app-sprprompting", inputs: { projectName: "projectName", startStopSignalState: "startStopSignalState", promptItem: "promptItem", showPrompt: "showPrompt", items: "items", selectedItemIdx: "selectedItemIdx", transportActions: "transportActions", enableDownload: "enableDownload", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { onItemSelect: "onItemSelect", onNextItem: "onNextItem", onPrevItem: "onPrevItem" }, viewQueries: [{ propertyName: "simpleTrafficLight", first: true, predicate: SimpleTrafficLight, descendants: true, static: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
 
-    <app-simpletrafficlight [status]="startStopSignalState"></app-simpletrafficlight>
-    <app-sprpromptingcontainer [projectName]="projectName" [promptItem]="promptItem" [showPrompt]="showPrompt"
-                               [itemCount]="items?.length" [selectedItemIdx]="selectedItemIdx"
-                               [transportActions]="transportActions"></app-sprpromptingcontainer>
-    <app-sprprogress *ngIf="!screenXs" [items]="items" [selectedItemIdx]="selectedItemIdx"
-                     (onRowSelect)="itemSelect($event)"></app-sprprogress>
-    <div #asCt [class.active]="!audioSignalCollapsed && !screenXs">
+<app-simpletrafficlight [status]="startStopSignalState"></app-simpletrafficlight>
+<app-sprpromptingcontainer [projectName]="projectName" [promptItem]="promptItem" [showPrompt]="showPrompt"
+  [itemCount]="items?.length" [selectedItemIdx]="selectedItemIdx"
+[transportActions]="transportActions"></app-sprpromptingcontainer>
+@if (!screenXs) {
+  <app-sprprogress [items]="items" [selectedItemIdx]="selectedItemIdx"
+  (onRowSelect)="itemSelect($event)"></app-sprprogress>
+}
+<div #asCt [class.active]="!audioSignalCollapsed && !screenXs">
 
-      <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
-                        [audioClip]="displayAudioClip"
-                        [playStartAction]="playStartAction"
-                        [playSelectionAction]="playSelectionAction"
-                        [autoPlayOnSelectToggleAction]="autoPlayOnSelectToggleAction"
-                        [playStopAction]="playStopAction"></app-audiodisplay>
+  <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
+    [audioClip]="displayAudioClip"
+    [playStartAction]="playStartAction"
+    [playSelectionAction]="playSelectionAction"
+    [autoPlayOnSelectToggleAction]="autoPlayOnSelectToggleAction"
+  [playStopAction]="playStopAction"></app-audiodisplay>
 
 
-    </div>
+</div>
 
 
 
-  `, isInline: true, styles: [":host{position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;min-height:0px;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "app-simpletrafficlight{margin:10px;min-height:0px;z-index:3}\n", "app-sprprogress{z-index:3}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0;height:90%;width:100%;overflow:hidden;padding:0;z-index:5;box-sizing:border-box;background-color:#0000}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }, { kind: "component", type: Progress, selector: "app-sprprogress", inputs: ["items", "selectedItemIdx", "enableDownload"], outputs: ["onRowSelect", "rowSelect", "onShowDoneAction", "clickDone", "onDownloadDoneAction", "clickDownloadDone"] }, { kind: "component", type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: ["status"] }, { kind: "component", type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: ["projectName", "promptItem", "showPrompt", "selectedItemIdx", "itemCount", "transportActions"] }] }); }
+`, isInline: true, styles: [":host{position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;min-height:0px;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "app-simpletrafficlight{margin:10px;min-height:0px;z-index:3}\n", "app-sprprogress{z-index:3}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0;height:90%;width:100%;overflow:hidden;padding:0;z-index:5;box-sizing:border-box;background-color:#0000}\n"], dependencies: [{ kind: "component", type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }, { kind: "component", type: Progress, selector: "app-sprprogress", inputs: ["items", "selectedItemIdx", "enableDownload"], outputs: ["onRowSelect", "rowSelect", "onShowDoneAction", "clickDone", "onDownloadDoneAction", "clickDownloadDone"] }, { kind: "component", type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: ["status"] }, { kind: "component", type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: ["projectName", "promptItem", "showPrompt", "selectedItemIdx", "itemCount", "transportActions"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Prompting, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Prompting, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprprompting', template: `
 
-    <app-simpletrafficlight [status]="startStopSignalState"></app-simpletrafficlight>
-    <app-sprpromptingcontainer [projectName]="projectName" [promptItem]="promptItem" [showPrompt]="showPrompt"
-                               [itemCount]="items?.length" [selectedItemIdx]="selectedItemIdx"
-                               [transportActions]="transportActions"></app-sprpromptingcontainer>
-    <app-sprprogress *ngIf="!screenXs" [items]="items" [selectedItemIdx]="selectedItemIdx"
-                     (onRowSelect)="itemSelect($event)"></app-sprprogress>
-    <div #asCt [class.active]="!audioSignalCollapsed && !screenXs">
+<app-simpletrafficlight [status]="startStopSignalState"></app-simpletrafficlight>
+<app-sprpromptingcontainer [projectName]="projectName" [promptItem]="promptItem" [showPrompt]="showPrompt"
+  [itemCount]="items?.length" [selectedItemIdx]="selectedItemIdx"
+[transportActions]="transportActions"></app-sprpromptingcontainer>
+@if (!screenXs) {
+  <app-sprprogress [items]="items" [selectedItemIdx]="selectedItemIdx"
+  (onRowSelect)="itemSelect($event)"></app-sprprogress>
+}
+<div #asCt [class.active]="!audioSignalCollapsed && !screenXs">
 
-      <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
-                        [audioClip]="displayAudioClip"
-                        [playStartAction]="playStartAction"
-                        [playSelectionAction]="playSelectionAction"
-                        [autoPlayOnSelectToggleAction]="autoPlayOnSelectToggleAction"
-                        [playStopAction]="playStopAction"></app-audiodisplay>
+  <app-audiodisplay #audioSignalContainer [class.active]="!audioSignalCollapsed"
+    [audioClip]="displayAudioClip"
+    [playStartAction]="playStartAction"
+    [playSelectionAction]="playSelectionAction"
+    [autoPlayOnSelectToggleAction]="autoPlayOnSelectToggleAction"
+  [playStopAction]="playStopAction"></app-audiodisplay>
 
 
-    </div>
+</div>
 
 
 
-  `, standalone: false, styles: [":host{position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;min-height:0px;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "app-simpletrafficlight{margin:10px;min-height:0px;z-index:3}\n", "app-sprprogress{z-index:3}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0;height:90%;width:100%;overflow:hidden;padding:0;z-index:5;box-sizing:border-box;background-color:#0000}\n"] }]
+`, standalone: false, styles: [":host{position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;min-height:0px;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "app-simpletrafficlight{margin:10px;min-height:0px;z-index:3}\n", "app-sprprogress{z-index:3}\n", "div{display:none;position:absolute;z-index:5}\n", "div.active{display:flex;position:absolute;bottom:0;height:90%;width:100%;overflow:hidden;padding:0;z-index:5;box-sizing:border-box;background-color:#0000}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }], propDecorators: { simpleTrafficLight: [{
                 type: ViewChild,
                 args: [SimpleTrafficLight, { static: true }]
@@ -8936,8 +8946,8 @@ class SessionFinishedDialog {
     closeDialog() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionFinishedDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: SessionFinishedDialog, isStandalone: false, selector: "spr-session-finished-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon [style.color]="'green'">done_all</mat-icon> Session finished</h1>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionFinishedDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SessionFinishedDialog, isStandalone: false, selector: "spr-session-finished-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon [style.color]="'green'">done_all</mat-icon> Session finished</h1>
   <div mat-dialog-content>
 
     <p>Thank you! The recording session is complete.</p>
@@ -8946,9 +8956,9 @@ class SessionFinishedDialog {
   <div mat-dialog-actions>
     <button mat-button (click)="closeDialog()">OK</button>
   </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionFinishedDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionFinishedDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'spr-session-finished-dialog',
@@ -8977,36 +8987,44 @@ class MessageDialog {
     closeDialog() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MessageDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: MessageDialog, isStandalone: false, selector: "msg-dialog", ngImport: i0, template: `<h1 mat-dialog-title><mat-icon *ngIf="data.type==='error'" [style.color]="'red'">error</mat-icon>
-    <mat-icon *ngIf="data.type==='warning'" [style.color]="'yellow'">warning</mat-icon>{{data.title}}</h1>
-  <div mat-dialog-content>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MessageDialog, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: MessageDialog, isStandalone: false, selector: "msg-dialog", ngImport: i0, template: `<h1 mat-dialog-title>@if (data.type==='error') {
+  <mat-icon [style.color]="'red'">error</mat-icon>
+}
+@if (data.type==='warning') {
+  <mat-icon [style.color]="'yellow'">warning</mat-icon>
+}{{data.title}}</h1>
+<div mat-dialog-content>
 
-    <p>{{data.msg}}</p>
-    <p>{{data.advice}}</p>
+  <p>{{data.msg}}</p>
+  <p>{{data.advice}}</p>
 
-  </div>
-  <div mat-dialog-actions>
-    <button mat-button (click)="closeDialog()">OK</button>
-  </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="closeDialog()">OK</button>
+</div>
+`, isInline: true, dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MessageDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MessageDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'msg-dialog',
-                    template: `<h1 mat-dialog-title><mat-icon *ngIf="data.type==='error'" [style.color]="'red'">error</mat-icon>
-    <mat-icon *ngIf="data.type==='warning'" [style.color]="'yellow'">warning</mat-icon>{{data.title}}</h1>
-  <div mat-dialog-content>
+                    template: `<h1 mat-dialog-title>@if (data.type==='error') {
+  <mat-icon [style.color]="'red'">error</mat-icon>
+}
+@if (data.type==='warning') {
+  <mat-icon [style.color]="'yellow'">warning</mat-icon>
+}{{data.title}}</h1>
+<div mat-dialog-content>
 
-    <p>{{data.msg}}</p>
-    <p>{{data.advice}}</p>
+  <p>{{data.msg}}</p>
+  <p>{{data.advice}}</p>
 
-  </div>
-  <div mat-dialog-actions>
-    <button mat-button (click)="closeDialog()">OK</button>
-  </div>
-  `,
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="closeDialog()">OK</button>
+</div>
+`,
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
@@ -10467,10 +10485,10 @@ class RecordingService extends BasicRecordingService {
         });
         return wobs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -10827,15 +10845,15 @@ class LevelBar {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LevelBar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: LevelBar, isStandalone: false, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos", state: "state" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "virtualCanvasRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "liveLevelCanvasRef", first: true, predicate: ["levelbar"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["markerCanvas"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LevelBar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: LevelBar, isStandalone: false, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos", state: "state" }, host: { listeners: { "scroll": "onScroll($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "virtualCanvasRef", first: true, predicate: ["virtualCanvas"], descendants: true, static: true }, { propertyName: "liveLevelCanvasRef", first: true, predicate: ["levelbar"], descendants: true, static: true }, { propertyName: "markerCanvasRef", first: true, predicate: ["markerCanvas"], descendants: true, static: true }], ngImport: i0, template: `
     <div #virtualCanvas>
       <canvas #levelbar></canvas>
       <canvas #markerCanvas></canvas>
     </div>
   `, isInline: true, styles: [":host{width:100%;background:#a9a9a9;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n", "div{top:0;left:0;width:100%;height:100%;box-sizing:border-box}\n", "canvas{top:0;left:0;width:100%;height:100%;position:absolute}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LevelBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LevelBar, decorators: [{
             type: Component,
             args: [{ selector: 'audio-levelbar', template: `
     <div #virtualCanvas>
@@ -10872,22 +10890,30 @@ class StatusDisplay {
         this.statusMsg = 'Initialize...';
         this.statusWaiting = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: StatusDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: StatusDisplay, isStandalone: false, selector: "app-sprstatusdisplay", inputs: { statusAlertType: "statusAlertType", statusMsg: "statusMsg", statusWaiting: "statusWaiting" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StatusDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: StatusDisplay, isStandalone: false, selector: "app-sprstatusdisplay", inputs: { statusAlertType: "statusAlertType", statusMsg: "statusMsg", statusWaiting: "statusWaiting" }, ngImport: i0, template: `
     <p matTooltip="Status">
-      <mat-progress-spinner *ngIf="statusWaiting" color="black"  mode="indeterminate" [diameter]="30" [strokeWidth]="5"></mat-progress-spinner><mat-icon *ngIf="statusAlertType==='error'" style="color:red">report_problem</mat-icon>
+      @if (statusWaiting) {
+        <mat-progress-spinner color="black"  mode="indeterminate" [diameter]="30" [strokeWidth]="5"></mat-progress-spinner>
+        }@if (statusAlertType==='error') {
+        <mat-icon style="color:red">report_problem</mat-icon>
+      }
       {{statusMsg}}
     </p>
-  `, isInline: true, styles: [":host{display:inline;text-align:left;font-size:smaller}\n", "p{padding:4px;white-space:nowrap;display:inline-block}\n", "mat-progress-spinner{color:#000;display:inline-block}\n", "span{color:red}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, styles: [":host{display:inline;text-align:left;font-size:smaller}\n", "p{padding:4px;white-space:nowrap;display:inline-block}\n", "mat-progress-spinner{color:#000;display:inline-block}\n", "span{color:red}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: StatusDisplay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StatusDisplay, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprstatusdisplay', template: `
     <p matTooltip="Status">
-      <mat-progress-spinner *ngIf="statusWaiting" color="black"  mode="indeterminate" [diameter]="30" [strokeWidth]="5"></mat-progress-spinner><mat-icon *ngIf="statusAlertType==='error'" style="color:red">report_problem</mat-icon>
+      @if (statusWaiting) {
+        <mat-progress-spinner color="black"  mode="indeterminate" [diameter]="30" [strokeWidth]="5"></mat-progress-spinner>
+        }@if (statusAlertType==='error') {
+        <mat-icon style="color:red">report_problem</mat-icon>
+      }
       {{statusMsg}}
     </p>
-  `, standalone: false, styles: [":host{display:inline;text-align:left;font-size:smaller}\n", "p{padding:4px;white-space:nowrap;display:inline-block}\n", "mat-progress-spinner{color:#000;display:inline-block}\n", "span{color:red}\n"] }]
+    `, standalone: false, styles: [":host{display:inline;text-align:left;font-size:smaller}\n", "p{padding:4px;white-space:nowrap;display:inline-block}\n", "mat-progress-spinner{color:#000;display:inline-block}\n", "span{color:red}\n"] }]
         }], propDecorators: { statusAlertType: [{
                 type: Input
             }], statusMsg: [{
@@ -10951,13 +10977,13 @@ class UploadStatus {
     get status() {
         return this._status;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: UploadStatus, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: UploadStatus, isStandalone: false, selector: "app-uploadstatus", inputs: { value: "value", awaitNewUpload: "awaitNewUpload", status: "status" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UploadStatus, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: UploadStatus, isStandalone: false, selector: "app-uploadstatus", inputs: { value: "value", awaitNewUpload: "awaitNewUpload", status: "status" }, ngImport: i0, template: `
     <mat-progress-spinner [mode]="spinnerMode" [color]="colorStatus" [diameter]="30" [strokeWidth]="5" [value]="_value"
                           [matTooltip]="toolTipText"></mat-progress-spinner>
-  `, isInline: true, styles: [":host{text-align:left}\n", "mat-progress-spinner{display:inline-block}\n"], dependencies: [{ kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+  `, isInline: true, styles: [":host{text-align:left}\n", "mat-progress-spinner{display:inline-block}\n"], dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: UploadStatus, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UploadStatus, decorators: [{
             type: Component,
             args: [{ selector: 'app-uploadstatus', template: `
     <mat-progress-spinner [mode]="spinnerMode" [color]="colorStatus" [diameter]="30" [strokeWidth]="5" [value]="_value"
@@ -10974,12 +11000,12 @@ class ProgressDisplay {
     constructor() {
         this.progressMsg = '[itemcode]';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ProgressDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ProgressDisplay, isStandalone: false, selector: "app-sprprogressdisplay", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProgressDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: ProgressDisplay, isStandalone: false, selector: "app-sprprogressdisplay", ngImport: i0, template: `
     <p>{{progressMsg}}</p>
   `, isInline: true, styles: [":host{flex:1;width:100%;text-align:left}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ProgressDisplay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProgressDisplay, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprprogressdisplay', template: `
     <p>{{progressMsg}}</p>
@@ -11076,52 +11102,80 @@ class TransportPanel extends ResponsiveComponent {
             this.actions.stopNonrecordingAction.perform();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TransportPanel, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: TransportPanel, isStandalone: false, selector: "app-sprtransport", inputs: { readonly: "readonly", actions: "actions", navigationEnabled: "navigationEnabled", pausingEnabled: "pausingEnabled" }, usesInheritance: true, ngImport: i0, template: `
-    <button id="bwdBtn" *ngIf="navigationEnabled"  (click)="actions.bwdAction.perform()" [disabled]="bwdDisabled()"
-            mat-raised-button class="transport-button-icon">
-      <span><mat-icon>chevron_left</mat-icon></span>
-    </button>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TransportPanel, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: TransportPanel, isStandalone: false, selector: "app-sprtransport", inputs: { readonly: "readonly", actions: "actions", navigationEnabled: "navigationEnabled", pausingEnabled: "pausingEnabled" }, usesInheritance: true, ngImport: i0, template: `
+    @if (navigationEnabled) {
+      <button id="bwdBtn"  (click)="actions.bwdAction.perform()" [disabled]="bwdDisabled()"
+        mat-raised-button class="transport-button-icon">
+        <span><mat-icon>chevron_left</mat-icon></span>
+      </button>
+    }
     <button (click)="startStopNextPerform()" [disabled]="startDisabled() && stopDisabled() && nextDisabled() && stopNonrecordingDisabled()"  mat-raised-button  class="transport-button-icon">
-      <span><mat-icon class="transport-button-icon" [style.color]="startStopNextIconColor()">{{startStopNextIconName()}}</mat-icon><mat-icon class="transport-button-icon" *ngIf="!nextDisabled() || !stopNonrecordingDisabled()" [style.color]="nextDisabled() ? 'grey' : 'black'">chevron_right</mat-icon></span>
-      <span *ngIf="!screenXs" class="transport-button-text">{{startStopNextName()}}</span>
+      <span><mat-icon class="transport-button-icon" [style.color]="startStopNextIconColor()">{{startStopNextIconName()}}</mat-icon>@if (!nextDisabled() || !stopNonrecordingDisabled()) {
+      <mat-icon class="transport-button-icon" [style.color]="nextDisabled() ? 'grey' : 'black'">chevron_right</mat-icon>
+    }</span>
+    @if (!screenXs) {
+      <span class="transport-button-text">{{startStopNextName()}}</span>
+    }
     </button>
-    <button *ngIf="pausingEnabled" (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button  class="transport-button-icon">
-      <span><mat-icon class="transport-button-icon">pause</mat-icon></span>
-      <span *ngIf="!screenXs" class="transport-button-text">Pause</span>
-    </button>
-    <button id="fwdNextBtn" *ngIf="navigationEnabled && !screenXs" (click)="actions.fwdNextAction.perform()" [disabled]="fwdNextDisabled()" mat-raised-button class="transport-button-icon">
-      <span><mat-icon>redo</mat-icon></span>
-    </button>
-    <button id="fwdBtn" *ngIf="navigationEnabled"  (click)="actions.fwdAction.perform()" [disabled]="fwdDisabled()" mat-raised-button class="transport-button-icon">
-      <span><mat-icon>chevron_right</mat-icon></span>
-    </button>
-
-  `, isInline: true, styles: [":host{flex:20;align-self:center;width:100%;text-align:center;align-content:center;margin:0}\n", "div{display:inline;flex:0}\n", "button{touch-action:manipulation}\n", ".transport-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ".transport-button-text{font-size:14px;letter-spacing:normal;vertical-align:baseline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+    @if (pausingEnabled) {
+      <button (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button  class="transport-button-icon">
+        <span><mat-icon class="transport-button-icon">pause</mat-icon></span>
+        @if (!screenXs) {
+          <span class="transport-button-text">Pause</span>
+        }
+      </button>
+    }
+    @if (navigationEnabled && !screenXs) {
+      <button id="fwdNextBtn" (click)="actions.fwdNextAction.perform()" [disabled]="fwdNextDisabled()" mat-raised-button class="transport-button-icon">
+        <span><mat-icon>redo</mat-icon></span>
+      </button>
+    }
+    @if (navigationEnabled) {
+      <button id="fwdBtn"  (click)="actions.fwdAction.perform()" [disabled]="fwdDisabled()" mat-raised-button class="transport-button-icon">
+        <span><mat-icon>chevron_right</mat-icon></span>
+      </button>
+    }
+    
+    `, isInline: true, styles: [":host{flex:20;align-self:center;width:100%;text-align:center;align-content:center;margin:0}\n", "div{display:inline;flex:0}\n", "button{touch-action:manipulation}\n", ".transport-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ".transport-button-text{font-size:14px;letter-spacing:normal;vertical-align:baseline}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TransportPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TransportPanel, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprtransport', template: `
-    <button id="bwdBtn" *ngIf="navigationEnabled"  (click)="actions.bwdAction.perform()" [disabled]="bwdDisabled()"
-            mat-raised-button class="transport-button-icon">
-      <span><mat-icon>chevron_left</mat-icon></span>
-    </button>
+    @if (navigationEnabled) {
+      <button id="bwdBtn"  (click)="actions.bwdAction.perform()" [disabled]="bwdDisabled()"
+        mat-raised-button class="transport-button-icon">
+        <span><mat-icon>chevron_left</mat-icon></span>
+      </button>
+    }
     <button (click)="startStopNextPerform()" [disabled]="startDisabled() && stopDisabled() && nextDisabled() && stopNonrecordingDisabled()"  mat-raised-button  class="transport-button-icon">
-      <span><mat-icon class="transport-button-icon" [style.color]="startStopNextIconColor()">{{startStopNextIconName()}}</mat-icon><mat-icon class="transport-button-icon" *ngIf="!nextDisabled() || !stopNonrecordingDisabled()" [style.color]="nextDisabled() ? 'grey' : 'black'">chevron_right</mat-icon></span>
-      <span *ngIf="!screenXs" class="transport-button-text">{{startStopNextName()}}</span>
-    </button>
-    <button *ngIf="pausingEnabled" (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button  class="transport-button-icon">
-      <span><mat-icon class="transport-button-icon">pause</mat-icon></span>
-      <span *ngIf="!screenXs" class="transport-button-text">Pause</span>
+      <span><mat-icon class="transport-button-icon" [style.color]="startStopNextIconColor()">{{startStopNextIconName()}}</mat-icon>@if (!nextDisabled() || !stopNonrecordingDisabled()) {
+      <mat-icon class="transport-button-icon" [style.color]="nextDisabled() ? 'grey' : 'black'">chevron_right</mat-icon>
+    }</span>
+    @if (!screenXs) {
+      <span class="transport-button-text">{{startStopNextName()}}</span>
+    }
     </button>
-    <button id="fwdNextBtn" *ngIf="navigationEnabled && !screenXs" (click)="actions.fwdNextAction.perform()" [disabled]="fwdNextDisabled()" mat-raised-button class="transport-button-icon">
-      <span><mat-icon>redo</mat-icon></span>
-    </button>
-    <button id="fwdBtn" *ngIf="navigationEnabled"  (click)="actions.fwdAction.perform()" [disabled]="fwdDisabled()" mat-raised-button class="transport-button-icon">
-      <span><mat-icon>chevron_right</mat-icon></span>
-    </button>
-
-  `, standalone: false, styles: [":host{flex:20;align-self:center;width:100%;text-align:center;align-content:center;margin:0}\n", "div{display:inline;flex:0}\n", "button{touch-action:manipulation}\n", ".transport-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ".transport-button-text{font-size:14px;letter-spacing:normal;vertical-align:baseline}\n"] }]
+    @if (pausingEnabled) {
+      <button (click)="actions.pauseAction.perform()" [disabled]="pauseDisabled()" mat-raised-button  class="transport-button-icon">
+        <span><mat-icon class="transport-button-icon">pause</mat-icon></span>
+        @if (!screenXs) {
+          <span class="transport-button-text">Pause</span>
+        }
+      </button>
+    }
+    @if (navigationEnabled && !screenXs) {
+      <button id="fwdNextBtn" (click)="actions.fwdNextAction.perform()" [disabled]="fwdNextDisabled()" mat-raised-button class="transport-button-icon">
+        <span><mat-icon>redo</mat-icon></span>
+      </button>
+    }
+    @if (navigationEnabled) {
+      <button id="fwdBtn"  (click)="actions.fwdAction.perform()" [disabled]="fwdDisabled()" mat-raised-button class="transport-button-icon">
+        <span><mat-icon>chevron_right</mat-icon></span>
+      </button>
+    }
+    
+    `, standalone: false, styles: [":host{flex:20;align-self:center;width:100%;text-align:center;align-content:center;margin:0}\n", "div{display:inline;flex:0}\n", "button{touch-action:manipulation}\n", ".transport-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ".transport-button-text{font-size:14px;letter-spacing:normal;vertical-align:baseline}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }], propDecorators: { readonly: [{
                 type: Input
             }], actions: [{
@@ -11138,16 +11192,20 @@ class WakeLockIndicator {
     set screenLocked(screenLock) {
         this._screenLocked = screenLock;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WakeLockIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: WakeLockIndicator, isStandalone: false, selector: "app-wakelockindicator", inputs: { screenLocked: "screenLocked" }, ngImport: i0, template: `
-    <mat-icon *ngIf="_screenLocked">screen_lock_portrait</mat-icon>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: WakeLockIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: WakeLockIndicator, isStandalone: false, selector: "app-wakelockindicator", inputs: { screenLocked: "screenLocked" }, ngImport: i0, template: `
+    @if (_screenLocked) {
+      <mat-icon>screen_lock_portrait</mat-icon>
+    }
+    `, isInline: true, dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WakeLockIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: WakeLockIndicator, decorators: [{
             type: Component,
             args: [{ selector: 'app-wakelockindicator', template: `
-    <mat-icon *ngIf="_screenLocked">screen_lock_portrait</mat-icon>
-  `, standalone: false }]
+    @if (_screenLocked) {
+      <mat-icon>screen_lock_portrait</mat-icon>
+    }
+    `, standalone: false }]
         }], ctorParameters: () => [], propDecorators: { screenLocked: [{
                 type: Input
             }] } });
@@ -11165,12 +11223,12 @@ class ReadyStateIndicator {
     get ready() {
         return this._ready;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ReadyStateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ReadyStateIndicator, isStandalone: false, selector: "app-readystateindicator", inputs: { ready: "ready" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReadyStateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: ReadyStateIndicator, isStandalone: false, selector: "app-readystateindicator", inputs: { ready: "ready" }, ngImport: i0, template: `
     <mat-icon [matTooltip]="readyStateToolTip">{{hourGlassIconName}}</mat-icon>
-  `, isInline: true, dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ReadyStateIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ReadyStateIndicator, decorators: [{
             type: Component,
             args: [{ selector: 'app-readystateindicator', template: `
     <mat-icon [matTooltip]="readyStateToolTip">{{hourGlassIconName}}</mat-icon>
@@ -11193,52 +11251,66 @@ class ControlPanel extends ResponsiveComponent {
     get ready() {
         return this._ready;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ControlPanel, deps: [{ token: i1$2.BreakpointObserver }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ControlPanel, isStandalone: false, selector: "app-sprcontrolpanel", inputs: { readonly: "readonly", transportActions: "transportActions", processing: "processing", statusMsg: "statusMsg", statusAlertType: "statusAlertType", statusWaiting: "statusWaiting", uploadStatus: "uploadStatus", uploadProgress: "uploadProgress", currentRecording: "currentRecording", enableUploadRecordings: "enableUploadRecordings", navigationEnabled: "navigationEnabled", ready: "ready" }, viewQueries: [{ propertyName: "statusDisplay", first: true, predicate: StatusDisplay, descendants: true, static: true }, { propertyName: "transportPanel", first: true, predicate: TransportPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <div *ngIf="!screenXs" style="flex-direction: row" >
-     <app-sprstatusdisplay style="flex:0 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
-                          class="hidden-xs"></app-sprstatusdisplay>
-      <app-sprtransport style="flex:10 0 0" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
-      <app-uploadstatus style="flex:0 0 0" *ngIf="enableUploadRecordings" [value]="uploadProgress"
-                      [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
-      <app-readystateindicator [ready]="_ready"></app-readystateindicator>
-    </div>
-    <div *ngIf="screenXs" style="flex-direction: column">
-      <div style="flex-direction: row" class="flexFill" >
-       <app-sprstatusdisplay style="flex:10 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
-                            class="hidden-xs"></app-sprstatusdisplay>
-       <app-uploadstatus style="flex:0 0 0" *ngIf="enableUploadRecordings" [value]="uploadProgress"
-                        [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ControlPanel, deps: [{ token: i1$2.BreakpointObserver }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: ControlPanel, isStandalone: false, selector: "app-sprcontrolpanel", inputs: { readonly: "readonly", transportActions: "transportActions", processing: "processing", statusMsg: "statusMsg", statusAlertType: "statusAlertType", statusWaiting: "statusWaiting", uploadStatus: "uploadStatus", uploadProgress: "uploadProgress", currentRecording: "currentRecording", enableUploadRecordings: "enableUploadRecordings", navigationEnabled: "navigationEnabled", ready: "ready" }, viewQueries: [{ propertyName: "statusDisplay", first: true, predicate: StatusDisplay, descendants: true, static: true }, { propertyName: "transportPanel", first: true, predicate: TransportPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (!screenXs) {
+      <div style="flex-direction: row" >
+        <app-sprstatusdisplay style="flex:0 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
+        class="hidden-xs"></app-sprstatusdisplay>
+        <app-sprtransport style="flex:10 0 0" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
+        @if (enableUploadRecordings) {
+          <app-uploadstatus style="flex:0 0 0" [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
+        }
         <app-readystateindicator [ready]="_ready"></app-readystateindicator>
       </div>
-      <app-sprtransport [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
-
-    </div>
-  `, isInline: true, styles: ["div{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { kind: "component", type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { kind: "component", type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }, { kind: "component", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }] }); }
+    }
+    @if (screenXs) {
+      <div style="flex-direction: column">
+        <div style="flex-direction: row" class="flexFill" >
+          <app-sprstatusdisplay style="flex:10 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
+          class="hidden-xs"></app-sprstatusdisplay>
+          @if (enableUploadRecordings) {
+            <app-uploadstatus style="flex:0 0 0" [value]="uploadProgress"
+            [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
+          }
+          <app-readystateindicator [ready]="_ready"></app-readystateindicator>
+        </div>
+        <app-sprtransport [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
+      </div>
+    }
+    `, isInline: true, styles: ["div{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n"], dependencies: [{ kind: "component", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { kind: "component", type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { kind: "component", type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }, { kind: "component", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ControlPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ControlPanel, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprcontrolpanel', template: `
-    <div *ngIf="!screenXs" style="flex-direction: row" >
-     <app-sprstatusdisplay style="flex:0 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
-                          class="hidden-xs"></app-sprstatusdisplay>
-      <app-sprtransport style="flex:10 0 0" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
-      <app-uploadstatus style="flex:0 0 0" *ngIf="enableUploadRecordings" [value]="uploadProgress"
-                      [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
-      <app-readystateindicator [ready]="_ready"></app-readystateindicator>
-    </div>
-    <div *ngIf="screenXs" style="flex-direction: column">
-      <div style="flex-direction: row" class="flexFill" >
-       <app-sprstatusdisplay style="flex:10 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
-                            class="hidden-xs"></app-sprstatusdisplay>
-       <app-uploadstatus style="flex:0 0 0" *ngIf="enableUploadRecordings" [value]="uploadProgress"
-                        [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
+    @if (!screenXs) {
+      <div style="flex-direction: row" >
+        <app-sprstatusdisplay style="flex:0 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
+        class="hidden-xs"></app-sprstatusdisplay>
+        <app-sprtransport style="flex:10 0 0" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
+        @if (enableUploadRecordings) {
+          <app-uploadstatus style="flex:0 0 0" [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
+        }
         <app-readystateindicator [ready]="_ready"></app-readystateindicator>
       </div>
-      <app-sprtransport [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
-
-    </div>
-  `, standalone: false, styles: ["div{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n"] }]
+    }
+    @if (screenXs) {
+      <div style="flex-direction: column">
+        <div style="flex-direction: row" class="flexFill" >
+          <app-sprstatusdisplay style="flex:10 0 0" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"
+          class="hidden-xs"></app-sprstatusdisplay>
+          @if (enableUploadRecordings) {
+            <app-uploadstatus style="flex:0 0 0" [value]="uploadProgress"
+            [status]="uploadStatus" [awaitNewUpload]="processing"></app-uploadstatus>
+          }
+          <app-readystateindicator [ready]="_ready"></app-readystateindicator>
+        </div>
+        <app-sprtransport [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="navigationEnabled"></app-sprtransport>
+      </div>
+    }
+    `, standalone: false, styles: ["div{align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }, { type: i1$3.MatDialog }], propDecorators: { statusDisplay: [{
                 type: ViewChild,
                 args: [StatusDisplay, { static: true }]
@@ -11890,56 +11962,68 @@ class RecordingItemControls extends ResponsiveComponent {
     error() {
         // this.status = 'ERROR';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingItemControls, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingItemControls, isStandalone: false, selector: "spr-recordingitemcontrols", inputs: { audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", peakDbLvl: "peakDbLvl", agc: "agc", disableAudioDetails: "disableAudioDetails", audioLoaded: "audioLoaded", playStartAction: "playStartAction", playStopAction: "playStopAction", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingItemControls, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RecordingItemControls, isStandalone: false, selector: "spr-recordingitemcontrols", inputs: { audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", peakDbLvl: "peakDbLvl", agc: "agc", disableAudioDetails: "disableAudioDetails", audioLoaded: "audioLoaded", playStartAction: "playStartAction", playStopAction: "playStopAction", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, usesInheritance: true, ngImport: i0, template: `
         <button matTooltip="Start playback" (click)="playStartAction?.perform()"
-                [disabled]="playStartAction?playStartAction.disabled:true"
-                [style.color]="playStartAction?.disabled ? 'grey' : 'green'">
-            <mat-icon>play_arrow</mat-icon>
+          [disabled]="playStartAction?playStartAction.disabled:true"
+          [style.color]="playStartAction?.disabled ? 'grey' : 'green'">
+          <mat-icon>play_arrow</mat-icon>
         </button>
         <button matTooltip="Stop playback" (click)="playStopAction?.perform()"
-                [disabled]="playStopAction?.disabled"
-                [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
-            <mat-icon>stop</mat-icon>
+          [disabled]="playStopAction?.disabled"
+          [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
+          <mat-icon>stop</mat-icon>
         </button>
-        <button *ngIf="!screenXs" matTooltip="Toggle detailed audio display" [disabled]="disableAudioDetails || !audioLoaded"
-                (click)="showRecordingDetails()">
+        @if (!screenXs) {
+          <button matTooltip="Toggle detailed audio display" [disabled]="disableAudioDetails || !audioLoaded"
+            (click)="showRecordingDetails()">
             <mat-icon>{{(audioSignalCollapsed) ? "expand_less" : "expand_more"}}</mat-icon>
-        </button>
-        <button matTooltip="Download current recording" *ngIf="enableDownload" [disabled]="disableAudioDetails || !audioLoaded"
-                (click)="downloadRecording()">
+          </button>
+        }
+        @if (enableDownload) {
+          <button matTooltip="Download current recording" [disabled]="disableAudioDetails || !audioLoaded"
+            (click)="downloadRecording()">
             <mat-icon>file_download</mat-icon>
-        </button>
+          </button>
+        }
         <div style="min-width: 14ch;padding:2px"><table style="border-style: none"><tr><td>Peak:</td><td><span matTooltip="Peak level"
-                                                                        [style.color]="(peakDbLvl > warnDbLevel)?'red':'black'">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>
-          <tr *ngIf="_agc"><td>AGC:</td><td><span matTooltip="Auto gain control">{{agcString}}</span></td></tr></table></div>
-    `, isInline: true, styles: [":host{flex:0;width:100%;background:#a9a9a9;padding:4px;box-sizing:border-box;height:100%;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "span{flex:0;font-weight:700;display:inline-block;white-space:nowrap;box-sizing:border-box}\n", "button{touch-action:manipulation}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }] }); }
+        [style.color]="(peakDbLvl > warnDbLevel)?'red':'black'">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>
+        @if (_agc) {
+          <tr><td>AGC:</td><td><span matTooltip="Auto gain control">{{agcString}}</span></td></tr>
+        }</table></div>
+        `, isInline: true, styles: [":host{flex:0;width:100%;background:#a9a9a9;padding:4px;box-sizing:border-box;height:100%;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "span{flex:0;font-weight:700;display:inline-block;white-space:nowrap;box-sizing:border-box}\n", "button{touch-action:manipulation}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingItemControls, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingItemControls, decorators: [{
             type: Component,
             args: [{ selector: 'spr-recordingitemcontrols', template: `
         <button matTooltip="Start playback" (click)="playStartAction?.perform()"
-                [disabled]="playStartAction?playStartAction.disabled:true"
-                [style.color]="playStartAction?.disabled ? 'grey' : 'green'">
-            <mat-icon>play_arrow</mat-icon>
+          [disabled]="playStartAction?playStartAction.disabled:true"
+          [style.color]="playStartAction?.disabled ? 'grey' : 'green'">
+          <mat-icon>play_arrow</mat-icon>
         </button>
         <button matTooltip="Stop playback" (click)="playStopAction?.perform()"
-                [disabled]="playStopAction?.disabled"
-                [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
-            <mat-icon>stop</mat-icon>
+          [disabled]="playStopAction?.disabled"
+          [style.color]="playStopAction?.disabled ? 'grey' : 'yellow'">
+          <mat-icon>stop</mat-icon>
         </button>
-        <button *ngIf="!screenXs" matTooltip="Toggle detailed audio display" [disabled]="disableAudioDetails || !audioLoaded"
-                (click)="showRecordingDetails()">
+        @if (!screenXs) {
+          <button matTooltip="Toggle detailed audio display" [disabled]="disableAudioDetails || !audioLoaded"
+            (click)="showRecordingDetails()">
             <mat-icon>{{(audioSignalCollapsed) ? "expand_less" : "expand_more"}}</mat-icon>
-        </button>
-        <button matTooltip="Download current recording" *ngIf="enableDownload" [disabled]="disableAudioDetails || !audioLoaded"
-                (click)="downloadRecording()">
+          </button>
+        }
+        @if (enableDownload) {
+          <button matTooltip="Download current recording" [disabled]="disableAudioDetails || !audioLoaded"
+            (click)="downloadRecording()">
             <mat-icon>file_download</mat-icon>
-        </button>
+          </button>
+        }
         <div style="min-width: 14ch;padding:2px"><table style="border-style: none"><tr><td>Peak:</td><td><span matTooltip="Peak level"
-                                                                        [style.color]="(peakDbLvl > warnDbLevel)?'red':'black'">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>
-          <tr *ngIf="_agc"><td>AGC:</td><td><span matTooltip="Auto gain control">{{agcString}}</span></td></tr></table></div>
-    `, standalone: false, styles: [":host{flex:0;width:100%;background:#a9a9a9;padding:4px;box-sizing:border-box;height:100%;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "span{flex:0;font-weight:700;display:inline-block;white-space:nowrap;box-sizing:border-box}\n", "button{touch-action:manipulation}\n"] }]
+        [style.color]="(peakDbLvl > warnDbLevel)?'red':'black'">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>
+        @if (_agc) {
+          <tr><td>AGC:</td><td><span matTooltip="Auto gain control">{{agcString}}</span></td></tr>
+        }</table></div>
+        `, standalone: false, styles: [":host{flex:0;width:100%;background:#a9a9a9;padding:4px;box-sizing:border-box;height:100%;display:flex;flex-direction:row;flex-wrap:nowrap}\n", "span{flex:0;font-weight:700;display:inline-block;white-space:nowrap;box-sizing:border-box}\n", "button{touch-action:manipulation}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { audioSignalCollapsed: [{
                 type: Input
             }], enableDownload: [{
@@ -12036,15 +12120,15 @@ class RecordingItemDisplay extends ResponsiveComponent {
         this.peakDbLvl = MIN_DB_LEVEL;
         this.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingItemDisplay, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingItemDisplay, isStandalone: false, selector: "spr-recordingitemdisplay", inputs: { streamingMode: "streamingMode", audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", agc: "agc", playStartAction: "playStartAction", playStopAction: "playStopAction", displayAudioBuffer: "displayAudioBuffer", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, viewQueries: [{ propertyName: "liveLevel", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingItemDisplay, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: RecordingItemDisplay, isStandalone: false, selector: "spr-recordingitemdisplay", inputs: { streamingMode: "streamingMode", audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", agc: "agc", playStartAction: "playStartAction", playStopAction: "playStopAction", displayAudioBuffer: "displayAudioBuffer", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, viewQueries: [{ propertyName: "liveLevel", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
       <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
         <audio-levelbar style="flex:1 0 1%" [streamingMode]="streamingMode" [displayLevelInfos]="_displayLevelInfos"></audio-levelbar>
         <spr-recordingitemcontrols style="flex:0 0 0px" [audioLoaded]="displayAudioBuffer!==null" [playStartAction]="playStartAction" [playStopAction]="playStopAction" [peakDbLvl]="peakDbLvl" [agc]="_agc" (onShowRecordingDetails)="onShowRecordingDetails.emit()"></spr-recordingitemcontrols>
       </div>
     `, isInline: true, styles: ["div{width:100%;background:#a9a9a9;padding:4px;box-sizing:border-box;flex-wrap:nowrap}\n", "audio-levelbar{box-sizing:border-box}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"], dependencies: [{ kind: "component", type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "state"] }, { kind: "component", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "disableAudioDetails", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingItemDisplay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingItemDisplay, decorators: [{
             type: Component,
             args: [{ selector: 'spr-recordingitemdisplay', template: `
       <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
@@ -13105,10 +13189,10 @@ class SpeechRecorderUploader extends Uploader {
         this.httpClient = httpClient;
         this.config = config;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechRecorderUploader, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechRecorderUploader }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechRecorderUploader, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechRecorderUploader }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechRecorderUploader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechRecorderUploader, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -13127,13 +13211,13 @@ class WarningBar {
             this.displayClass = 'off';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WarningBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: WarningBar, isStandalone: false, selector: "app-warningbar", inputs: { warningText: "warningText", show: "show" }, providers: [SessionService], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: WarningBar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: WarningBar, isStandalone: false, selector: "app-warningbar", inputs: { warningText: "warningText", show: "show" }, providers: [SessionService], ngImport: i0, template: `
     <div [class]="displayClass">{{warningText}}</div>
 
   `, isInline: true, styles: [":host{flex:0 0 content;background:orange}\n", ".off{display:none}\n", ".on{padding:2px;display:inline-block;width:100%;font-weight:700;font-size:larger;text-align:center}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: WarningBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: WarningBar, decorators: [{
             type: Component,
             args: [{ selector: 'app-warningbar', providers: [SessionService], template: `
     <div [class]="displayClass">{{warningText}}</div>
@@ -14369,110 +14453,142 @@ class SessionManager extends BasicRecorder {
             this.changeDetectorRef.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionManager, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: SessionManager, isStandalone: false, selector: "app-sprrecordingsession", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "prompting", first: true, predicate: Prompting, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionManager, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SessionManager, isStandalone: false, selector: "app-sprrecordingsession", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "prompting", first: true, predicate: Prompting, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <app-warningbar [show]="isTestSession()" warningText="Test recording only!"></app-warningbar>
     <app-warningbar [show]="isDefaultAudioTestSession()" warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
-      <app-sprprompting [projectName]="projectName"
-                        [startStopSignalState]="startStopSignalState" [promptItem]="promptItem" [showPrompt]="showPrompt"
-                        [items]="items?.items"
-                        [transportActions]="transportActions"
-                        [selectedItemIdx]="promptIndex" (onItemSelect)="itemSelect($event)" (onNextItem)="nextItem()" (onPrevItem)="prevItem()"
-                        [audioSignalCollapsed]="audioSignalCollapsed" [displayAudioClip]="displayAudioClip"
-                        [playStartAction]="controlAudioPlayer?.startAction"
-                        [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
-                        [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
-                        [playStopAction]="controlAudioPlayer?.stopAction">
-
+    <app-sprprompting [projectName]="projectName"
+      [startStopSignalState]="startStopSignalState" [promptItem]="promptItem" [showPrompt]="showPrompt"
+      [items]="items?.items"
+      [transportActions]="transportActions"
+      [selectedItemIdx]="promptIndex" (onItemSelect)="itemSelect($event)" (onNextItem)="nextItem()" (onPrevItem)="prevItem()"
+      [audioSignalCollapsed]="audioSignalCollapsed" [displayAudioClip]="displayAudioClip"
+      [playStartAction]="controlAudioPlayer?.startAction"
+      [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
+      [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
+      [playStopAction]="controlAudioPlayer?.stopAction">
+    
     </app-sprprompting>
-    <mat-progress-bar [value]="progressPercentValue()" *ngIf="screenXs" ></mat-progress-bar>
-
-
+    @if (screenXs) {
+      <mat-progress-bar [value]="progressPercentValue()" ></mat-progress-bar>
+    }
+    
+    
     <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
       <audio-levelbar style="flex:1 0 1%" [streamingMode]="isRecording() || keepLiveLevel" [displayLevelInfos]="displayAudioClip?.levelInfos"  [state]="liveLevelDisplayState"></audio-levelbar>
       <div style="display:flex;flex-direction: row">
         <spr-recordingitemcontrols style="display:flex;flex:10 0 1px"
-                                   [audioLoaded]="audioLoaded"
-                                   [disableAudioDetails]="disableAudioDetails"
-                                   [playStartAction]="controlAudioPlayer?.startAction"
-                                   [playStopAction]="controlAudioPlayer?.stopAction"
-                                   [peakDbLvl]="peakLevelInDb"
-                                   [agc]="this.ac?.agcStatus"
-                                   (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
+          [audioLoaded]="audioLoaded"
+          [disableAudioDetails]="disableAudioDetails"
+          [playStartAction]="controlAudioPlayer?.startAction"
+          [playStopAction]="controlAudioPlayer?.stopAction"
+          [peakDbLvl]="peakLevelInDb"
+          [agc]="this.ac?.agcStatus"
+          (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
         </spr-recordingitemcontrols>
-
-        <app-uploadstatus *ngIf="screenXs && enableUploadRecordings" class="ricontrols dark"  style="flex:0 0 0" [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+    
+        @if (screenXs && enableUploadRecordings) {
+          <app-uploadstatus class="ricontrols dark"  style="flex:0 0 0" [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (screenXs) {
+          <app-wakelockindicator class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (screenXs) {
+          <app-readystateindicator class="ricontrols dark" style="flex:0 0 0" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
     <div #controlpanel class="controlpanel">
       <div style="flex:1 1 30%;justify-content: flex-start;align-items: center; align-content: center">
-        <app-sprstatusdisplay *ngIf="!screenXs" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"></app-sprstatusdisplay>
+        @if (!screenXs) {
+          <app-sprstatusdisplay [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"></app-sprstatusdisplay>
+        }
       </div>
       <app-sprtransport style="display:flex;flex:10 0 30%;justify-content: center;align-items: center; align-content: center" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="!items || items.length()>1"></app-sprtransport>
       <div style="display:flex;flex:1 1 30%;flex-direction:row;justify-content: flex-end;align-items: center; align-content: center">
-        <app-uploadstatus *ngIf="!screenXs && enableUploadRecordings"  class="ricontrols"  [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator *ngIf="!screenXs" class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="!screenXs" class="ricontrols" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        @if (!screenXs && enableUploadRecordings) {
+          <app-uploadstatus  class="ricontrols"  [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (!screenXs) {
+          <app-wakelockindicator class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (!screenXs) {
+          <app-readystateindicator class="ricontrols" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
-  `, isInline: true, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{display:flex;padding:4px;box-sizing:border-box;height:100%;flex-direction:row;justify-content:flex-end;align-items:center;align-content:center}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "state"] }, { kind: "component", type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { kind: "component", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { kind: "component", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "disableAudioDetails", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { kind: "component", type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { kind: "component", type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }, { kind: "component", type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { kind: "component", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { kind: "component", type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }] }); }
+    `, isInline: true, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{display:flex;padding:4px;box-sizing:border-box;height:100%;flex-direction:row;justify-content:flex-end;align-items:center;align-content:center}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"], dependencies: [{ kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "state"] }, { kind: "component", type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { kind: "component", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { kind: "component", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "disableAudioDetails", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { kind: "component", type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { kind: "component", type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled", "pausingEnabled"] }, { kind: "component", type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { kind: "component", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { kind: "component", type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SessionManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SessionManager, decorators: [{
             type: Component,
             args: [{ selector: 'app-sprrecordingsession', providers: [SessionService], template: `
     <app-warningbar [show]="isTestSession()" warningText="Test recording only!"></app-warningbar>
     <app-warningbar [show]="isDefaultAudioTestSession()" warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
-      <app-sprprompting [projectName]="projectName"
-                        [startStopSignalState]="startStopSignalState" [promptItem]="promptItem" [showPrompt]="showPrompt"
-                        [items]="items?.items"
-                        [transportActions]="transportActions"
-                        [selectedItemIdx]="promptIndex" (onItemSelect)="itemSelect($event)" (onNextItem)="nextItem()" (onPrevItem)="prevItem()"
-                        [audioSignalCollapsed]="audioSignalCollapsed" [displayAudioClip]="displayAudioClip"
-                        [playStartAction]="controlAudioPlayer?.startAction"
-                        [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
-                        [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
-                        [playStopAction]="controlAudioPlayer?.stopAction">
-
+    <app-sprprompting [projectName]="projectName"
+      [startStopSignalState]="startStopSignalState" [promptItem]="promptItem" [showPrompt]="showPrompt"
+      [items]="items?.items"
+      [transportActions]="transportActions"
+      [selectedItemIdx]="promptIndex" (onItemSelect)="itemSelect($event)" (onNextItem)="nextItem()" (onPrevItem)="prevItem()"
+      [audioSignalCollapsed]="audioSignalCollapsed" [displayAudioClip]="displayAudioClip"
+      [playStartAction]="controlAudioPlayer?.startAction"
+      [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
+      [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
+      [playStopAction]="controlAudioPlayer?.stopAction">
+    
     </app-sprprompting>
-    <mat-progress-bar [value]="progressPercentValue()" *ngIf="screenXs" ></mat-progress-bar>
-
-
+    @if (screenXs) {
+      <mat-progress-bar [value]="progressPercentValue()" ></mat-progress-bar>
+    }
+    
+    
     <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
       <audio-levelbar style="flex:1 0 1%" [streamingMode]="isRecording() || keepLiveLevel" [displayLevelInfos]="displayAudioClip?.levelInfos"  [state]="liveLevelDisplayState"></audio-levelbar>
       <div style="display:flex;flex-direction: row">
         <spr-recordingitemcontrols style="display:flex;flex:10 0 1px"
-                                   [audioLoaded]="audioLoaded"
-                                   [disableAudioDetails]="disableAudioDetails"
-                                   [playStartAction]="controlAudioPlayer?.startAction"
-                                   [playStopAction]="controlAudioPlayer?.stopAction"
-                                   [peakDbLvl]="peakLevelInDb"
-                                   [agc]="this.ac?.agcStatus"
-                                   (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
+          [audioLoaded]="audioLoaded"
+          [disableAudioDetails]="disableAudioDetails"
+          [playStartAction]="controlAudioPlayer?.startAction"
+          [playStopAction]="controlAudioPlayer?.stopAction"
+          [peakDbLvl]="peakLevelInDb"
+          [agc]="this.ac?.agcStatus"
+          (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
         </spr-recordingitemcontrols>
-
-        <app-uploadstatus *ngIf="screenXs && enableUploadRecordings" class="ricontrols dark"  style="flex:0 0 0" [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+    
+        @if (screenXs && enableUploadRecordings) {
+          <app-uploadstatus class="ricontrols dark"  style="flex:0 0 0" [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (screenXs) {
+          <app-wakelockindicator class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (screenXs) {
+          <app-readystateindicator class="ricontrols dark" style="flex:0 0 0" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
     <div #controlpanel class="controlpanel">
       <div style="flex:1 1 30%;justify-content: flex-start;align-items: center; align-content: center">
-        <app-sprstatusdisplay *ngIf="!screenXs" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"></app-sprstatusdisplay>
+        @if (!screenXs) {
+          <app-sprstatusdisplay [statusMsg]="statusMsg" [statusAlertType]="statusAlertType" [statusWaiting]="statusWaiting"></app-sprstatusdisplay>
+        }
       </div>
       <app-sprtransport style="display:flex;flex:10 0 30%;justify-content: center;align-items: center; align-content: center" [readonly]="readonly" [actions]="transportActions" [navigationEnabled]="!items || items.length()>1"></app-sprtransport>
       <div style="display:flex;flex:1 1 30%;flex-direction:row;justify-content: flex-end;align-items: center; align-content: center">
-        <app-uploadstatus *ngIf="!screenXs && enableUploadRecordings"  class="ricontrols"  [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator *ngIf="!screenXs" class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="!screenXs" class="ricontrols" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        @if (!screenXs && enableUploadRecordings) {
+          <app-uploadstatus  class="ricontrols"  [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (!screenXs) {
+          <app-wakelockindicator class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (!screenXs) {
+          <app-readystateindicator class="ricontrols" [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
-  `, standalone: false, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{display:flex;padding:4px;box-sizing:border-box;height:100%;flex-direction:row;justify-content:flex-end;align-items:center;align-content:center}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"] }]
+    `, standalone: false, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;min-height:0px;overflow:hidden}\n", ".ricontrols{display:flex;padding:4px;box-sizing:border-box;height:100%;flex-direction:row;justify-content:flex-end;align-items:center;align-content:center}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1$3.MatDialog }, { type: SessionService }, { type: RecordingService }, { type: SpeechRecorderUploader }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
                     args: [SPEECHRECORDER_CONFIG]
@@ -14604,10 +14720,10 @@ class SprDb {
         });
         return obs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SprDb, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SprDb }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SprDb, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SprDb }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SprDb, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SprDb, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -14704,10 +14820,10 @@ class ScriptService {
         }
         return this.http.get(scriptUrl, { withCredentials: this.withCredentials });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScriptService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScriptService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScriptService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScriptService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScriptService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScriptService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -15073,17 +15189,17 @@ class SpeechrecorderngComponent extends RecorderComponent {
         this.sm.statusAlertType = 'error';
         this.sm.statusMsg = 'ERROR: Recording.';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechrecorderngComponent, deps: [{ token: i4$2.ActivatedRoute }, { token: i4$2.Router }, { token: i0.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: ScriptService }, { token: RecordingService }, { token: SpeechRecorderUploader }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: SpeechrecorderngComponent, isStandalone: false, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechrecorderngComponent, deps: [{ token: i4.ActivatedRoute }, { token: i4.Router }, { token: i0.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: ScriptService }, { token: RecordingService }, { token: SpeechRecorderUploader }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SpeechrecorderngComponent, isStandalone: false, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <app-sprrecordingsession [projectName]="project?.name" [dataSaved]="dataSaved"></app-sprrecordingsession>
   `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0}\n"], dependencies: [{ kind: "component", type: SessionManager, selector: "app-sprrecordingsession", inputs: ["projectName", "dataSaved"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechrecorderngComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechrecorderngComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-speechrecorder', providers: [SessionService], template: `
     <app-sprrecordingsession [projectName]="project?.name" [dataSaved]="dataSaved"></app-sprrecordingsession>
   `, standalone: false, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0}\n"] }]
-        }], ctorParameters: () => [{ type: i4$2.ActivatedRoute }, { type: i4$2.Router }, { type: i0.ChangeDetectorRef }, { type: SessionService }, { type: ProjectService }, { type: ScriptService }, { type: RecordingService }, { type: SpeechRecorderUploader }], propDecorators: { sm: [{
+        }], ctorParameters: () => [{ type: i4.ActivatedRoute }, { type: i4.Router }, { type: i0.ChangeDetectorRef }, { type: SessionService }, { type: ProjectService }, { type: ScriptService }, { type: RecordingService }, { type: SpeechRecorderUploader }], propDecorators: { sm: [{
                 type: ViewChild,
                 args: [SessionManager, { static: true }]
             }] } });
@@ -15097,10 +15213,10 @@ class ScrollIntoViewDirective {
             this.elRef.nativeElement.scrollIntoView(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: ScrollIntoViewDirective, isStandalone: false, selector: "[scrollIntoViewToBottom]", inputs: { scrollIntoViewToBottom: "scrollIntoViewToBottom" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: ScrollIntoViewDirective, isStandalone: false, selector: "[scrollIntoViewToBottom]", inputs: { scrollIntoViewToBottom: "scrollIntoViewToBottom" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[scrollIntoViewToBottom]",
@@ -15111,10 +15227,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }] } });
 
 class ScrollPaneHorizontal {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScrollPaneHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ScrollPaneHorizontal, isStandalone: false, selector: "scroll-pane-horizontal", ngImport: i0, template: '', isInline: true, styles: [":host{width:100%;background:#a9a9a9;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScrollPaneHorizontal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: ScrollPaneHorizontal, isStandalone: false, selector: "scroll-pane-horizontal", ngImport: i0, template: '', isInline: true, styles: [":host{width:100%;background:#a9a9a9;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ScrollPaneHorizontal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ScrollPaneHorizontal, decorators: [{
             type: Component,
             args: [{ selector: 'scroll-pane-horizontal', template: '', standalone: false, styles: [":host{width:100%;background:#a9a9a9;box-sizing:border-box;height:100%;position:relative;overflow-x:scroll;overflow-y:auto}\n"] }]
         }] });
@@ -15297,8 +15413,8 @@ class AudioDisplayPlayer {
     error() {
         this.status = 'ERROR';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplayPlayer, deps: [{ token: i4$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioDisplayPlayer, isStandalone: false, selector: "app-audiodisplayplayer", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplayPlayer, deps: [{ token: i4.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AudioDisplayPlayer, isStandalone: false, selector: "app-audiodisplayplayer", inputs: { playStartAction: "playStartAction", playStopAction: "playStopAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", audioData: "audioData", audioClip: "audioClip" }, viewQueries: [{ propertyName: "audioDisplayScrollPane", first: true, predicate: AudioDisplayScrollPane, descendants: true, static: true }], ngImport: i0, template: `
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
 
@@ -15313,7 +15429,7 @@ class AudioDisplayPlayer {
                              [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control><p>{{status}}
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;position:absolute;bottom:0;height:100%;width:100%;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#000000bf}\n"], dependencies: [{ kind: "component", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { kind: "component", type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioDisplayPlayer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioDisplayPlayer, decorators: [{
             type: Component,
             args: [{ selector: 'app-audiodisplayplayer', template: `
 
@@ -15329,7 +15445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                              [zoomSelectedAction]="zoomSelectedAction"
                              [zoomFitToPanelAction]="zoomFitToPanelAction"></audio-display-control><p>{{status}}
   `, standalone: false, styles: [":host{display:flex;flex-direction:column;position:absolute;bottom:0;height:100%;width:100%;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#000000bf}\n"] }]
-        }], ctorParameters: () => [{ type: i4$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { playStartAction: [{
+        }], ctorParameters: () => [{ type: i4.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { playStartAction: [{
                 type: Input
             }], playStopAction: [{
                 type: Input
@@ -15679,10 +15795,10 @@ class RecordingFileService extends BasicRecordingService {
         //console.log("Path request URL: "+recUrl)
         return this.http.patch(recUrl, { editSampleRate: editSampleRate, editStartFrame: editStartFrame, editEndFrame: editEndFrame }, { withCredentials: this.withCredentials });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileService, deps: [{ token: i1.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
@@ -15705,76 +15821,104 @@ class RecordingFileNaviComponent {
             this.selectVersion.perform(versionNr);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileNaviComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingFileNaviComponent, isStandalone: false, selector: "app-recording-file-navi", inputs: { firstAction: "firstAction", prevAction: "prevAction", nextAction: "nextAction", lastAction: "lastAction", items: "items", itemPos: "itemPos", selectVersion: "selectVersion", versions: "versions", version: "version", naviInfoLoading: "naviInfoLoading" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileNaviComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RecordingFileNaviComponent, isStandalone: false, selector: "app-recording-file-navi", inputs: { firstAction: "firstAction", prevAction: "prevAction", nextAction: "nextAction", lastAction: "lastAction", items: "items", itemPos: "itemPos", selectVersion: "selectVersion", versions: "versions", version: "version", naviInfoLoading: "naviInfoLoading" }, ngImport: i0, template: `
         <div #controlPanel style="display:flex;flex-direction: row;">
           <div #navi style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
             <fieldset>
               <legend>Versions</legend>
-              <mat-progress-spinner *ngIf="naviInfoLoading" mode="indeterminate" [diameter]="15"></mat-progress-spinner>
-                <select *ngIf="!naviInfoLoading" [disabled]="versions==null || versions.length==1" (change)="selectVersionChange($event)">
-                  <option *ngFor="let v of versions; let i = index" [selected]="v===version" value="{{v}}">{{v}}<ng-container *ngIf="i==0"> (latest)</ng-container></option>
+              @if (naviInfoLoading) {
+                <mat-progress-spinner mode="indeterminate" [diameter]="15"></mat-progress-spinner>
+              }
+              @if (!naviInfoLoading) {
+                <select [disabled]="versions==null || versions.length==1" (change)="selectVersionChange($event)">
+                  @for (v of versions; track v; let i = $index) {
+                    <option [selected]="v===version" value="{{v}}">{{v}}@if (i==0) {
+                      (latest)
+                    }</option>
+                  }
                 </select>
+              }
             </fieldset>
             <fieldset>
               <legend>Navigate</legend>
-              <mat-progress-spinner *ngIf="naviInfoLoading" mode="indeterminate" [diameter]="15"></mat-progress-spinner>
-              <div *ngIf="!naviInfoLoading"  style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
-                <button (click)="firstAction?.perform()" [disabled]="!firstAction || firstAction.disabled" matTooltip="First recording file">
-                  <mat-icon>first_page</mat-icon>
-                </button>
-                <button (click)="prevAction?.perform()" [disabled]="!prevAction || prevAction.disabled" matTooltip="Previous recording file">
-                  <mat-icon>chevron_left</mat-icon>
-                </button>
-                <button (click)="nextAction?.perform()" [disabled]="!nextAction || nextAction.disabled" matTooltip="Next recording file">
-                  <mat-icon>chevron_right</mat-icon>
-                </button>
-                <button (click)="lastAction?.perform()" [disabled]="!lastAction || lastAction.disabled" matTooltip="Last recording file">
-                  <mat-icon>last_page</mat-icon>
-                </button>
-              </div>
-              <p *ngIf="items && itemPos!==null && itemPos!==undefined">Item {{itemPos+1}} of {{items}}</p>
+              @if (naviInfoLoading) {
+                <mat-progress-spinner mode="indeterminate" [diameter]="15"></mat-progress-spinner>
+              }
+              @if (!naviInfoLoading) {
+                <div  style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
+                  <button (click)="firstAction?.perform()" [disabled]="!firstAction || firstAction.disabled" matTooltip="First recording file">
+                    <mat-icon>first_page</mat-icon>
+                  </button>
+                  <button (click)="prevAction?.perform()" [disabled]="!prevAction || prevAction.disabled" matTooltip="Previous recording file">
+                    <mat-icon>chevron_left</mat-icon>
+                  </button>
+                  <button (click)="nextAction?.perform()" [disabled]="!nextAction || nextAction.disabled" matTooltip="Next recording file">
+                    <mat-icon>chevron_right</mat-icon>
+                  </button>
+                  <button (click)="lastAction?.perform()" [disabled]="!lastAction || lastAction.disabled" matTooltip="Last recording file">
+                    <mat-icon>last_page</mat-icon>
+                  </button>
+                </div>
+              }
+              @if (items && itemPos!==null && itemPos!==undefined) {
+                <p>Item {{itemPos+1}} of {{items}}</p>
+              }
               <p>(List ordered by date)</p>
             </fieldset>
           </div>
         </div>
-          `, isInline: true, styles: [":host{flex:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+        `, isInline: true, styles: [":host{flex:0}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileNaviComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileNaviComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-recording-file-navi', template: `
         <div #controlPanel style="display:flex;flex-direction: row;">
           <div #navi style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
             <fieldset>
               <legend>Versions</legend>
-              <mat-progress-spinner *ngIf="naviInfoLoading" mode="indeterminate" [diameter]="15"></mat-progress-spinner>
-                <select *ngIf="!naviInfoLoading" [disabled]="versions==null || versions.length==1" (change)="selectVersionChange($event)">
-                  <option *ngFor="let v of versions; let i = index" [selected]="v===version" value="{{v}}">{{v}}<ng-container *ngIf="i==0"> (latest)</ng-container></option>
+              @if (naviInfoLoading) {
+                <mat-progress-spinner mode="indeterminate" [diameter]="15"></mat-progress-spinner>
+              }
+              @if (!naviInfoLoading) {
+                <select [disabled]="versions==null || versions.length==1" (change)="selectVersionChange($event)">
+                  @for (v of versions; track v; let i = $index) {
+                    <option [selected]="v===version" value="{{v}}">{{v}}@if (i==0) {
+                      (latest)
+                    }</option>
+                  }
                 </select>
+              }
             </fieldset>
             <fieldset>
               <legend>Navigate</legend>
-              <mat-progress-spinner *ngIf="naviInfoLoading" mode="indeterminate" [diameter]="15"></mat-progress-spinner>
-              <div *ngIf="!naviInfoLoading"  style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
-                <button (click)="firstAction?.perform()" [disabled]="!firstAction || firstAction.disabled" matTooltip="First recording file">
-                  <mat-icon>first_page</mat-icon>
-                </button>
-                <button (click)="prevAction?.perform()" [disabled]="!prevAction || prevAction.disabled" matTooltip="Previous recording file">
-                  <mat-icon>chevron_left</mat-icon>
-                </button>
-                <button (click)="nextAction?.perform()" [disabled]="!nextAction || nextAction.disabled" matTooltip="Next recording file">
-                  <mat-icon>chevron_right</mat-icon>
-                </button>
-                <button (click)="lastAction?.perform()" [disabled]="!lastAction || lastAction.disabled" matTooltip="Last recording file">
-                  <mat-icon>last_page</mat-icon>
-                </button>
-              </div>
-              <p *ngIf="items && itemPos!==null && itemPos!==undefined">Item {{itemPos+1}} of {{items}}</p>
+              @if (naviInfoLoading) {
+                <mat-progress-spinner mode="indeterminate" [diameter]="15"></mat-progress-spinner>
+              }
+              @if (!naviInfoLoading) {
+                <div  style="flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap">
+                  <button (click)="firstAction?.perform()" [disabled]="!firstAction || firstAction.disabled" matTooltip="First recording file">
+                    <mat-icon>first_page</mat-icon>
+                  </button>
+                  <button (click)="prevAction?.perform()" [disabled]="!prevAction || prevAction.disabled" matTooltip="Previous recording file">
+                    <mat-icon>chevron_left</mat-icon>
+                  </button>
+                  <button (click)="nextAction?.perform()" [disabled]="!nextAction || nextAction.disabled" matTooltip="Next recording file">
+                    <mat-icon>chevron_right</mat-icon>
+                  </button>
+                  <button (click)="lastAction?.perform()" [disabled]="!lastAction || lastAction.disabled" matTooltip="Last recording file">
+                    <mat-icon>last_page</mat-icon>
+                  </button>
+                </div>
+              }
+              @if (items && itemPos!==null && itemPos!==undefined) {
+                <p>Item {{itemPos+1}} of {{items}}</p>
+              }
               <p>(List ordered by date)</p>
             </fieldset>
           </div>
         </div>
-          `, standalone: false, styles: [":host{flex:0}\n"] }]
+        `, standalone: false, styles: [":host{flex:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { firstAction: [{
                 type: Input
             }], prevAction: [{
@@ -15837,80 +15981,108 @@ class RecordingFileMetaComponent {
         }
         return t;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingFileMetaComponent, isStandalone: false, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", stateLoading: "stateLoading", recordingFile: "recordingFile" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileMetaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: RecordingFileMetaComponent, isStandalone: false, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", stateLoading: "stateLoading", recordingFile: "recordingFile" }, ngImport: i0, template: `
     <mat-card appearance="outlined">
       <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>
       <mat-card-content>
-        <mat-progress-spinner *ngIf="stateLoading" mode="indeterminate" [diameter]="20"></mat-progress-spinner>
+        @if (stateLoading) {
+          <mat-progress-spinner mode="indeterminate" [diameter]="20"></mat-progress-spinner>
+        }
         <table>
-          <tr *ngIf="itemCode">
-            <td>Itemcode:</td>
-            <td>{{itemCode}}</td>
-          </tr>
-          <tr *ngIf="uuid && !itemCode">
-            <td>UUID:</td>
-            <td>{{uuid}}</td>
-          </tr>
-          <tr *ngIf="recordingFile?.startedDate">
-            <td>Started:</td>
-            <td>{{recordingFile?.startedDate}}</td>
-          </tr>
-          <tr *ngIf="!recordingFile?.startedDate && recordingFile?.date">
-            <td>Date:</td>
-            <td>{{recordingFile?.date}}</td>
-          </tr>
-          <tr *ngIf="itemCode">
-            <td>Prompt:</td>
-            <td>{{recordingAsPlainText()}}</td>
-          </tr>
-
-          <tr *ngIf="sessionId">
-            <td>Session:</td>
-            <td>{{sessionId}}</td>
-          </tr>
+          @if (itemCode) {
+            <tr>
+              <td>Itemcode:</td>
+              <td>{{itemCode}}</td>
+            </tr>
+          }
+          @if (uuid && !itemCode) {
+            <tr>
+              <td>UUID:</td>
+              <td>{{uuid}}</td>
+            </tr>
+          }
+          @if (recordingFile?.startedDate) {
+            <tr>
+              <td>Started:</td>
+              <td>{{recordingFile?.startedDate}}</td>
+            </tr>
+          }
+          @if (!recordingFile?.startedDate && recordingFile?.date) {
+            <tr>
+              <td>Date:</td>
+              <td>{{recordingFile?.date}}</td>
+            </tr>
+          }
+          @if (itemCode) {
+            <tr>
+              <td>Prompt:</td>
+              <td>{{recordingAsPlainText()}}</td>
+            </tr>
+          }
+    
+          @if (sessionId) {
+            <tr>
+              <td>Session:</td>
+              <td>{{sessionId}}</td>
+            </tr>
+          }
         </table>
       </mat-card-content>
     </mat-card>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileMetaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileMetaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-recording-file-meta', template: `
     <mat-card appearance="outlined">
       <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>
       <mat-card-content>
-        <mat-progress-spinner *ngIf="stateLoading" mode="indeterminate" [diameter]="20"></mat-progress-spinner>
+        @if (stateLoading) {
+          <mat-progress-spinner mode="indeterminate" [diameter]="20"></mat-progress-spinner>
+        }
         <table>
-          <tr *ngIf="itemCode">
-            <td>Itemcode:</td>
-            <td>{{itemCode}}</td>
-          </tr>
-          <tr *ngIf="uuid && !itemCode">
-            <td>UUID:</td>
-            <td>{{uuid}}</td>
-          </tr>
-          <tr *ngIf="recordingFile?.startedDate">
-            <td>Started:</td>
-            <td>{{recordingFile?.startedDate}}</td>
-          </tr>
-          <tr *ngIf="!recordingFile?.startedDate && recordingFile?.date">
-            <td>Date:</td>
-            <td>{{recordingFile?.date}}</td>
-          </tr>
-          <tr *ngIf="itemCode">
-            <td>Prompt:</td>
-            <td>{{recordingAsPlainText()}}</td>
-          </tr>
-
-          <tr *ngIf="sessionId">
-            <td>Session:</td>
-            <td>{{sessionId}}</td>
-          </tr>
+          @if (itemCode) {
+            <tr>
+              <td>Itemcode:</td>
+              <td>{{itemCode}}</td>
+            </tr>
+          }
+          @if (uuid && !itemCode) {
+            <tr>
+              <td>UUID:</td>
+              <td>{{uuid}}</td>
+            </tr>
+          }
+          @if (recordingFile?.startedDate) {
+            <tr>
+              <td>Started:</td>
+              <td>{{recordingFile?.startedDate}}</td>
+            </tr>
+          }
+          @if (!recordingFile?.startedDate && recordingFile?.date) {
+            <tr>
+              <td>Date:</td>
+              <td>{{recordingFile?.date}}</td>
+            </tr>
+          }
+          @if (itemCode) {
+            <tr>
+              <td>Prompt:</td>
+              <td>{{recordingAsPlainText()}}</td>
+            </tr>
+          }
+    
+          @if (sessionId) {
+            <tr>
+              <td>Session:</td>
+              <td>{{sessionId}}</td>
+            </tr>
+          }
         </table>
       </mat-card-content>
     </mat-card>
-  `, standalone: false }]
+    `, standalone: false }]
         }], ctorParameters: () => [], propDecorators: { sessionId: [{
                 type: Input
             }], stateLoading: [{
@@ -16279,8 +16451,8 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileViewComponent, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i4$2.Router }, { token: i4$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingFileViewComponent, isStandalone: false, selector: "app-audiodisplayplayer", viewQueries: [{ propertyName: "ac", first: true, predicate: AudioDisplayScrollPane, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileViewComponent, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: RecordingFileViewComponent, isStandalone: false, selector: "app-audiodisplayplayer", viewQueries: [{ propertyName: "ac", first: true, predicate: AudioDisplayScrollPane, descendants: true }], usesInheritance: true, ngImport: i0, template: `
 
     <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>
     <div class="ctrlview">
@@ -16299,7 +16471,7 @@ class RecordingFileViewComponent extends AudioDisplayPlayer {
       </div>
   `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], dependencies: [{ kind: "component", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { kind: "component", type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { kind: "component", type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { kind: "component", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "stateLoading", "recordingFile"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-audiodisplayplayer', template: `
 
@@ -16319,7 +16491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
       <app-recording-file-navi [items]="availRecFiles?.length" [itemPos]="posInList" [version]="recordingFileVersion" [versions]="versions" [firstAction]="firstAction" [prevAction]="prevAction" [nextAction]="nextAction" [lastAction]="lastAction" [selectVersion]="toVersionAction" [naviInfoLoading]="naviInfoLoading"></app-recording-file-navi>
       </div>
   `, standalone: false, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"] }]
-        }], ctorParameters: () => [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i4$2.Router }, { type: i4$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.MatDialog }], propDecorators: { ac: [{
+        }], ctorParameters: () => [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.MatDialog }], propDecorators: { ac: [{
                 type: ViewChild,
                 args: [AudioDisplayScrollPane]
             }] } });
@@ -16406,8 +16578,8 @@ class RecordingFileUI extends RecordingFileViewComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileUI, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i4$2.Router }, { token: i4$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }, { token: i6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingFileUI, isStandalone: false, selector: "app-audiodisplayplayer", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileUI, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$3.MatDialog }, { token: i6$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: RecordingFileUI, isStandalone: false, selector: "app-audiodisplayplayer", usesInheritance: true, ngImport: i0, template: `
       <h1>Recording file editing</h1>
       <p>On export or delivery the editing selection of the recording file is cut out. If no editing selection is applied the original file is exported.</p>
 
@@ -16427,9 +16599,9 @@ class RecordingFileUI extends RecordingFileViewComponent {
       </div>
 
       <button mat-raised-button color="accent" (click)="applySelection()" [disabled]="editSaved">{{this.applyButtonText()}}</button>
-  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], dependencies: [{ kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { kind: "component", type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { kind: "component", type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { kind: "component", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "stateLoading", "recordingFile"] }] }); }
+  `, isInline: true, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"], dependencies: [{ kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { kind: "component", type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { kind: "component", type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { kind: "component", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "stateLoading", "recordingFile"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingFileUI, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingFileUI, decorators: [{
             type: Component,
             args: [{ selector: 'app-audiodisplayplayer', template: `
       <h1>Recording file editing</h1>
@@ -16452,7 +16624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
       <button mat-raised-button color="accent" (click)="applySelection()" [disabled]="editSaved">{{this.applyButtonText()}}</button>
   `, standalone: false, styles: [":host{flex:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:20px;z-index:5;box-sizing:border-box;background-color:#fff}\n", ".ctrlview{display:flex;flex-direction:row}\n", "audio-display-control{flex:3}\n"] }]
-        }], ctorParameters: () => [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i4$2.Router }, { type: i4$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.MatDialog }, { type: i6.MatSnackBar }] });
+        }], ctorParameters: () => [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$3.MatDialog }, { type: i6$1.MatSnackBar }] });
 
 class MediaUtils {
     static toMediaTime(timeInSeconds) {
@@ -16543,8 +16715,8 @@ class RecordingList {
         }
         return cached;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecordingList, isStandalone: false, selector: "app-recordinglist", inputs: { selectDisabled: "selectDisabled", selectedRecordingFile: "selectedRecordingFile" }, outputs: { selectedRecordingFileChanged: "selectedRecordingFileChanged" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: RecordingList, isStandalone: false, selector: "app-recordinglist", inputs: { selectDisabled: "selectDisabled", selectedRecordingFile: "selectedRecordingFile" }, outputs: { selectedRecordingFileChanged: "selectedRecordingFileChanged" }, ngImport: i0, template: `
     <mat-card appearance="outlined">
       <mat-card-header>
         <h2>Recording list</h2>
@@ -16588,9 +16760,9 @@ class RecordingList {
       </mat-card-content>
     </mat-card>
 
-  `, isInline: true, styles: [".monospaced{font-family:monospace}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;padding-right:5px}.mat-mdc-card,.mat-mdc-card-header,.mat-mdc-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}.flexFill{margin:0;width:100%;height:100%;min-width:100%;min-height:100%}.spr-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ":host{position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;overflow-y:auto;min-height:0px}\n", ".selected{font-weight:700}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: i4$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }] }); }
+  `, isInline: true, styles: [".monospaced{font-family:monospace}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;padding-right:5px}.mat-mdc-card,.mat-mdc-card-header,.mat-mdc-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}.flexFill{margin:0;width:100%;height:100%;min-width:100%;min-height:100%}.spr-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ":host{position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;overflow-y:auto;min-height:0px}\n", ".selected{font-weight:700}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$2.MatCardHeader, selector: "mat-card-header" }, { kind: "component", type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecordingList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecordingList, decorators: [{
             type: Component,
             args: [{ selector: 'app-recordinglist', template: `
     <mat-card appearance="outlined">
@@ -16669,8 +16841,8 @@ class RecorderCombiPane extends ResponsiveComponent {
     selectTop() {
         this.recordingListComp.selectTop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecorderCombiPane, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: RecorderCombiPane, isStandalone: false, selector: "app-recordercombipane", inputs: { selectDisabled: "selectDisabled", selectedRecordingFile: "selectedRecordingFile", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { selectedRecordingFileChanged: "selectedRecordingFileChanged" }, viewQueries: [{ propertyName: "recordingListComp", first: true, predicate: RecordingList, descendants: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecorderCombiPane, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: RecorderCombiPane, isStandalone: false, selector: "app-recordercombipane", inputs: { selectDisabled: "selectDisabled", selectedRecordingFile: "selectedRecordingFile", audioSignalCollapsed: "audioSignalCollapsed", displayAudioClip: "displayAudioClip", playStartAction: "playStartAction", playSelectionAction: "playSelectionAction", autoPlayOnSelectToggleAction: "autoPlayOnSelectToggleAction", playStopAction: "playStopAction" }, outputs: { selectedRecordingFileChanged: "selectedRecordingFileChanged" }, viewQueries: [{ propertyName: "recordingListComp", first: true, predicate: RecordingList, descendants: true }, { propertyName: "audioDisplay", first: true, predicate: AudioDisplay, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="scrollList">
         <app-recordinglist [selectedRecordingFile]="selectedRecordingFile" [selectDisabled]="selectDisabled" (selectedRecordingFileChanged)="selectRecordingFile($event)"></app-recordinglist>
     </div>
@@ -16684,7 +16856,7 @@ class RecorderCombiPane extends ResponsiveComponent {
     </div>
   `, isInline: true, styles: [".monospaced{font-family:monospace}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;padding-right:5px}.mat-mdc-card,.mat-mdc-card-header,.mat-mdc-card-content{width:auto}.flexForm{display:flex;flex-direction:column;width:auto}.flexFill{margin:0;width:100%;height:100%;min-width:100%;min-height:100%}.spr-button-icon{font-size:24px;vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap}\n", ":host{background-color:#ff0;position:relative;margin:0;padding:0;background:#d3d3d3;width:100%;flex:1;min-height:0px}\n", ".scrollList{margin:0;padding:0;background:#d3d3d3;width:100%;height:100%;overflow-y:auto}\n", ".collapsable{display:none;position:absolute;z-index:5}\n", ".collapsable.active{display:flex;position:absolute;bottom:0;height:90%;width:100%;overflow:hidden;padding:0;z-index:200;box-sizing:border-box;background-color:#0000}\n"], dependencies: [{ kind: "component", type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }, { kind: "component", type: RecordingList, selector: "app-recordinglist", inputs: ["selectDisabled", "selectedRecordingFile"], outputs: ["selectedRecordingFileChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecorderCombiPane, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: RecorderCombiPane, decorators: [{
             type: Component,
             args: [{ selector: 'app-recordercombipane', template: `
     <div class="scrollList">
@@ -17592,48 +17764,56 @@ class AudioRecorder extends BasicRecorder {
             this.changeDetectorRef.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioRecorder, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioRecorder, isStandalone: false, selector: "app-audiorecorder", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "recorderCombiPane", first: true, predicate: RecorderCombiPane, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioRecorder, deps: [{ token: i1$2.BreakpointObserver }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AudioRecorder, isStandalone: false, selector: "app-audiorecorder", inputs: { projectName: "projectName", dataSaved: "dataSaved" }, host: { listeners: { "window:keypress": "onKeyPress($event)", "window:keydown": "onKeyDown($event)" } }, providers: [SessionService], viewQueries: [{ propertyName: "recorderCombiPane", first: true, predicate: RecorderCombiPane, descendants: true, static: true }, { propertyName: "liveLevelDisplay", first: true, predicate: LevelBar, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <app-warningbar [show]="isTestSession()" warningText="Test recording only!"></app-warningbar>
     <app-warningbar [show]="isDefaultAudioTestSession()"
-                    warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
+    warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
     <app-recordercombipane (selectedRecordingFileChanged)="selectRecordingFile($event)"
-                           [audioSignalCollapsed]="audioSignalCollapsed"
-                           [selectedRecordingFile]="displayRecFile"
-                           [selectDisabled]="isActive()"
-                           [displayAudioClip]="displayAudioClip"
-                           [playStartAction]="controlAudioPlayer?.startAction"
-                           [playStopAction]="controlAudioPlayer?.stopAction"
-                           [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
-                           [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
+      [audioSignalCollapsed]="audioSignalCollapsed"
+      [selectedRecordingFile]="displayRecFile"
+      [selectDisabled]="isActive()"
+      [displayAudioClip]="displayAudioClip"
+      [playStartAction]="controlAudioPlayer?.startAction"
+      [playStopAction]="controlAudioPlayer?.stopAction"
+      [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
+      [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
     ></app-recordercombipane>
-
+    
     <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
       <audio-levelbar style="flex:1 0 1%" [streamingMode]="isRecording() || keepLiveLevel" [state]="liveLevelDisplayState"
-                      [displayLevelInfos]="displayAudioClip?.levelInfos"></audio-levelbar>
+      [displayLevelInfos]="displayAudioClip?.levelInfos"></audio-levelbar>
       <div style="display:flex;flex-direction: row">
         <spr-recordingitemcontrols style="flex:10 0 1px"
-                                   [disableAudioDetails]="disableAudioDetails"
-                                   [audioLoaded]="audioLoaded"
-                                   [playStartAction]="controlAudioPlayer?.startAction"
-                                   [playStopAction]="controlAudioPlayer?.stopAction"
-                                   [peakDbLvl]="peakLevelInDb"
-                                   [agc]="this.ac?.agcStatus"
-                                   (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
+          [disableAudioDetails]="disableAudioDetails"
+          [audioLoaded]="audioLoaded"
+          [playStartAction]="controlAudioPlayer?.startAction"
+          [playStopAction]="controlAudioPlayer?.stopAction"
+          [peakDbLvl]="peakLevelInDb"
+          [agc]="this.ac?.agcStatus"
+          (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
         </spr-recordingitemcontrols>
-
-        <app-uploadstatus *ngIf="screenXs && enableUploadRecordings" class="ricontrols dark" style="flex:0 0 0"
-                          [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0"
-                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+    
+        @if (screenXs && enableUploadRecordings) {
+          <app-uploadstatus class="ricontrols dark" style="flex:0 0 0"
+            [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (screenXs) {
+          <app-wakelockindicator class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (screenXs) {
+          <app-readystateindicator class="ricontrols dark" style="flex:0 0 0"
+          [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
     <div #controlpanel class="controlpanel">
-      <app-sprstatusdisplay *ngIf="!screenXs" style="flex:0 1 30%;" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType"
-                            [statusWaiting]="statusWaiting"
-                            class="hidden-xs"></app-sprstatusdisplay>
+      @if (!screenXs) {
+        <app-sprstatusdisplay style="flex:0 1 30%;" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType"
+          [statusWaiting]="statusWaiting"
+        class="hidden-xs"></app-sprstatusdisplay>
+      }
       <div [class.startstop]="!screenXs" [class.startstopscreenxs]="screenXs">
         <div style="align-content: center">
           <button (click)="startStopPerform()" [disabled]="startDisabled() && stopDisabled()" mat-raised-button class="bigbutton">
@@ -17643,59 +17823,73 @@ class AudioRecorder extends BasicRecorder {
         </div>
       </div>
       <div style="flex:0 1 30%;display:flex;justify-items: flex-end;justify-content:flex-end" >
-        <app-uploadstatus *ngIf="!screenXs && enableUploadRecordings" class="ricontrols"
-                          [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator  *ngIf="!screenXs" class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="!screenXs" class="ricontrols"
-                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        @if (!screenXs && enableUploadRecordings) {
+          <app-uploadstatus class="ricontrols"
+            [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (!screenXs) {
+          <app-wakelockindicator  class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (!screenXs) {
+          <app-readystateindicator class="ricontrols"
+          [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
-  `, isInline: true, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".startstop{width:100%;flex:1 0 30%;align-items:center;text-align:center;align-content:center}\n", ".startstopscreenxs{width:100%;flex:1 0 100%;align-items:center;text-align:center;align-content:center}\n", ".bigbutton{vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap;letter-spacing:normal;min-width:70px;min-height:50px;border-radius:20px}\n", ".bigbuttonicon{min-width:50px;min-height:50px;font-size:50px}\n", ".bigbuttontext{font-weight:bolder;font-size:14px;vertical-align:middle}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "state"] }, { kind: "component", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { kind: "component", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "disableAudioDetails", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { kind: "component", type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { kind: "component", type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { kind: "component", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { kind: "component", type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { kind: "component", type: RecorderCombiPane, selector: "app-recordercombipane", inputs: ["selectDisabled", "selectedRecordingFile", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["selectedRecordingFileChanged"] }] }); }
+    `, isInline: true, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".startstop{width:100%;flex:1 0 30%;align-items:center;text-align:center;align-content:center}\n", ".startstopscreenxs{width:100%;flex:1 0 100%;align-items:center;text-align:center;align-content:center}\n", ".bigbutton{vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap;letter-spacing:normal;min-width:70px;min-height:50px;border-radius:20px}\n", ".bigbuttonicon{min-width:50px;min-height:50px;font-size:50px}\n", ".bigbuttontext{font-weight:bolder;font-size:14px;vertical-align:middle}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"], dependencies: [{ kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos", "state"] }, { kind: "component", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { kind: "component", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "disableAudioDetails", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { kind: "component", type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { kind: "component", type: WakeLockIndicator, selector: "app-wakelockindicator", inputs: ["screenLocked"] }, { kind: "component", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { kind: "component", type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { kind: "component", type: RecorderCombiPane, selector: "app-recordercombipane", inputs: ["selectDisabled", "selectedRecordingFile", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["selectedRecordingFileChanged"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioRecorder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioRecorder, decorators: [{
             type: Component,
             args: [{ selector: 'app-audiorecorder', providers: [SessionService], template: `
     <app-warningbar [show]="isTestSession()" warningText="Test recording only!"></app-warningbar>
     <app-warningbar [show]="isDefaultAudioTestSession()"
-                    warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
+    warningText="This test uses default audio device! Regular sessions may require a particular audio device (microphone)!"></app-warningbar>
     <app-recordercombipane (selectedRecordingFileChanged)="selectRecordingFile($event)"
-                           [audioSignalCollapsed]="audioSignalCollapsed"
-                           [selectedRecordingFile]="displayRecFile"
-                           [selectDisabled]="isActive()"
-                           [displayAudioClip]="displayAudioClip"
-                           [playStartAction]="controlAudioPlayer?.startAction"
-                           [playStopAction]="controlAudioPlayer?.stopAction"
-                           [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
-                           [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
+      [audioSignalCollapsed]="audioSignalCollapsed"
+      [selectedRecordingFile]="displayRecFile"
+      [selectDisabled]="isActive()"
+      [displayAudioClip]="displayAudioClip"
+      [playStartAction]="controlAudioPlayer?.startAction"
+      [playStopAction]="controlAudioPlayer?.stopAction"
+      [playSelectionAction]="controlAudioPlayer?.startSelectionAction"
+      [autoPlayOnSelectToggleAction]="controlAudioPlayer?.autoPlayOnSelectToggleAction"
     ></app-recordercombipane>
-
+    
     <div [class]="{audioStatusDisplay:!screenXs,audioStatusDisplayXs:screenXs}">
       <audio-levelbar style="flex:1 0 1%" [streamingMode]="isRecording() || keepLiveLevel" [state]="liveLevelDisplayState"
-                      [displayLevelInfos]="displayAudioClip?.levelInfos"></audio-levelbar>
+      [displayLevelInfos]="displayAudioClip?.levelInfos"></audio-levelbar>
       <div style="display:flex;flex-direction: row">
         <spr-recordingitemcontrols style="flex:10 0 1px"
-                                   [disableAudioDetails]="disableAudioDetails"
-                                   [audioLoaded]="audioLoaded"
-                                   [playStartAction]="controlAudioPlayer?.startAction"
-                                   [playStopAction]="controlAudioPlayer?.stopAction"
-                                   [peakDbLvl]="peakLevelInDb"
-                                   [agc]="this.ac?.agcStatus"
-                                   (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
+          [disableAudioDetails]="disableAudioDetails"
+          [audioLoaded]="audioLoaded"
+          [playStartAction]="controlAudioPlayer?.startAction"
+          [playStopAction]="controlAudioPlayer?.stopAction"
+          [peakDbLvl]="peakLevelInDb"
+          [agc]="this.ac?.agcStatus"
+          (onShowRecordingDetails)="audioSignalCollapsed=!audioSignalCollapsed">
         </spr-recordingitemcontrols>
-
-        <app-uploadstatus *ngIf="screenXs && enableUploadRecordings" class="ricontrols dark" style="flex:0 0 0"
-                          [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="screenXs" class="ricontrols dark" style="flex:0 0 0"
-                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+    
+        @if (screenXs && enableUploadRecordings) {
+          <app-uploadstatus class="ricontrols dark" style="flex:0 0 0"
+            [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (screenXs) {
+          <app-wakelockindicator class="ricontrols dark" style="flex:0 0 0" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (screenXs) {
+          <app-readystateindicator class="ricontrols dark" style="flex:0 0 0"
+          [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
     <div #controlpanel class="controlpanel">
-      <app-sprstatusdisplay *ngIf="!screenXs" style="flex:0 1 30%;" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType"
-                            [statusWaiting]="statusWaiting"
-                            class="hidden-xs"></app-sprstatusdisplay>
+      @if (!screenXs) {
+        <app-sprstatusdisplay style="flex:0 1 30%;" [statusMsg]="statusMsg" [statusAlertType]="statusAlertType"
+          [statusWaiting]="statusWaiting"
+        class="hidden-xs"></app-sprstatusdisplay>
+      }
       <div [class.startstop]="!screenXs" [class.startstopscreenxs]="screenXs">
         <div style="align-content: center">
           <button (click)="startStopPerform()" [disabled]="startDisabled() && stopDisabled()" mat-raised-button class="bigbutton">
@@ -17705,15 +17899,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         </div>
       </div>
       <div style="flex:0 1 30%;display:flex;justify-items: flex-end;justify-content:flex-end" >
-        <app-uploadstatus *ngIf="!screenXs && enableUploadRecordings" class="ricontrols"
-                          [value]="uploadProgress"
-                          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
-        <app-wakelockindicator  *ngIf="!screenXs" class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
-        <app-readystateindicator *ngIf="!screenXs" class="ricontrols"
-                                 [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        @if (!screenXs && enableUploadRecordings) {
+          <app-uploadstatus class="ricontrols"
+            [value]="uploadProgress"
+          [status]="uploadStatus" [awaitNewUpload]="processingRecording"></app-uploadstatus>
+        }
+        @if (!screenXs) {
+          <app-wakelockindicator  class="ricontrols" [screenLocked]="screenLocked"></app-wakelockindicator>
+        }
+        @if (!screenXs) {
+          <app-readystateindicator class="ricontrols"
+          [ready]="dataSaved && !isActive()"></app-readystateindicator>
+        }
       </div>
     </div>
-  `, standalone: false, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".startstop{width:100%;flex:1 0 30%;align-items:center;text-align:center;align-content:center}\n", ".startstopscreenxs{width:100%;flex:1 0 100%;align-items:center;text-align:center;align-content:center}\n", ".bigbutton{vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap;letter-spacing:normal;min-width:70px;min-height:50px;border-radius:20px}\n", ".bigbuttonicon{min-width:50px;min-height:50px;font-size:50px}\n", ".bigbuttontext{font-weight:bolder;font-size:14px;vertical-align:middle}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"] }]
+    `, standalone: false, styles: [":host{flex:2;background:#d3d3d3;display:flex;flex-direction:column;margin:0;padding:0;height:100%;min-height:0px;overflow:hidden}\n", ".ricontrols{padding:4px;box-sizing:border-box;height:100%}\n", ".dark{background:#a9a9a9}\n", ".controlpanel{display:flex;flex-direction:row;align-content:center;align-items:center;margin:0;padding:20px;min-height:min-content}\n", ".startstop{width:100%;flex:1 0 30%;align-items:center;text-align:center;align-content:center}\n", ".startstopscreenxs{width:100%;flex:1 0 100%;align-items:center;text-align:center;align-content:center}\n", ".bigbutton{vertical-align:middle;overflow:hidden;text-overflow:clip;white-space:nowrap;letter-spacing:normal;min-width:70px;min-height:50px;border-radius:20px}\n", ".bigbuttonicon{min-width:50px;min-height:50px;font-size:50px}\n", ".bigbuttontext{font-weight:bolder;font-size:14px;vertical-align:middle}\n", ".audioStatusDisplay{display:flex;flex-direction:row;height:100px;min-height:100px}\n", ".audioStatusDisplayXs{display:flex;flex-direction:column;height:125px;min-height:125px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.BreakpointObserver }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1$3.MatDialog }, { type: SessionService }, { type: RecordingService }, { type: SpeechRecorderUploader }, { type: SpeechRecorderConfig, decorators: [{
                     type: Inject,
                     args: [SPEECHRECORDER_CONFIG]
@@ -17854,17 +18054,17 @@ class AudioRecorderComponent extends RecorderComponent {
     ready() {
         return this.dataSaved && !this.ar.isActive();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioRecorderComponent, deps: [{ token: i4$2.ActivatedRoute }, { token: i4$2.Router }, { token: i0.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: SpeechRecorderUploader }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: AudioRecorderComponent, isStandalone: false, selector: "app-audiorecorder-comp", providers: [SessionService], viewQueries: [{ propertyName: "ar", first: true, predicate: AudioRecorder, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioRecorderComponent, deps: [{ token: i4.ActivatedRoute }, { token: i4.Router }, { token: i0.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: SpeechRecorderUploader }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AudioRecorderComponent, isStandalone: false, selector: "app-audiorecorder-comp", providers: [SessionService], viewQueries: [{ propertyName: "ar", first: true, predicate: AudioRecorder, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
     <app-audiorecorder [projectName]="_project?.name" [dataSaved]="dataSaved"></app-audiorecorder>
   `, isInline: true, styles: [":host{flex:2;display:flex;height:100%;flex-direction:column;min-height:0}\n"], dependencies: [{ kind: "component", type: AudioRecorder, selector: "app-audiorecorder", inputs: ["projectName", "dataSaved"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AudioRecorderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AudioRecorderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-audiorecorder-comp', providers: [SessionService], template: `
     <app-audiorecorder [projectName]="_project?.name" [dataSaved]="dataSaved"></app-audiorecorder>
   `, standalone: false, styles: [":host{flex:2;display:flex;height:100%;flex-direction:column;min-height:0}\n"] }]
-        }], ctorParameters: () => [{ type: i4$2.ActivatedRoute }, { type: i4$2.Router }, { type: i0.ChangeDetectorRef }, { type: SessionService }, { type: ProjectService }, { type: SpeechRecorderUploader }], propDecorators: { ar: [{
+        }], ctorParameters: () => [{ type: i4.ActivatedRoute }, { type: i4.Router }, { type: i0.ChangeDetectorRef }, { type: SessionService }, { type: ProjectService }, { type: SpeechRecorderUploader }], propDecorators: { ar: [{
                 type: ViewChild,
                 args: [AudioRecorder, { static: true }]
             }] } });
@@ -17897,19 +18097,19 @@ class SpeechrecorderngModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechrecorderngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: SpeechrecorderngModule, declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
-            ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, WakeLockIndicator, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder], imports: [i4$2.RouterModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule, IntersectionObserverDirective], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader, provideHttpClient(withInterceptorsFromDi())], imports: [RouterModule.forChild(SPR_ROUTES), CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechrecorderngModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: SpeechrecorderngModule, declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
+            ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, WakeLockIndicator, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder], imports: [i4.RouterModule, CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule, IntersectionObserverDirective], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader, provideHttpClient(withInterceptorsFromDi())], imports: [RouterModule.forChild(SPR_ROUTES), CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpeechrecorderngModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SpeechrecorderngModule, decorators: [{
             type: NgModule,
             args: [{ declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
                         ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, WakeLockIndicator, ReadyStateIndicator, ControlPanel, WarningBar, AudioRecorder, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, AudioRecorderComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent, RecordingList, RecorderCombiPane, AudioRecorder],
                     exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, AudioRecorder], imports: [RouterModule.forChild(SPR_ROUTES), CommonModule, MatIconModule, MatButtonModule, MatDialogModule, MatProgressBarModule, MatProgressSpinnerModule, MatTooltipModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatGridListModule, MatTableModule, MatInputModule, MatSelectModule, MatSnackBarModule, MatMenuModule, IntersectionObserverDirective], providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader, provideHttpClient(withInterceptorsFromDi())] }]
         }] });
 
-const VERSION = '3.11.11';
+const VERSION = '3.11.13';
 
 const SPEECHRECORDER_ENVIRONMENT_DEFAULTS = {
     production: false,