@loxia/mst-viewer 8.1.3-202511141255 → 8.1.3-202511170721

package/fesm2022/loxia-mst-viewer.mjs

@@ -12,7 +12,7 @@ import * as i2$1 from '@ngrx/store';
 import { createAction, union, select, createReducer, on, StoreModule } from '@ngrx/store';
 import { ResourceModule } from '@ngx-resource/handler-ngx-http';
 import { BehaviorSubject, from, Subscription, combineLatest, of, throwError } from 'rxjs';
-import { filter, map, take, catchError, withLatestFrom, switchMap, tap } from 'rxjs/operators';
+import { take, filter, map, catchError, withLatestFrom, switchMap, tap } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpParams } from '@angular/common/http';
 import { __decorate } from 'tslib';
@@ -41,7 +41,7 @@ class MessageComponent {
         this.onClearMessage = new EventEmitter();
     }
     ngOnInit() {
-        if (this.message && this.message.timeout > 0) {
+        if (this.message.timeout > 0) {
             setTimeout(() => {
                 this.closeMessage({ stopPropagation: () => null });
             }, this.message.timeout);
@@ -53,7 +53,7 @@ class MessageComponent {
         this.message = undefined;
     }
     get severity() {
-        return this.message?.severity ?? '?';
+        return this.message.severity;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MessageComponent, selector: "loxia-message", inputs: { message: "message" }, outputs: { onClearMessage: "onClearMessage" }, ngImport: i0, template: "<div id=\"alert-1\" *ngIf=\"message\"\n     [ngClass]=\"severity\"\n     class=\" loxia-message flex items-center p-4 text-white\" role=\"alert\">\n        <svg class=\"flex-shrink-0 size-4 mt-0.5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"></path>\n        <path d=\"M12 9v4\"></path>\n        <path d=\"M12 17h.01\"></path>\n    </svg>\n    <span class=\"sr-only\">Info</span>\n    <div class=\"ms-3 text-sm font-medium\">\n        {{message.text}}\n    </div>\n    <button type=\"button\"\n            (click)=\"closeMessage($event)\"\n            class=\"ms-auto -mx-1.5 -my-1.5 rounded-lg inline-flex items-center justify-center h-8 w-8\" data-dismiss-target=\"#alert-1\" aria-label=\"Close\">\n        <span class=\"sr-only\">Close</span>\n        <svg class=\"w-3 h-3\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 14 14\">\n            <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6\"/>\n        </svg>\n    </button>\n</div>\n", styles: ["svg{background-color:transparent;stroke-width:unset}.loxia-message.information{background-color:#0288d1}.loxia-message.warning{background-color:#ff6a00}.loxia-message.notification{background-color:#f3ed38}.loxia-message.error{background-color:#b5061b}.loxia-message.success{background-color:#297d03}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
@@ -124,84 +124,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{ selector: 'loxia-progress-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-block h-16 w-16 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-warning\"\n        role=\"status\">\n  <span class=\"!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]\">\n      Loading...\n  </span>\n</div>\n" }]
         }] });
 
-const SET_RIT_DELEN = '[mst] SetRitDelen';
-const SET_RIT_DELEN_AFTER_UPDATE = '[mst] SetRitDelenAfterUpdate';
-const UPDATE_RIT_DELEN = '[mst] UpdateRitDelen';
-const TOGGLE_RITDEEL_ZICHTBAAR = '[mst] ToggleRitdeelZichtbaar';
-const SET_RITDEEL_ZICHTBAAR = '[mst] ZetRitdeelZichtbaar';
-const SET_ZICHTBAARHEID_ALLE_RITDELEN = '[mst] SetZichtbaarheidAlleRitdelen';
-const TOGGLE_ZICHTBAARHEID_VOOR_BEWEGINGEN = '[mst] ToggleZichtbaarheidVoorBewegingen';
-const SET_ALTERNATIEVE_RIT_DELEN = '[mst] SetAlternatieveRitDelen';
-const RITDEEL_INVOEGEN = '[mst] RitdeelInvoegen';
-const DELETE_RITDEEL = '[mst] DeleteRitdeel';
-const DELETE_RITDEEL_ACTIE = '[mst] DeleteRitdeelActie';
-const ADD_RITDEEL_ACTIE = '[mst] AddRitdeelActie';
-const NAVIGEER = '[mst] Navigeer';
-const NAVIGEER_VANAF = '[mst] NavigeerVanaf';
-const setRitDelen = createAction(SET_RIT_DELEN, (ritDelen, paginationSize, iaversieinfo) => ({ ritDelen, paginationSize, iaversieinfo }));
-const setRitdelenAfterUpdate = createAction(SET_RIT_DELEN_AFTER_UPDATE, (ritDelen) => ({ ritDelen }));
-const navigeer = createAction(NAVIGEER, (stapSize, paginationSize, iaversieinfo) => ({ stapSize, paginationSize, iaversieinfo }));
-const navigeerVanaf = createAction(NAVIGEER_VANAF, (paginationSize, iaversieinfo, ritdeel) => ({ paginationSize, iaversieinfo, ritdeel }));
-const updateRitDelen = createAction(UPDATE_RIT_DELEN, (ritDelen) => ({ ritDelen }));
-const toggleRitdeelZichtbaar = createAction(TOGGLE_RITDEEL_ZICHTBAAR, (ritDeel) => ({ ritDeel }));
-const setRitdeelZichtbaar = createAction(SET_RITDEEL_ZICHTBAAR, (ritDeel, zichtbaar) => ({ ritDeel, zichtbaar }));
-const deleteRitdeel = createAction(DELETE_RITDEEL, (ritDeel) => ({ ritDeel }));
-const deleteRitdeelActie = createAction(DELETE_RITDEEL_ACTIE, (ritDeel, actie) => ({ ritDeel, actie }));
-const addRitdeelActie = createAction(ADD_RITDEEL_ACTIE, (ritDeel, actie) => ({ ritDeel, actie }));
-const setZichtbaarheidAlleRitdelen = createAction(SET_ZICHTBAARHEID_ALLE_RITDELEN, (zichtbaarheid) => ({ zichtbaarheid }));
-const toggleZichtbaarheidVoorBewegingen = createAction(TOGGLE_ZICHTBAARHEID_VOOR_BEWEGINGEN, (bewegingIds) => ({ bewegingIds }));
-const setAlternatieveRitDelen = createAction(SET_ALTERNATIEVE_RIT_DELEN, (alternatieveRitDeel) => ({ alternatieveRitDeel }));
-const ritdeelInvoegen = createAction(RITDEEL_INVOEGEN, (nieuweRoute) => ({ nieuweRoute }));
-// do not export return value
-const ritdeelActions = union({
-    setRitDelen,
-    updateRitDelen,
-    setRitdelenAfterUpdate,
-    toggleRitdeelZichtbaar,
-    setRitdeelZichtbaar,
-    deleteRitdeel,
-    deleteRitdeelActie,
-    addRitdeelActie,
-    setZichtbaarheidAlleRitdelen,
-    toggleZichtbaarheidVoorBewegingen,
-    setAlternatieveRitDelen,
-    ritdeelInvoegen
-});
-
-class CarouselControlsComponent {
-    constructor(store) {
-        this.store = store;
-        this.paginationSize = 4;
-        this.ritdelen$ = this.store.select('ritDelen').pipe(filter(r => r?.length > 0));
-        this.kanLinks$ = this.ritdelen$.pipe(map(r => this.kanLinksNavigeren(r)));
-        this.kanRechts$ = this.ritdelen$.pipe(map(r => this.kanRechtsNavigeren(r)));
-    }
-    kanLinksNavigeren(ritDelen) {
-        return ritDelen.length > this.paginationSize && !ritDelen[0].isBinnenWindow();
-    }
-    kanRechtsNavigeren(ritDelen) {
-        return ritDelen.length > this.paginationSize && !ritDelen[ritDelen.length - 1].isBinnenWindow();
-    }
-    navigeerNaarLinks(event) {
-        this.store.dispatch(navigeer(event?.ctrlKey ? -1 : -(this.paginationSize - 1), this.paginationSize, this.iaversieinfo));
-    }
-    navigeerNaarRechts(event) {
-        this.store.dispatch(navigeer(event?.ctrlKey ? 1 : this.paginationSize - 1, this.paginationSize, this.iaversieinfo));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CarouselControlsComponent, deps: [{ token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CarouselControlsComponent, selector: "carousel-controls", inputs: { paginationSize: "paginationSize", iaversieinfo: "iaversieinfo", sideNavOpen: "sideNavOpen" }, ngImport: i0, template: "<div *ngIf=\"ritdelen$ | async\">\n    <a class=\"loxia-carousel-control-prev\" [ngClass]=\"(sideNavOpen)?'carousel-sidebar-open':'carousel-sidebar'\" role=\"button\"\n        data-slide=\"prev\" (click)=\"navigeerNaarLinks($event)\" [hidden]=\"(kanLinks$ | async) === false\">\n    <span id=\"previous-page\" class=\"loxia-carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n    <span class=\"loxia-sr-only\">Previous</span>\n</a>\n    <a class=\"loxia-carousel-control-next\" style=\"width: 2%;\" role=\"button\" data-slide=\"next\" (click)=\"navigeerNaarRechts($event)\"\n       [hidden]=\"(kanRechts$ | async) === false\">\n        <span id=\"next-page\" class=\"loxia-carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"loxia-sr-only\">Next</span>\n    </a>\n</div>\n", styles: [".loxia-carousel-control-prev{left:0}.loxia-carousel-control-next{right:0}.loxia-carousel-control-next-icon,.loxia-carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:50%/100% 100% no-repeat}.loxia-carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next:focus,.loxia-carousel-control-next:hover,.loxia-carousel-control-prev:focus,.loxia-carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.loxia-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loxia-carousel-control-next,.loxia-carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}.carousel-sidebar{width:2%}.carousel-sidebar-open{width:2%;transition:all .3s;left:470px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CarouselControlsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'carousel-controls', template: "<div *ngIf=\"ritdelen$ | async\">\n    <a class=\"loxia-carousel-control-prev\" [ngClass]=\"(sideNavOpen)?'carousel-sidebar-open':'carousel-sidebar'\" role=\"button\"\n        data-slide=\"prev\" (click)=\"navigeerNaarLinks($event)\" [hidden]=\"(kanLinks$ | async) === false\">\n    <span id=\"previous-page\" class=\"loxia-carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n    <span class=\"loxia-sr-only\">Previous</span>\n</a>\n    <a class=\"loxia-carousel-control-next\" style=\"width: 2%;\" role=\"button\" data-slide=\"next\" (click)=\"navigeerNaarRechts($event)\"\n       [hidden]=\"(kanRechts$ | async) === false\">\n        <span id=\"next-page\" class=\"loxia-carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"loxia-sr-only\">Next</span>\n    </a>\n</div>\n", styles: [".loxia-carousel-control-prev{left:0}.loxia-carousel-control-next{right:0}.loxia-carousel-control-next-icon,.loxia-carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:50%/100% 100% no-repeat}.loxia-carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next:focus,.loxia-carousel-control-next:hover,.loxia-carousel-control-prev:focus,.loxia-carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.loxia-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loxia-carousel-control-next,.loxia-carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}.carousel-sidebar{width:2%}.carousel-sidebar-open{width:2%;transition:all .3s;left:470px}[hidden]{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: i2$1.Store }], propDecorators: { paginationSize: [{
-                type: Input
-            }], iaversieinfo: [{
-                type: Input
-            }], sideNavOpen: [{
-                type: Input
-            }] } });
-
 const version = '8.1.3-SNAPSHOT';
 
 const SET_EDITABLE = '[mst] SetEditable';
@@ -291,6 +213,7 @@ const navigeerBuitenRit = createAction(NAVIGEER_BUITEN_RIT, (randPuic) => ({ ran
 const focusOpRitdeel = createAction(FOCUS_OP_RITDEEL, (ritdeel, paginationSize, iaVersieInfo) => ({ ritdeel, paginationSize, iaVersieInfo }));
 const focusOpIds = createAction(FOCUS_OP_IDS, (puics) => ({ puics }));
 const bepaalSbInfos = createAction(BEPAAL_SB_INFOS, (rit, ongeplandeActies, iaVersie, ritGewijzigdToegestaan, paginationSize) => ({ rit, ongeplandeActies, iaVersie, ritGewijzigdToegestaan, paginationSize }));
+const SetSelectedRitdeel = createAction(SET_SELECTED_RITDEEL, (id) => ({ id }));
 // do not export return value
 const mstActions = union({
     setEditable,
@@ -328,9 +251,89 @@ const mstActions = union({
     ClearProgress,
     BewegingInvoegen,
     KeurAlleActiesGoed,
-    UpdateRit
+    UpdateRit,
+    setSelectedRitdeel: SetSelectedRitdeel
 });
 
+const SET_RIT_DELEN = '[mst] SetRitDelen';
+const SET_RIT_DELEN_AFTER_UPDATE = '[mst] SetRitDelenAfterUpdate';
+const UPDATE_RIT_DELEN = '[mst] UpdateRitDelen';
+const TOGGLE_RITDEEL_ZICHTBAAR = '[mst] ToggleRitdeelZichtbaar';
+const SET_RITDEEL_ZICHTBAAR = '[mst] ZetRitdeelZichtbaar';
+const SET_ZICHTBAARHEID_ALLE_RITDELEN = '[mst] SetZichtbaarheidAlleRitdelen';
+const TOGGLE_ZICHTBAARHEID_VOOR_BEWEGINGEN = '[mst] ToggleZichtbaarheidVoorBewegingen';
+const SET_ALTERNATIEVE_RIT_DELEN = '[mst] SetAlternatieveRitDelen';
+const RITDEEL_INVOEGEN = '[mst] RitdeelInvoegen';
+const DELETE_RITDEEL = '[mst] DeleteRitdeel';
+const DELETE_RITDEEL_ACTIE = '[mst] DeleteRitdeelActie';
+const ADD_RITDEEL_ACTIE = '[mst] AddRitdeelActie';
+const NAVIGEER = '[mst] Navigeer';
+const NAVIGEER_VANAF = '[mst] NavigeerVanaf';
+const setRitDelen = createAction(SET_RIT_DELEN, (ritDelen, paginationSize, iaversieinfo) => ({ ritDelen, paginationSize, iaversieinfo }));
+const setRitdelenAfterUpdate = createAction(SET_RIT_DELEN_AFTER_UPDATE, (ritDelen) => ({ ritDelen }));
+const navigeer = createAction(NAVIGEER, (stapSize, paginationSize, iaversieinfo) => ({ stapSize, paginationSize, iaversieinfo }));
+const navigeerVanaf = createAction(NAVIGEER_VANAF, (paginationSize, iaversieinfo, ritdeel) => ({ paginationSize, iaversieinfo, ritdeel }));
+const updateRitDelen = createAction(UPDATE_RIT_DELEN, (ritDelen) => ({ ritDelen }));
+const toggleRitdeelZichtbaar = createAction(TOGGLE_RITDEEL_ZICHTBAAR, (ritDeel) => ({ ritDeel }));
+const setRitdeelZichtbaar = createAction(SET_RITDEEL_ZICHTBAAR, (ritDeel, zichtbaar) => ({ ritDeel, zichtbaar }));
+const deleteRitdeel = createAction(DELETE_RITDEEL, (ritDeel) => ({ ritDeel }));
+const deleteRitdeelActie = createAction(DELETE_RITDEEL_ACTIE, (ritDeel, actie) => ({ ritDeel, actie }));
+const addRitdeelActie = createAction(ADD_RITDEEL_ACTIE, (ritDeel, actie) => ({ ritDeel, actie }));
+const setZichtbaarheidAlleRitdelen = createAction(SET_ZICHTBAARHEID_ALLE_RITDELEN, (zichtbaarheid) => ({ zichtbaarheid }));
+const toggleZichtbaarheidVoorBewegingen = createAction(TOGGLE_ZICHTBAARHEID_VOOR_BEWEGINGEN, (bewegingIds) => ({ bewegingIds }));
+const setAlternatieveRitDelen = createAction(SET_ALTERNATIEVE_RIT_DELEN, (alternatieveRitDeel) => ({ alternatieveRitDeel }));
+const ritdeelInvoegen = createAction(RITDEEL_INVOEGEN, (nieuweRoute) => ({ nieuweRoute }));
+// do not export return value
+const ritdeelActions = union({
+    setRitDelen,
+    updateRitDelen,
+    setRitdelenAfterUpdate,
+    toggleRitdeelZichtbaar,
+    setRitdeelZichtbaar,
+    deleteRitdeel,
+    deleteRitdeelActie,
+    addRitdeelActie,
+    setZichtbaarheidAlleRitdelen,
+    toggleZichtbaarheidVoorBewegingen,
+    setAlternatieveRitDelen,
+    ritdeelInvoegen
+});
+
+class Utils {
+    static flatMap(xs, f) {
+        return xs.reduce((acc, x) => acc.concat(f(x)), []);
+    }
+    static getValidErorrMessage(err) {
+        let errorMsg = '';
+        if (err.msg) {
+            errorMsg += err.msg;
+        }
+        if (Array.isArray(err.body)) {
+            err.body.forEach(x => errorMsg += x);
+        }
+        else if (err.body) {
+            if (err.body instanceof ProgressEvent) {
+                errorMsg = 'Kon geen verbinding maken met de server';
+            }
+            else if (err.body.text) {
+                errorMsg += err.body.text;
+            }
+            else {
+                errorMsg += err.body;
+            }
+        }
+        if (err.message) {
+            errorMsg += err.message;
+        }
+        if (typeof err === 'string' || err instanceof String) {
+            errorMsg += err;
+        }
+        if (errorMsg !== '') {
+            return errorMsg;
+        }
+    }
+}
+
 /**
  * https://gist.github.com/jordanluyke/609a4fffb69d1ebafdadd313ee2ee804
  *
@@ -394,7 +397,7 @@ class ArrayMultimap {
         return Array.from(new Set(this._entries.map(entry => entry.key)));
     }
     values() {
-        return this._entries.reduce((acc, x) => acc.concat(x.value), []);
+        return Utils.flatMap(this._entries, x => x.value);
     }
     put(key, value) {
         this._entries.push(new MultimapEntry(key, value));
@@ -500,7 +503,6 @@ class EditorService {
         this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.initReadyPromise();
     }
-    // Called from GWT only, can be removed when GWT is gone
     setEditor(editor) {
         this.editor = editor;
         this.resolveReadyPromise();
@@ -508,7 +510,6 @@ class EditorService {
     isReady() {
         return this.promise;
     }
-    // Called from GWT only, can be removed when GWT is gone
     setSignaleringsBeeldManager(signaleringsBeeldManager) {
         this.signaleringsBeeldManagerService.set(signaleringsBeeldManager);
     }
@@ -986,38 +987,6 @@ class MeldingBuilder {
     }
 }
 
-class Utils {
-    static getValidErorrMessage(err) {
-        let errorMsg = '';
-        if (err.msg) {
-            errorMsg += err.msg;
-        }
-        if (Array.isArray(err.body)) {
-            err.body.forEach((x) => errorMsg += x);
-        }
-        else if (err.body) {
-            if (err.body instanceof ProgressEvent) {
-                errorMsg = 'Kon geen verbinding maken met de server';
-            }
-            else if (err.body.text) {
-                errorMsg += err.body.text;
-            }
-            else {
-                errorMsg += err.body;
-            }
-        }
-        if (err.message) {
-            errorMsg += err.message;
-        }
-        if (typeof err === 'string' || err instanceof String) {
-            errorMsg += err;
-        }
-        if (errorMsg !== '') {
-            return errorMsg;
-        }
-    }
-}
-
 class MessageBuilder {
     static rwpDataNietGevonden(err) {
         return new Message(Severity.ERROR, 'Error bij ophalen van rijwegplan data: ' + err);
@@ -2858,7 +2827,7 @@ class ActieHelper {
         if (ActieHelper.isKantCodeLinks(kantcode)) {
             return wissel.getLeft();
         }
-        return undefined;
+        return null;
     }
     bepaalPuicVoorWisselSlijpenActie(actie) {
         const storingsSymboolPuic = this.sbmService.getSBWissel(actie.wisselNaam, actie.pplgNaam)?.getStoringSymboolPuic();
@@ -2880,16 +2849,10 @@ class RitdelenLijstComponent {
     constructor(store, sbmService) {
         this.store = store;
         this.sbmService = sbmService;
-        this.nietGeplandeActies = [];
         this.focusEmitter = new EventEmitter();
         this.keurAlleActiesGoed = new EventEmitter();
-        this.ritdeelViewModels = [];
         this.selectedRitdeelActies = [];
         this.selectedRitdeelOngeplandeActies = [];
-        this.disableActieKnoppenVanRitdeel = true;
-        this.editable = false;
-        this.ongeplandeActiesMap = new ArrayMultimap();
-        this.geplandeActies = new ArrayMultimap();
         this.NG_ACTIE_PREFIX = '* ';
         this.subscriptions = [];
         this.subscriptions.push(store.select('ritDelen').subscribe((ritdelen) => {
@@ -2900,6 +2863,9 @@ class RitdelenLijstComponent {
         this.subscriptions.push(store.select('ongeplandeActies').subscribe(acties => this.ongeplandeActiesMap = acties));
         this.subscriptions.push(store.select('geplandeActies').subscribe(acties => this.geplandeActies = acties));
         this.subscriptions.push(store.select('editable').subscribe(editable => this.editable = editable));
+        // listen to changes from svg-viewer-component, saving ritdeel in store isn't cool because of all the gwt in it. This is
+        // just to make changes within the angular lifecycle.
+        this.subscriptions.push(store.select('selectedRitdeelId').pipe(filter(id => !id)).subscribe(this.deselectRitdeel));
         this.subscriptions.push(combineLatest([
             this.store.select('ritDelen'),
             this.store.select('ongeplandeActies')
@@ -2936,14 +2902,12 @@ class RitdelenLijstComponent {
         this.store.dispatch(deleteRitdeel(ritdeel));
     }
     deleteActiesUitRit() {
-        this.selectedRitdeel?.acties.slice().forEach(actie => {
+        this.selectedRitdeel.acties.slice().forEach(actie => {
             this.deleteActieUitRit(actie);
         });
     }
     deleteActieUitRit(actie) {
-        if (!this.selectedRitdeel)
-            return;
-        const acties = this.selectedRitdeel.acties ?? [];
+        const acties = this.selectedRitdeel.acties;
         const idx = acties.indexOf(actie);
         if (idx >= 0) {
             this.verhuisActieNaarOngepland(actie);
@@ -3071,13 +3035,13 @@ class RitdelenLijstComponent {
         return `${prefix}${ActieHelper.getVSTActieOmschrijving(actie)}`;
     }
     bepaalPrefixVoorActieOmschrijving(actie) {
-        const noPrefix = '';
-        if (this.selectedRitdeel?.acties.includes(actie)) {
+        const prefix = '';
+        if (this.selectedRitdeel.acties.includes(actie)) {
             // Afwijkende naam bij niet gevisualiseerde actie in rit
             const puics = this.geplandeActies.get(actie);
-            return puics.length > 0 ? noPrefix : this.NG_ACTIE_PREFIX;
+            return puics.length > 0 ? prefix : this.NG_ACTIE_PREFIX;
         }
-        return noPrefix;
+        return prefix;
     }
     actieVanKmTekst(actie) {
         if (ActieHelper.isWisselSlijpenActie(actie)) {
@@ -3098,7 +3062,6 @@ class RitdelenLijstComponent {
         return ritdeel.getPplgString();
     }
     getKantCode(stand) {
-        // @ts-ignore
         if (stand === window['domein'].Stand.LINKS) {
             return 'L';
         }
@@ -3235,6 +3198,40 @@ class RitdeelViewModel {
     }
 }
 
+class CarouselControlsComponent {
+    constructor(store) {
+        this.store = store;
+        this.paginationSize = 4;
+        this.ritdelen$ = this.store.select('ritDelen').pipe(filter(r => r?.length > 0));
+        this.kanLinks$ = this.ritdelen$.pipe(map(r => this.kanLinksNavigeren(r)));
+        this.kanRechts$ = this.ritdelen$.pipe(map(r => this.kanRechtsNavigeren(r)));
+    }
+    kanLinksNavigeren(ritDelen) {
+        return ritDelen.length > this.paginationSize && !ritDelen[0].isBinnenWindow();
+    }
+    kanRechtsNavigeren(ritDelen) {
+        return ritDelen.length > this.paginationSize && !ritDelen[ritDelen.length - 1].isBinnenWindow();
+    }
+    navigeerNaarLinks(event) {
+        this.store.dispatch(navigeer(event?.ctrlKey ? -1 : -(this.paginationSize - 1), this.paginationSize, this.iaversieinfo));
+    }
+    navigeerNaarRechts(event) {
+        this.store.dispatch(navigeer(event?.ctrlKey ? 1 : this.paginationSize - 1, this.paginationSize, this.iaversieinfo));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CarouselControlsComponent, deps: [{ token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CarouselControlsComponent, selector: "carousel-controls", inputs: { paginationSize: "paginationSize", iaversieinfo: "iaversieinfo", sideNavOpen: "sideNavOpen" }, ngImport: i0, template: "<div *ngIf=\"ritdelen$ | async\">\n    <a class=\"loxia-carousel-control-prev\" [ngClass]=\"(sideNavOpen)?'carousel-sidebar-open':'carousel-sidebar'\" role=\"button\"\n        data-slide=\"prev\" (click)=\"navigeerNaarLinks($event)\" [hidden]=\"(kanLinks$ | async) === false\">\n    <span id=\"previous-page\" class=\"loxia-carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n    <span class=\"loxia-sr-only\">Previous</span>\n</a>\n    <a class=\"loxia-carousel-control-next\" style=\"width: 2%;\" role=\"button\" data-slide=\"next\" (click)=\"navigeerNaarRechts($event)\"\n       [hidden]=\"(kanRechts$ | async) === false\">\n        <span id=\"next-page\" class=\"loxia-carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"loxia-sr-only\">Next</span>\n    </a>\n</div>\n", styles: [".loxia-carousel-control-prev{left:0}.loxia-carousel-control-next{right:0}.loxia-carousel-control-next-icon,.loxia-carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:50%/100% 100% no-repeat}.loxia-carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next:focus,.loxia-carousel-control-next:hover,.loxia-carousel-control-prev:focus,.loxia-carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.loxia-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loxia-carousel-control-next,.loxia-carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}.carousel-sidebar{width:2%}.carousel-sidebar-open{width:2%;transition:all .3s;left:470px}[hidden]{display:none!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CarouselControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'carousel-controls', template: "<div *ngIf=\"ritdelen$ | async\">\n    <a class=\"loxia-carousel-control-prev\" [ngClass]=\"(sideNavOpen)?'carousel-sidebar-open':'carousel-sidebar'\" role=\"button\"\n        data-slide=\"prev\" (click)=\"navigeerNaarLinks($event)\" [hidden]=\"(kanLinks$ | async) === false\">\n    <span id=\"previous-page\" class=\"loxia-carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n    <span class=\"loxia-sr-only\">Previous</span>\n</a>\n    <a class=\"loxia-carousel-control-next\" style=\"width: 2%;\" role=\"button\" data-slide=\"next\" (click)=\"navigeerNaarRechts($event)\"\n       [hidden]=\"(kanRechts$ | async) === false\">\n        <span id=\"next-page\" class=\"loxia-carousel-control-next-icon\" aria-hidden=\"true\"></span>\n        <span class=\"loxia-sr-only\">Next</span>\n    </a>\n</div>\n", styles: [".loxia-carousel-control-prev{left:0}.loxia-carousel-control-next{right:0}.loxia-carousel-control-next-icon,.loxia-carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:50%/100% 100% no-repeat}.loxia-carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e\")}.loxia-carousel-control-next:focus,.loxia-carousel-control-next:hover,.loxia-carousel-control-prev:focus,.loxia-carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.loxia-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loxia-carousel-control-next,.loxia-carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}.carousel-sidebar{width:2%}.carousel-sidebar-open{width:2%;transition:all .3s;left:470px}[hidden]{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: i2$1.Store }], propDecorators: { paginationSize: [{
+                type: Input
+            }], iaversieinfo: [{
+                type: Input
+            }], sideNavOpen: [{
+                type: Input
+            }] } });
+
 class ViewerControlsComponent {
     constructor(store, viewerControlsService, bewegingUtils) {
         this.store = store;
@@ -3244,7 +3241,6 @@ class ViewerControlsComponent {
         this.printing$ = this.viewerControlsService.isPrinting$();
         this.valideRit$ = this.viewerControlsService.isValideRit$();
         this.subscriptions = new Subscription();
-        this.editable = false;
         this.subscriptions.add(this.store.select('editable').subscribe(editable => this.editable = editable));
     }
     ngOnChanges({ treinpad }) {
@@ -3328,7 +3324,7 @@ class ActiePopoverBepaler {
             ongeplandeActies.entries.forEach(entry => {
                 const treinNummerActieInfos = puicNaarOngeplandeActieMap.get(entry.key);
                 if (!treinNummerActieInfos?.map(({ actie }) => actie).includes(entry.value.actie)) {
-                    puicNaarOngeplandeActieMap.put(entry.key, { actie: entry.value.actie });
+                    puicNaarOngeplandeActieMap.put(entry.key, { treinNummer: undefined, actie: entry.value.actie });
                 }
             });
         }
@@ -3388,15 +3384,12 @@ class SvgVisualisatieComponent {
         this.actieHelper = actieHelper;
         this.sbmService = sbmService;
         this.editorService = editorService;
-        this.nietGeplandeActies = [];
-        this.useClickArea = false;
         this.svgInfos$ = this.store.select('svgInfos');
         this.popoverInfos = [];
         this.clickableIds = [];
         this.rightClickableIds = [];
         this.contextMenuActions = [];
         this.contextMenuStyle = { display: 'none' };
-        this.editable = false;
         this.puicNaarBeginSeinRitdeel = new Map();
         this.puicNaarEindSeinCombinatie = new Map();
         this.puicNaarAlternatieveRoute = new Map();
@@ -3420,7 +3413,7 @@ class SvgVisualisatieComponent {
         }));
     }
     ngOnInit() {
-        document.getElementById('contextMenu')?.addEventListener('mouseleave', () => this.hideContextMenu());
+        document.getElementById('contextMenu').addEventListener('mouseleave', () => this.hideContextMenu());
     }
     ngOnDestroy() {
         this.subscriptions.forEach(s => s.unsubscribe());
@@ -3447,6 +3440,7 @@ class SvgVisualisatieComponent {
                 this.store.dispatch(navigeerBuitenRit(puic));
             }
         }
+        this.store.dispatch(SetSelectedRitdeel(undefined));
     }
     handleImxviewRightClick(evt) {
         const fn = () => {
@@ -3590,7 +3584,7 @@ class SvgVisualisatieComponent {
         });
         this.viewerControlsService.setValideRit(!gebrokenRit);
         this.store.dispatch(SetGeplandeActies(actieOpRitSelectiePuics));
-        const actieOpRitSelectiePuicsArray = Array.from(actieOpRitSelectiePuics.values()).reduce((acc, val) => acc.concat(val), []);
+        const actieOpRitSelectiePuicsArray = Utils.flatMap(Array.from(actieOpRitSelectiePuics.values()), x => x);
         this.store.dispatch(SetActieOpRitSelectieIds(actieOpRitSelectiePuicsArray));
         ritSelectiePuics = ritSelectiePuics.filter(item => actieOpRitSelectiePuicsArray.indexOf(item) < 0); // make mutually exclusive
         this.store.dispatch(SetRitSelectieIds(ritSelectiePuics));
@@ -4042,10 +4036,10 @@ class Ritdeel {
     getZichtbaarheidBuitenPaginatie() {
         return this.zichtbaarBuitenPaginatie;
     }
-    bepaalTopologieElementen(sbmService) {
-        const topoElementen = sbmService.bepaalRouteElementen(this.getRoute());
+    bepaalTopologieElementen(signaleringsBeeldManagerService) {
+        const topoElementen = signaleringsBeeldManagerService.bepaalRouteElementen(this.getRoute());
         if (this.heeftVrijebaanInfo()) {
-            const vrijebaanTopoElementen = sbmService.bepaalRouteElementen(this.getVrijebaanPrlRoute());
+            const vrijebaanTopoElementen = signaleringsBeeldManagerService.bepaalRouteElementen(this.getVrijebaanPrlRoute());
             topoElementen.push(...vrijebaanTopoElementen);
         }
         this.topoElementen = topoElementen;
@@ -4091,7 +4085,7 @@ class RitLezerService {
         ritDelen.push(new Ritdeel(dwangInfo, beweging.ritActies, beweging, vrijebaanDwangInfo, vervolgSpoor, []));
     }
     extractVrijebaanDwangInfo(beweging, rijwegPlan, rijweg) {
-        let vrijebaanDwangInfo = undefined;
+        let vrijebaanDwangInfo = null;
         let vervolgSpoor;
         if (beweging.naarSpoor.endsWith(SPOOR_NAAR_VRIJEBAAN_POSTFIX) ||
             beweging.naarSpoor.endsWith(SPOOR_NAAR_VEERWISSEL_VRIJEBAAN_POSTFIX)) {
@@ -4105,9 +4099,9 @@ class RitLezerService {
                     vrijebaanRijweg = vrijebaanRijwegen[0];
                     vrijebaanDwang = vrijebaanRijweg.getDwangVoorDwangNummer(0);
                     vervolgSpoor = vrijebaanRijwegplan.getVervolgSpoor(vrijebaanRijweg);
-                    vrijebaanDwangInfo =
-                        new RijwegplanRijwegDwangCombinatie(vrijebaanRijwegplan, vrijebaanRijweg, vrijebaanDwang);
                 }
+                vrijebaanDwangInfo =
+                    new RijwegplanRijwegDwangCombinatie(vrijebaanRijwegplan, vrijebaanRijweg, vrijebaanDwang);
             }
         }
         return { vrijebaanDwangInfo, vervolgSpoor };
@@ -4414,7 +4408,7 @@ class LaadRouteFilesEffect {
             const promise = this.editorService.laadRouteFiles(actie.iaversieinfo.versie, pplgs);
             promise.then(() => {
                 this.updateRitdelen(actie);
-            }, (err) => {
+            }, err => {
                 this.messagesService.showMessage(MessageBuilder.rwpDataNietGevonden(Utils.getValidErorrMessage(err)));
             });
         });
@@ -4474,14 +4468,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class LaadSignaleringsbeeldenEffect {
-    constructor(actions$, store, signaleringsBeeldManagerService, editorService, sbiResource, connectorService, messagesService) {
+    constructor(actions$, store, signaleringsBeeldManagerService, editorService, sbiResource, connectorService, messagesSerivce) {
         this.actions$ = actions$;
         this.store = store;
         this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.editorService = editorService;
         this.sbiResource = sbiResource;
         this.connectorService = connectorService;
-        this.messagesService = messagesService;
+        this.messagesSerivce = messagesSerivce;
         this.SVG_PIXEL_RUIMTE = 30;
         this.verwerkRitdelen$ = createEffect(() => this.actions$.pipe(ofType(setRitDelen, navigeer, navigeerVanaf), withLatestFrom(this.store), map(([actie, storeState]) => {
             this.store.dispatch(SetOngeplandeActiesBepaald(false));
@@ -4496,13 +4490,13 @@ class LaadSignaleringsbeeldenEffect {
     }
     handleSignaleringsbeeldInfo({ actie, storeState }) {
         return this.sbiResource.laadSignaleringsbeeldInfo(this.createSignaleringsbeeldInfoQueryDto(actie.pplgs, storeState.iaVersie)).pipe(take(1), tap((dtos) => this.processResponse({ dtos, storeState, actie })), catchError((err) => {
-            this.messagesService.showMessage(MessageBuilder.nietGevondenSBI(err));
+            this.messagesSerivce.showMessage(MessageBuilder.nietGevondenSBI(err));
             return throwError(() => err);
         }));
     }
     processResponse({ dtos, storeState, actie }) {
         if (dtos && dtos.filter(dto => dto.metVisualisatie).length > 12) {
-            this.messagesService.showMessage(MessageBuilder.meerDan12BladenGevonden(dtos.length));
+            this.messagesSerivce.showMessage(MessageBuilder.meerDan12BladenGevonden(dtos.length));
         }
         this.store.dispatch(SetSignaleringsbeeldInfoDtos(dtos, storeState.iaVersie, actie.rit, actie.paginationSize, actie.ritGewijzigdToegestaan));
         this.store.dispatch(SetVisibleSignaleringsbeeldInfoDtos(dtos));
@@ -4515,11 +4509,11 @@ class LaadSignaleringsbeeldenEffect {
         return this.sbiResource.laadSignaleringsbeeldInfo(this.createSignaleringsbeeldInfoQueryDto([rand.getPPLG(), otherPplg], storeState.iaVersie)).pipe(map(dtos => ({ dtos, storeState })));
     }
     loadSignaleringsbeelden({ dtos, storeState }) {
-        return this.editorService.laadSignaleringsbeelden(storeState.iaVersie.versie, dtos).pipe(map(svgDataUrls => ({ svgDataUrls, ritDelen: storeState.ritDelen, dtos })));
+        return this.editorService.laadSignaleringsbeelden(storeState.iaVersie.versie, dtos).pipe(map(svgDataUrls => ({ svgDataUrls, storeState, dtos })));
     }
-    processSvgsAndUpdateRitdelen({ svgDataUrls, ritDelen, dtos }) {
+    processSvgsAndUpdateRitdelen({ svgDataUrls, storeState, dtos }) {
         this.verwerkSvgs(svgDataUrls);
-        const nieuweRitdelen = this.updateRitdelen(ritDelen, dtos);
+        const nieuweRitdelen = this.updateRitdelen(storeState.ritDelen, dtos);
         this.store.dispatch(UpdateVisibleSignaleringsbeeldInfoDtos(dtos));
         this.store.dispatch(updateRitDelen(nieuweRitdelen));
     }
@@ -4536,7 +4530,7 @@ class LaadSignaleringsbeeldenEffect {
             this.verwerkSvgs(svgDataUrls);
             this.updateState(ritDelen, visibleDtos, storeState, visibleRitPplgs, loadingDtos, isInit, storeDtos);
         }), catchError(err => {
-            this.messagesService.showMessage(MessageBuilder.rwpDataNietGevonden(Utils.getValidErorrMessage(err)));
+            this.messagesSerivce.showMessage(MessageBuilder.rwpDataNietGevonden(Utils.getValidErorrMessage(err)));
             throw err;
         })).subscribe();
     }
@@ -4591,8 +4585,8 @@ class LaadSignaleringsbeeldenEffect {
         dtos.filter(d => !visibleDtos.includes(d)).forEach(d => d.metVisualisatie = false);
         return visibleDtos;
     }
-    distinct(value, index, values) {
-        return values.indexOf(value) === index;
+    distinct(value, index, self) {
+        return self.indexOf(value) === index;
     }
     addPrevNonVisibleDto(firstIdx, ritdelen, loadingDtos, visibleRitPplgs, allDtos) {
         if (firstIdx >= 0) {
@@ -4681,7 +4675,7 @@ class LaadSignaleringsbeeldenEffect {
                 }
             }
         }
-        this.updateZichtbaarheidAangrenzendeRitdelen(min, max, ritdelen, visibleDtos);
+        this.updateZichtbaarheidAangrezendeRitdelen(min, max, ritdelen, visibleDtos);
         return this.updateZichtbaarheidBuitenWindow(ritdelen, visibleDtos);
     }
     updateZichtbaarheidBuitenWindow(nieuweRitdelen, visibleDtos) {
@@ -4697,7 +4691,7 @@ class LaadSignaleringsbeeldenEffect {
         }
         return nieuweRitdelen;
     }
-    updateZichtbaarheidAangrenzendeRitdelen(min, max, nieuweRitdelen, visibleDtos) {
+    updateZichtbaarheidAangrezendeRitdelen(min, max, nieuweRitdelen, visibleDtos) {
         let i = min - 1;
         while (i >= 0) {
             i = this.updateZichtbaarHeid(i, 0, visibleDtos, nieuweRitdelen) - 1;
@@ -4832,11 +4826,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: BewegingVerrijkerService }] });
 
 class RitdelenEffect {
-    constructor(actions$, store, sbmService, editorService) {
+    constructor(actions$, store, sbmService, rijwegPlanEditorService) {
         this.actions$ = actions$;
         this.store = store;
         this.sbmService = sbmService;
-        this.editorService = editorService;
+        this.rijwegPlanEditorService = rijwegPlanEditorService;
         this.updateRitDelen$ = createEffect(() => this.actions$.pipe(ofType(updateRitDelen), withLatestFrom(this.store), map(([actie, _storeState]) => {
             const nieuweRitDelen = actie.ritDelen.map(ritDeel => ritDeel.isZichtbaar() ?
                 ritDeel.copyMetAlternatieveRoutes(this.sbmService.bepaalAlternativeRoutes(ritDeel.getRijweg())) : ritDeel);
@@ -4854,25 +4848,25 @@ class RitdelenEffect {
             return setRitdelenAfterUpdate(ritDelen);
         })));
         this.ritdeelInvoegen$ = createEffect(() => this.actions$.pipe(ofType(ritdeelInvoegen), withLatestFrom(this.store), map(([actie, storeState]) => {
-            const ritDelen = this.ritdeelInvoegenFunc(storeState.ritDelen, actie.nieuweRoute);
+            const ritDelen = this.ritdeelInvoegenFunc(storeState.ritDelen, actie.nieuweRoute, this.rijwegPlanEditorService, this.sbmService);
             return setRitdelenAfterUpdate(ritDelen);
         })));
     }
-    ritdeelInvoegenFunc(ritDelen, nieuweRoute) {
+    ritdeelInvoegenFunc(ritDelen, nieuweRoute, rijwegPlanEditorService, sbmService) {
         const origineelRitdeel = nieuweRoute.beginSeinOpRitdeel.ritdeel;
         const beginSein = nieuweRoute.beginSeinOpRitdeel.sein;
-        const rijwegplan = this.editorService.getRijwegplan(beginSein.getPPLG());
+        const rijwegplan = rijwegPlanEditorService.getRijwegplan(beginSein.getPPLG());
         const dwangen = JsJavaUtil.listToArray(rijwegplan.getOnderliggendeDwangenTotEnVanSein(origineelRitdeel.getDwang(), beginSein));
         const isSamengesteldeRoute = dwangen[0] && dwangen[1];
         let newRitdeel1 = origineelRitdeel;
         if (isSamengesteldeRoute) {
-            newRitdeel1 = this.verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, ritDelen);
+            newRitdeel1 = this.verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, sbmService, ritDelen);
         }
         if (nieuweRoute.combinatieVoorEindsein.isVrijeBaanRijweg()) {
-            this.extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute);
+            this.extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute, sbmService);
         }
         else {
-            this.maakNieuwRitdeel(newRitdeel1, nieuweRoute, ritDelen);
+            this.maakNieuwRitdeel(newRitdeel1, nieuweRoute, sbmService, ritDelen);
         }
         if (isSamengesteldeRoute) {
             ritDelen.splice(ritDelen.indexOf(origineelRitdeel), 1);
@@ -4887,38 +4881,38 @@ class RitdelenEffect {
             }
         }
     }
-    verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, ritDelen) {
+    verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, sbmService, ritDelen) {
         // dwangen in 2 nieuwe ritdelen verwerken voor de knip
         const nieuweRijweg1 = rijwegplan.getRijwegVoorSeinen(dwangen[0].getRoute().getBeginSein(), dwangen[0].getRoute().getEindSein());
         const dwangInfo1 = new RijwegplanRijwegDwangCombinatie(rijwegplan, nieuweRijweg1, dwangen[0]);
-        const newRitdeel1 = new Ritdeel(dwangInfo1, [], undefined, undefined, undefined, []);
+        const newRitdeel1 = new Ritdeel(dwangInfo1, [], null, null, null, []);
         // remove vrijbaan info uit ritdeel
-        newRitdeel1.vrijebaanRijwegplanRijwegDwangCombi = undefined;
-        newRitdeel1.vervolgSpoor = undefined;
-        newRitdeel1.bepaalTopologieElementen(this.sbmService);
+        newRitdeel1.vrijebaanRijwegplanRijwegDwangCombi = null;
+        newRitdeel1.vervolgSpoor = null;
+        newRitdeel1.bepaalTopologieElementen(sbmService);
         this.insertRitdeel(ritDelen, origineelRitdeel, newRitdeel1);
         const nieuweRijweg2 = rijwegplan.getRijwegVoorSeinen(dwangen[1].getRoute().getBeginSein(), dwangen[1].getRoute().getEindSein());
         const dwangInfo2 = new RijwegplanRijwegDwangCombinatie(rijwegplan, nieuweRijweg2, dwangen[1]);
-        const newRitdeel2 = new Ritdeel(dwangInfo2, [], undefined, undefined, undefined, []);
-        newRitdeel2.bepaalTopologieElementen(this.sbmService);
+        const newRitdeel2 = new Ritdeel(dwangInfo2, [], null, null, null, []);
+        newRitdeel2.bepaalTopologieElementen(sbmService);
         this.insertRitdeel(ritDelen, newRitdeel1, newRitdeel2);
         return newRitdeel1;
     }
-    extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute) {
+    extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute, sbmService) {
         newRitdeel1.vrijebaanRijwegplanRijwegDwangCombi = nieuweRoute.combinatieVoorEindsein;
         const vbrwp = nieuweRoute.combinatieVoorEindsein.rijwegplan;
         newRitdeel1.vervolgSpoor = vbrwp.getVervolgSpoor(nieuweRoute.combinatieVoorEindsein.rijweg);
-        newRitdeel1.bepaalTopologieElementen(this.sbmService);
+        newRitdeel1.bepaalTopologieElementen(sbmService);
     }
-    maakNieuwRitdeel(newRitdeel1, nieuweRoute, ritDelen) {
+    maakNieuwRitdeel(newRitdeel1, nieuweRoute, sbmService, ritDelen) {
         let newRitdeel = this.createRitdeel(nieuweRoute);
-        const altRoutes = this.sbmService.bepaalAlternativeRoutes(newRitdeel.getRijweg());
+        const altRoutes = sbmService.bepaalAlternativeRoutes(newRitdeel.getRijweg());
         newRitdeel = newRitdeel.copyMetAlternatieveRoutes(altRoutes);
-        newRitdeel.bepaalTopologieElementen(this.sbmService);
+        newRitdeel.bepaalTopologieElementen(sbmService);
         this.insertRitdeel(ritDelen, newRitdeel1, newRitdeel);
     }
     createRitdeel(nieuweRoute) {
-        return new Ritdeel(nieuweRoute.combinatieVoorEindsein, [], undefined, undefined, undefined, []);
+        return new Ritdeel(nieuweRoute.combinatieVoorEindsein, [], null, null, null, []);
     }
     insertRitdeel(ritdelen, naRitdeelPositie, newRitdeel) {
         const idx = ritdelen.indexOf(naRitdeelPositie);
@@ -4969,17 +4963,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: i4.SignaleringsbeeldSvgUtilityService }] });
 
-class ProgressIndicator {
-    constructor(lowerText, upperText, iconClass) {
-        this.lowerText = '';
-        this.upperText = '';
-        this.iconClass = '';
-        this.lowerText = lowerText ?? this.lowerText;
-        this.upperText = upperText ?? this.upperText;
-        this.iconClass = iconClass ?? this.iconClass;
-    }
-}
-
 class NieuweRoute {
     constructor(beginSeinOpRitdeel, combinatieVoorEindsein) {
         this.beginSeinOpRitdeel = beginSeinOpRitdeel;
@@ -5052,7 +5035,7 @@ function addRitdeelActieFunc(ritDelen, { ritDeel, actie }) {
 const onIdsActionHandler = (action) => on(action, (_, { ids }) => ids);
 const createIdsReducer = (action) => createReducer([], onIdsActionHandler(action));
 const editableReducer = createReducer(true, on(setEditable, (_, { editable }) => editable));
-const progressIndicatorReducer = createReducer({}, on(ShowProgress, () => ({ progressIndicator: new ProgressIndicator() })), on(ClearProgress, () => ({})));
+const progressIndicatorReducer = createReducer(undefined, on(ShowProgress, () => ({ progressIndicator: {} })), on(ClearProgress, () => undefined));
 const svgInfoReducer = createReducer([], on(SetSvgInfos, (_, { svgInfos }) => svgInfos));
 const debugReducer = createReducer(false, on(SetDebug, (_, { debug }) => debug));
 const ritSelectieIdsReducer = createIdsReducer(SetRitSelectieIds);
@@ -5078,10 +5061,12 @@ const ongeplandeActieReducer = createReducer(new ArrayMultimap(), on(SetOngeplan
     ongeplandeActie.puics.forEach(puic => ongeplandeActies.delete(puic, ongeplandeActie));
     return new ArrayMultimap(ongeplandeActies);
 }));
-const ongeplandeActieSelectieIdsReducer = createReducer([], onIdsActionHandler(SetOngeplandeActieSelectieIds), on(AddOngeplandeActie, (ids, { ongeplandeActie }) => {
+const ongeplandeActieSelectieIdsReducer = createReducer([], 
+// on(MstActions.SetOngeplandeActieSelectieIds, (_, { ids }) => ids),
+onIdsActionHandler(SetOngeplandeActieSelectieIds), on(AddOngeplandeActie, (ids, { ongeplandeActie }) => {
     ongeplandeActie.puics.filter(puic => !ids.includes(puic)).forEach(puic => ids.push(puic));
     return [...ids];
-}), on(DeleteOngeplandeActieSelectieId, (ids, { id }) => ids.includes(id) ? ids.filter(_id => _id !== id) : ids));
+}), on(DeleteOngeplandeActieSelectieId, (ids, { id }) => [].concat(ids.includes(id) ? ids.filter(_id => _id !== id) : ids)));
 const gebrokenRitSelectieIdsReducer = createIdsReducer(SetGebrokenRitSelectieIds);
 const alternatievenSelectieIdsReducer = createIdsReducer(SetAlternatievenSelectieIds);
 const beginSeinSelectieIdsReducer = createIdsReducer(SetBeginSeinSelectieIds);
@@ -5090,15 +5075,16 @@ const alternatievenClickableIdsReducer = createIdsReducer(SetAlternatievenClicka
 const eindSeinenClickableIdsReducer = createIdsReducer(SetEindSeinenClickableIds);
 const connectorClickableIdsReducer = createIdsReducer(SetConnectorenClickableIds);
 const beginSeinRightClickableIdsReducer = createIdsReducer(SetBeginSeinRightClickableIds);
-const nieuweRouteReducer = createReducer(undefined, on(SetNieuwRouteBeginSein, (_, { startSeinOpRitdeel }) => new NieuweRoute(startSeinOpRitdeel, null)), on(SetNieuwRouteEindSein, (nieuweRoute, { combinatieVoorEindsein }) => new NieuweRoute(nieuweRoute.beginSeinOpRitdeel, combinatieVoorEindsein)), on(ResetNieuweRoute, () => undefined));
+const nieuweRouteReducer = createReducer(new NieuweRoute(null, null), on(SetNieuwRouteBeginSein, (_, { startSeinOpRitdeel }) => new NieuweRoute(startSeinOpRitdeel, null)), on(SetNieuwRouteEindSein, (nieuweRoute, { combinatieVoorEindsein }) => new NieuweRoute(nieuweRoute.beginSeinOpRitdeel, combinatieVoorEindsein)), on(ResetNieuweRoute, () => new NieuweRoute(null, null)));
 const signaleringsbeeldInfoDtosReducer = createReducer([], on(SetSignaleringsbeeldInfoDtos, (_, { dtos }) => dtos), on(UpdateSignaleringsbeeldInfoDtos, (_, { dtos }) => [...dtos]));
 const visibleSbInfoDtosReducer = createReducer([], on(SetVisibleSignaleringsbeeldInfoDtos, (_, { dtos }) => dtos), on(UpdateVisibleSignaleringsbeeldInfoDtos, (_, { dtos }) => [...dtos]));
-const iaVersieReducer = createReducer({ versie: 'unknown', ingangsDatum: new Date() }, on(SetIaVersie, (_, { iaVersie }) => Object.assign({}, iaVersie, { versie: iaVersie.versie.toUpperCase() })));
+const iaVersieReducer = createReducer({}, on(SetIaVersie, (_, { iaVersie }) => Object.assign({}, iaVersie, { versie: iaVersie.versie.toUpperCase() })));
 const algemeneRitInfoDtoReducer = createReducer({}, on(SetAlgemeneRitInfo, (_, { algemeneRitInfoDto }) => algemeneRitInfoDto));
 const ongeplandeActiesBepaaldReducer = createReducer(false, on(SetOngeplandeActiesBepaald, (_, { bepaald }) => bepaald));
-const nieuweBewegingReducer = createReducer([], on(UpdateRit, (_, { bewegingen }) => bewegingen));
-const baseUrlReducer = createReducer('', on(SetBaseUrl, (_, { baseUrl }) => baseUrl));
-const focusIdsReducer = createReducer([], on(focusOpIds, (_, { puics }) => puics));
+const nieuweBewegingReducer = createReducer({}, on(UpdateRit, (_, { bewegingen }) => bewegingen));
+const baseUrlReducer = createReducer(undefined, on(SetBaseUrl, (_, { baseUrl }) => baseUrl));
+const focusIdsReducer = createReducer({}, on(focusOpIds, (_, { puics }) => puics));
+const selectedRitdeelIdReducer = createReducer({}, on(SetSelectedRitdeel, (_, { id }) => id));
 const storeReducers = {
     ritDelen: ritdelenReducer,
     ritSelectieIds: ritSelectieIdsReducer,
@@ -5127,9 +5113,9 @@ const storeReducers = {
     nieuweBewegingen: nieuweBewegingReducer,
     baseUrl: baseUrlReducer,
     focusIds: focusIdsReducer,
+    selectedRitdeelId: selectedRitdeelIdReducer
 };
 
-// @ts-nocheck
 class ZoneUtil {
     constructor(ngZone) {
         this.ngZone = ngZone;
@@ -5192,7 +5178,6 @@ class MstViewerModule {
     constructor(service, zoneUtil) {
         this.service = service;
         // maak de EditorService toegankelijk voor GWT code
-        // @ts-ignore
         window['rpe'] = {
             EditorService: zoneUtil.proxy(service)
         };