speechrecorderng 2.19.0 → 2.21.3

package/bundles/speechrecorderng.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('rxjs'), require('@angular/common/http'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/router'), require('@angular/material/checkbox'), require('@angular/flex-layout/extended'), require('@angular/material/progress-spinner'), require('@angular/material/button'), require('@angular/material/dialog'), require('@angular/material/progress-bar'), require('@angular/flex-layout'), require('@angular/material/card'), require('@angular/material/divider'), require('@angular/material/grid-list'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/select'), require('@angular/material/input')) :
-    typeof define === 'function' && define.amd ? define('speechrecorderng', ['exports', '@angular/core', 'rxjs/operators', 'rxjs', '@angular/common/http', '@angular/common', '@angular/material/icon', '@angular/material/tooltip', '@angular/router', '@angular/material/checkbox', '@angular/flex-layout/extended', '@angular/material/progress-spinner', '@angular/material/button', '@angular/material/dialog', '@angular/material/progress-bar', '@angular/flex-layout', '@angular/material/card', '@angular/material/divider', '@angular/material/grid-list', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/select', '@angular/material/input'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.speechrecorderng = {}, global.ng.core, global.rxjs.operators, global.rxjs, global.ng.common.http, global.ng.common, global.ng.material.icon, global.ng.material.tooltip, global.ng.router, global.ng.material.checkbox, global.ng.flexLayout.extended, global.ng.material.progressSpinner, global.ng.material.button, global.ng.material.dialog, global.ng.material.progressBar, global.ng.flexLayout, global.ng.material.card, global.ng.material.divider, global.ng.material.gridList, global.ng.material.snackBar, global.ng.material.table, global.ng.material.select, global.ng.material.input));
-}(this, (function (exports, i0, operators, rxjs, i1, i4, i2, i3, i1$1, i2$1, i6, i1$2, i3$1, i1$3, i7, flexLayout, i1$4, divider, gridList, i6$1, table, select, input) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('rxjs'), require('@angular/common/http'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/tooltip'), require('@angular/flex-layout/extended'), require('@angular/flex-layout/flex'), require('@angular/router'), require('@angular/material/checkbox'), require('@angular/material/progress-spinner'), require('@angular/material/button'), require('@angular/material/dialog'), require('@angular/material/progress-bar'), require('@angular/flex-layout'), require('@angular/material/card'), require('@angular/material/divider'), require('@angular/material/grid-list'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/select'), require('@angular/material/input')) :
+    typeof define === 'function' && define.amd ? define('speechrecorderng', ['exports', '@angular/core', 'rxjs/operators', 'rxjs', '@angular/common/http', '@angular/common', '@angular/material/icon', '@angular/material/tooltip', '@angular/flex-layout/extended', '@angular/flex-layout/flex', '@angular/router', '@angular/material/checkbox', '@angular/material/progress-spinner', '@angular/material/button', '@angular/material/dialog', '@angular/material/progress-bar', '@angular/flex-layout', '@angular/material/card', '@angular/material/divider', '@angular/material/grid-list', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/select', '@angular/material/input'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.speechrecorderng = {}, global.ng.core, global.rxjs.operators, global.rxjs, global.ng.common.http, global.ng.common, global.ng.material.icon, global.ng.material.tooltip, global.ng.flexLayout.extended, global.ng.flexLayout.flex, global.ng.router, global.ng.material.checkbox, global.ng.material.progressSpinner, global.ng.material.button, global.ng.material.dialog, global.ng.material.progressBar, global.ng.flexLayout, global.ng.material.card, global.ng.material.divider, global.ng.material.gridList, global.ng.material.snackBar, global.ng.material.table, global.ng.material.select, global.ng.material.input));
+})(this, (function (exports, i0, operators, rxjs, i1, i4, i2, i3, i3$1, i8, i1$1, i2$1, i1$2, i3$2, i1$3, i7, flexLayout, i1$4, divider, gridList, i6, table, select, input) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -29,15 +27,16 @@
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
-    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -274,7 +273,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -2230,9 +2229,9 @@
         }
         return SpeechRecorderConfig;
     }());
-    SpeechRecorderConfig.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechRecorderConfig, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SpeechRecorderConfig.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechRecorderConfig });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechRecorderConfig, decorators: [{
+    SpeechRecorderConfig.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechRecorderConfig, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SpeechRecorderConfig.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechRecorderConfig });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechRecorderConfig, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
@@ -2285,9 +2284,9 @@
         return ProjectService;
     }());
     ProjectService.PROJECT_API_CTX = 'project';
-    ProjectService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ProjectService, deps: [{ token: i1__namespace.HttpClient }, { token: i4__namespace.PlatformLocation }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ProjectService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ProjectService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ProjectService, decorators: [{
+    ProjectService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ProjectService, deps: [{ token: i1__namespace.HttpClient }, { token: i4__namespace.PlatformLocation }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ProjectService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ProjectService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ProjectService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace.HttpClient }, { type: i4__namespace.PlatformLocation }, { type: SpeechRecorderConfig, decorators: [{
@@ -2351,9 +2350,9 @@
         return SessionService;
     }());
     SessionService.SESSION_API_CTX = 'session';
-    SessionService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SessionService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionService, decorators: [{
+    SessionService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SessionService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
@@ -2363,8 +2362,8 @@
         } });
 
     var DEFAULT_WARN_DB_LEVEL$1 = -2;
-    var MIN_DB_LEVEL$1 = -60.0;
-    var CONSIDERED_SILENCE_DB_LEVEL = MIN_DB_LEVEL$1 * 2;
+    var MIN_DB_LEVEL$2 = -60.0;
+    var CONSIDERED_SILENCE_DB_LEVEL = MIN_DB_LEVEL$2 * 2;
     var LINE_WIDTH = 2;
     var LINE_DISTANCE = 2;
     var LEVEL_INDICATOR_HEIGHT = 3;
@@ -2374,7 +2373,7 @@
         function LevelBar(ref, changeDetectorRef) {
             this.ref = ref;
             this.changeDetectorRef = changeDetectorRef;
-            this.peakDbLvl = MIN_DB_LEVEL$1;
+            this.peakDbLvl = MIN_DB_LEVEL$2;
             this._streamingMode = false;
             this._staticLevelInfos = null;
             this._playFramePosition = null;
@@ -2498,7 +2497,7 @@
             }
         };
         LevelBar.prototype.reset = function () {
-            this.peakDbLvl = MIN_DB_LEVEL$1;
+            this.peakDbLvl = MIN_DB_LEVEL$2;
             this.dbValues = new Array();
             this.layout();
             this.drawAll();
@@ -2556,7 +2555,7 @@
                 g.beginPath();
                 g.moveTo(xc, y + chH);
                 g.lineTo(xc, y + chH - LEVEL_INDICATOR_HEIGHT);
-                var pnVal = ((dbVal - MIN_DB_LEVEL$1) / -MIN_DB_LEVEL$1);
+                var pnVal = ((dbVal - MIN_DB_LEVEL$2) / -MIN_DB_LEVEL$2);
                 var lvlIndicatorSpace = LEVEL_INDICATOR_HEIGHT + LINE_DISTANCE;
                 var levelH = chH - lvlIndicatorSpace;
                 var pVal = pnVal * levelH;
@@ -2661,9 +2660,9 @@
         };
         return LevelBar;
     }());
-    LevelBar.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: LevelBar, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LevelBar.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: LevelBar, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos" }, 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__namespace, template: "\n    <div #virtualCanvas>\n      <canvas #levelbar></canvas>\n      <canvas #markerCanvas></canvas>\n    </div>\n  ", isInline: true, styles: [":host {\n\n    width: 100%;\n    background: darkgray;\n    box-sizing: border-box;\n    height: 100%;\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: auto;\n  }", "div {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    /*position: absolute;*/\n    box-sizing: border-box;\n  }", "canvas {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n  }"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: LevelBar, decorators: [{
+    LevelBar.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: LevelBar, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LevelBar.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: LevelBar, selector: "audio-levelbar", inputs: { streamingMode: "streamingMode", displayLevelInfos: "displayLevelInfos" }, 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__namespace, template: "\n    <div #virtualCanvas>\n      <canvas #levelbar></canvas>\n      <canvas #markerCanvas></canvas>\n    </div>\n  ", isInline: true, styles: [":host {\n\n    width: 100%;\n    background: darkgray;\n    box-sizing: border-box;\n    height: 100%;\n    position: relative;\n    overflow-x: scroll;\n    overflow-y: auto;\n  }", "div {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    /*position: absolute;*/\n    box-sizing: border-box;\n  }", "canvas {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n  }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: LevelBar, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'audio-levelbar',
@@ -2691,30 +2690,29 @@
                     args: ['window:resize', ['$event']]
                 }] } });
 
-    var MIN_DB_LEVEL = -40.0;
+    var MIN_DB_LEVEL$1 = -40.0;
     var DEFAULT_WARN_DB_LEVEL = -2;
-    var LevelBarDisplay = /** @class */ (function () {
-        function LevelBarDisplay(ref, changeDetectorRef) {
+    var RecordingItemControls = /** @class */ (function () {
+        function RecordingItemControls(ref, changeDetectorRef) {
             this.ref = ref;
             this.changeDetectorRef = changeDetectorRef;
             this.ce = null;
-            this.streamingMode = false;
             this.audioSignalCollapsed = true;
             this.enableDownload = false;
-            this.peakDbLevelStr = "-___ dB";
-            this.peakDbLvl = MIN_DB_LEVEL;
+            this.peakDbLvl = MIN_DB_LEVEL$1;
             this._displayLevelInfos = null;
             this._agc = undefined;
             this.agcString = 'n/a';
             this.onShowRecordingDetails = new i0.EventEmitter();
             this.onDownloadRecording = new i0.EventEmitter();
+            this.audioLoaded = false;
             this.playStartEnabled = false;
             this.playStopEnabled = false;
             this.updateTimerId = null;
             this.destroyed = false;
             this.warnDbLevel = DEFAULT_WARN_DB_LEVEL;
         }
-        Object.defineProperty(LevelBarDisplay.prototype, "agc", {
+        Object.defineProperty(RecordingItemControls.prototype, "agc", {
             set: function (agc) {
                 this._agc = agc;
                 if (this._agc === undefined || this._agc === null) {
@@ -2732,10 +2730,91 @@
             enumerable: false,
             configurable: true
         });
-        LevelBarDisplay.prototype.ngOnDestroy = function () {
+        RecordingItemControls.prototype.ngOnDestroy = function () {
             this.destroyed = true;
         };
-        Object.defineProperty(LevelBarDisplay.prototype, "displayAudioBuffer", {
+        RecordingItemControls.prototype.showRecordingDetails = function () {
+            this.onShowRecordingDetails.emit();
+        };
+        RecordingItemControls.prototype.downloadRecording = function () {
+            this.onDownloadRecording.emit();
+        };
+        RecordingItemControls.prototype.ngAfterViewInit = function () {
+            this.ce = this.ref.nativeElement;
+        };
+        Object.defineProperty(RecordingItemControls.prototype, "displayLevelInfos", {
+            set: function (levelInfos) {
+                this._displayLevelInfos = levelInfos;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RecordingItemControls.prototype.error = function () {
+            // this.status = 'ERROR';
+        };
+        return RecordingItemControls;
+    }());
+    RecordingItemControls.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingItemControls, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecordingItemControls.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: { audioSignalCollapsed: "audioSignalCollapsed", enableDownload: "enableDownload", peakDbLvl: "peakDbLvl", agc: "agc", audioLoaded: "audioLoaded", playStartAction: "playStartAction", playStopAction: "playStopAction", displayLevelInfos: "displayLevelInfos" }, outputs: { onShowRecordingDetails: "onShowRecordingDetails", onDownloadRecording: "onDownloadRecording" }, ngImport: i0__namespace, template: "\n        <button matTooltip=\"Start playback\" (click)=\"playStartAction?.perform()\"\n                [disabled]=\"playStartAction?.disabled\"\n                [style.color]=\"playStartAction?.disabled ? 'grey' : 'green'\">\n            <mat-icon>play_arrow</mat-icon>\n        </button>\n        <button matTooltip=\"Stop playback\" (click)=\"playStopAction?.perform()\"\n                [disabled]=\"playStopAction?.disabled\"\n                [style.color]=\"playStopAction?.disabled ? 'grey' : 'yellow'\">\n            <mat-icon>stop</mat-icon>\n        </button>\n        <button fxHide.xs matTooltip=\"Toggle detailed audio display\" [disabled]=\"!audioLoaded\"\n                (click)=\"showRecordingDetails()\">\n            <mat-icon>{{(audioSignalCollapsed) ? \"expand_less\" : \"expand_more\"}}</mat-icon>\n        </button>\n        <button matTooltip=\"Download current recording\" *ngIf=\"enableDownload\" [disabled]=\"!audioLoaded\"\n                (click)=\"downloadRecording()\">\n            <mat-icon>file_download</mat-icon>\n        </button>\n        <div style=\"min-width: 14ch;padding:2px\"><table style=\"border-style: none\"><tr><td>Peak:</td><td><span matTooltip=\"Peak level\"\n                                                                        [style.color]=\"(peakDbLvl > warnDbLevel)?'red':'black'\">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>\n          <tr *ngIf=\"_agc\"><td>AGC:</td><td><span matTooltip=\"Auto gain control\">{{agcString}}</span></td></tr></table></div>\n    ", isInline: true, styles: [":host {\n        flex: 0; /* only required vertical space */\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100%;\n\n        display: flex; /* flex container: left level bar, right decimal peak level value */\n        flex-direction: row;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "span {\n        flex: 0;\n        font-weight: bold;\n        display: inline-block;\n        white-space: nowrap;\n        box-sizing: border-box;\n    }"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i3__namespace$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i4__namespace.DecimalPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingItemControls, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'spr-recordingitemcontrols',
+                        template: "\n        <button matTooltip=\"Start playback\" (click)=\"playStartAction?.perform()\"\n                [disabled]=\"playStartAction?.disabled\"\n                [style.color]=\"playStartAction?.disabled ? 'grey' : 'green'\">\n            <mat-icon>play_arrow</mat-icon>\n        </button>\n        <button matTooltip=\"Stop playback\" (click)=\"playStopAction?.perform()\"\n                [disabled]=\"playStopAction?.disabled\"\n                [style.color]=\"playStopAction?.disabled ? 'grey' : 'yellow'\">\n            <mat-icon>stop</mat-icon>\n        </button>\n        <button fxHide.xs matTooltip=\"Toggle detailed audio display\" [disabled]=\"!audioLoaded\"\n                (click)=\"showRecordingDetails()\">\n            <mat-icon>{{(audioSignalCollapsed) ? \"expand_less\" : \"expand_more\"}}</mat-icon>\n        </button>\n        <button matTooltip=\"Download current recording\" *ngIf=\"enableDownload\" [disabled]=\"!audioLoaded\"\n                (click)=\"downloadRecording()\">\n            <mat-icon>file_download</mat-icon>\n        </button>\n        <div style=\"min-width: 14ch;padding:2px\"><table style=\"border-style: none\"><tr><td>Peak:</td><td><span matTooltip=\"Peak level\"\n                                                                        [style.color]=\"(peakDbLvl > warnDbLevel)?'red':'black'\">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>\n          <tr *ngIf=\"_agc\"><td>AGC:</td><td><span matTooltip=\"Auto gain control\">{{agcString}}</span></td></tr></table></div>\n    ",
+                        styles: [":host {\n        flex: 0; /* only required vertical space */\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100%;\n\n        display: flex; /* flex container: left level bar, right decimal peak level value */\n        flex-direction: row;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "span {\n        flex: 0;\n        font-weight: bold;\n        display: inline-block;\n        white-space: nowrap;\n        box-sizing: border-box;\n    }"]
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { audioSignalCollapsed: [{
+                    type: i0.Input
+                }], enableDownload: [{
+                    type: i0.Input
+                }], peakDbLvl: [{
+                    type: i0.Input
+                }], agc: [{
+                    type: i0.Input
+                }], onShowRecordingDetails: [{
+                    type: i0.Output
+                }], onDownloadRecording: [{
+                    type: i0.Output
+                }], audioLoaded: [{
+                    type: i0.Input
+                }], playStartAction: [{
+                    type: i0.Input
+                }], playStopAction: [{
+                    type: i0.Input
+                }], displayLevelInfos: [{
+                    type: i0.Input
+                }] } });
+    var RecordingItemDisplay = /** @class */ (function () {
+        function RecordingItemDisplay(ref, changeDetectorRef) {
+            this.ref = ref;
+            this.changeDetectorRef = changeDetectorRef;
+            this.ce = null;
+            this.streamingMode = false;
+            this.audioSignalCollapsed = true;
+            this.enableDownload = false;
+            this.peakDbLvl = MIN_DB_LEVEL$1;
+            this._displayLevelInfos = null;
+            this._agc = undefined;
+            this.agcString = 'n/a';
+            this.onShowRecordingDetails = new i0.EventEmitter();
+            this.onDownloadRecording = new i0.EventEmitter();
+            this.playStartEnabled = false;
+            this.playStopEnabled = false;
+            this.updateTimerId = null;
+            this.destroyed = false;
+            this.warnDbLevel = DEFAULT_WARN_DB_LEVEL;
+        }
+        Object.defineProperty(RecordingItemDisplay.prototype, "agc", {
+            set: function (agc) {
+                this._agc = agc;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RecordingItemDisplay.prototype.ngOnDestroy = function () {
+            this.destroyed = true;
+        };
+        Object.defineProperty(RecordingItemDisplay.prototype, "displayAudioBuffer", {
             get: function () {
                 return this._displayAudioBuffer;
             },
@@ -2745,24 +2824,24 @@
             enumerable: false,
             configurable: true
         });
-        LevelBarDisplay.prototype.showRecordingDetails = function () {
+        RecordingItemDisplay.prototype.showRecordingDetails = function () {
             this.onShowRecordingDetails.emit();
         };
-        LevelBarDisplay.prototype.downloadRecording = function () {
+        RecordingItemDisplay.prototype.downloadRecording = function () {
             this.onDownloadRecording.emit();
         };
-        LevelBarDisplay.prototype.ngAfterViewInit = function () {
+        RecordingItemDisplay.prototype.ngAfterViewInit = function () {
             this.ce = this.ref.nativeElement;
             //this.controlAudioPlayer.listener=this;
         };
-        Object.defineProperty(LevelBarDisplay.prototype, "displayLevelInfos", {
+        Object.defineProperty(RecordingItemDisplay.prototype, "displayLevelInfos", {
             set: function (levelInfos) {
                 this._displayLevelInfos = levelInfos;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(LevelBarDisplay.prototype, "channelCount", {
+        Object.defineProperty(RecordingItemDisplay.prototype, "channelCount", {
             set: function (channelCount) {
                 this.reset();
                 this.liveLevel.channelCount = channelCount;
@@ -2770,14 +2849,14 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(LevelBarDisplay.prototype, "playFramePosition", {
+        Object.defineProperty(RecordingItemDisplay.prototype, "playFramePosition", {
             set: function (playFramePosition) {
                 this.liveLevel.playFramePosition = playFramePosition;
             },
             enumerable: false,
             configurable: true
         });
-        LevelBarDisplay.prototype.update = function (levelInfo, peakLevelInfo) {
+        RecordingItemDisplay.prototype.update = function (levelInfo, peakLevelInfo) {
             var peakDBVal = levelInfo.powerLevelDB();
             if (this.peakDbLvl < peakDBVal) {
                 this.peakDbLvl = peakDBVal;
@@ -2786,25 +2865,26 @@
             }
             this.liveLevel.update(levelInfo);
         };
-        LevelBarDisplay.prototype.error = function () {
+        RecordingItemDisplay.prototype.error = function () {
             // this.status = 'ERROR';
         };
-        LevelBarDisplay.prototype.streamFinished = function () {
+        RecordingItemDisplay.prototype.streamFinished = function () {
             this.liveLevel.streamFinished();
         };
-        LevelBarDisplay.prototype.reset = function () {
-            this.peakDbLvl = MIN_DB_LEVEL;
+        RecordingItemDisplay.prototype.reset = function () {
+            this.peakDbLvl = MIN_DB_LEVEL$1;
+            this.changeDetectorRef.detectChanges();
         };
-        return LevelBarDisplay;
+        return RecordingItemDisplay;
     }());
-    LevelBarDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: LevelBarDisplay, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    LevelBarDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: LevelBarDisplay, 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 }], ngImport: i0__namespace, template: "\n        <audio-levelbar [streamingMode]=\"streamingMode\" [displayLevelInfos]=\"_displayLevelInfos\"></audio-levelbar>\n        <button matTooltip=\"Start playback\" (click)=\"playStartAction?.perform()\"\n                [disabled]=\"playStartAction?.disabled\"\n                [style.color]=\"playStartAction?.disabled ? 'grey' : 'green'\">\n            <mat-icon>play_arrow</mat-icon>\n        </button>\n        <button matTooltip=\"Stop playback\" (click)=\"playStopAction?.perform()\"\n                [disabled]=\"playStopAction?.disabled\"\n                [style.color]=\"playStopAction?.disabled ? 'grey' : 'yellow'\">\n            <mat-icon>stop</mat-icon>\n        </button>\n        <button matTooltip=\"Toggle detailed audio display\" [disabled]=\"displayAudioBuffer==null\"\n                (click)=\"showRecordingDetails()\">\n            <mat-icon>{{(audioSignalCollapsed) ? \"expand_less\" : \"expand_more\"}}</mat-icon>\n        </button>\n        <button matTooltip=\"Download current recording\" *ngIf=\"enableDownload\" [disabled]=\"displayAudioBuffer==null\"\n                (click)=\"downloadRecording()\">\n            <mat-icon>file_download</mat-icon>\n        </button>\n        <div style=\"min-width: 14ch;padding:2px\"><table border=\"0\"><tr><td>Peak:</td><td><span matTooltip=\"Peak level\"\n                                                                        [style.color]=\"(peakDbLvl > warnDbLevel)?'red':'black'\">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>\n          <tr *ngIf=\"_agc\"><td>AGC:</td><td><span matTooltip=\"Auto gain control\">{{agcString}}</span></td></tr></table></div>\n    ", isInline: true, styles: [":host {\n        flex: 0; /* only required vertical space */\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100px;\n        min-height: 100px;\n        display: flex; /* flex container: left level bar, right decimal peak level value */\n        flex-direction: row;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "audio-levelbar {\n        flex: 1;\n        box-sizing: border-box;\n    }", "span {\n        flex: 0;\n        font-weight: bold;\n        display: inline-block;\n        white-space: nowrap;\n        box-sizing: border-box;\n    }"], components: [{ type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i4__namespace.DecimalPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: LevelBarDisplay, decorators: [{
+    RecordingItemDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingItemDisplay, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecordingItemDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingItemDisplay, 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 }], ngImport: i0__namespace, template: "\n      <div fxLayout=\"row\" fxLayout.xs=\"column\" [ngStyle]=\"{'height.px':100,'min-height.px': 100}\" [ngStyle.xs]=\"{'height.px':125,'min-height.px': 125}\">\n        <audio-levelbar fxFlex=\"1 0 1\" [streamingMode]=\"streamingMode\" [displayLevelInfos]=\"_displayLevelInfos\"></audio-levelbar>\n        <spr-recordingitemcontrols fxFlex=\"0 0 0\" [audioLoaded]=\"displayAudioBuffer!==null\" [playStartAction]=\"playStartAction\" [playStopAction]=\"playStopAction\" [peakDbLvl]=\"peakDbLvl\" [agc]=\"_agc\" (onShowRecordingDetails)=\"onShowRecordingDetails.emit()\"></spr-recordingitemcontrols>\n      </div>\n    ", isInline: true, styles: ["div {\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "audio-levelbar {\n        box-sizing: border-box;\n    }"], components: [{ type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }], directives: [{ type: i8__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingItemDisplay, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'spr-recordingitemdisplay',
-                        template: "\n        <audio-levelbar [streamingMode]=\"streamingMode\" [displayLevelInfos]=\"_displayLevelInfos\"></audio-levelbar>\n        <button matTooltip=\"Start playback\" (click)=\"playStartAction?.perform()\"\n                [disabled]=\"playStartAction?.disabled\"\n                [style.color]=\"playStartAction?.disabled ? 'grey' : 'green'\">\n            <mat-icon>play_arrow</mat-icon>\n        </button>\n        <button matTooltip=\"Stop playback\" (click)=\"playStopAction?.perform()\"\n                [disabled]=\"playStopAction?.disabled\"\n                [style.color]=\"playStopAction?.disabled ? 'grey' : 'yellow'\">\n            <mat-icon>stop</mat-icon>\n        </button>\n        <button matTooltip=\"Toggle detailed audio display\" [disabled]=\"displayAudioBuffer==null\"\n                (click)=\"showRecordingDetails()\">\n            <mat-icon>{{(audioSignalCollapsed) ? \"expand_less\" : \"expand_more\"}}</mat-icon>\n        </button>\n        <button matTooltip=\"Download current recording\" *ngIf=\"enableDownload\" [disabled]=\"displayAudioBuffer==null\"\n                (click)=\"downloadRecording()\">\n            <mat-icon>file_download</mat-icon>\n        </button>\n        <div style=\"min-width: 14ch;padding:2px\"><table border=\"0\"><tr><td>Peak:</td><td><span matTooltip=\"Peak level\"\n                                                                        [style.color]=\"(peakDbLvl > warnDbLevel)?'red':'black'\">{{peakDbLvl | number:'1.1-1'}} dB </span></td></tr>\n          <tr *ngIf=\"_agc\"><td>AGC:</td><td><span matTooltip=\"Auto gain control\">{{agcString}}</span></td></tr></table></div>\n    ",
-                        styles: [":host {\n        flex: 0; /* only required vertical space */\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100px;\n        min-height: 100px;\n        display: flex; /* flex container: left level bar, right decimal peak level value */\n        flex-direction: row;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "audio-levelbar {\n        flex: 1;\n        box-sizing: border-box;\n    }", "span {\n        flex: 0;\n        font-weight: bold;\n        display: inline-block;\n        white-space: nowrap;\n        box-sizing: border-box;\n    }"]
+                        template: "\n      <div fxLayout=\"row\" fxLayout.xs=\"column\" [ngStyle]=\"{'height.px':100,'min-height.px': 100}\" [ngStyle.xs]=\"{'height.px':125,'min-height.px': 125}\">\n        <audio-levelbar fxFlex=\"1 0 1\" [streamingMode]=\"streamingMode\" [displayLevelInfos]=\"_displayLevelInfos\"></audio-levelbar>\n        <spr-recordingitemcontrols fxFlex=\"0 0 0\" [audioLoaded]=\"displayAudioBuffer!==null\" [playStartAction]=\"playStartAction\" [playStopAction]=\"playStopAction\" [peakDbLvl]=\"peakDbLvl\" [agc]=\"_agc\" (onShowRecordingDetails)=\"onShowRecordingDetails.emit()\"></spr-recordingitemcontrols>\n      </div>\n    ",
+                        styles: ["div {\n        width: 100%;\n        background: darkgray;\n        padding: 4px;\n        box-sizing: border-box;\n        flex-wrap: nowrap; /* wrap could completely destroy the layout */\n    }", "audio-levelbar {\n        box-sizing: border-box;\n    }"]
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { liveLevel: [{
                     type: i0.ViewChild,
@@ -2882,6 +2962,7 @@
     }());
     DSPUtils.OCTAVE_FACTOR = 1.0 / (Math.log(2) / Math.log(10));
 
+    var MIN_DB_LEVEL = -40.0;
     var LevelInfo = /** @class */ (function () {
         function LevelInfo(channelCount, startFrame, frameLength, minLinLevels, maxLinLevels) {
             if (startFrame === void 0) { startFrame = 0; }
@@ -2976,6 +3057,51 @@
         };
         return LevelInfos;
     }());
+    var PeakLevelInterceptor = /** @class */ (function () {
+        function PeakLevelInterceptor(levelListener) {
+            this.levelListener = levelListener;
+            this._channelCount = 0;
+            this._peakDbLvl = MIN_DB_LEVEL;
+        }
+        Object.defineProperty(PeakLevelInterceptor.prototype, "peakDbLvl", {
+            get: function () {
+                return this._peakDbLvl;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PeakLevelInterceptor.prototype, "channelCount", {
+            get: function () {
+                return this._channelCount;
+            },
+            set: function (value) {
+                this._channelCount = value;
+                if (this.levelListener) {
+                    this.levelListener.channelCount = value;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PeakLevelInterceptor.prototype.update = function (levelInfo, peakLevelInfo) {
+            var peakDBVal = levelInfo.powerLevelDB();
+            if (this.peakDbLvl < peakDBVal) {
+                this._peakDbLvl = peakDBVal;
+            }
+        };
+        PeakLevelInterceptor.prototype.streamFinished = function () {
+            if (this.levelListener) {
+                this.levelListener.streamFinished();
+            }
+        };
+        PeakLevelInterceptor.prototype.reset = function () {
+            this._peakDbLvl = MIN_DB_LEVEL;
+            if (this.levelListener) {
+                this.levelListener.reset();
+            }
+        };
+        return PeakLevelInterceptor;
+    }());
     var LevelMeasure = /** @class */ (function () {
         function LevelMeasure() {
             this.worker = null;
@@ -3078,6 +3204,8 @@
             this.bufferIndex = 0;
             this.frameCount = 0;
             this.levelListener = null;
+            this.peakLevelListener = null;
+            this.peakLevelInDb = MIN_DB_LEVEL;
             this.workerURL = WorkerHelper.buildWorkerBlobURL(this.workerFunction);
         }
         StreamLevelMeasure.prototype.setFormat = function (channels, sampleRate) {
@@ -3116,6 +3244,10 @@
                 this.levelListener.reset();
                 this.levelListener.channelCount = this.channelCount;
             }
+            if (this.peakLevelListener) {
+                this.peakLevelInDb = MIN_DB_LEVEL;
+                this.peakLevelListener(this.peakLevelInDb);
+            }
         };
         StreamLevelMeasure.prototype.write = function (bufferData) {
             var _a;
@@ -3192,6 +3324,14 @@
                 if (this.levelListener) {
                     this.levelListener.update(this.currentLevelInfos, this.peakLevelInfo.clone());
                 }
+                if (this.peakLevelListener) {
+                    var peakDBVal = bufferLevelInfo.powerLevelDB();
+                    if (this.peakLevelInDb < peakDBVal) {
+                        this.peakLevelInDb = peakDBVal;
+                        // the event comes from outside of an Angular zone
+                        this.peakLevelListener(this.peakLevelInDb);
+                    }
+                }
             }
         };
         StreamLevelMeasure.prototype.stop = function () {
@@ -3238,9 +3378,9 @@
         });
         return SimpleTrafficLight;
     }());
-    SimpleTrafficLight.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SimpleTrafficLight, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SimpleTrafficLight.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: { status: "status" }, ngImport: i0__namespace, template: "\n\n    <div>\n      <div class=\"circle {{lighttop}}\"></div>\n      <div class=\"circle {{lightmid}}\"></div>\n      <div class=\"circle {{lightbottom}}\"></div>\n    </div>\n  ", isInline: true, styles: [".circle {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    margin: 5px;\n    background: grey;\n  }", ".red {\n    background: red;\n  }\n  ", "\n    .yellow {\n      background: yellow;\n    }\n  ", "\n    .green {\n      background: green;\n    }\n  ", "\n    .black {\n      background: black;\n    }", ":host {\n      display: flex;\n      flex-direction: column;\n      background: black;\n          \n      padding: 2px;\n      height: 170px;\n      max-height: 170px;\n      flex: 0 0 content;\n    }\n    "] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SimpleTrafficLight, decorators: [{
+    SimpleTrafficLight.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SimpleTrafficLight, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SimpleTrafficLight.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: { status: "status" }, ngImport: i0__namespace, template: "\n\n    <div>\n      <div class=\"circle {{lighttop}}\"></div>\n      <div class=\"circle {{lightmid}}\"></div>\n      <div class=\"circle {{lightbottom}}\"></div>\n    </div>\n  ", isInline: true, styles: [".circle {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    margin: 5px;\n    background: grey;\n  }", ".red {\n    background: red;\n  }\n  ", "\n    .yellow {\n      background: yellow;\n    }\n  ", "\n    .green {\n      background: green;\n    }\n  ", "\n    .black {\n      background: black;\n    }", ":host {\n      display: flex;\n      flex-direction: column;\n      background: black;\n          \n      padding: 2px;\n      height: 170px;\n      max-height: 170px;\n      flex: 0 0 content;\n    }\n    "] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SimpleTrafficLight, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-simpletrafficlight',
@@ -3313,9 +3453,9 @@
         };
         return CanvasLayerComponent;
     }());
-    CanvasLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: CanvasLayerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    CanvasLayerComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.10", type: CanvasLayerComponent, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: CanvasLayerComponent, decorators: [{
+    CanvasLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: CanvasLayerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    CanvasLayerComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: CanvasLayerComponent, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: CanvasLayerComponent, decorators: [{
                 type: i0.Directive
             }], ctorParameters: function () { return []; } });
 
@@ -3600,9 +3740,9 @@
         };
         return BasicAudioCanvasLayerComponent;
     }(CanvasLayerComponent));
-    BasicAudioCanvasLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: BasicAudioCanvasLayerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    BasicAudioCanvasLayerComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.10", type: BasicAudioCanvasLayerComponent, usesInheritance: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: BasicAudioCanvasLayerComponent, decorators: [{
+    BasicAudioCanvasLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: BasicAudioCanvasLayerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    BasicAudioCanvasLayerComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: BasicAudioCanvasLayerComponent, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: BasicAudioCanvasLayerComponent, decorators: [{
                 type: i0.Directive
             }] });
     var AudioCanvasLayerComponent = /** @class */ (function (_super) {
@@ -3820,9 +3960,9 @@
         };
         return AudioCanvasLayerComponent;
     }(BasicAudioCanvasLayerComponent));
-    AudioCanvasLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioCanvasLayerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    AudioCanvasLayerComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.10", type: AudioCanvasLayerComponent, 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__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioCanvasLayerComponent, decorators: [{
+    AudioCanvasLayerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioCanvasLayerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AudioCanvasLayerComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: AudioCanvasLayerComponent, 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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioCanvasLayerComponent, decorators: [{
                 type: i0.Directive
             }], propDecorators: { bgCanvasRef: [{
                     type: i0.ViewChild,
@@ -4155,9 +4295,9 @@
         };
         return AudioSignal;
     }(AudioCanvasLayerComponent));
-    AudioSignal.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioSignal, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AudioSignal.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: AudioSignal, 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__namespace, template: "\n    <canvas #bg height=\"10\"></canvas>\n    <canvas #audioSignal height=\"10\"></canvas>\n    <canvas #cursor height=\"10\" (mousedown)=\"selectionStart($event)\" (mouseover)=\"updateCursorCanvas($event)\" (mousemove)=\"updateCursorCanvas($event)\"\n            (mouseleave)=\"updateCursorCanvas($event, false)\"></canvas>\n    <canvas #marker height=\"10\"></canvas>", isInline: true, styles: [":host{\n      min-height: 0px;\n    }", "canvas {\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    min-height: 0px;\n    position: absolute;\n  }"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioSignal, decorators: [{
+    AudioSignal.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioSignal, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AudioSignal.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioSignal, 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__namespace, template: "\n    <canvas #bg height=\"10\"></canvas>\n    <canvas #audioSignal height=\"10\"></canvas>\n    <canvas #cursor height=\"10\" (mousedown)=\"selectionStart($event)\" (mouseover)=\"updateCursorCanvas($event)\" (mousemove)=\"updateCursorCanvas($event)\"\n            (mouseleave)=\"updateCursorCanvas($event, false)\"></canvas>\n    <canvas #marker height=\"10\"></canvas>", isInline: true, styles: [":host{\n      min-height: 0px;\n    }", "canvas {\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    min-height: 0px;\n    position: absolute;\n  }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioSignal, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'audio-signal',
@@ -5093,9 +5233,9 @@
         };
         return Sonagram;
     }(AudioCanvasLayerComponent));
-    Sonagram.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Sonagram, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Sonagram.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: Sonagram, 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__namespace, template: "\n        <canvas #sonagram height=\"10\"></canvas>\n        <canvas #bg height=\"10\"></canvas>\n        <canvas #cursor height=\"10\" (mousedown)=\"selectionStart($event)\" (mouseover)=\"updateCursorCanvas($event)\" (mousemove)=\"updateCursorCanvas($event)\"\n                (mouseleave)=\"updateCursorCanvas($event, false)\"></canvas>\n        <canvas #marker height=\"10\"></canvas>", isInline: true, styles: [":host{\n      min-height: 0px;\n    }", "canvas {\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 0;\n      min-height: 0px;\n        position: absolute;\n    }"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Sonagram, decorators: [{
+    Sonagram.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Sonagram, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Sonagram.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Sonagram, 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__namespace, template: "\n        <canvas #sonagram height=\"10\"></canvas>\n        <canvas #bg height=\"10\"></canvas>\n        <canvas #cursor height=\"10\" (mousedown)=\"selectionStart($event)\" (mouseover)=\"updateCursorCanvas($event)\" (mousemove)=\"updateCursorCanvas($event)\"\n                (mouseleave)=\"updateCursorCanvas($event, false)\"></canvas>\n        <canvas #marker height=\"10\"></canvas>", isInline: true, styles: [":host{\n      min-height: 0px;\n    }", "canvas {\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 0;\n      min-height: 0px;\n        position: absolute;\n    }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Sonagram, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'audio-sonagram',
@@ -5454,9 +5594,9 @@
         return AudioClipUIContainer;
     }(BasicAudioCanvasLayerComponent));
     AudioClipUIContainer.DIVIDER_PIXEL_SIZE = 10;
-    AudioClipUIContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioClipUIContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AudioClipUIContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: AudioClipUIContainer, 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__namespace, template: "\n    <div #virtualCanvas>\n    <canvas #divider (mousedown)=\"mousedown($event)\" (mouseover)=\"mouseover($event)\"\n            (mouseleave)=\"mouseleave($event)\" height=\"10\"></canvas>\n    <audio-signal [pointerPosition]=\"pointer\" [selecting]=\"selecting\" [selection]=\"selection\" (pointerPositionEventEmitter)=\"pointerPositionChanged($event)\" (selectingEventEmitter)=\"selectingChanged($event)\" (selectedEventEmitter)=\"selectionChanged($event)\"></audio-signal>\n    <audio-sonagram [pointerPosition]=\"pointer\" [selecting]=\"selecting\" [selection]=\"selection\" (pointerPositionEventEmitter)=\"pointerPositionChanged($event)\" (selectingEventEmitter)=\"selectingChanged($event)\" (selectedEventEmitter)=\"selectionChanged($event)\"></audio-sonagram>\n    </div>\n  ", isInline: true, styles: ["div {\n\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    position: relative; /* TODO container div position must not be 'static' (default) to act as reference for the canvases */\n    box-sizing: border-box;\n    transform: none;\n  }", "canvas{\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    cursor: ns-resize;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }", "audio-signal {\n    top: 0;\n    left: 0;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }", "audio-sonagram {\n    top: 0;\n    left: 0;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }"], components: [{ type: AudioSignal, selector: "audio-signal" }, { type: Sonagram, selector: "audio-sonagram" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioClipUIContainer, decorators: [{
+    AudioClipUIContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioClipUIContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AudioClipUIContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioClipUIContainer, 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__namespace, template: "\n    <div #virtualCanvas>\n    <canvas #divider (mousedown)=\"mousedown($event)\" (mouseover)=\"mouseover($event)\"\n            (mouseleave)=\"mouseleave($event)\" height=\"10\"></canvas>\n    <audio-signal [pointerPosition]=\"pointer\" [selecting]=\"selecting\" [selection]=\"selection\" (pointerPositionEventEmitter)=\"pointerPositionChanged($event)\" (selectingEventEmitter)=\"selectingChanged($event)\" (selectedEventEmitter)=\"selectionChanged($event)\"></audio-signal>\n    <audio-sonagram [pointerPosition]=\"pointer\" [selecting]=\"selecting\" [selection]=\"selection\" (pointerPositionEventEmitter)=\"pointerPositionChanged($event)\" (selectingEventEmitter)=\"selectingChanged($event)\" (selectedEventEmitter)=\"selectionChanged($event)\"></audio-sonagram>\n    </div>\n  ", isInline: true, styles: ["div {\n\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    position: relative; /* TODO container div position must not be 'static' (default) to act as reference for the canvases */\n    box-sizing: border-box;\n    transform: none;\n  }", "canvas{\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    cursor: ns-resize;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }", "audio-signal {\n    top: 0;\n    left: 0;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }", "audio-sonagram {\n    top: 0;\n    left: 0;\n    position: absolute;\n    zIndex: 1;\n    transform: none;\n  }"], components: [{ type: AudioSignal, selector: "audio-signal" }, { type: Sonagram, selector: "audio-sonagram" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioClipUIContainer, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-audio',
@@ -5617,9 +5757,9 @@
         });
         return AudioDisplayScrollPane;
     }());
-    AudioDisplayScrollPane.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplayScrollPane, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AudioDisplayScrollPane.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: AudioDisplayScrollPane, 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__namespace, template: "\n\n    <app-audio #audioSignalContainer (selectionEventEmitter)=\"selectionChanged($event)\"></app-audio>\n\n  ", isInline: true, styles: [":host {\n      flex: 2;\n      width: 100%;\n      background: darkgray;\n      box-sizing: border-box;\n      height: 100%;\n      position: relative;\n      overflow-x: scroll;\n      overflow-y: auto;\n    }", "app-audio {\n\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    /*position: absolute;*/\n    box-sizing: border-box;\n  }"], components: [{ type: AudioClipUIContainer, selector: "app-audio", inputs: ["audioData", "audioClip"], outputs: ["selectionEventEmitter"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplayScrollPane, decorators: [{
+    AudioDisplayScrollPane.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplayScrollPane, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AudioDisplayScrollPane.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplayScrollPane, 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__namespace, template: "\n\n    <app-audio #audioSignalContainer (selectionEventEmitter)=\"selectionChanged($event)\"></app-audio>\n\n  ", isInline: true, styles: [":host {\n      flex: 2;\n      width: 100%;\n      background: darkgray;\n      box-sizing: border-box;\n      height: 100%;\n      position: relative;\n      overflow-x: scroll;\n      overflow-y: auto;\n    }", "app-audio {\n\n    margin: 0;\n    padding: 0;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n\n    /*position: absolute;*/\n    box-sizing: border-box;\n  }"], components: [{ type: AudioClipUIContainer, selector: "app-audio", inputs: ["audioData", "audioClip"], outputs: ["selectionEventEmitter"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplayScrollPane, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'audio-display-scroll-pane',
@@ -5683,9 +5823,9 @@
         };
         return AudioDisplayControl;
     }());
-    AudioDisplayControl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplayControl, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AudioDisplayControl.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: AudioDisplayControl, 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: i2$1.MatCheckbox, descendants: true, static: true }], ngImport: i0__namespace, template: "\n        <div #controlPanel style=\"display:flex;flex-direction: row;\">\n            <fieldset>\n\n                <legend>Play</legend>\n\n                <button (click)=\"playStartAction?.perform()\" [disabled]=\"playStartAction?.disabled\"\n                        [style.color]=\"playStartAction?.disabled ? 'grey' : 'green'\" matTooltip=\"Play all\">\n                    <mat-icon>play_arrow</mat-icon>\n                </button>\n                <button (click)=\"playSelectionAction?.perform()\" [disabled]=\"playSelectionAction?.disabled\"\n                        [style.color]=\"playSelectionAction?.disabled ? 'grey' : 'green'\" matTooltip=\"Play selection\">\n                    <mat-icon>play_circle_outline</mat-icon>\n                </button>\n                <button (click)=\"playStopAction?.perform()\" [disabled]=\"playStopAction?.disabled\"\n                        [style.color]=\"playStopAction?.disabled ? 'grey' : 'yellow'\">\n                    <mat-icon>stop</mat-icon>\n                </button>&nbsp;\n                <mat-checkbox #autoplaySelectionCheckbox (change)=\"autoPlaySelectionChange($event)\">Autoplay on select\n                </mat-checkbox>\n            </fieldset>\n            <fieldset>\n\n                <legend>Zoom</legend>\n                <button (click)=\"zoomFitToPanelAction?.perform()\"\n                        [disabled]=\"zoomFitToPanelAction?.disabled\">{{zoomFitToPanelAction?.name}}</button>\n                <button (click)=\"zoomOutAction?.perform()\"\n                        [disabled]=\"zoomOutAction?.disabled\">{{zoomOutAction?.name}}</button>\n                <button (click)=\"zoomInAction?.perform()\"\n                        [disabled]=\"zoomInAction?.disabled\">{{zoomInAction?.name}}</button>\n                <button (click)=\"zoomSelectedAction?.perform()\"\n                        [disabled]=\"zoomSelectedAction?.disabled\">{{zoomSelectedAction?.name}}</button>\n            </fieldset>\n            <fieldset>\n                <legend>Selection</legend>\n                {{audioClip?.selection?.leftFrame}} <span\n                    *ngIf=\"audioClip?.selection\">to</span> {{audioClip?.selection?.rightFrame}}\n                <button (click)=\"clearSelection()\" [disabled]=\"audioClip?.selection==null\"\n                        [style.color]=\"hasSelection() ? 'red' : 'grey'\" matTooltip=\"Clear selection\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n\n            </fieldset>\n        </div>", isInline: true, styles: [":host {\n        flex: 0;\n\n      }"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplayControl, decorators: [{
+    AudioDisplayControl.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplayControl, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AudioDisplayControl.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplayControl, 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: i2$1.MatCheckbox, descendants: true, static: true }], ngImport: i0__namespace, template: "\n        <div #controlPanel style=\"display:flex;flex-direction: row;\">\n            <fieldset>\n\n                <legend>Play</legend>\n\n                <button (click)=\"playStartAction?.perform()\" [disabled]=\"playStartAction?.disabled\"\n                        [style.color]=\"playStartAction?.disabled ? 'grey' : 'green'\" matTooltip=\"Play all\">\n                    <mat-icon>play_arrow</mat-icon>\n                </button>\n                <button (click)=\"playSelectionAction?.perform()\" [disabled]=\"playSelectionAction?.disabled\"\n                        [style.color]=\"playSelectionAction?.disabled ? 'grey' : 'green'\" matTooltip=\"Play selection\">\n                    <mat-icon>play_circle_outline</mat-icon>\n                </button>\n                <button (click)=\"playStopAction?.perform()\" [disabled]=\"playStopAction?.disabled\"\n                        [style.color]=\"playStopAction?.disabled ? 'grey' : 'yellow'\">\n                    <mat-icon>stop</mat-icon>\n                </button>&nbsp;\n                <mat-checkbox #autoplaySelectionCheckbox (change)=\"autoPlaySelectionChange($event)\">Autoplay on select\n                </mat-checkbox>\n            </fieldset>\n            <fieldset>\n\n                <legend>Zoom</legend>\n                <button (click)=\"zoomFitToPanelAction?.perform()\"\n                        [disabled]=\"zoomFitToPanelAction?.disabled\">{{zoomFitToPanelAction?.name}}</button>\n                <button (click)=\"zoomOutAction?.perform()\"\n                        [disabled]=\"zoomOutAction?.disabled\">{{zoomOutAction?.name}}</button>\n                <button (click)=\"zoomInAction?.perform()\"\n                        [disabled]=\"zoomInAction?.disabled\">{{zoomInAction?.name}}</button>\n                <button (click)=\"zoomSelectedAction?.perform()\"\n                        [disabled]=\"zoomSelectedAction?.disabled\">{{zoomSelectedAction?.name}}</button>\n            </fieldset>\n            <fieldset>\n                <legend>Selection</legend>\n                {{audioClip?.selection?.leftFrame}} <span\n                    *ngIf=\"audioClip?.selection\">to</span> {{audioClip?.selection?.rightFrame}}\n                <button (click)=\"clearSelection()\" [disabled]=\"audioClip?.selection==null\"\n                        [style.color]=\"hasSelection() ? 'red' : 'grey'\" matTooltip=\"Clear selection\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n\n            </fieldset>\n        </div>", isInline: true, styles: [":host {\n        flex: 0;\n\n      }"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplayControl, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'audio-display-control',
@@ -5795,9 +5935,9 @@
         };
         return AudioDisplay;
     }());
-    AudioDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplay, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AudioDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: AudioDisplay, 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__namespace, template: "\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                            [playStopAction]=\"playStopAction\"\n    [autoPlayOnSelectToggleAction]=\"autoPlayOnSelectToggleAction\"\n    [zoomInAction]=\"zoomInAction\"\n    [zoomOutAction]=\"zoomOutAction\"\n    [zoomSelectedAction]=\"zoomSelectedAction\"\n    [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control>\n  ", isInline: true, styles: [":host {\n      display: flex;\n      flex-direction: column;\n      position: absolute;\n      bottom: 0px;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(230, 230, 230, 1.0)\n    }", "\n          legend{\n              margin-left: 1em; padding: 0.2em 0.8em;font-size: 0.8em;\n      }", "\n        fieldset{\n            border: 1px darkgray solid\n      }\n      "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplay, decorators: [{
+    AudioDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplay, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AudioDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplay, 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__namespace, template: "\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                            [playStopAction]=\"playStopAction\"\n    [autoPlayOnSelectToggleAction]=\"autoPlayOnSelectToggleAction\"\n    [zoomInAction]=\"zoomInAction\"\n    [zoomOutAction]=\"zoomOutAction\"\n    [zoomSelectedAction]=\"zoomSelectedAction\"\n    [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control>\n  ", isInline: true, styles: [":host {\n      display: flex;\n      flex-direction: column;\n      position: absolute;\n      bottom: 0px;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(230, 230, 230, 1.0)\n    }", "\n          legend{\n              margin-left: 1em; padding: 0.2em 0.8em;font-size: 0.8em;\n      }", "\n        fieldset{\n            border: 1px darkgray solid\n      }\n      "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplay, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-audiodisplay',
@@ -5838,9 +5978,9 @@
         });
         return ScrollIntoViewDirective;
     }());
-    ScrollIntoViewDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScrollIntoViewDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    ScrollIntoViewDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.10", type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: { scrollIntoViewToBottom: "scrollIntoViewToBottom" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScrollIntoViewDirective, decorators: [{
+    ScrollIntoViewDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScrollIntoViewDirective, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ScrollIntoViewDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: { scrollIntoViewToBottom: "scrollIntoViewToBottom" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScrollIntoViewDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: "[scrollIntoViewToBottom]"
@@ -5887,9 +6027,9 @@
         });
         return Progress;
     }());
-    Progress.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Progress, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Progress.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: Progress, 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__namespace, template: "\n\n    <table class=\"mat-typography\">\n      <thead>\n      <tr>\n        <th>#</th><!--<th>Code</th>-->\n        <th>Prompt</th>\n        <th>Status</th>\n      </tr>\n      </thead>\n      <tbody>\n      <ng-container *ngIf=\"items\">\n\n        <tr *ngFor=\"let item of items; let itIdx=index;\"\n            (click)=\"rowSelect=itIdx\" [class.selRow]=\"itIdx===selectedItemIdx\"\n            [scrollIntoViewToBottom]=\"itIdx===selectedItemIdx\">\n          <td>{{itIdx}}</td>\n          <td class=\"promptDescriptor\">{{item.promptAsString}}</td>\n          <td>\n            <mat-icon *ngIf=\"item.recs && item.recs.length>0\">done</mat-icon>\n\n          </td>\n        </tr>\n      </ng-container>\n\n      </tbody>\n    </table>\n  ", isInline: true, styles: [":host {\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10pt;\n    /*flex: 0.1 0 300px;  \n      min-width: 300px; */\n    flex: 0.1 0 content;\n    background: white;\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    /* min-height:0px; */\n    min-height: 1px;\n  }", "table {\n      min-height: 1px;\n      border-collapse: collapse;\n          /* Tables do not have a natural min size */\n          /*min-width: 300px; */\n      \n    }\n\n    table, th, td {\n      border: 1px solid lightgrey;\n      padding: 0.5em;\n     \n    }\n\n    ", "\n      .selRow {\n        background: lightblue;\n      }\n    ", ".promptDescriptor{\n      \n      max-width: 200px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Progress, decorators: [{
+    Progress.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Progress, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Progress.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Progress, 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__namespace, template: "\n\n    <table class=\"mat-typography\">\n      <thead>\n      <tr>\n        <th>#</th><!--<th>Code</th>-->\n        <th>Prompt</th>\n        <th>Status</th>\n      </tr>\n      </thead>\n      <tbody>\n      <ng-container *ngIf=\"items\">\n\n        <tr *ngFor=\"let item of items; let itIdx=index;\"\n            (click)=\"rowSelect=itIdx\" [class.selRow]=\"itIdx===selectedItemIdx\"\n            [scrollIntoViewToBottom]=\"itIdx===selectedItemIdx\">\n          <td>{{itIdx}}</td>\n          <td class=\"promptDescriptor\">{{item.promptAsString}}</td>\n          <td>\n            <mat-icon *ngIf=\"item.recs && item.recs.length>0\">done</mat-icon>\n\n          </td>\n        </tr>\n      </ng-container>\n\n      </tbody>\n    </table>\n  ", isInline: true, styles: [":host {\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10pt;\n    /*flex: 0.1 0 300px;  \n      min-width: 300px; */\n    flex: 0.1 0 content;\n    background: white;\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    /* min-height:0px; */\n    min-height: 1px;\n  }", "table {\n      min-height: 1px;\n      border-collapse: collapse;\n          /* Tables do not have a natural min size */\n          /*min-width: 300px; */\n      \n    }\n\n    table, th, td {\n      border: 1px solid lightgrey;\n      padding: 0.5em;\n     \n    }\n\n    ", "\n      .selRow {\n        background: lightblue;\n      }\n    ", ".promptDescriptor{\n      \n      max-width: 200px;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ScrollIntoViewDirective, selector: "[scrollIntoViewToBottom]", inputs: ["scrollIntoViewToBottom"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Progress, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprprogress',
@@ -5932,9 +6072,9 @@
         };
         return Recinstructions;
     }());
-    Recinstructions.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Recinstructions, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Recinstructions.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: Recinstructions, selector: "spr-recinstructions", inputs: { recinstructions: "recinstructions", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount" }, ngImport: i0__namespace, template: "\n\n    {{displayText()}}\n  ", isInline: true, styles: [":host {\n\n    justify-content: left; /* align horizontal center */\n    align-items: flex-start; /* align vertical  center */\n    background: white;\n    text-align: left;\n    font-size: 1em;\n    flex: 0;\n    width: 100%;\n  }\n  "] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Recinstructions, decorators: [{
+    Recinstructions.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Recinstructions, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Recinstructions.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Recinstructions, selector: "spr-recinstructions", inputs: { recinstructions: "recinstructions", selectedItemIdx: "selectedItemIdx", itemCount: "itemCount" }, ngImport: i0__namespace, template: "\n\n    {{displayText()}}\n  ", isInline: true, styles: [":host {\n\n    justify-content: left; /* align horizontal center */\n    align-items: flex-start; /* align vertical  center */\n    background: white;\n    text-align: left;\n    font-size: 1em;\n    flex: 0;\n    width: 100%;\n  }\n  "] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Recinstructions, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'spr-recinstructions',
@@ -6122,9 +6262,9 @@
         });
         return Prompter;
     }());
-    Prompter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Prompter, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: ProjectService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Prompter.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: Prompter, selector: "app-sprprompter", inputs: { projectName: "projectName", prompterHeight: "prompterHeight", promptMediaItems: "promptMediaItems" }, host: { properties: { "class.fill": "this.prompterStyleFill" } }, ngImport: i0__namespace, template: "\n\n    <!--<ng-template [ngIf]=\"text\">{{text}}</ng-template>-->\n    <!-- <img *ngIf=\"src\" #promptImage [src]=\"srcUrl()\" [height]=\"prompterHeight-20\" /> -->\n  ", isInline: true, styles: [":host {\n\n    justify-content: center; /* align horizontal center */\n    align-items: center; /* align vertical  center */\n    background: white;\n    text-align: center;\n    /* font-size: 2em; */\n    line-height: 1.2em;\n    font-weight: bold;\n    /* Use only natural size of the prompt */\n    /* The prompter compnent then ets aligned vertically centered */\n    flex: 0 1;\n\n  }", ":host(.fill) {\n    /* Use all space to scale images */\n    flex: 3;\n    width: 100%;\n    height: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    /* A separate flex container might be necessayr to alighn centered */\n    vertical-align: middle; /* TODO does not work, image is not vertically centered */\n  }"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Prompter, decorators: [{
+    Prompter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Prompter, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: ProjectService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Prompter.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Prompter, selector: "app-sprprompter", inputs: { projectName: "projectName", prompterHeight: "prompterHeight", promptMediaItems: "promptMediaItems" }, host: { properties: { "class.fill": "this.prompterStyleFill" } }, ngImport: i0__namespace, template: "\n\n    <!--<ng-template [ngIf]=\"text\">{{text}}</ng-template>-->\n    <!-- <img *ngIf=\"src\" #promptImage [src]=\"srcUrl()\" [height]=\"prompterHeight-20\" /> -->\n  ", isInline: true, styles: [":host {\n\n    justify-content: center; /* align horizontal center */\n    align-items: center; /* align vertical  center */\n    background: white;\n    text-align: center;\n    /* font-size: 2em; */\n    line-height: 1.2em;\n    font-weight: bold;\n    /* Use only natural size of the prompt */\n    /* The prompter compnent then ets aligned vertically centered */\n    flex: 0 1;\n\n  }", ":host(.fill) {\n    /* Use all space to scale images */\n    flex: 3;\n    width: 100%;\n    height: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    /* A separate flex container might be necessayr to alighn centered */\n    vertical-align: middle; /* TODO does not work, image is not vertically centered */\n  }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Prompter, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprprompter',
@@ -6279,9 +6419,9 @@
         };
         return PromptContainer;
     }());
-    PromptContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: PromptContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PromptContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: PromptContainer, 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__namespace, template: "\n    <app-sprprompter #prompter [projectName]=\"projectName\" [promptMediaItems]=\"mediaitems\" [style.font-size]=\"fontSize+'px'\" [style.visibility]=\"prDisplay\" [prompterHeight]=\"prompterHeight\"></app-sprprompter>\n  ", isInline: true, styles: [":host {\n\n    flex: 3; /* the container consumes all available space */\n    padding: 10pt;\n    height: 100%;\n    max-height: 100%;\n\n    justify-content: center; /* align horizontal center*/\n    align-items: center; /* align vertical center */\n    background: white;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    min-height: 0px;\n    width: 100%;\n  }\n  "], components: [{ type: Prompter, selector: "app-sprprompter", inputs: ["projectName", "prompterHeight", "promptMediaItems"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: PromptContainer, decorators: [{
+    PromptContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PromptContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PromptContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PromptContainer, 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__namespace, template: "\n    <app-sprprompter #prompter [projectName]=\"projectName\" [promptMediaItems]=\"mediaitems\" [style.font-size]=\"fontSize+'px'\" [style.visibility]=\"prDisplay\" [prompterHeight]=\"prompterHeight\"></app-sprprompter>\n  ", isInline: true, styles: [":host {\n\n    flex: 3; /* the container consumes all available space */\n    padding: 10pt;\n    height: 100%;\n    max-height: 100%;\n\n    justify-content: center; /* align horizontal center*/\n    align-items: center; /* align vertical center */\n    background: white;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    min-height: 0px;\n    width: 100%;\n  }\n  "], components: [{ type: Prompter, selector: "app-sprprompter", inputs: ["projectName", "prompterHeight", "promptMediaItems"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PromptContainer, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprpromptcontainer',
@@ -6407,9 +6547,9 @@
         };
         return PromptingContainer;
     }());
-    PromptingContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: PromptingContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PromptingContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: PromptingContainer, 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__namespace, template: "\n    <spr-recinstructions [selectedItemIdx]=\"selectedItemIdx\" [itemCount]=\"itemCount\"\n                         [recinstructions]=\"promptItem?.recinstructions?.recinstructions\"></spr-recinstructions>\n    <app-sprpromptcontainer [projectName]=\"projectName\"\n                            [mediaitems]=\"showPrompt?(promptItem?promptItem.mediaitems:null):null\"></app-sprpromptcontainer>\n\n  ", isInline: true, styles: [":host {\n    position: relative;\n    flex: 3; /* the container consumes all available space */\n    padding: 10pt;\n    justify-content: center; /* align horizontal center*/\n    align-items: center; /* align vertical center */\n    background: white;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    min-height: 0px;\n  }\n  "], components: [{ type: Recinstructions, selector: "spr-recinstructions", inputs: ["recinstructions", "selectedItemIdx", "itemCount"] }, { type: PromptContainer, selector: "app-sprpromptcontainer", inputs: ["projectName", "mediaitems"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: PromptingContainer, decorators: [{
+    PromptingContainer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PromptingContainer, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PromptingContainer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: PromptingContainer, 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__namespace, template: "\n    <spr-recinstructions [selectedItemIdx]=\"selectedItemIdx\" [itemCount]=\"itemCount\"\n                         [recinstructions]=\"promptItem?.recinstructions?.recinstructions\"></spr-recinstructions>\n    <app-sprpromptcontainer [projectName]=\"projectName\"\n                            [mediaitems]=\"showPrompt?(promptItem?promptItem.mediaitems:null):null\"></app-sprpromptcontainer>\n\n  ", isInline: true, styles: [":host {\n    position: relative;\n    flex: 3; /* the container consumes all available space */\n    padding: 10pt;\n    justify-content: center; /* align horizontal center*/\n    align-items: center; /* align vertical center */\n    background: white;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    min-height: 0px;\n  }\n  "], components: [{ type: Recinstructions, selector: "spr-recinstructions", inputs: ["recinstructions", "selectedItemIdx", "itemCount"] }, { type: PromptContainer, selector: "app-sprpromptcontainer", inputs: ["projectName", "mediaitems"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: PromptingContainer, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprpromptingcontainer',
@@ -6464,13 +6604,13 @@
         };
         return Prompting;
     }());
-    Prompting.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Prompting, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Prompting.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: Prompting, 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 }], ngImport: i0__namespace, template: "\n\n    <app-simpletrafficlight [status]=\"startStopSignalState\"></app-simpletrafficlight>\n    <app-sprpromptingcontainer [projectName]=\"projectName\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                               [itemCount]=\"items?.length\" [selectedItemIdx]=\"selectedItemIdx\"\n                               [transportActions]=\"transportActions\"></app-sprpromptingcontainer>\n    <app-sprprogress fxHide.xs [items]=\"items\" [selectedItemIdx]=\"selectedItemIdx\"\n                     (onRowSelect)=\"itemSelect($event)\"></app-sprprogress>\n    <div #asCt [class.active]=\"!audioSignalCollapsed\">\n\n      <app-audiodisplay #audioSignalContainer [class.active]=\"!audioSignalCollapsed\"\n                        [audioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"playStartAction\"\n                        [playSelectionAction]=\"playSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"playStopAction\"></app-audiodisplay>\n\n\n    </div>\n\n\n\n  ", isInline: true, styles: [":host {\n    position: relative;\n    margin: 0;\n    padding: 0;\n    background: lightgrey;\n    width: 100%; /* use all horizontal available space */\n    flex: 1; /* ... and fill rest of vertical available space (other components have flex 0) */\n\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    min-height: 0px;\n\n    display: flex; /* flex container: left traffic light, right prompter (container) */\n    flex-direction: row;\n    flex-wrap: nowrap; /* wrap could completely destroy the layout */\n  }", "\n    app-simpletrafficlight {\n      margin: 10px;\n      min-height: 0px;\n      z-index: 3;\n    }\n  ", "\n    app-sprprogress {\n      z-index: 3;\n    }\n  ", "\n    div {\n      display: none;\n      position: absolute;\n\n\n      /* height: 50%; */\n      /* width: 100%; */\n\n      /* overflow: hidden; */\n\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      /*background-color: red; */\n    }", "\n    div.active {\n      display: flex;\n      position: absolute;\n      bottom: 0px;\n      /*left: 0px; */\n\n      height: 90%;\n      width: 100%;\n\n      overflow: hidden;\n\n      padding: 0px;\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0)\n\n    }"], components: [{ type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: ["status"] }, { type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: ["projectName", "promptItem", "showPrompt", "selectedItemIdx", "itemCount", "transportActions"] }, { type: Progress, selector: "app-sprprogress", inputs: ["items", "selectedItemIdx", "enableDownload"], outputs: ["onRowSelect", "rowSelect", "onShowDoneAction", "clickDone", "onDownloadDoneAction", "clickDownloadDone"] }, { type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }], directives: [{ type: i6__namespace.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: Prompting, decorators: [{
+    Prompting.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Prompting, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Prompting.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: Prompting, 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 }], ngImport: i0__namespace, template: "\n\n    <app-simpletrafficlight [status]=\"startStopSignalState\"></app-simpletrafficlight>\n    <app-sprpromptingcontainer [projectName]=\"projectName\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                               [itemCount]=\"items?.length\" [selectedItemIdx]=\"selectedItemIdx\"\n                               [transportActions]=\"transportActions\"></app-sprpromptingcontainer>\n    <app-sprprogress fxHide.xs [items]=\"items\" [selectedItemIdx]=\"selectedItemIdx\"\n                     (onRowSelect)=\"itemSelect($event)\"></app-sprprogress>\n    <div fxHide.xs #asCt [class.active]=\"!audioSignalCollapsed\">\n\n      <app-audiodisplay #audioSignalContainer [class.active]=\"!audioSignalCollapsed\"\n                        [audioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"playStartAction\"\n                        [playSelectionAction]=\"playSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"playStopAction\"></app-audiodisplay>\n\n\n    </div>\n\n\n\n  ", isInline: true, styles: [":host {\n    position: relative;\n    margin: 0;\n    padding: 0;\n    background: lightgrey;\n    width: 100%; /* use all horizontal available space */\n    flex: 1; /* ... and fill rest of vertical available space (other components have flex 0) */\n\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    min-height: 0px;\n\n    display: flex; /* flex container: left traffic light, right prompter (container) */\n    flex-direction: row;\n    flex-wrap: nowrap; /* wrap could completely destroy the layout */\n  }", "\n    app-simpletrafficlight {\n      margin: 10px;\n      min-height: 0px;\n      z-index: 3;\n    }\n  ", "\n    app-sprprogress {\n      z-index: 3;\n    }\n  ", "\n    div {\n      display: none;\n      position: absolute;\n\n\n      /* height: 50%; */\n      /* width: 100%; */\n\n      /* overflow: hidden; */\n\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      /*background-color: red; */\n    }", "\n    div.active {\n      display: flex;\n      position: absolute;\n      bottom: 0px;\n      /*left: 0px; */\n\n      height: 90%;\n      width: 100%;\n\n      overflow: hidden;\n\n      padding: 0px;\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0)\n\n    }"], components: [{ type: SimpleTrafficLight, selector: "app-simpletrafficlight", inputs: ["status"] }, { type: PromptingContainer, selector: "app-sprpromptingcontainer", inputs: ["projectName", "promptItem", "showPrompt", "selectedItemIdx", "itemCount", "transportActions"] }, { type: Progress, selector: "app-sprprogress", inputs: ["items", "selectedItemIdx", "enableDownload"], outputs: ["onRowSelect", "rowSelect", "onShowDoneAction", "clickDone", "onDownloadDoneAction", "clickDownloadDone"] }, { type: AudioDisplay, selector: "app-audiodisplay", inputs: ["playStartAction", "playStopAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "audioData", "audioClip"] }], directives: [{ type: i3__namespace$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: Prompting, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprprompting',
-                        template: "\n\n    <app-simpletrafficlight [status]=\"startStopSignalState\"></app-simpletrafficlight>\n    <app-sprpromptingcontainer [projectName]=\"projectName\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                               [itemCount]=\"items?.length\" [selectedItemIdx]=\"selectedItemIdx\"\n                               [transportActions]=\"transportActions\"></app-sprpromptingcontainer>\n    <app-sprprogress fxHide.xs [items]=\"items\" [selectedItemIdx]=\"selectedItemIdx\"\n                     (onRowSelect)=\"itemSelect($event)\"></app-sprprogress>\n    <div #asCt [class.active]=\"!audioSignalCollapsed\">\n\n      <app-audiodisplay #audioSignalContainer [class.active]=\"!audioSignalCollapsed\"\n                        [audioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"playStartAction\"\n                        [playSelectionAction]=\"playSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"playStopAction\"></app-audiodisplay>\n\n\n    </div>\n\n\n\n  ",
+                        template: "\n\n    <app-simpletrafficlight [status]=\"startStopSignalState\"></app-simpletrafficlight>\n    <app-sprpromptingcontainer [projectName]=\"projectName\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                               [itemCount]=\"items?.length\" [selectedItemIdx]=\"selectedItemIdx\"\n                               [transportActions]=\"transportActions\"></app-sprpromptingcontainer>\n    <app-sprprogress fxHide.xs [items]=\"items\" [selectedItemIdx]=\"selectedItemIdx\"\n                     (onRowSelect)=\"itemSelect($event)\"></app-sprprogress>\n    <div fxHide.xs #asCt [class.active]=\"!audioSignalCollapsed\">\n\n      <app-audiodisplay #audioSignalContainer [class.active]=\"!audioSignalCollapsed\"\n                        [audioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"playStartAction\"\n                        [playSelectionAction]=\"playSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"playStopAction\"></app-audiodisplay>\n\n\n    </div>\n\n\n\n  ",
                         styles: [":host {\n    position: relative;\n    margin: 0;\n    padding: 0;\n    background: lightgrey;\n    width: 100%; /* use all horizontal available space */\n    flex: 1; /* ... and fill rest of vertical available space (other components have flex 0) */\n\n    /* Workaround for Firefox\n    If the progress table gets long (script with many items) FF increases the height of the overflow progressContainer and\n    the whole app does not fit into the page anymore. The app overflows and shows a vertical scrollbar for the whole app.\n    See http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox\n    */\n    min-height: 0px;\n\n    display: flex; /* flex container: left traffic light, right prompter (container) */\n    flex-direction: row;\n    flex-wrap: nowrap; /* wrap could completely destroy the layout */\n  }", "\n    app-simpletrafficlight {\n      margin: 10px;\n      min-height: 0px;\n      z-index: 3;\n    }\n  ", "\n    app-sprprogress {\n      z-index: 3;\n    }\n  ", "\n    div {\n      display: none;\n      position: absolute;\n\n\n      /* height: 50%; */\n      /* width: 100%; */\n\n      /* overflow: hidden; */\n\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      /*background-color: red; */\n    }", "\n    div.active {\n      display: flex;\n      position: absolute;\n      bottom: 0px;\n      /*left: 0px; */\n\n      height: 90%;\n      width: 100%;\n\n      overflow: hidden;\n\n      padding: 0px;\n      /* margin: 20px; */\n      /* border: 20px; */\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0)\n\n    }"
                         ]
                     }]
@@ -6628,14 +6768,14 @@
         }
         return StatusDisplay;
     }());
-    StatusDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: StatusDisplay, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    StatusDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: { statusAlertType: "statusAlertType", statusMsg: "statusMsg", statusWaiting: "statusWaiting" }, ngImport: i0__namespace, template: "\n    <p matTooltip=\"Status\">\n      <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>\n      {{statusMsg}}\n    </p>\n  ", isInline: true, styles: [":host {\n    flex: 1;\n    /* align-self: flex-start; */\n    display: inline;\n    text-align: left;\n    font-size: smaller;\n  }", "\n    p {\n      white-space:nowrap;\n      display: inline-block;\n    }\n  ", "\n    mat-progress-spinner {\n      color: black;\n      display: inline-block;\n    }\n  ", "\n    span {\n      color: red;\n    }\n  "], components: [{ type: i1__namespace$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: StatusDisplay, decorators: [{
+    StatusDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: StatusDisplay, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    StatusDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: { statusAlertType: "statusAlertType", statusMsg: "statusMsg", statusWaiting: "statusWaiting" }, ngImport: i0__namespace, template: "\n    <p matTooltip=\"Status\">\n      <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>\n      {{statusMsg}}\n    </p>\n  ", isInline: true, styles: [":host {\n    display: inline;\n    text-align: left;\n    font-size: smaller;\n  }", "\n    p {\n      padding: 4px;\n      white-space:nowrap;\n      display: inline-block;\n    }\n  ", "\n    mat-progress-spinner {\n      color: black;\n      display: inline-block;\n    }\n  ", "\n    span {\n      color: red;\n    }\n  "], components: [{ type: i1__namespace$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: StatusDisplay, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprstatusdisplay',
                         template: "\n    <p matTooltip=\"Status\">\n      <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>\n      {{statusMsg}}\n    </p>\n  ",
-                        styles: [":host {\n    flex: 1;\n    /* align-self: flex-start; */\n    display: inline;\n    text-align: left;\n    font-size: smaller;\n  }", "\n    p {\n      white-space:nowrap;\n      display: inline-block;\n    }\n  ", "\n    mat-progress-spinner {\n      color: black;\n      display: inline-block;\n    }\n  ", "\n    span {\n      color: red;\n    }\n  "]
+                        styles: [":host {\n    display: inline;\n    text-align: left;\n    font-size: smaller;\n  }", "\n    p {\n      padding: 4px;\n      white-space:nowrap;\n      display: inline-block;\n    }\n  ", "\n    mat-progress-spinner {\n      color: black;\n      display: inline-block;\n    }\n  ", "\n    span {\n      color: red;\n    }\n  "]
                     }]
             }], propDecorators: { statusAlertType: [{
                     type: i0.Input
@@ -6704,9 +6844,9 @@
         });
         return UploadStatus;
     }());
-    UploadStatus.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: UploadStatus, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    UploadStatus.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: UploadStatus, selector: "app-uploadstatus", inputs: { value: "value", awaitNewUpload: "awaitNewUpload", status: "status" }, ngImport: i0__namespace, template: "\n    <mat-progress-spinner [mode]=\"spinnerMode\" [color]=\"status\" [diameter]=\"30\" [strokeWidth]=\"5\" [value]=\"_value\" [matTooltip]=\"toolTipText\"></mat-progress-spinner>\n  ", isInline: true, styles: [":host {\n    flex: 1;\n  /* align-self: flex-start; */\n    /*display: inline; */\n    text-align: left;\n  }", "mat-progress-spinner{\n      display: inline-block;\n  }"], components: [{ type: i1__namespace$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: UploadStatus, decorators: [{
+    UploadStatus.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: UploadStatus, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    UploadStatus.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: UploadStatus, selector: "app-uploadstatus", inputs: { value: "value", awaitNewUpload: "awaitNewUpload", status: "status" }, ngImport: i0__namespace, template: "\n    <mat-progress-spinner [mode]=\"spinnerMode\" [color]=\"status\" [diameter]=\"30\" [strokeWidth]=\"5\" [value]=\"_value\" [matTooltip]=\"toolTipText\"></mat-progress-spinner>\n  ", isInline: true, styles: [":host {\n    flex: 1;\n  /* align-self: flex-start; */\n    /*display: inline; */\n    text-align: left;\n  }", "mat-progress-spinner{\n      display: inline-block;\n  }"], components: [{ type: i1__namespace$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: UploadStatus, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-uploadstatus',
@@ -6726,9 +6866,9 @@
         }
         return ProgressDisplay;
     }());
-    ProgressDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ProgressDisplay, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ProgressDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: ProgressDisplay, selector: "app-sprprogressdisplay", ngImport: i0__namespace, template: "\n    <p>{{progressMsg}}</p>\n  ", isInline: true, styles: [":host {\n    flex: 1;\n  /* align-self: flex-start; */\n    /*display: inline; */\n      width: 100%;\n    text-align: left;\n  }"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ProgressDisplay, decorators: [{
+    ProgressDisplay.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ProgressDisplay, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ProgressDisplay.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ProgressDisplay, selector: "app-sprprogressdisplay", ngImport: i0__namespace, template: "\n    <p>{{progressMsg}}</p>\n  ", isInline: true, styles: [":host {\n    flex: 1;\n  /* align-self: flex-start; */\n    /*display: inline; */\n      width: 100%;\n    text-align: left;\n  }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ProgressDisplay, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprprogressdisplay',
@@ -6821,14 +6961,14 @@
         };
         return TransportPanel;
     }());
-    TransportPanel.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: TransportPanel, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TransportPanel.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: TransportPanel, selector: "app-sprtransport", inputs: { readonly: "readonly", actions: "actions", navigationEnabled: "navigationEnabled" }, ngImport: i0__namespace, template: "\n    <button id=\"bwdBtn\" *ngIf=\"navigationEnabled\"  (click)=\"actions.bwdAction.perform()\" [disabled]=\"bwdDisabled()\"\n            mat-raised-button>\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button (click)=\"startStopNextPerform()\" [disabled]=\"startDisabled() && stopDisabled() && nextDisabled()\"  mat-raised-button>\n      <mat-icon [style.color]=\"startStopNextIconColor()\">{{startStopNextIconName()}}</mat-icon><mat-icon *ngIf=\"!nextDisabled()\" [style.color]=\"nextDisabled() ? 'grey' : 'black'\">chevron_right</mat-icon>\n      <span fxShow.xs=\"false\">{{startStopNextName()}}</span>\n    </button>\n    <button  (click)=\"actions.pauseAction.perform()\" [disabled]=\"pauseDisabled()\" mat-raised-button>\n      <mat-icon>pause</mat-icon>\n      <span fxShow.xs=\"false\">Pause</span>\n    </button>\n    <button id=\"fwdNextBtn\" *ngIf=\"navigationEnabled\" fxHide.xs (click)=\"actions.fwdNextAction.perform()\" [disabled]=\"fwdNextDisabled()\" mat-raised-button>\n      <mat-icon>redo</mat-icon>\n    </button>\n    <button id=\"fwdBtn\" *ngIf=\"navigationEnabled\"  (click)=\"actions.fwdAction.perform()\" [disabled]=\"fwdDisabled()\" mat-raised-button>\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n\n  ", isInline: true, styles: [":host {\n    flex: 20;\n    align-self: center;\n    width: 100%;\n    text-align: center;\n    align-content: center;\n    margin: 0;\n  }", "\n    div {\n      display: inline;\n      flex: 0;\n    }"], components: [{ type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: TransportPanel, decorators: [{
+    TransportPanel.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: TransportPanel, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TransportPanel.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: TransportPanel, selector: "app-sprtransport", inputs: { readonly: "readonly", actions: "actions", navigationEnabled: "navigationEnabled" }, ngImport: i0__namespace, template: "\n    <button id=\"bwdBtn\" *ngIf=\"navigationEnabled\"  (click)=\"actions.bwdAction.perform()\" [disabled]=\"bwdDisabled()\"\n            mat-raised-button>\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button (click)=\"startStopNextPerform()\" [disabled]=\"startDisabled() && stopDisabled() && nextDisabled()\"  mat-raised-button>\n      <mat-icon [style.color]=\"startStopNextIconColor()\">{{startStopNextIconName()}}</mat-icon><mat-icon *ngIf=\"!nextDisabled()\" [style.color]=\"nextDisabled() ? 'grey' : 'black'\">chevron_right</mat-icon>\n      <span fxShow.xs=\"false\">{{startStopNextName()}}</span>\n    </button>\n    <button  (click)=\"actions.pauseAction.perform()\" [disabled]=\"pauseDisabled()\" mat-raised-button>\n      <mat-icon>pause</mat-icon>\n      <span fxShow.xs=\"false\">Pause</span>\n    </button>\n    <button id=\"fwdNextBtn\" *ngIf=\"navigationEnabled\" fxHide.xs (click)=\"actions.fwdNextAction.perform()\" [disabled]=\"fwdNextDisabled()\" mat-raised-button>\n      <mat-icon>redo</mat-icon>\n    </button>\n    <button id=\"fwdBtn\" *ngIf=\"navigationEnabled\"  (click)=\"actions.fwdAction.perform()\" [disabled]=\"fwdDisabled()\" mat-raised-button>\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n\n  ", isInline: true, styles: [":host {\n    flex: 20;\n    align-self: center;\n    width: 100%;\n    text-align: center;\n    align-content: center;\n    margin: 0;\n\n  }", "\n    div {\n      display: inline;\n      flex: 0;\n    }"], components: [{ type: i3__namespace$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: TransportPanel, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprtransport',
                         template: "\n    <button id=\"bwdBtn\" *ngIf=\"navigationEnabled\"  (click)=\"actions.bwdAction.perform()\" [disabled]=\"bwdDisabled()\"\n            mat-raised-button>\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button (click)=\"startStopNextPerform()\" [disabled]=\"startDisabled() && stopDisabled() && nextDisabled()\"  mat-raised-button>\n      <mat-icon [style.color]=\"startStopNextIconColor()\">{{startStopNextIconName()}}</mat-icon><mat-icon *ngIf=\"!nextDisabled()\" [style.color]=\"nextDisabled() ? 'grey' : 'black'\">chevron_right</mat-icon>\n      <span fxShow.xs=\"false\">{{startStopNextName()}}</span>\n    </button>\n    <button  (click)=\"actions.pauseAction.perform()\" [disabled]=\"pauseDisabled()\" mat-raised-button>\n      <mat-icon>pause</mat-icon>\n      <span fxShow.xs=\"false\">Pause</span>\n    </button>\n    <button id=\"fwdNextBtn\" *ngIf=\"navigationEnabled\" fxHide.xs (click)=\"actions.fwdNextAction.perform()\" [disabled]=\"fwdNextDisabled()\" mat-raised-button>\n      <mat-icon>redo</mat-icon>\n    </button>\n    <button id=\"fwdBtn\" *ngIf=\"navigationEnabled\"  (click)=\"actions.fwdAction.perform()\" [disabled]=\"fwdDisabled()\" mat-raised-button>\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n\n  ",
-                        styles: [":host {\n    flex: 20;\n    align-self: center;\n    width: 100%;\n    text-align: center;\n    align-content: center;\n    margin: 0;\n  }", "\n    div {\n      display: inline;\n      flex: 0;\n    }"
+                        styles: [":host {\n    flex: 20;\n    align-self: center;\n    width: 100%;\n    text-align: center;\n    align-content: center;\n    margin: 0;\n\n  }", "\n    div {\n      display: inline;\n      flex: 0;\n    }"
                         ]
                     }]
             }], propDecorators: { readonly: [{
@@ -6838,14 +6978,44 @@
                 }], navigationEnabled: [{
                     type: i0.Input
                 }] } });
+    var ReadyStateIndicator = /** @class */ (function () {
+        function ReadyStateIndicator() {
+            this._ready = true;
+            this.hourGlassIconName = 'hourglass_empty';
+            this.readyStateToolTip = '';
+        }
+        Object.defineProperty(ReadyStateIndicator.prototype, "ready", {
+            get: function () {
+                return this._ready;
+            },
+            set: function (ready) {
+                this._ready = ready;
+                this.hourGlassIconName = this._ready ? 'hourglass_empty' : 'hourglass_full';
+                this.readyStateToolTip = this._ready ? 'Audio processing and upload done. You can leave the page without data loss.' : 'Please wait until audio processing and upload have finished. Please do not leave the page.';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ReadyStateIndicator;
+    }());
+    ReadyStateIndicator.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ReadyStateIndicator, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ReadyStateIndicator.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: { ready: "ready" }, ngImport: i0__namespace, template: "\n        <mat-icon [matTooltip]=\"readyStateToolTip\">{{hourGlassIconName}}</mat-icon>\n  ", isInline: true, components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ReadyStateIndicator, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-readystateindicator',
+                        template: "\n        <mat-icon [matTooltip]=\"readyStateToolTip\">{{hourGlassIconName}}</mat-icon>\n  ",
+                        styles: []
+                    }]
+            }], ctorParameters: function () { return []; }, propDecorators: { ready: [{
+                    type: i0.Input
+                }] } });
     var ControlPanel = /** @class */ (function () {
         function ControlPanel(dialog) {
             this.dialog = dialog;
             this.processing = false;
             this.navigationEnabled = true;
             this._ready = true;
-            this.hourGlassIconName = 'hourglass_empty';
-            this.readyStateToolTip = '';
         }
         Object.defineProperty(ControlPanel.prototype, "ready", {
             get: function () {
@@ -6853,22 +7023,20 @@
             },
             set: function (ready) {
                 this._ready = ready;
-                this.hourGlassIconName = this._ready ? 'hourglass_empty' : 'hourglass_full';
-                this.readyStateToolTip = this._ready ? 'Audio processing and upload done. You can leave the page without data loss.' : 'Please wait until audio processing and upload have finished. Please do not leave the page.';
             },
             enumerable: false,
             configurable: true
         });
         return ControlPanel;
     }());
-    ControlPanel.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ControlPanel, deps: [{ token: i1__namespace$3.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ControlPanel.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: ControlPanel, 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 }], ngImport: i0__namespace, template: "\n    <app-sprstatusdisplay fxHide.xs [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"\n                          class=\"hidden-xs\"></app-sprstatusdisplay>\n\n    <app-sprtransport [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"navigationEnabled\"></app-sprtransport>\n\n    <app-uploadstatus fxHide.xs *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                      [status]=\"uploadStatus\" [awaitNewUpload]=\"processing\"></app-uploadstatus>\n    <mat-icon fxHide.xs [matTooltip]=\"readyStateToolTip\">{{hourGlassIconName}}</mat-icon>\n  ", isInline: true, styles: [":host {\n    flex: 0; /* only required vertical space */\n    /*  width: 100%; */ /* available horizontal sace */\n    /* display: inline; */\n    display: flex; /* Horizontal flex container: Bottom transport panel, above prompting panel */\n    flex-direction: row;\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }", "\n    div {\n      flex: 0;\n    }\n  "], components: [{ type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6__namespace.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ControlPanel, decorators: [{
+    ControlPanel.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ControlPanel, deps: [{ token: i1__namespace$3.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ControlPanel.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ControlPanel, 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 }], ngImport: i0__namespace, template: "\n    <div fxHide.xs  fxLayout=\"row\" >\n     <app-sprstatusdisplay fxFlex=\"0 0 0\" [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"\n                          class=\"hidden-xs\"></app-sprstatusdisplay>\n      <app-sprtransport fxFlex=\"10 0 0\" [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"navigationEnabled\"></app-sprtransport>\n      <app-uploadstatus fxFlex=\"0 0 0\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                      [status]=\"uploadStatus\" [awaitNewUpload]=\"processing\"></app-uploadstatus>\n      <app-readystateindicator [ready]=\"_ready\"></app-readystateindicator>\n    </div>\n    <div fxShow.xs fxHide fxLayout=\"column\">\n      <div fxLayout=\"row\" fxFlexFill>\n       <app-sprstatusdisplay fxFlex=\"10 0 0\" fxFlexAlign=\"left\" [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"\n                            class=\"hidden-xs\"></app-sprstatusdisplay>\n       <app-uploadstatus fxFlex=\"0 0 0\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                        [status]=\"uploadStatus\" [awaitNewUpload]=\"processing\"></app-uploadstatus>\n        <app-readystateindicator [ready]=\"_ready\"></app-readystateindicator>\n      </div>\n      <app-sprtransport [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"navigationEnabled\"></app-sprtransport>\n\n    </div>\n  ", isInline: true, styles: ["div {\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }"], components: [{ type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }], directives: [{ type: i3__namespace$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i8__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i8__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { type: i8__namespace.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ControlPanel, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprcontrolpanel',
-                        template: "\n    <app-sprstatusdisplay fxHide.xs [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"\n                          class=\"hidden-xs\"></app-sprstatusdisplay>\n\n    <app-sprtransport [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"navigationEnabled\"></app-sprtransport>\n\n    <app-uploadstatus fxHide.xs *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                      [status]=\"uploadStatus\" [awaitNewUpload]=\"processing\"></app-uploadstatus>\n    <mat-icon fxHide.xs [matTooltip]=\"readyStateToolTip\">{{hourGlassIconName}}</mat-icon>\n  ",
-                        styles: [":host {\n    flex: 0; /* only required vertical space */\n    /*  width: 100%; */ /* available horizontal sace */\n    /* display: inline; */\n    display: flex; /* Horizontal flex container: Bottom transport panel, above prompting panel */\n    flex-direction: row;\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }", "\n    div {\n      flex: 0;\n    }\n  "]
+                        template: "\n    <div fxHide.xs  fxLayout=\"row\" >\n     <app-sprstatusdisplay fxFlex=\"0 0 0\" [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"\n                          class=\"hidden-xs\"></app-sprstatusdisplay>\n      <app-sprtransport fxFlex=\"10 0 0\" [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"navigationEnabled\"></app-sprtransport>\n      <app-uploadstatus fxFlex=\"0 0 0\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                      [status]=\"uploadStatus\" [awaitNewUpload]=\"processing\"></app-uploadstatus>\n      <app-readystateindicator [ready]=\"_ready\"></app-readystateindicator>\n    </div>\n    <div fxShow.xs fxHide fxLayout=\"column\">\n      <div fxLayout=\"row\" fxFlexFill>\n       <app-sprstatusdisplay fxFlex=\"10 0 0\" fxFlexAlign=\"left\" [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"\n                            class=\"hidden-xs\"></app-sprstatusdisplay>\n       <app-uploadstatus fxFlex=\"0 0 0\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                        [status]=\"uploadStatus\" [awaitNewUpload]=\"processing\"></app-uploadstatus>\n        <app-readystateindicator [ready]=\"_ready\"></app-readystateindicator>\n      </div>\n      <app-sprtransport [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"navigationEnabled\"></app-sprtransport>\n\n    </div>\n  ",
+                        styles: ["div {\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }"]
                     }]
             }], ctorParameters: function () { return [{ type: i1__namespace$3.MatDialog }]; }, propDecorators: { statusDisplay: [{
                     type: i0.ViewChild,
@@ -6912,9 +7080,9 @@
         };
         return SessionFinishedDialog;
     }());
-    SessionFinishedDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionFinishedDialog, deps: [{ token: i1__namespace$3.MatDialogRef }, { token: i1$3.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SessionFinishedDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SessionFinishedDialog, selector: "spr-session-finished-dialog", ngImport: i0__namespace, template: "<h1 mat-dialog-title><mat-icon [style.color]=\"'green'\">done_all</mat-icon> Session finished</h1>\n  <div mat-dialog-content>\n\n    <p>Thank you! The recording session is complete.</p>\n\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"closeDialog()\">OK</button>\n  </div>\n  ", isInline: true, components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionFinishedDialog, decorators: [{
+    SessionFinishedDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionFinishedDialog, deps: [{ token: i1__namespace$3.MatDialogRef }, { token: i1$3.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SessionFinishedDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SessionFinishedDialog, selector: "spr-session-finished-dialog", ngImport: i0__namespace, template: "<h1 mat-dialog-title><mat-icon [style.color]=\"'green'\">done_all</mat-icon> Session finished</h1>\n  <div mat-dialog-content>\n\n    <p>Thank you! The recording session is complete.</p>\n\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"closeDialog()\">OK</button>\n  </div>\n  ", isInline: true, components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionFinishedDialog, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'spr-session-finished-dialog',
@@ -6937,9 +7105,9 @@
         };
         return MessageDialog;
     }());
-    MessageDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: MessageDialog, deps: [{ token: i1__namespace$3.MatDialogRef }, { token: i1$3.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: MessageDialog, selector: "msg-dialog", ngImport: i0__namespace, template: "<h1 mat-dialog-title><mat-icon *ngIf=\"data.type==='error'\" [style.color]=\"'red'\">error</mat-icon>\n    <mat-icon *ngIf=\"data.type==='warning'\" [style.color]=\"'yellow'\">warning</mat-icon>{{data.title}}</h1>\n  <div mat-dialog-content>\n\n    <p>{{data.msg}}</p>\n    <p>{{data.advice}}</p>\n\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"closeDialog()\">OK</button>\n  </div>\n  ", isInline: true, components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: MessageDialog, decorators: [{
+    MessageDialog.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: MessageDialog, deps: [{ token: i1__namespace$3.MatDialogRef }, { token: i1$3.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessageDialog.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: MessageDialog, selector: "msg-dialog", ngImport: i0__namespace, template: "<h1 mat-dialog-title><mat-icon *ngIf=\"data.type==='error'\" [style.color]=\"'red'\">error</mat-icon>\n    <mat-icon *ngIf=\"data.type==='warning'\" [style.color]=\"'yellow'\">warning</mat-icon>{{data.title}}</h1>\n  <div mat-dialog-content>\n\n    <p>{{data.msg}}</p>\n    <p>{{data.advice}}</p>\n\n  </div>\n  <div mat-dialog-actions>\n    <button mat-button (click)=\"closeDialog()\">OK</button>\n  </div>\n  ", isInline: true, components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: MessageDialog, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'msg-dialog',
@@ -7137,9 +7305,9 @@
         return RecordingService;
     }());
     RecordingService.REC_API_CTX = 'recfile';
-    RecordingService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    RecordingService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingService, decorators: [{
+    RecordingService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RecordingService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
@@ -7158,9 +7326,9 @@
         }
         return SpeechRecorderUploader;
     }(Uploader));
-    SpeechRecorderUploader.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechRecorderUploader, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SpeechRecorderUploader.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechRecorderUploader });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechRecorderUploader, decorators: [{
+    SpeechRecorderUploader.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechRecorderUploader, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SpeechRecorderUploader.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechRecorderUploader });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechRecorderUploader, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
@@ -7187,9 +7355,9 @@
         });
         return WarningBar;
     }());
-    WarningBar.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: WarningBar, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    WarningBar.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: WarningBar, selector: "app-warningbar", inputs: { warningText: "warningText", show: "show" }, providers: [SessionService], ngImport: i0__namespace, template: "\n    <div [class]=\"displayClass\">{{warningText}}</div>\n\n  ", isInline: true, styles: [":host {\n\n    flex: 0 0 content;\n    background: orange;\n\n  }", "\n    .off {\n      display: none;\n    }\n  ", "\n    .on {\n      padding: 2px;\n      display: inline-block;\n      width: 100%;\n      font-weight: bold;\n      font-size: larger;\n      text-align: center;\n    }\n  "] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: WarningBar, decorators: [{
+    WarningBar.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: WarningBar, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    WarningBar.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: WarningBar, selector: "app-warningbar", inputs: { warningText: "warningText", show: "show" }, providers: [SessionService], ngImport: i0__namespace, template: "\n    <div [class]=\"displayClass\">{{warningText}}</div>\n\n  ", isInline: true, styles: [":host {\n\n    flex: 0 0 content;\n    background: orange;\n\n  }", "\n    .off {\n      display: none;\n    }\n  ", "\n    .on {\n      padding: 2px;\n      display: inline-block;\n      width: 100%;\n      font-weight: bold;\n      font-size: larger;\n      text-align: center;\n    }\n  "] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: WarningBar, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-warningbar',
@@ -7240,6 +7408,7 @@
             this._displayRecFile = null;
             this.displayAudioClip = null;
             this.displayLevelInfos = null;
+            this.peakLevelInDb = MIN_DB_LEVEL$1;
             this.readonly = false;
             this.processingRecording = false;
             this.uploadProgress = 100;
@@ -7267,7 +7436,12 @@
             this.init();
         }
         SessionManager.prototype.ngAfterViewInit = function () {
+            var _this = this;
             this.streamLevelMeasure.levelListener = this.liveLevelDisplay;
+            this.streamLevelMeasure.peakLevelListener = function (peakLvlInDb) {
+                _this.peakLevelInDb = peakLvlInDb;
+                _this.changeDetectorRef.detectChanges();
+            };
         };
         SessionManager.prototype.ngOnDestroy = function () {
             this.destroyed = true;
@@ -8334,15 +8508,15 @@
         };
         return SessionManager;
     }());
-    SessionManager.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionManager, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }, { token: i1__namespace$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SessionManager.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SessionManager, 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: LevelBarDisplay, descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <app-warningbar [show]=\"isTestSession()\" warningText=\"Test recording only!\"></app-warningbar>\n    <app-warningbar [show]=\"isDefaultAudioTestSession()\" warningText=\"This test uses default audio device! Regular sessions may require a particular audio device (microphone)!\"></app-warningbar>\n      <app-sprprompting [projectName]=\"projectName\"\n                        [startStopSignalState]=\"startStopSignalState\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                        [items]=\"items\"\n                        [transportActions]=\"transportActions\"\n                        [selectedItemIdx]=\"promptIndex\" (onItemSelect)=\"itemSelect($event)\" (onNextItem)=\"nextItem()\" (onPrevItem)=\"prevItem()\"\n                        [audioSignalCollapsed]=\"audioSignalCollapsed\" [displayAudioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"controlAudioPlayer?.startAction\"\n                        [playSelectionAction]=\"controlAudioPlayer?.startSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"controlAudioPlayer?.autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"controlAudioPlayer?.stopAction\">\n\n    </app-sprprompting>\n    <mat-progress-bar [value]=\"progressPercentValue()\" fxShow=\"false\" fxShow.xs=\"true\" ></mat-progress-bar>\n\n    <spr-recordingitemdisplay #levelbardisplay\n                              [playStartAction]=\"controlAudioPlayer?.startAction\"\n                              [playStopAction]=\"controlAudioPlayer?.stopAction\"\n                              [streamingMode]=\"isRecording()\"\n                              [displayLevelInfos]=\"displayLevelInfos\"\n                              [displayAudioBuffer]=\"displayAudioClip?.buffer\"\n                              [agc]=\"this.ac?.agcStatus\"\n                              [audioSignalCollapsed]=\"audioSignalCollapsed\"\n                              (onShowRecordingDetails)=\"audioSignalCollapsed=!audioSignalCollapsed\"\n                              (onDownloadRecording)=\"downloadRecording()\"\n                              [enableDownload]=\"enableDownloadRecordings\"></spr-recordingitemdisplay>\n    <app-sprcontrolpanel [enableUploadRecordings]=\"enableUploadRecordings\" [readonly]=\"readonly\" [currentRecording]=\"displayAudioClip?.buffer\"\n                         [transportActions]=\"transportActions\" [statusMsg]=\"statusMsg\" [statusWaiting]=\"statusWaiting\"\n                         [statusAlertType]=\"statusAlertType\" [uploadProgress]=\"uploadProgress\"\n                         [uploadStatus]=\"uploadStatus\" [ready]=\"dataSaved && !isActive()\" [processing]=\"processingRecording\" [navigationEnabled]=\"items==null || items.length>1\"></app-sprcontrolpanel>\n\n  ", isInline: true, styles: [":host {\n    flex: 2;\n    background: lightgrey;\n    display: flex; /* Vertical flex container: Bottom transport panel, above prompting panel */\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    min-height: 0px;\n\n      /* Prevents horizontal scroll bar on swipe right */\n      overflow: hidden;\n  }"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { type: i7__namespace.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: LevelBarDisplay, selector: "spr-recordingitemdisplay", inputs: ["streamingMode", "audioSignalCollapsed", "enableDownload", "agc", "playStartAction", "playStopAction", "displayAudioBuffer", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: ControlPanel, selector: "app-sprcontrolpanel", inputs: ["readonly", "transportActions", "processing", "statusMsg", "statusAlertType", "statusWaiting", "uploadStatus", "uploadProgress", "currentRecording", "enableUploadRecordings", "navigationEnabled", "ready"] }], directives: [{ type: i6__namespace.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SessionManager, decorators: [{
+    SessionManager.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionManager, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.Renderer2 }, { token: i1__namespace$3.MatDialog }, { token: SessionService }, { token: RecordingService }, { token: SpeechRecorderUploader }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SessionManager.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SessionManager, 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 }], ngImport: i0__namespace, template: "\n    <app-warningbar [show]=\"isTestSession()\" warningText=\"Test recording only!\"></app-warningbar>\n    <app-warningbar [show]=\"isDefaultAudioTestSession()\" warningText=\"This test uses default audio device! Regular sessions may require a particular audio device (microphone)!\"></app-warningbar>\n      <app-sprprompting [projectName]=\"projectName\"\n                        [startStopSignalState]=\"startStopSignalState\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                        [items]=\"items\"\n                        [transportActions]=\"transportActions\"\n                        [selectedItemIdx]=\"promptIndex\" (onItemSelect)=\"itemSelect($event)\" (onNextItem)=\"nextItem()\" (onPrevItem)=\"prevItem()\"\n                        [audioSignalCollapsed]=\"audioSignalCollapsed\" [displayAudioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"controlAudioPlayer?.startAction\"\n                        [playSelectionAction]=\"controlAudioPlayer?.startSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"controlAudioPlayer?.autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"controlAudioPlayer?.stopAction\">\n\n    </app-sprprompting>\n    <mat-progress-bar [value]=\"progressPercentValue()\" fxShow=\"false\" fxShow.xs=\"true\" ></mat-progress-bar>\n\n\n    <div fxLayout=\"row\" fxLayout.xs=\"column\" [ngStyle]=\"{'height.px':100,'min-height.px': 100}\" [ngStyle.xs]=\"{'height.px':125,'min-height.px': 125}\">\n      <audio-levelbar fxFlex=\"1 0 1\" [streamingMode]=\"isRecording()\" [displayLevelInfos]=\"displayLevelInfos\"></audio-levelbar>\n      <div fxLayout=\"row\">\n      <spr-recordingitemcontrols fxFlex=\"10 0 1\"\n                                 [audioLoaded]=\"displayAudioClip?.buffer!==null\"\n                                 [playStartAction]=\"controlAudioPlayer?.startAction\"\n                                 [playStopAction]=\"controlAudioPlayer?.stopAction\"\n                                 [peakDbLvl]=\"peakLevelInDb\"\n                                 [agc]=\"this.ac?.agcStatus\"\n                                 (onShowRecordingDetails)=\"audioSignalCollapsed=!audioSignalCollapsed\">\n      </spr-recordingitemcontrols>\n      <app-uploadstatus class=\"ricontrols dark\" fxHide fxShow.xs  fxFlex=\"0 0 0\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                                                    [status]=\"uploadStatus\" [awaitNewUpload]=\"processingRecording\"></app-uploadstatus>\n      <app-readystateindicator class=\"ricontrols dark\"  fxHide fxShow.xs fxFlex=\"0 0 0\" [ready]=\"dataSaved && !isActive()\"></app-readystateindicator>\n      </div>\n      </div>\n    <div #controlpanel class=\"controlpanel\" fxLayout=\"row\">\n      <div fxFlex=\"1 1 30%\" fxLayoutAlign=\"start center\">\n        <app-sprstatusdisplay fxHide.xs [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"></app-sprstatusdisplay>\n      </div>\n    <app-sprtransport fxFlex=\"10 0 30%\" fxLayoutAlign=\"center center\" [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"items==null || items.length>1\"></app-sprtransport>\n    <div fxFlex=\"1 1 30%\" fxLayoutAlign=\"end center\" fxLayout=\"row\">\n      <app-uploadstatus class=\"ricontrols\" fxHide.xs fxLayoutAlign=\"end center\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                      [status]=\"uploadStatus\" [awaitNewUpload]=\"processingRecording\"></app-uploadstatus>\n      <app-readystateindicator class=\"ricontrols\" fxLayoutAlign=\"end center\" fxHide.xs [ready]=\"dataSaved && !isActive()\"></app-readystateindicator>\n    </div>\n    </div>\n  ", isInline: true, styles: [":host {\n    flex: 2;\n    background: lightgrey;\n    display: flex; /* Vertical flex container: Bottom transport panel, above prompting panel */\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    min-height: 0px;\n\n      /* Prevents horizontal scroll bar on swipe right */\n      overflow: hidden;\n  }", ".ricontrols {\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100%;\n    }", ".dark {\n    background: darkgray;\n  }", ".controlpanel {\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }"], components: [{ type: WarningBar, selector: "app-warningbar", inputs: ["warningText", "show"] }, { type: Prompting, selector: "app-sprprompting", inputs: ["projectName", "startStopSignalState", "promptItem", "showPrompt", "items", "selectedItemIdx", "transportActions", "enableDownload", "audioSignalCollapsed", "displayAudioClip", "playStartAction", "playSelectionAction", "autoPlayOnSelectToggleAction", "playStopAction"], outputs: ["onItemSelect", "onNextItem", "onPrevItem"] }, { type: i7__namespace.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: LevelBar, selector: "audio-levelbar", inputs: ["streamingMode", "displayLevelInfos"] }, { type: RecordingItemControls, selector: "spr-recordingitemcontrols", inputs: ["audioSignalCollapsed", "enableDownload", "peakDbLvl", "agc", "audioLoaded", "playStartAction", "playStopAction", "displayLevelInfos"], outputs: ["onShowRecordingDetails", "onDownloadRecording"] }, { type: UploadStatus, selector: "app-uploadstatus", inputs: ["value", "awaitNewUpload", "status"] }, { type: ReadyStateIndicator, selector: "app-readystateindicator", inputs: ["ready"] }, { type: StatusDisplay, selector: "app-sprstatusdisplay", inputs: ["statusAlertType", "statusMsg", "statusWaiting"] }, { type: TransportPanel, selector: "app-sprtransport", inputs: ["readonly", "actions", "navigationEnabled"] }], directives: [{ type: i3__namespace$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i8__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i3__namespace$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SessionManager, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-sprrecordingsession',
                         providers: [SessionService],
-                        template: "\n    <app-warningbar [show]=\"isTestSession()\" warningText=\"Test recording only!\"></app-warningbar>\n    <app-warningbar [show]=\"isDefaultAudioTestSession()\" warningText=\"This test uses default audio device! Regular sessions may require a particular audio device (microphone)!\"></app-warningbar>\n      <app-sprprompting [projectName]=\"projectName\"\n                        [startStopSignalState]=\"startStopSignalState\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                        [items]=\"items\"\n                        [transportActions]=\"transportActions\"\n                        [selectedItemIdx]=\"promptIndex\" (onItemSelect)=\"itemSelect($event)\" (onNextItem)=\"nextItem()\" (onPrevItem)=\"prevItem()\"\n                        [audioSignalCollapsed]=\"audioSignalCollapsed\" [displayAudioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"controlAudioPlayer?.startAction\"\n                        [playSelectionAction]=\"controlAudioPlayer?.startSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"controlAudioPlayer?.autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"controlAudioPlayer?.stopAction\">\n\n    </app-sprprompting>\n    <mat-progress-bar [value]=\"progressPercentValue()\" fxShow=\"false\" fxShow.xs=\"true\" ></mat-progress-bar>\n\n    <spr-recordingitemdisplay #levelbardisplay\n                              [playStartAction]=\"controlAudioPlayer?.startAction\"\n                              [playStopAction]=\"controlAudioPlayer?.stopAction\"\n                              [streamingMode]=\"isRecording()\"\n                              [displayLevelInfos]=\"displayLevelInfos\"\n                              [displayAudioBuffer]=\"displayAudioClip?.buffer\"\n                              [agc]=\"this.ac?.agcStatus\"\n                              [audioSignalCollapsed]=\"audioSignalCollapsed\"\n                              (onShowRecordingDetails)=\"audioSignalCollapsed=!audioSignalCollapsed\"\n                              (onDownloadRecording)=\"downloadRecording()\"\n                              [enableDownload]=\"enableDownloadRecordings\"></spr-recordingitemdisplay>\n    <app-sprcontrolpanel [enableUploadRecordings]=\"enableUploadRecordings\" [readonly]=\"readonly\" [currentRecording]=\"displayAudioClip?.buffer\"\n                         [transportActions]=\"transportActions\" [statusMsg]=\"statusMsg\" [statusWaiting]=\"statusWaiting\"\n                         [statusAlertType]=\"statusAlertType\" [uploadProgress]=\"uploadProgress\"\n                         [uploadStatus]=\"uploadStatus\" [ready]=\"dataSaved && !isActive()\" [processing]=\"processingRecording\" [navigationEnabled]=\"items==null || items.length>1\"></app-sprcontrolpanel>\n\n  ",
-                        styles: [":host {\n    flex: 2;\n    background: lightgrey;\n    display: flex; /* Vertical flex container: Bottom transport panel, above prompting panel */\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    min-height: 0px;\n\n      /* Prevents horizontal scroll bar on swipe right */\n      overflow: hidden;\n  }"]
+                        template: "\n    <app-warningbar [show]=\"isTestSession()\" warningText=\"Test recording only!\"></app-warningbar>\n    <app-warningbar [show]=\"isDefaultAudioTestSession()\" warningText=\"This test uses default audio device! Regular sessions may require a particular audio device (microphone)!\"></app-warningbar>\n      <app-sprprompting [projectName]=\"projectName\"\n                        [startStopSignalState]=\"startStopSignalState\" [promptItem]=\"promptItem\" [showPrompt]=\"showPrompt\"\n                        [items]=\"items\"\n                        [transportActions]=\"transportActions\"\n                        [selectedItemIdx]=\"promptIndex\" (onItemSelect)=\"itemSelect($event)\" (onNextItem)=\"nextItem()\" (onPrevItem)=\"prevItem()\"\n                        [audioSignalCollapsed]=\"audioSignalCollapsed\" [displayAudioClip]=\"displayAudioClip\"\n                        [playStartAction]=\"controlAudioPlayer?.startAction\"\n                        [playSelectionAction]=\"controlAudioPlayer?.startSelectionAction\"\n                        [autoPlayOnSelectToggleAction]=\"controlAudioPlayer?.autoPlayOnSelectToggleAction\"\n                        [playStopAction]=\"controlAudioPlayer?.stopAction\">\n\n    </app-sprprompting>\n    <mat-progress-bar [value]=\"progressPercentValue()\" fxShow=\"false\" fxShow.xs=\"true\" ></mat-progress-bar>\n\n\n    <div fxLayout=\"row\" fxLayout.xs=\"column\" [ngStyle]=\"{'height.px':100,'min-height.px': 100}\" [ngStyle.xs]=\"{'height.px':125,'min-height.px': 125}\">\n      <audio-levelbar fxFlex=\"1 0 1\" [streamingMode]=\"isRecording()\" [displayLevelInfos]=\"displayLevelInfos\"></audio-levelbar>\n      <div fxLayout=\"row\">\n      <spr-recordingitemcontrols fxFlex=\"10 0 1\"\n                                 [audioLoaded]=\"displayAudioClip?.buffer!==null\"\n                                 [playStartAction]=\"controlAudioPlayer?.startAction\"\n                                 [playStopAction]=\"controlAudioPlayer?.stopAction\"\n                                 [peakDbLvl]=\"peakLevelInDb\"\n                                 [agc]=\"this.ac?.agcStatus\"\n                                 (onShowRecordingDetails)=\"audioSignalCollapsed=!audioSignalCollapsed\">\n      </spr-recordingitemcontrols>\n      <app-uploadstatus class=\"ricontrols dark\" fxHide fxShow.xs  fxFlex=\"0 0 0\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                                                    [status]=\"uploadStatus\" [awaitNewUpload]=\"processingRecording\"></app-uploadstatus>\n      <app-readystateindicator class=\"ricontrols dark\"  fxHide fxShow.xs fxFlex=\"0 0 0\" [ready]=\"dataSaved && !isActive()\"></app-readystateindicator>\n      </div>\n      </div>\n    <div #controlpanel class=\"controlpanel\" fxLayout=\"row\">\n      <div fxFlex=\"1 1 30%\" fxLayoutAlign=\"start center\">\n        <app-sprstatusdisplay fxHide.xs [statusMsg]=\"statusMsg\" [statusAlertType]=\"statusAlertType\" [statusWaiting]=\"statusWaiting\"></app-sprstatusdisplay>\n      </div>\n    <app-sprtransport fxFlex=\"10 0 30%\" fxLayoutAlign=\"center center\" [readonly]=\"readonly\" [actions]=\"transportActions\" [navigationEnabled]=\"items==null || items.length>1\"></app-sprtransport>\n    <div fxFlex=\"1 1 30%\" fxLayoutAlign=\"end center\" fxLayout=\"row\">\n      <app-uploadstatus class=\"ricontrols\" fxHide.xs fxLayoutAlign=\"end center\" *ngIf=\"enableUploadRecordings\" [value]=\"uploadProgress\"\n                      [status]=\"uploadStatus\" [awaitNewUpload]=\"processingRecording\"></app-uploadstatus>\n      <app-readystateindicator class=\"ricontrols\" fxLayoutAlign=\"end center\" fxHide.xs [ready]=\"dataSaved && !isActive()\"></app-readystateindicator>\n    </div>\n    </div>\n  ",
+                        styles: [":host {\n    flex: 2;\n    background: lightgrey;\n    display: flex; /* Vertical flex container: Bottom transport panel, above prompting panel */\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    min-height: 0px;\n\n      /* Prevents horizontal scroll bar on swipe right */\n      overflow: hidden;\n  }", ".ricontrols {\n        padding: 4px;\n        box-sizing: border-box;\n        height: 100%;\n    }", ".dark {\n    background: darkgray;\n  }", ".controlpanel {\n    align-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 20px;\n    min-height: min-content; /* important */\n  }"]
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.Renderer2 }, { type: i1__namespace$3.MatDialog }, { type: SessionService }, { type: RecordingService }, { type: SpeechRecorderUploader }, { type: SpeechRecorderConfig, decorators: [{
@@ -8356,7 +8530,7 @@
                     args: [Prompting, { static: true }]
                 }], liveLevelDisplay: [{
                     type: i0.ViewChild,
-                    args: [LevelBarDisplay, { static: true }]
+                    args: [LevelBar, { static: true }]
                 }], dataSaved: [{
                     type: i0.Input
                 }], onKeyPress: [{
@@ -8400,9 +8574,9 @@
         };
         return ScriptService;
     }());
-    ScriptService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScriptService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ScriptService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScriptService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScriptService, decorators: [{
+    ScriptService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScriptService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ScriptService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScriptService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScriptService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
@@ -8805,9 +8979,9 @@
         };
         return SpeechrecorderngComponent;
     }());
-    SpeechrecorderngComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechrecorderngComponent, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i1__namespace$1.Router }, { token: i0__namespace.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: ScriptService }, { token: RecordingService }, { token: SpeechRecorderUploader }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SpeechrecorderngComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: SpeechrecorderngComponent, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <app-sprrecordingsession [projectName]=\"project?.name\" [dataSaved]=\"dataSaved\"></app-sprrecordingsession>\n  ", isInline: true, styles: [":host{\n    flex: 2;\n    display: flex;\n    flex-direction: column;\n    min-height:0;\n\n  }"], components: [{ type: SessionManager, selector: "app-sprrecordingsession", inputs: ["projectName", "dataSaved"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechrecorderngComponent, decorators: [{
+    SpeechrecorderngComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechrecorderngComponent, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i1__namespace$1.Router }, { token: i0__namespace.ChangeDetectorRef }, { token: SessionService }, { token: ProjectService }, { token: ScriptService }, { token: RecordingService }, { token: SpeechRecorderUploader }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SpeechrecorderngComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SpeechrecorderngComponent, selector: "app-speechrecorder", providers: [SessionService], viewQueries: [{ propertyName: "sm", first: true, predicate: SessionManager, descendants: true, static: true }], ngImport: i0__namespace, template: "\n    <app-sprrecordingsession [projectName]=\"project?.name\" [dataSaved]=\"dataSaved\"></app-sprrecordingsession>\n  ", isInline: true, styles: [":host{\n    flex: 2;\n    display: flex;\n    flex-direction: column;\n    min-height:0;\n\n  }"], components: [{ type: SessionManager, selector: "app-sprrecordingsession", inputs: ["projectName", "dataSaved"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechrecorderngComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-speechrecorder',
@@ -8825,9 +8999,9 @@
         }
         return ScrollPaneHorizontal;
     }());
-    ScrollPaneHorizontal.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScrollPaneHorizontal, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ScrollPaneHorizontal.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: ScrollPaneHorizontal, selector: "scroll-pane-horizontal", ngImport: i0__namespace, template: '', isInline: true, styles: [":host {\n      width: 100%;\n      background: darkgray;\n      box-sizing: border-box;\n      height: 100%;\n      position: relative;\n      overflow-x: scroll;\n      overflow-y: auto;\n    }"] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: ScrollPaneHorizontal, decorators: [{
+    ScrollPaneHorizontal.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScrollPaneHorizontal, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ScrollPaneHorizontal.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ScrollPaneHorizontal, selector: "scroll-pane-horizontal", ngImport: i0__namespace, template: '', isInline: true, styles: [":host {\n      width: 100%;\n      background: darkgray;\n      box-sizing: border-box;\n      height: 100%;\n      position: relative;\n      overflow-x: scroll;\n      overflow-y: auto;\n    }"] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: ScrollPaneHorizontal, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'scroll-pane-horizontal',
@@ -9054,9 +9228,9 @@
         };
         return AudioDisplayPlayer;
     }());
-    AudioDisplayPlayer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplayPlayer, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AudioDisplayPlayer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: AudioDisplayPlayer, 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__namespace, template: "\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                             [playStopAction]=\"playStopAction\"\n                             [autoPlayOnSelectToggleAction]=\"ap?.autoPlayOnSelectToggleAction\"\n                             [zoomInAction]=\"zoomInAction\"\n                             [zoomOutAction]=\"zoomOutAction\"\n                             [zoomSelectedAction]=\"zoomSelectedAction\"\n                             [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control><p>{{status}}\n  ", isInline: true, styles: [":host {\n      display: flex;\n      flex-direction: column;\n      position: absolute;\n      bottom: 0px;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0.75)\n    }"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: AudioDisplayPlayer, decorators: [{
+    AudioDisplayPlayer.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplayPlayer, deps: [{ token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AudioDisplayPlayer.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: AudioDisplayPlayer, 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__namespace, template: "\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                             [playStopAction]=\"playStopAction\"\n                             [autoPlayOnSelectToggleAction]=\"ap?.autoPlayOnSelectToggleAction\"\n                             [zoomInAction]=\"zoomInAction\"\n                             [zoomOutAction]=\"zoomOutAction\"\n                             [zoomSelectedAction]=\"zoomSelectedAction\"\n                             [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control><p>{{status}}\n  ", isInline: true, styles: [":host {\n      display: flex;\n      flex-direction: column;\n      position: absolute;\n      bottom: 0px;\n      height: 100%;\n      width: 100%;\n      overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: rgba(0, 0, 0, 0.75)\n    }"], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: AudioDisplayPlayer, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-audiodisplayplayer',
@@ -9329,9 +9503,9 @@
         return RecordingFileService;
     }());
     RecordingFileService.RECOFILE_API_CTX = 'recordingfile';
-    RecordingFileService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    RecordingFileService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileService, decorators: [{
+    RecordingFileService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileService, deps: [{ token: i1__namespace.HttpClient }, { token: SPEECHRECORDER_CONFIG }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    RecordingFileService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () {
             return [{ type: i1__namespace.HttpClient }, { type: SpeechRecorderConfig, decorators: [{
@@ -9354,9 +9528,9 @@
         };
         return RecordingFileMetaComponent;
     }());
-    RecordingFileMetaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileMetaComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RecordingFileMetaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", recordingFile: "recordingFile" }, ngImport: i0__namespace, template: "\n    <mat-card>\n      <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>\n      <mat-card-content>\n        <table>\n          <tr>\n            <td>Itemcode:</td>\n            <td>{{recordingFile?.recording?.itemcode}}</td>\n          </tr>\n          <tr *ngIf=\"recordingFile?.date\">\n            <td>Date:</td>\n            <td>{{recordingFile?.date}}</td>\n          </tr>\n          <tr>\n            <td>Prompt:</td>\n            <td>{{recordingAsPlainText()}}</td>\n          </tr>\n         \n          <tr *ngIf=\"sessionId\">\n            <td>Session:</td>\n            <td>{{sessionId}}</td>\n          </tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n  ", isInline: true, components: [{ type: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i1__namespace$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileMetaComponent, decorators: [{
+    RecordingFileMetaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileMetaComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecordingFileMetaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: { sessionId: "sessionId", recordingFile: "recordingFile" }, ngImport: i0__namespace, template: "\n    <mat-card>\n      <mat-card-title>Recording file ID: {{recordingFile?.recordingFileId}}</mat-card-title>\n      <mat-card-content>\n        <table>\n          <tr>\n            <td>Itemcode:</td>\n            <td>{{recordingFile?.recording?.itemcode}}</td>\n          </tr>\n          <tr *ngIf=\"recordingFile?.date\">\n            <td>Date:</td>\n            <td>{{recordingFile?.date}}</td>\n          </tr>\n          <tr>\n            <td>Prompt:</td>\n            <td>{{recordingAsPlainText()}}</td>\n          </tr>\n         \n          <tr *ngIf=\"sessionId\">\n            <td>Session:</td>\n            <td>{{sessionId}}</td>\n          </tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n  ", isInline: true, components: [{ type: i1__namespace$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i1__namespace$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1__namespace$4.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileMetaComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-recording-file-meta',
@@ -9387,9 +9561,9 @@
         };
         return RecordingFileNaviComponent;
     }());
-    RecordingFileNaviComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileNaviComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RecordingFileNaviComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: RecordingFileNaviComponent, 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__namespace, template: "\n        <div #controlPanel style=\"display:flex;flex-direction: row;\">\n          <div #navi style=\"flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap\">\n            <fieldset>\n              <legend>Versions</legend>\n              <mat-progress-spinner *ngIf=\"naviInfoLoading\" mode=\"indeterminate\" [diameter]=\"15\"></mat-progress-spinner>\n                <select *ngIf=\"!naviInfoLoading\" [disabled]=\"versions==null || versions.length==1\" (change)=\"selectVersionChange($event)\">\n                  <option *ngFor=\"let v of versions; let i = index\" [selected]=\"v===version\" value=\"{{v}}\">{{v}}<span *ngIf=\"i==0\"> (latest)</span></option>\n                </select>\n            </fieldset>\n            <fieldset>\n              <legend>Navigate</legend>\n              <mat-progress-spinner *ngIf=\"naviInfoLoading\" mode=\"indeterminate\" [diameter]=\"15\"></mat-progress-spinner>\n              <div *ngIf=\"!naviInfoLoading\"  style=\"flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap\">\n                <button (click)=\"firstAction?.perform()\" [disabled]=\"!firstAction || firstAction?.disabled\" matTooltip=\"First recording file\">\n                  <mat-icon>first_page</mat-icon>\n                </button>\n                <button (click)=\"prevAction?.perform()\" [disabled]=\"!prevAction || prevAction?.disabled\" matTooltip=\"Previous recording file\">\n                  <mat-icon>chevron_left</mat-icon>\n                </button>\n                <button (click)=\"nextAction?.perform()\" [disabled]=\"!nextAction || nextAction?.disabled\" matTooltip=\"Next recording file\">\n                  <mat-icon>chevron_right</mat-icon>\n                </button>\n                <button (click)=\"lastAction?.perform()\" [disabled]=\"!lastAction || lastAction?.disabled\" matTooltip=\"Last recording file\">\n                  <mat-icon>last_page</mat-icon>\n                </button>\n              </div>\n              <p *ngIf=\"items && itemPos!==null && itemPos!==undefined\">Item {{itemPos+1}} of {{items}}</p>\n              <p>(List ordered by date)</p>\n            </fieldset>\n          </div>\n        </div>\n          ", isInline: true, styles: [":host {\n        flex: 0;\n\n      }"], components: [{ type: i1__namespace$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileNaviComponent, decorators: [{
+    RecordingFileNaviComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileNaviComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecordingFileNaviComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileNaviComponent, 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__namespace, template: "\n        <div #controlPanel style=\"display:flex;flex-direction: row;\">\n          <div #navi style=\"flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap\">\n            <fieldset>\n              <legend>Versions</legend>\n              <mat-progress-spinner *ngIf=\"naviInfoLoading\" mode=\"indeterminate\" [diameter]=\"15\"></mat-progress-spinner>\n                <select *ngIf=\"!naviInfoLoading\" [disabled]=\"versions==null || versions.length==1\" (change)=\"selectVersionChange($event)\">\n                  <option *ngFor=\"let v of versions; let i = index\" [selected]=\"v===version\" value=\"{{v}}\">{{v}}<span *ngIf=\"i==0\"> (latest)</span></option>\n                </select>\n            </fieldset>\n            <fieldset>\n              <legend>Navigate</legend>\n              <mat-progress-spinner *ngIf=\"naviInfoLoading\" mode=\"indeterminate\" [diameter]=\"15\"></mat-progress-spinner>\n              <div *ngIf=\"!naviInfoLoading\"  style=\"flex: 0;display:flex;flex-direction: row;flex-wrap: nowrap\">\n                <button (click)=\"firstAction?.perform()\" [disabled]=\"!firstAction || firstAction?.disabled\" matTooltip=\"First recording file\">\n                  <mat-icon>first_page</mat-icon>\n                </button>\n                <button (click)=\"prevAction?.perform()\" [disabled]=\"!prevAction || prevAction?.disabled\" matTooltip=\"Previous recording file\">\n                  <mat-icon>chevron_left</mat-icon>\n                </button>\n                <button (click)=\"nextAction?.perform()\" [disabled]=\"!nextAction || nextAction?.disabled\" matTooltip=\"Next recording file\">\n                  <mat-icon>chevron_right</mat-icon>\n                </button>\n                <button (click)=\"lastAction?.perform()\" [disabled]=\"!lastAction || lastAction?.disabled\" matTooltip=\"Last recording file\">\n                  <mat-icon>last_page</mat-icon>\n                </button>\n              </div>\n              <p *ngIf=\"items && itemPos!==null && itemPos!==undefined\">Item {{itemPos+1}} of {{items}}</p>\n              <p>(List ordered by date)</p>\n            </fieldset>\n          </div>\n        </div>\n          ", isInline: true, styles: [":host {\n        flex: 0;\n\n      }"], components: [{ type: i1__namespace$2.MatProgressSpinner, selector: "mat-progress-spinner", inputs: ["color", "mode", "diameter", "strokeWidth", "value"], exportAs: ["matProgressSpinner"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileNaviComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-recording-file-navi',
@@ -9748,9 +9922,9 @@
         };
         return RecordingFileViewComponent;
     }(AudioDisplayPlayer));
-    RecordingFileViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileViewComponent, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1__namespace$1.Router }, { token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$3.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RecordingFileViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: RecordingFileViewComponent, selector: "app-audiodisplayplayer", viewQueries: [{ propertyName: "ac", first: true, predicate: AudioDisplayScrollPane, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n    <div class=\"ctrlview\">\n      <app-recording-file-meta [sessionId]=\"sessionId\" [recordingFile]=\"recordingFile\"></app-recording-file-meta>\n\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                             [playStopAction]=\"playStopAction\"\n                             [autoPlayOnSelectToggleAction]=\"ap?.autoPlayOnSelectToggleAction\"\n                             [zoomInAction]=\"zoomInAction\"\n                             [zoomOutAction]=\"zoomOutAction\"\n                             [zoomSelectedAction]=\"zoomSelectedAction\"\n                           [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control>\n      <app-recording-file-navi [items]=\"availRecFiles?.length\" [itemPos]=\"posInList\" [version]=\"recordingFile?recordingFile.version:null\" [versions]=\"versions\" [firstAction]=\"firstAction\" [prevAction]=\"prevAction\" [nextAction]=\"nextAction\" [lastAction]=\"lastAction\" [selectVersion]=\"toVersionAction\" [naviInfoLoading]=\"naviInfoLoading\"></app-recording-file-navi>\n      </div>\n  ", isInline: true, styles: [":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileViewComponent, decorators: [{
+    RecordingFileViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileViewComponent, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1__namespace$1.Router }, { token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$3.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecordingFileViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileViewComponent, selector: "app-audiodisplayplayer", viewQueries: [{ propertyName: "ac", first: true, predicate: AudioDisplayScrollPane, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n    <div class=\"ctrlview\">\n      <app-recording-file-meta [sessionId]=\"sessionId\" [recordingFile]=\"recordingFile\"></app-recording-file-meta>\n\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                             [playStopAction]=\"playStopAction\"\n                             [autoPlayOnSelectToggleAction]=\"ap?.autoPlayOnSelectToggleAction\"\n                             [zoomInAction]=\"zoomInAction\"\n                             [zoomOutAction]=\"zoomOutAction\"\n                             [zoomSelectedAction]=\"zoomSelectedAction\"\n                           [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control>\n      <app-recording-file-navi [items]=\"availRecFiles?.length\" [itemPos]=\"posInList\" [version]=\"recordingFile?recordingFile.version:null\" [versions]=\"versions\" [firstAction]=\"firstAction\" [prevAction]=\"prevAction\" [nextAction]=\"nextAction\" [lastAction]=\"lastAction\" [selectVersion]=\"toVersionAction\" [naviInfoLoading]=\"naviInfoLoading\"></app-recording-file-navi>\n      </div>\n  ", isInline: true, styles: [":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileViewComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-audiodisplayplayer',
@@ -9844,9 +10018,9 @@
         };
         return RecordingFileUI;
     }(RecordingFileViewComponent));
-    RecordingFileUI.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileUI, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1__namespace$1.Router }, { token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$3.MatDialog }, { token: i6__namespace$1.MatSnackBar }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RecordingFileUI.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: RecordingFileUI, selector: "app-audiodisplayplayer", usesInheritance: true, ngImport: i0__namespace, template: "\n      <h1>Recording file editing</h1>\n      <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>\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n      <div class=\"ctrlview\">\n        <app-recording-file-meta [sessionId]=\"sessionId\"  [recordingFile]=\"recordingFile\"></app-recording-file-meta>\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                             [playStopAction]=\"playStopAction\"\n                             [autoPlayOnSelectToggleAction]=\"ap?.autoPlayOnSelectToggleAction\"\n                             [zoomInAction]=\"zoomInAction\"\n                             [zoomOutAction]=\"zoomOutAction\"\n                             [zoomSelectedAction]=\"zoomSelectedAction\"\n                           [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control>\n        <app-recording-file-navi [items]=\"availRecFiles?.length\" [itemPos]=\"posInList\" [version]=\"recordingFile?recordingFile.version:null\" [versions]=\"versions\" [firstAction]=\"firstAction\" [prevAction]=\"prevAction\" [nextAction]=\"nextAction\" [lastAction]=\"lastAction\" [selectVersion]=\"toVersionAction\" [naviInfoLoading]=\"naviInfoLoading\"></app-recording-file-navi>\n      </div>\n\n      <button mat-raised-button color=\"accent\" (click)=\"applySelection()\" [disabled]=\"editSaved\">{{this.applyButtonText()}}</button>\n  ", isInline: true, styles: [":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { type: i3__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: RecordingFileUI, decorators: [{
+    RecordingFileUI.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileUI, deps: [{ token: RecordingFileService }, { token: RecordingService }, { token: SessionService }, { token: i1__namespace$1.Router }, { token: i1__namespace$1.ActivatedRoute }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }, { token: i1__namespace$3.MatDialog }, { token: i6__namespace.MatSnackBar }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecordingFileUI.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: RecordingFileUI, selector: "app-audiodisplayplayer", usesInheritance: true, ngImport: i0__namespace, template: "\n      <h1>Recording file editing</h1>\n      <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>\n\n    <audio-display-scroll-pane #audioDisplayScrollPane></audio-display-scroll-pane>\n      <div class=\"ctrlview\">\n        <app-recording-file-meta [sessionId]=\"sessionId\"  [recordingFile]=\"recordingFile\"></app-recording-file-meta>\n    <audio-display-control [audioClip]=\"audioClip\"\n                             [playStartAction]=\"playStartAction\"\n                             [playSelectionAction]=\"playSelectionAction\"\n                             [playStopAction]=\"playStopAction\"\n                             [autoPlayOnSelectToggleAction]=\"ap?.autoPlayOnSelectToggleAction\"\n                             [zoomInAction]=\"zoomInAction\"\n                             [zoomOutAction]=\"zoomOutAction\"\n                             [zoomSelectedAction]=\"zoomSelectedAction\"\n                           [zoomFitToPanelAction]=\"zoomFitToPanelAction\"></audio-display-control>\n        <app-recording-file-navi [items]=\"availRecFiles?.length\" [itemPos]=\"posInList\" [version]=\"recordingFile?recordingFile.version:null\" [versions]=\"versions\" [firstAction]=\"firstAction\" [prevAction]=\"prevAction\" [nextAction]=\"nextAction\" [lastAction]=\"lastAction\" [selectVersion]=\"toVersionAction\" [naviInfoLoading]=\"naviInfoLoading\"></app-recording-file-navi>\n      </div>\n\n      <button mat-raised-button color=\"accent\" (click)=\"applySelection()\" [disabled]=\"editSaved\">{{this.applyButtonText()}}</button>\n  ", isInline: true, styles: [":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "], components: [{ type: AudioDisplayScrollPane, selector: "audio-display-scroll-pane", inputs: ["audioClip"], outputs: ["zoomInAction", "zoomOutAction", "zoomSelectedAction", "zoomFitToPanelAction"] }, { type: RecordingFileMetaComponent, selector: "app-recording-file-meta", inputs: ["sessionId", "recordingFile"] }, { type: AudioDisplayControl, selector: "audio-display-control", inputs: ["audioClip", "playStartAction", "playSelectionAction", "playStopAction", "zoomInAction", "zoomOutAction", "zoomFitToPanelAction", "zoomSelectedAction", "autoPlayOnSelectToggleAction"] }, { type: RecordingFileNaviComponent, selector: "app-recording-file-navi", inputs: ["firstAction", "prevAction", "nextAction", "lastAction", "items", "itemPos", "selectVersion", "versions", "version", "naviInfoLoading"] }, { type: i3__namespace$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: RecordingFileUI, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'app-audiodisplayplayer',
@@ -9855,7 +10029,7 @@
                             ":host {\n          flex: 2;\n          display: flex;\n          flex-direction: column;\n          min-height:0;\n          overflow: hidden;\n      padding: 20px;\n      z-index: 5;\n      box-sizing: border-box;\n      background-color: white;\n    }", "\n        .ctrlview{\n          display: flex;\n          flex-direction: row;\n        }\n    ", "\n      audio-display-control{\n\n        flex: 3;\n      }\n    "
                         ]
                     }]
-            }], ctorParameters: function () { return [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i1__namespace$1.Router }, { type: i1__namespace$1.ActivatedRoute }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace$3.MatDialog }, { type: i6__namespace$1.MatSnackBar }]; } });
+            }], ctorParameters: function () { return [{ type: RecordingFileService }, { type: RecordingService }, { type: SessionService }, { type: i1__namespace$1.Router }, { type: i1__namespace$1.ActivatedRoute }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i1__namespace$3.MatDialog }, { type: i6__namespace.MatSnackBar }]; } });
 
     var SPR_ROUTES = [
         { path: 'spr/session/:id', component: SpeechrecorderngComponent },
@@ -9887,25 +10061,25 @@
         };
         return SpeechrecorderngModule;
     }());
-    SpeechrecorderngModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechrecorderngModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SpeechrecorderngModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechrecorderngModule, declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
-            ProgressDisplay, LevelBarDisplay, UploadStatus, TransportPanel, ControlPanel, WarningBar, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent], imports: [i1__namespace$1.RouterModule, flexLayout.FlexLayoutModule, i4.CommonModule, i2.MatIconModule, i3$1.MatButtonModule, i1$3.MatDialogModule, i7.MatProgressBarModule, i1$2.MatProgressSpinnerModule, i3.MatTooltipModule, i1.HttpClientModule, i2$1.MatCheckboxModule, i1$4.MatCardModule, divider.MatDividerModule, gridList.MatGridListModule, table.MatTableModule, input.MatInputModule, select.MatSelectModule, i6$1.MatSnackBarModule], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar] });
-    SpeechrecorderngModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader], imports: [[i1$1.RouterModule.forChild(SPR_ROUTES), flexLayout.FlexLayoutModule, i4.CommonModule, i2.MatIconModule, i3$1.MatButtonModule, i1$3.MatDialogModule, i7.MatProgressBarModule, i1$2.MatProgressSpinnerModule, i3.MatTooltipModule, i1.HttpClientModule, i2$1.MatCheckboxModule, i1$4.MatCardModule, divider.MatDividerModule, gridList.MatGridListModule, table.MatTableModule, input.MatInputModule, select.MatSelectModule, i6$1.MatSnackBarModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0__namespace, type: SpeechrecorderngModule, decorators: [{
+    SpeechrecorderngModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechrecorderngModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SpeechrecorderngModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, 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, ReadyStateIndicator, ControlPanel, WarningBar, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent], imports: [i1__namespace$1.RouterModule, flexLayout.FlexLayoutModule, i4.CommonModule, i2.MatIconModule, i3$2.MatButtonModule, i1$3.MatDialogModule, i7.MatProgressBarModule, i1$2.MatProgressSpinnerModule, i3.MatTooltipModule, i1.HttpClientModule, i2$1.MatCheckboxModule, i1$4.MatCardModule, divider.MatDividerModule, gridList.MatGridListModule, table.MatTableModule, input.MatInputModule, select.MatSelectModule, i6.MatSnackBarModule], exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar] });
+    SpeechrecorderngModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechrecorderngModule, providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader], imports: [[i1$1.RouterModule.forChild(SPR_ROUTES), flexLayout.FlexLayoutModule, i4.CommonModule, i2.MatIconModule, i3$2.MatButtonModule, i1$3.MatDialogModule, i7.MatProgressBarModule, i1$2.MatProgressSpinnerModule, i3.MatTooltipModule, i1.HttpClientModule, i2$1.MatCheckboxModule, i1$4.MatCardModule, divider.MatDividerModule, gridList.MatGridListModule, table.MatTableModule, input.MatInputModule, select.MatSelectModule, i6.MatSnackBarModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SpeechrecorderngModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [AudioSignal, Sonagram, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar, Progress, SimpleTrafficLight, Recinstructions, Prompter, PromptContainer, PromptingContainer, Prompting, StatusDisplay,
-                            ProgressDisplay, LevelBarDisplay, UploadStatus, TransportPanel, ControlPanel, WarningBar, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent],
+                            ProgressDisplay, RecordingItemDisplay, RecordingItemControls, UploadStatus, TransportPanel, ReadyStateIndicator, ControlPanel, WarningBar, SessionManager, MessageDialog, SessionFinishedDialog, SpeechrecorderngComponent, RecordingFileViewComponent, RecordingFileUI, ScrollIntoViewDirective, RecordingFileNaviComponent, RecordingFileMetaComponent],
                         entryComponents: [
                             MessageDialog, SessionFinishedDialog
                         ],
                         exports: [MessageDialog, SpeechrecorderngComponent, ScrollPaneHorizontal, AudioClipUIContainer, AudioDisplayScrollPane, AudioDisplay, AudioDisplayPlayer, AudioDisplayControl, LevelBar],
-                        imports: [i1$1.RouterModule.forChild(SPR_ROUTES), flexLayout.FlexLayoutModule, i4.CommonModule, i2.MatIconModule, i3$1.MatButtonModule, i1$3.MatDialogModule, i7.MatProgressBarModule, i1$2.MatProgressSpinnerModule, i3.MatTooltipModule, i1.HttpClientModule, i2$1.MatCheckboxModule, i1$4.MatCardModule, divider.MatDividerModule, gridList.MatGridListModule, table.MatTableModule, input.MatInputModule, select.MatSelectModule, i6$1.MatSnackBarModule],
+                        imports: [i1$1.RouterModule.forChild(SPR_ROUTES), flexLayout.FlexLayoutModule, i4.CommonModule, i2.MatIconModule, i3$2.MatButtonModule, i1$3.MatDialogModule, i7.MatProgressBarModule, i1$2.MatProgressSpinnerModule, i3.MatTooltipModule, i1.HttpClientModule, i2$1.MatCheckboxModule, i1$4.MatCardModule, divider.MatDividerModule, gridList.MatGridListModule, table.MatTableModule, input.MatInputModule, select.MatSelectModule, i6.MatSnackBarModule],
                         providers: [SessionService, ProjectService, ScriptService, RecordingService, RecordingFileService, SpeechRecorderUploader]
                     }]
             }] });
 
-    var VERSION = '2.19.0';
+    var VERSION = '2.21.3';
 
     /*
      * Public API Surface of speechrecorderng
@@ -9946,5 +10120,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=speechrecorderng.umd.js.map