@loxia/mst-viewer 8.1.3-202512010252 → 8.1.3-202512010758

package/fesm2022/loxia-mst-viewer.mjs

@@ -1,23 +1,23 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, Injectable, ChangeDetectionStrategy, ViewChild, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, NgModule, SkipSelf, HostListener } from '@angular/core';
 import * as i7 from '@loxia/imx-viewer';
-import { SelectieInfo, PopoverInfo, Point, SvgInfo, ImxViewerComponent, ImxViewerModule } from '@loxia/imx-viewer';
-import * as i4 from '@loxia/rijwegen';
+import { PopoverInfo, Point, SvgInfo, ImxViewerComponent, SelectieInfo, ImxViewerModule } from '@loxia/imx-viewer';
+import * as i3 from '@loxia/rijwegen';
 import { JsJavaUtil, RijwegenModule } from '@loxia/rijwegen';
 import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 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, Subscription, from, combineLatest, of, throwError } from 'rxjs';
+import { BehaviorSubject, from, Subscription, combineLatest, forkJoin, of, throwError } from 'rxjs';
+import { filter, map, take, tap, catchError, withLatestFrom, switchMap } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpContext, HttpParams } from '@angular/common/http';
 import { __decorate } from 'tslib';
-import * as i1 from '@ngx-resource/core';
-import { Resource, ResourceAction, ResourceRequestMethod, ResourceParams, ResourceModel } from '@ngx-resource/core';
-import { take, filter, map, catchError, withLatestFrom, switchMap, tap } from 'rxjs/operators';
-import * as i1$1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
+import * as i1$1 from '@ngx-resource/core';
+import { Resource, ResourceAction, ResourceParams, ResourceModel } from '@ngx-resource/core';
 
 class Message {
     constructor(severity, text, timeout = 0) {
@@ -41,7 +41,7 @@ class MessageComponent {
         this.onClearMessage = new EventEmitter();
     }
     ngOnInit() {
-        if (this.message.timeout > 0) {
+        if (this.message && this.message.timeout > 0) {
             setTimeout(() => {
                 this.closeMessage({ stopPropagation: () => null });
             }, this.message.timeout);
@@ -53,12 +53,12 @@ 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'loxia-message', 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"] }]
         }], propDecorators: { message: [{
@@ -83,10 +83,10 @@ class MessagesService {
     get messages$() {
         return this._messages$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -98,32 +98,109 @@ class MessagesComponent {
     trackbyIndex(index) {
         return index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesComponent, deps: [{ token: MessagesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MessagesComponent, selector: "loxia-messages", ngImport: i0, template: "<div class=\"messages w-full\">\n  <div *ngFor=\"let message of (messagesService.messages$ | async); let i = index; trackBy: trackbyIndex\">\n    <loxia-message [message]=\"message\" (onClearMessage)=\"messagesService.clearMessage($event)\"></loxia-message>\n  </div>\n</div>\n", styles: [".messages{position:fixed;top:0;left:0;z-index:2000;flex-direction:column;display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MessageComponent, selector: "loxia-message", inputs: ["message"], outputs: ["onClearMessage"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesComponent, deps: [{ token: MessagesService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessagesComponent, selector: "loxia-messages", ngImport: i0, template: "<div class=\"messages w-full\">\n  <div *ngFor=\"let message of (messagesService.messages$ | async); let i = index; trackBy: trackbyIndex\">\n    <loxia-message [message]=\"message\" (onClearMessage)=\"messagesService.clearMessage($event)\"></loxia-message>\n  </div>\n</div>\n", styles: [".messages{position:fixed;top:0;left:0;z-index:2000;flex-direction:column;display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MessageComponent, selector: "loxia-message", inputs: ["message"], outputs: ["onClearMessage"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'loxia-messages', template: "<div class=\"messages w-full\">\n  <div *ngFor=\"let message of (messagesService.messages$ | async); let i = index; trackBy: trackbyIndex\">\n    <loxia-message [message]=\"message\" (onClearMessage)=\"messagesService.clearMessage($event)\"></loxia-message>\n  </div>\n</div>\n", styles: [".messages{position:fixed;top:0;left:0;z-index:2000;flex-direction:column;display:flex}\n"] }]
         }], ctorParameters: () => [{ type: MessagesService }] });
 
 class OverlayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: OverlayComponent, selector: "loxia-overlay", ngImport: i0, template: "<div class=\"overlay\">\n    <div class=\"centered-content\">\n        <div class=\"content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{width:100vw;height:0;opacity:1}.centered-content{position:relative;width:100%;height:100%}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay{position:absolute;background-color:#1f2528db;width:100%;height:100%;z-index:1001}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OverlayComponent, selector: "loxia-overlay", ngImport: i0, template: "<div class=\"overlay\">\n    <div class=\"centered-content\">\n        <div class=\"content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{width:100vw;height:0;opacity:1}.centered-content{position:relative;width:100%;height:100%}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay{position:absolute;background-color:#1f2528db;width:100%;height:100%;z-index:1001}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'loxia-overlay', template: "<div class=\"overlay\">\n    <div class=\"centered-content\">\n        <div class=\"content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [":host{width:100vw;height:0;opacity:1}.centered-content{position:relative;width:100%;height:100%}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay{position:absolute;background-color:#1f2528db;width:100%;height:100%;z-index:1001}\n"] }]
         }] });
 
 class ProgressIndicatorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProgressIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ProgressIndicatorComponent, selector: "loxia-progress-indicator", ngImport: i0, 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", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressIndicatorComponent, selector: "loxia-progress-indicator", ngImport: i0, 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", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProgressIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressIndicatorComponent, decorators: [{
             type: Component,
             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) => ({ ritDelen, paginationSize }));
+const setRitdelenAfterUpdate = createAction(SET_RIT_DELEN_AFTER_UPDATE, (ritDelen) => ({ ritDelen }));
+const navigeer = createAction(NAVIGEER, (stapSize, paginationSize) => ({ stapSize, paginationSize }));
+const navigeerVanaf = createAction(NAVIGEER_VANAF, (paginationSize, ritdeel) => ({ paginationSize, 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.sideNavOpen = false;
+        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));
+    }
+    navigeerNaarRechts(event) {
+        this.store.dispatch(navigeer(event?.ctrlKey ? 1 : this.paginationSize - 1, this.paginationSize));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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.14", type: CarouselControlsComponent, selector: "carousel-controls", inputs: { paginationSize: "paginationSize", 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.14", 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
+            }], sideNavOpen: [{
+                type: Input
+            }] } });
+
 const version = '8.1.3-SNAPSHOT';
 
 const SET_EDITABLE = '[mst] SetEditable';
@@ -169,7 +246,8 @@ const LAAD_EN_VERWERK_SIGNALERINGSBEELD_INFO = '[mst] laadEnVerwerkSignaleringsb
 const FOCUS_OP_RITDEEL = '[mst] focusOpRitdeel';
 const FOCUS_OP_IDS = '[mst] focusOpIds';
 const BEPAAL_SB_INFOS = '[mst] bepaalSbInfos';
-const SET_SELECTED_RITDEEL = '[mst] SetSelectedRitdeel';
+const TRIGGER_SELECTIE_UPDATE = '[mst] TriggerSelectieUpdate';
+const SET_SELECTIE_INFOS = '[mst] SetSelectieInfos';
 const setEditable = createAction(SET_EDITABLE, (editable) => ({ editable }));
 const SetRitSelectieIds = createAction(SET_RIT_SELECTIE_IDS, (ids) => ({ ids }));
 const SetGeplandeActies = createAction(SET_GEPLANDE_ACTIES, (geplandeActiesMap) => ({ geplandeActiesMap }));
@@ -213,7 +291,8 @@ 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 }));
+const svgUpdateFinished = createAction(TRIGGER_SELECTIE_UPDATE);
+const setSelectieInfos = createAction(SET_SELECTIE_INFOS, (selectieInfos) => ({ selectieInfos }));
 // do not export return value
 const mstActions = union({
     setEditable,
@@ -252,238 +331,10 @@ const mstActions = union({
     BewegingInvoegen,
     KeurAlleActiesGoed,
     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
+    svgUpdateFinished,
+    setSelectieInfos
 });
 
-let MstLoggingResource = class MstLoggingResource extends Resource {
-    constructor(restHandler, store) {
-        super(restHandler);
-        this.store = store;
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.store.select('baseUrl').subscribe(baseUrl => this.$setUrl(baseUrl)));
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstLoggingResource, deps: [{ token: i1.ResourceHandler }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstLoggingResource }); }
-};
-__decorate([
-    ResourceAction({
-        path: '/',
-        method: ResourceRequestMethod.Post
-    })
-], MstLoggingResource.prototype, "logErrorMessages", void 0);
-MstLoggingResource = __decorate([
-    ResourceParams({
-        pathPrefix: '/mst/services/rest/logging'
-    })
-], MstLoggingResource);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstLoggingResource, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.ResourceHandler }, { type: i2$1.Store }], propDecorators: { logErrorMessages: [] } });
-class MstLoggingDto extends ResourceModel {
-    constructor(data) {
-        super();
-        this.$resource = MstLoggingResource;
-        this.$setData(data);
-    }
-    toJSON() {
-        return {
-            iaVersie: this.iaVersie,
-            meldingLevel: this.meldingLevel,
-            meldingMessage: this.meldingMessage,
-            algemeneRitInfoDto: this.algemeneRitInfoDto,
-            actieDto: this.actieDto,
-            sbinfoDtos: this.sbinfoDtos
-        };
-    }
-    toString() {
-        return `${this.iaVersie},${this.meldingLevel},${this.meldingMessage},${this.algemeneRitInfoDto},
-                ${this.actieDto},${this.sbinfoDtos}`;
-    }
-    $setData(data) {
-        if (data) {
-            this.iaVersie = data.iaVersie;
-            this.meldingLevel = data.meldingLevel;
-            this.meldingMessage = data.meldingMessage;
-            this.algemeneRitInfoDto = data.algemeneRitInfoDto;
-            this.actieDto = data.actieDto;
-            this.sbinfoDtos = data.sbinfoDtos;
-        }
-        return this;
-    }
-}
-class ActieDto {
-    constructor(data) {
-        this.$setData(data);
-    }
-    toJSON() {
-        return {
-            pplgNaam: this.pplgNaam,
-            ritActieTypeOmschrijving: this.ritActieTypeOmschrijving,
-            ritActieStatus: this.ritActieStatus,
-            bewegingId: this.bewegingId,
-            wisselType: this.wisselType,
-            wisselNaam: this.wisselNaam,
-            wisselKantCode: this.wisselKantCode,
-            vanKilometerlint: this.vanKilometerlint,
-            vanKilometrering: this.vanKilometrering,
-            totKilometerlint: this.totKilometerlint,
-            totKilometrering: this.totKilometrering
-        };
-    }
-    toString() {
-        return `${this.pplgNaam},${this.ritActieTypeOmschrijving},${this.ritActieStatus},
-        ${this.bewegingId},${this.wisselType},${this.wisselNaam},${this.wisselKantCode},
-        ${this.vanKilometerlint},${this.vanKilometrering},${this.totKilometerlint},${this.totKilometrering}`;
-    }
-    $setData(data) {
-        if (data) {
-            this.pplgNaam = data.pplgNaam;
-            this.ritActieTypeOmschrijving = data.ritActieTypeOmschrijving;
-            this.ritActieStatus = data.ritActieStatus;
-            this.bewegingId = data.bewegingId;
-            this.wisselType = data.wisselType;
-            this.wisselNaam = data.wisselNaam;
-            this.wisselKantCode = data.wisselKantCode;
-            this.vanKilometerlint = data.vanKilometerlint;
-            this.vanKilometrering = data.vanKilometrering;
-            this.totKilometerlint = data.totKilometerlint;
-            this.totKilometrering = data.totKilometrering;
-        }
-        return this;
-    }
-}
-class AlgemeneRitInfoDto {
-    constructor(data) {
-        this.$setData(data);
-    }
-    toJSON() {
-        return {
-            id: this.id,
-            jaarplanId: this.jaarplanId,
-            volgnummer: this.volgnummer,
-            machineTypeId: this.machineTypeId,
-            machineTypeOmschrijving: this.machineTypeOmschrijving,
-            ritDatum: this.ritDatum,
-            startDatum: this.startDatum,
-            eindDatum: this.eindDatum,
-            ritNaam: this.ritNaam,
-            startLocatie: this.startLocatie,
-            eindLocatie: this.eindLocatie,
-            ritStatus: this.ritStatus,
-            modified: this.modified,
-            modifiedBy: this.modifiedBy,
-            planJobId: this.planJobId
-        };
-    }
-    toString() {
-        return `${this.id},${this.jaarplanId},${this.volgnummer},${this.machineTypeId},${this.machineTypeOmschrijving}
-                ,${this.ritDatum},${this.startDatum},${this.eindDatum},${this.ritNaam},${this.startLocatie}
-                ,${this.eindLocatie},${this.ritStatus},${this.modified},${this.modifiedBy},${this.planJobId}`;
-    }
-    $setData(data) {
-        if (data) {
-            this.id = data.id;
-            this.jaarplanId = data.jaarplanId;
-            this.volgnummer = data.volgnummer;
-            this.machineTypeId = data.machineTypeId;
-            this.machineTypeOmschrijving = data.machineTypeOmschrijving;
-            this.ritDatum = data.ritDatum;
-            this.startDatum = data.startDatum;
-            this.eindDatum = data.eindDatum;
-            this.ritNaam = data.ritNaam;
-            this.startLocatie = data.startLocatie;
-            this.eindLocatie = data.eindLocatie;
-            this.ritStatus = data.ritStatus;
-            this.modified = data.modified;
-            this.modifiedBy = data.modifiedBy;
-            this.planJobId = data.planJobId;
-        }
-        return this;
-    }
-}
-
-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
  *
@@ -547,7 +398,7 @@ class ArrayMultimap {
         return Array.from(new Set(this._entries.map(entry => entry.key)));
     }
     values() {
-        return Utils.flatMap(this._entries, x => x.value);
+        return this._entries.reduce((acc, x) => acc.concat(x.value), []);
     }
     put(key, value) {
         this._entries.push(new MultimapEntry(key, value));
@@ -641,10 +492,10 @@ class SignaleringsBeeldManagerService {
     getEersteVerbindingPuicVoorSplitEngelseWissel(engelsWisselNaam, kantcode) {
         return this.signaleringsBeeldManager.getEersteVerbindingPuicVoorSplitEngelseWissel(engelsWisselNaam, kantcode);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsBeeldManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsBeeldManagerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsBeeldManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsBeeldManagerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsBeeldManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsBeeldManagerService, decorators: [{
             type: Injectable
         }] });
 
@@ -653,6 +504,7 @@ class EditorService {
         this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.initReadyPromise();
     }
+    // Called from GWT only, can be removed when GWT is gone. any is used because it will be removed with GWT
     setEditor(editor) {
         this.editor = editor;
         this.resolveReadyPromise();
@@ -660,6 +512,7 @@ class EditorService {
     isReady() {
         return this.promise;
     }
+    // Called from GWT only, can be removed when GWT is gone
     setSignaleringsBeeldManager(signaleringsBeeldManager) {
         this.signaleringsBeeldManagerService.set(signaleringsBeeldManager);
     }
@@ -685,10 +538,10 @@ class EditorService {
             that.resolveReadyPromise = resolve;
         }) : this.promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorService, deps: [{ token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorService, deps: [{ token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: SignaleringsBeeldManagerService }] });
 
@@ -705,7 +558,7 @@ class BewegingUtils {
         const retval = [];
         retval.length = ritDelen.length;
         const origineleBewegingMap = this.bepaalOrigineleBewegingMap(origineleBewegingen);
-        let vorigeBeweging = null;
+        let vorigeBeweging = undefined;
         for (let i = 0; i < ritDelen.length; i++) {
             const ritdeel = ritDelen[i];
             if (ritdeel.beweging) {
@@ -735,7 +588,7 @@ class BewegingUtils {
     }
     static bewegingenZijnGewijzigd(ritDelen, origineleBewegingen) {
         const ritDelenArray = ritDelen
-            .filter(r => r.beweging)
+            .filter(r => r.beweging?.id)
             .map(r => r.beweging.id)
             .sort((a, b) => a - b);
         const bewegingenIdArray = origineleBewegingen.map(b => b.id).sort((a, b) => a - b);
@@ -751,9 +604,9 @@ class BewegingUtils {
         return stringToCheck.indexOf(match) !== -1;
     }
     static isGewijzigd(ritdeel, nieuwDwangNummer, origineleBewegingenMap) {
-        const dwangGewijzigd = ritdeel.beweging.dwangNummer !== nieuwDwangNummer;
+        const dwangGewijzigd = ritdeel.beweging?.dwangNummer !== nieuwDwangNummer;
         let gewijzigd = false;
-        if (ritdeel.beweging.wijzigStatus === this.NORMAAL) {
+        if (ritdeel.beweging?.wijzigStatus === this.NORMAAL) {
             const origineleBewegingActies = origineleBewegingenMap.get(ritdeel.beweging.id);
             const huidigeActies = this.createSortedActieIdList(ritdeel.acties);
             gewijzigd = JSON.stringify(huidigeActies) !== JSON.stringify(origineleBewegingActies);
@@ -777,7 +630,7 @@ class BewegingUtils {
         let naarSeinPplg;
         let naarSpoor = newRitdeel.getNaarPrlSpoor();
         if (eindSein.getTypeAlsString() === BewegingUtils.SEIN_TYPE_FICTIEF) {
-            if (newRitdeel.heeftVrijebaanInfo()) {
+            if (newRitdeel.heeftVrijebaanInfo() && newRitdeel.getVrijebaanRijweg()) {
                 const vbEindSein = newRitdeel.getVrijebaanRijweg().getEindSein();
                 naarSeinNaam = vbEindSein.getName();
                 naarSeinPplg = vbEindSein.getPPLG();
@@ -820,10 +673,10 @@ class BewegingUtils {
     static toRouteFileDwangNummer(dwangNummer) {
         return (dwangNummer === 0) ? -1 : dwangNummer;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingUtils, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingUtils }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingUtils, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingUtils }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingUtils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingUtils, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EditorService }] });
 
@@ -831,43 +684,23 @@ class ViewerControlService {
     constructor(store, bewegingUtils) {
         this.store = store;
         this.bewegingUtils = bewegingUtils;
-        this.subscriptions = new Subscription();
         this.valideRit$ = new BehaviorSubject(false);
         this.printing$ = new BehaviorSubject(false);
         this.sideNavOpen = false;
         this.sideNavOpen$ = new BehaviorSubject(this.sideNavOpen);
-        this.subscriptions.add(combineLatest([
-            store.select('ritSelectieIds'),
-            store.select('actieOpRitSelectieIds'),
-            store.select('ongeplandeActieSelectieIds'),
-            store.select('gebrokenRitSelectieIds'),
-            store.select('alternatievenSelectieIds'),
-            store.select('beginSeinSelectieIds'),
-            store.select('eindSeinSelectieIds')
-        ]).subscribe(([rit, actieOpRitSelectieIds, ongeplandeActieSelectieIds, gebrokenrit, alternatieven, begin, eind]) => {
-            const selectie = [];
-            selectie.push(new SelectieInfo(rit, 'rit'));
-            selectie.push(new SelectieInfo(actieOpRitSelectieIds, 'actieoprit'));
-            selectie.push(new SelectieInfo(ongeplandeActieSelectieIds, 'ongeplandeActie'));
-            selectie.push(new SelectieInfo(gebrokenrit, 'gebrokenrit'));
-            selectie.push(new SelectieInfo(alternatieven, 'alternatieveRoute'));
-            selectie.push(new SelectieInfo(begin, 'zigzagVan'));
-            selectie.push(new SelectieInfo(eind, 'zigzagNaar'));
-            this.selectieInfos = selectie;
-        }));
-        this.subscriptions.add(store.select('ritDelen').subscribe(ritdelen => this.ritdelen = ritdelen));
+        this.origineelTreinPad = {};
     }
     toggleSideNavVisible() {
         this.sideNavOpen = !this.sideNavOpen;
         this.sideNavOpen$.next(this.sideNavOpen);
     }
     keurAlleActiesGoed(ongeplandeActies) {
-        if (this.ritdelen) {
+        this.store.select('ritDelen').pipe(take(1), filter(ritdelen => !!ritdelen), tap(ritdelen => {
             this.store.dispatch(ShowProgress());
-            const bewegingen = this.bewegingUtils.extractBewegingenUitRitdelen(this.ritdelen, this.origineelTreinPad.bewegingen);
-            const alleActies = this.verzamelAlleActies(this.ritdelen, ongeplandeActies);
+            const bewegingen = this.bewegingUtils.extractBewegingenUitRitdelen(ritdelen, this.origineelTreinPad.bewegingen);
+            const alleActies = this.verzamelAlleActies(ritdelen, ongeplandeActies);
             this.store.dispatch(KeurAlleActiesGoed(this.getBewegingenZonderActies(bewegingen), alleActies));
-        }
+        })).subscribe();
     }
     setValideRit(valideRit) {
         this.valideRit$.next(valideRit);
@@ -889,7 +722,7 @@ class ViewerControlService {
     }
     setOrigineelTreinPad(treinpad) {
         const rit = JSON.parse(JSON.stringify(treinpad));
-        this.store.dispatch(SetAlgemeneRitInfo(new AlgemeneRitInfoDto({
+        this.store.dispatch(SetAlgemeneRitInfo({
             id: rit.id,
             jaarplanId: rit.jaarplanId,
             volgnummer: rit.volgnummer,
@@ -905,7 +738,7 @@ class ViewerControlService {
             modified: rit.modified,
             modifiedBy: rit.modifiedBy,
             planJobId: rit.planJobId
-        })));
+        }));
         this.origineelTreinPad = rit;
     }
     isValideRit$() {
@@ -914,10 +747,10 @@ class ViewerControlService {
     isPrinting$() {
         return this.printing$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ViewerControlService, deps: [{ token: i2$1.Store }, { token: BewegingUtils }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ViewerControlService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewerControlService, deps: [{ token: i2$1.Store }, { token: BewegingUtils }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewerControlService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ViewerControlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewerControlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -933,10 +766,10 @@ class DebugService {
     setDebugFlag(debug) {
         this.store.dispatch(SetDebug(debug));
         if (debug) {
-            document.getElementById('svgContainer').addEventListener('mouseover', this.listener);
+            document.getElementById('svgContainer')?.addEventListener('mouseover', this.listener);
         }
         else {
-            document.getElementById('svgContainer').removeEventListener('mouseover', this.listener);
+            document.getElementById('svgContainer')?.removeEventListener('mouseover', this.listener);
         }
     }
     debugEventListener() {
@@ -967,10 +800,10 @@ class DebugService {
             console.log(logline);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DebugService, deps: [{ token: i2$1.Store }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DebugService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DebugService, deps: [{ token: i2$1.Store }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DebugService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DebugService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DebugService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -982,26 +815,28 @@ class PrintBewegingService {
         this.store = store;
         this.viewerControlService = viewerControlService;
         this.sbmService = sbmService;
-        this.store.select(s => s.ritDelen).subscribe(ritdelen => this.ritdelen = ritdelen);
-    }
-    printBeweging(bewegingId, paginationSize, iaVersieInfo) {
-        const gevondenRitdeel = this.ritdelen.filter(r => parseInt(r.getBewegingId(), 10) === bewegingId);
-        // hide/show de knoppen
-        const printing = !!bewegingId && gevondenRitdeel.length === 1;
-        this.viewerControlService.setPrinting(printing);
-        if (!printing) {
-            return Promise.reject(new Error('Geen beweging gevonden voor ' + bewegingId));
-        }
-        return new Promise((resolve) => {
-            const ritdeel = gevondenRitdeel[0];
-            if (ritdeel.isNietBeschikbaar()) {
-                this.store.dispatch(navigeerVanaf(paginationSize, iaVersieInfo, ritdeel));
-                this.store.dispatch(ShowProgress());
-                setTimeout(() => this.focusOpBeweging(ritdeel, resolve), 1000);
-            }
-            else {
-                this.focusOpBeweging(ritdeel, resolve);
-            }
+    }
+    printBeweging(bewegingId, paginationSize) {
+        return new Promise((resolve, reject) => {
+            this.store.select('ritDelen').pipe(take(1), tap(ritdelen => {
+                const gevondenRitdeel = ritdelen.filter(r => Number.parseInt(r.getBewegingId(), 10) === bewegingId);
+                // hide/show de knoppen
+                const printing = !!bewegingId && gevondenRitdeel.length === 1;
+                this.viewerControlService.setPrinting(printing);
+                if (!printing) {
+                    reject(new Error('Geen beweging gevonden voor ' + bewegingId));
+                    return;
+                }
+                const ritdeel = gevondenRitdeel[0];
+                if (ritdeel.isNietBeschikbaar()) {
+                    this.store.dispatch(navigeerVanaf(paginationSize, ritdeel));
+                    this.store.dispatch(ShowProgress());
+                    setTimeout(() => this.focusOpBeweging(ritdeel, resolve), 1000);
+                }
+                else {
+                    this.focusOpBeweging(ritdeel, resolve);
+                }
+            })).subscribe();
         });
     }
     focusOpBeweging(ritdeel, resolve) {
@@ -1025,10 +860,10 @@ class PrintBewegingService {
     getPuics(topoElementen) {
         return topoElementen.map(e => e.getPuic());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrintBewegingService, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrintBewegingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrintBewegingService, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrintBewegingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrintBewegingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrintBewegingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1036,8 +871,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: ViewerControlService }, { type: SignaleringsBeeldManagerService }] });
 
 class RpeComponent {
+    constructor() {
+        this.baseurl = '';
+        this.path = '';
+    }
     convertToScript() {
-        const element = this.script.nativeElement;
+        const element = this.script?.nativeElement;
         const script = document.createElement('script');
         script.type = 'text/javascript';
         if (this.baseurl && this.path) {
@@ -1051,10 +890,10 @@ class RpeComponent {
     ngAfterViewInit() {
         this.convertToScript();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RpeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RpeComponent, selector: "rpe-component", inputs: { baseurl: "baseurl", path: "path" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["rpescript"], descendants: true }], ngImport: i0, template: "<div #rpescript style.display=\"none\">\n    <ng-content></ng-content>\n</div>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RpeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RpeComponent, selector: "rpe-component", inputs: { baseurl: "baseurl", path: "path" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["rpescript"], descendants: true }], ngImport: i0, template: "<div #rpescript style.display=\"none\">\n    <ng-content></ng-content>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RpeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RpeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rpe-component', template: "<div #rpescript style.display=\"none\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { baseurl: [{
@@ -1073,138 +912,1700 @@ class OngeplandeActie {
     }
 }
 
-class KmRange {
-    constructor(topologyElement, vanKilometreringen, totKilometreringen) {
-        this.topologyElement = topologyElement;
-        this.vanKilometreringen = vanKilometreringen;
-        this.totKilometreringen = totKilometreringen;
-    }
-    static rangeVoorPuntObject(topologyElement) {
-        return new KmRange(topologyElement, JsJavaUtil.listToArray(topologyElement.getKilometreringen()), JsJavaUtil.listToArray(topologyElement.getKilometreringen()));
-    }
-    static rangeVoorStrekObject(topologyElement, vanKilometreringen, totKilometreringen) {
-        return new KmRange(topologyElement, vanKilometreringen, totKilometreringen);
+class KmRange {
+    constructor(topologyElement, vanKilometreringen, totKilometreringen) {
+        this.topologyElement = topologyElement;
+        this.vanKilometreringen = vanKilometreringen;
+        this.totKilometreringen = totKilometreringen;
+    }
+    static rangeVoorPuntObject(topologyElement) {
+        return new KmRange(topologyElement, JsJavaUtil.listToArray(topologyElement.getKilometreringen()), JsJavaUtil.listToArray(topologyElement.getKilometreringen()));
+    }
+    static rangeVoorStrekObject(topologyElement, vanKilometreringen, totKilometreringen) {
+        return new KmRange(topologyElement, vanKilometreringen, totKilometreringen);
+    }
+    static getKilometrering(lintNaam, kilometreringen) {
+        const result = kilometreringen.filter(kilometrering => kilometrering.getKmLint() === lintNaam);
+        if (result.length >= 1) {
+            return result[0];
+        }
+        return undefined;
+    }
+    heeftOverlap(kilometrering1, kilometrering2) {
+        const vanKilometrering = KmRange.getKilometrering(kilometrering1.getKmLint(), this.vanKilometreringen);
+        const totKilometrering = KmRange.getKilometrering(kilometrering2.getKmLint(), this.totKilometreringen);
+        if (!vanKilometrering || !totKilometrering) {
+            return false;
+        }
+        let startKmWaarde = vanKilometrering.getKmWaarde();
+        let endKmWaarde = totKilometrering.getKmWaarde();
+        if (startKmWaarde > endKmWaarde) {
+            const temp = { end: endKmWaarde, start: startKmWaarde };
+            startKmWaarde = temp.end;
+            endKmWaarde = temp.start;
+        }
+        const actieStartKmWaarde = kilometrering1.getKmWaarde();
+        const actieEndKmWaarde = kilometrering2.getKmWaarde();
+        return endKmWaarde >= actieStartKmWaarde && actieEndKmWaarde >= startKmWaarde;
+    }
+}
+
+class WisselKantCode {
+    constructor(naam, kantCode) {
+        this.naam = naam;
+        this.kantCode = kantCode;
+    }
+}
+
+class MeldingEvent {
+    constructor(meldingMessage, meldingLevel) {
+        this.meldingMessage = meldingMessage;
+        this.meldingLevel = meldingLevel;
+    }
+}
+
+const MELDING_LEVEL_ERROR = 'error';
+const MELDING_LEVEL_WARNING = 'warn';
+const MELDING_LEVEL_INFO = 'info';
+class MeldingBuilder {
+    static nietGevondenTakkenOngeplandeActies(nietGevondenTakken) {
+        return new MeldingEvent('Niet gevonden takken uit \'OngeplandeActies\': ' + nietGevondenTakken, MELDING_LEVEL_INFO);
+    }
+    static actieHighlightError(actieZonderElementen) {
+        return new MeldingEvent('Highlight error. Geen elementen kunnen vinden voor actie(s) met id: ' + actieZonderElementen, MELDING_LEVEL_ERROR);
+    }
+}
+
+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;
+        }
+        else {
+            return 'Er is een onbekende fout opgetreden';
+        }
+    }
+}
+
+class MessageBuilder {
+    static rwpDataNietGevonden(err) {
+        return new Message(Severity.ERROR, 'Error bij ophalen van rijwegplan data: ' + err);
+    }
+    static rijwegNietGevonden(beweging) {
+        return new Message(Severity.ERROR, `Rijweg van ${beweging.vanSpoor} in PPLG ${beweging.vanPplg} naar ${beweging.naarSpoor} niet gevonden`);
+    }
+    static rijwegplanNietGevonden(beweging) {
+        return new Message(Severity.ERROR, `Rijwegplan van PPLG ${beweging.vanPplg} niet gevonden`);
+    }
+    static dwangNietGevonden(beweging) {
+        return new Message(Severity.ERROR, `Dwang ${beweging.dwangNummer} voor rijweg van ${beweging.vanSpoor} in PPLG ${beweging.vanPplg} naar ${beweging.naarSpoor} niet gevonden`);
+    }
+    static nietGevondenSBI(err) {
+        return new Message(Severity.ERROR, 'Error bij het ophalen van signaleringsbeeldinfo: ' + Utils.getValidErorrMessage(err));
+    }
+    static actieHighlightError(actieZonderElementen) {
+        return new Message(Severity.ERROR, 'Highlight error. Geen elementen kunnen vinden voor actie(s) met id: ' + actieZonderElementen);
+    }
+    static ritFileAlGewijzigdError(beweging) {
+        return new Message(Severity.ERROR, 'Rit bevat een beweging met status \'Gewijzigd\': Beweging met ID:' + beweging.id);
+    }
+    static meerDan12BladenGevonden(bladAmount) {
+        return new Message(Severity.WARNING, 'Warning, Rit bevat ' + bladAmount + ' bladen. Er worden maximaal 12 bladen ondersteund.');
+    }
+    static nietGevondenTakkenOngeplandeActies(nietGevondenTakken) {
+        return new Message(Severity.INFORMATION, 'Info, Niet gevonden takken uit \'OngeplandeActies\': ' + nietGevondenTakken);
+    }
+}
+
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+class CustomHttpParameterCodec {
+    encodeKey(k) {
+        return encodeURIComponent(k);
+    }
+    encodeValue(v) {
+        return encodeURIComponent(v);
+    }
+    decodeKey(k) {
+        return decodeURIComponent(k);
+    }
+    decodeValue(v) {
+        return decodeURIComponent(v);
+    }
+}
+
+const BASE_PATH = new InjectionToken('basePath');
+const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
+
+class Configuration {
+    constructor(configurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
+        }
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
+        }
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
+        }
+        else {
+            this.credentials = {};
+        }
+        // init default keycloak_auth credential
+        if (!this.credentials['keycloak_auth']) {
+            this.credentials['keycloak_auth'] = () => {
+                return typeof this.accessToken === 'function'
+                    ? this.accessToken()
+                    : this.accessToken;
+            };
+        }
+    }
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderContentType(contentTypes) {
+        if (contentTypes.length === 0) {
+            return undefined;
+        }
+        const type = contentTypes.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
+        }
+        return type;
+    }
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    selectHeaderAccept(accepts) {
+        if (accepts.length === 0) {
+            return undefined;
+        }
+        const type = accepts.find((x) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
+    }
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    isJsonMime(mime) {
+        const jsonMime = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+    lookupCredential(key) {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
+    }
+    defaultEncodeParam(param) {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? param.value.toISOString()
+            : param.value;
+        return encodeURIComponent(String(value));
+    }
+}
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class AppConfigControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    getAppConfig(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                '*/*'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/appconfig`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppConfigControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppConfigControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppConfigControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class BewegingControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    verrijkBewegingenMetOngeplandeActies(iaVersie, ritRequestDto, observe = 'body', reportProgress = false, options) {
+        if (iaVersie === null || iaVersie === undefined) {
+            throw new Error('Required parameter iaVersie was null or undefined when calling verrijkBewegingenMetOngeplandeActies.');
+        }
+        if (ritRequestDto === null || ritRequestDto === undefined) {
+            throw new Error('Required parameter ritRequestDto was null or undefined when calling verrijkBewegingenMetOngeplandeActies.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                '*/*'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'application/json'
+        ];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/beweging/${this.configuration.encodeParam({ name: "iaVersie", value: iaVersie, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}`;
+        return this.httpClient.request('put', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: ritRequestDto,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class Class0BuildPropertiesService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    getBuildProperties(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/build.properties`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Class0BuildPropertiesService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Class0BuildPropertiesService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Class0BuildPropertiesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class ConnectorControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    getOtherConnector(iaVersie, connectorPuic, observe = 'body', reportProgress = false, options) {
+        if (iaVersie === null || iaVersie === undefined) {
+            throw new Error('Required parameter iaVersie was null or undefined when calling getOtherConnector.');
+        }
+        if (connectorPuic === null || connectorPuic === undefined) {
+            throw new Error('Required parameter connectorPuic was null or undefined when calling getOtherConnector.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                '*/*'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/connector/${this.configuration.encodeParam({ name: "iaVersie", value: iaVersie, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/${this.configuration.encodeParam({ name: "connectorPuic", value: connectorPuic, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class LogControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    log(logDto, observe = 'body', reportProgress = false, options) {
+        if (logDto === null || logDto === undefined) {
+            throw new Error('Required parameter logDto was null or undefined when calling log.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'application/json'
+        ];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/logging/`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: logDto,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LogControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LogControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LogControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class P21ControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    /**
+     * @param consumes string[] mime-types
+     * @return true: consumes contains 'multipart/form-data', false: otherwise
+     */
+    canConsumeForm(consumes) {
+        const form = 'multipart/form-data';
+        for (const consume of consumes) {
+            if (form === consume) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    createP21Levering(p21Levering, update, observe = 'body', reportProgress = false, options) {
+        if (p21Levering === null || p21Levering === undefined) {
+            throw new Error('Required parameter p21Levering was null or undefined when calling createP21Levering.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarCredential;
+        // authentication (keycloak_auth) required
+        localVarCredential = this.configuration.lookupCredential('keycloak_auth');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                '*/*'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'multipart/form-data'
+        ];
+        const canConsumeForm = this.canConsumeForm(consumes);
+        let localVarFormParams;
+        let localVarUseForm = false;
+        let localVarConvertFormParamsToString = false;
+        // use FormData to transmit files using content-type "multipart/form-data"
+        // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data
+        localVarUseForm = canConsumeForm;
+        if (localVarUseForm) {
+            localVarFormParams = new FormData();
+        }
+        else {
+            localVarFormParams = new HttpParams({ encoder: this.encoder });
+        }
+        if (update !== undefined) {
+            localVarFormParams = localVarFormParams.append('update', update) || localVarFormParams;
+        }
+        if (p21Levering !== undefined) {
+            localVarFormParams = localVarFormParams.append('p21Levering', p21Levering) || localVarFormParams;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/services/secure/rest/backend/uploadversie`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: localVarConvertFormParamsToString ? localVarFormParams.toString() : localVarFormParams,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    getVersies(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        let localVarCredential;
+        // authentication (keycloak_auth) required
+        localVarCredential = this.configuration.lookupCredential('keycloak_auth');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/services/secure/rest/backend/versies`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: P21ControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: P21ControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: P21ControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class SbControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return httpParams;
+    }
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
+        }
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
+        }
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    getSignaleringsbeelden(iaVersie, pplg, observe = 'body', reportProgress = false, options) {
+        if (iaVersie === null || iaVersie === undefined) {
+            throw new Error('Required parameter iaVersie was null or undefined when calling getSignaleringsbeelden.');
+        }
+        if (pplg === null || pplg === undefined) {
+            throw new Error('Required parameter pplg was null or undefined when calling getSignaleringsbeelden.');
+        }
+        let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
+        if (pplg) {
+            pplg.forEach((element) => {
+                localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, element, 'pplg');
+            });
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/${this.configuration.encodeParam({ name: "iaVersie", value: iaVersie, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/SignaleringsbeeldAndPplgs`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            params: localVarQueryParameters,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    valideerIaVersie(versie, observe = 'body', reportProgress = false, options) {
+        if (versie === null || versie === undefined) {
+            throw new Error('Required parameter versie was null or undefined when calling valideerIaVersie.');
+        }
+        let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
+        if (versie !== undefined && versie !== null) {
+            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, versie, 'versie');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/signaleringsbeeldeninfo/valideeriaversie`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            params: localVarQueryParameters,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbControllerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SbControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class SvgControllerService {
+    constructor(httpClient, basePath, configuration) {
+        this.httpClient = httpClient;
+        this.basePath = 'http://localhost:8080/mst';
+        this.defaultHeaders = new HttpHeaders();
+        this.configuration = new Configuration();
+        if (configuration) {
+            this.configuration = configuration;
+        }
+        if (typeof this.configuration.basePath !== 'string') {
+            if (Array.isArray(basePath) && basePath.length > 0) {
+                basePath = basePath[0];
+            }
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
     }
-    static getKilometrering(lintNaam, kilometreringen) {
-        const result = kilometreringen.filter(kilometrering => kilometrering.getKmLint() === lintNaam);
-        if (result.length >= 1) {
-            return result[0];
+    // @ts-ignore
+    addToHttpParams(httpParams, value, key) {
+        if (typeof value === "object" && value instanceof Date === false) {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value);
+        }
+        else {
+            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
         }
-        return null;
+        return httpParams;
     }
-    heeftOverlap(kilometrering1, kilometrering2) {
-        const vanKilometrering = KmRange.getKilometrering(kilometrering1.getKmLint(), this.vanKilometreringen);
-        const totKilometrering = KmRange.getKilometrering(kilometrering2.getKmLint(), this.totKilometreringen);
-        if (!vanKilometrering || !totKilometrering) {
-            return false;
+    addToHttpParamsRecursive(httpParams, value, key) {
+        if (value == null) {
+            return httpParams;
         }
-        let startKmWaarde = vanKilometrering.getKmWaarde();
-        let endKmWaarde = totKilometrering.getKmWaarde();
-        if (startKmWaarde > endKmWaarde) {
-            const temp = { end: endKmWaarde, start: startKmWaarde };
-            startKmWaarde = temp.end;
-            endKmWaarde = temp.start;
+        if (typeof value === "object") {
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            }
+            else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                }
+                else {
+                    throw Error("key may not be null if value is Date");
+                }
+            }
+            else {
+                Object.keys(value).forEach(k => httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k));
+            }
         }
-        const actieStartKmWaarde = kilometrering1.getKmWaarde();
-        const actieEndKmWaarde = kilometrering2.getKmWaarde();
-        return endKmWaarde >= actieStartKmWaarde && actieEndKmWaarde >= startKmWaarde;
+        else if (key != null) {
+            httpParams = httpParams.append(key, value);
+        }
+        else {
+            throw Error("key may not be null if value is not object or array");
+        }
+        return httpParams;
+    }
+    getSvgInfo(iaVersie, signaleringsbeeldDto, observe = 'body', reportProgress = false, options) {
+        if (iaVersie === null || iaVersie === undefined) {
+            throw new Error('Required parameter iaVersie was null or undefined when calling getSvgInfo.');
+        }
+        if (signaleringsbeeldDto === null || signaleringsbeeldDto === undefined) {
+            throw new Error('Required parameter signaleringsbeeldDto was null or undefined when calling getSvgInfo.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        let localVarHttpContext = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+        let localVarTransferCache = options && options.transferCache;
+        if (localVarTransferCache === undefined) {
+            localVarTransferCache = true;
+        }
+        // to determine the Content-Type header
+        const consumes = [
+            'application/json'
+        ];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/rest/${this.configuration.encodeParam({ name: "iaVersie", value: iaVersie, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined })}/svgs`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: signaleringsbeeldDto,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgControllerService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgControllerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [BASE_PATH]
+                }] }, { type: Configuration, decorators: [{
+                    type: Optional
+                }] }] });
 
-class WisselKantCode {
-    constructor(naam, kantCode) {
-        this.naam = naam;
-        this.kantCode = kantCode;
-    }
-}
+const APIS = [AppConfigControllerService, BewegingControllerService, Class0BuildPropertiesService, ConnectorControllerService, LogControllerService, P21ControllerService, SbControllerService, SvgControllerService];
 
-class MeldingEvent {
-    constructor(meldingMessage, meldingLevel) {
-        this.meldingMessage = meldingMessage;
-        this.meldingLevel = meldingLevel;
-    }
-}
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
 
-const MELDING_LEVEL_ERROR = 'error';
-const MELDING_LEVEL_WARNING = 'warn';
-const MELDING_LEVEL_INFO = 'info';
-class MeldingBuilder {
-    static nietGevondenTakkenOngeplandeActies(nietGevondenTakken) {
-        return new MeldingEvent('Niet gevonden takken uit \'OngeplandeActies\': ' + nietGevondenTakken, MELDING_LEVEL_INFO);
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+var Sein;
+(function (Sein) {
+    Sein.DirectionEnum = {
+        LeftToRight: 'LEFT_TO_RIGHT',
+        RightToLeft: 'RIGHT_TO_LEFT',
+        TopToBottom: 'TOP_TO_BOTTOM',
+        BottomToTop: 'BOTTOM_TO_TOP'
+    };
+})(Sein || (Sein = {}));
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+/**
+ * MST
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration, useFactory: configurationFactory }]
+        };
     }
-    static actieHighlightError(actieZonderElementen) {
-        return new MeldingEvent('Highlight error. Geen elementen kunnen vinden voor actie(s) met id: ' + actieZonderElementen, MELDING_LEVEL_ERROR);
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ApiModule }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ApiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
 
-class MessageBuilder {
-    static rwpDataNietGevonden(err) {
-        return new Message(Severity.ERROR, 'Error bij ophalen van rijwegplan data: ' + err);
-    }
-    static rijwegNietGevonden(beweging) {
-        return new Message(Severity.ERROR, `Rijweg van ${beweging.vanSpoor} in PPLG ${beweging.vanPplg} naar ${beweging.naarSpoor} niet gevonden`);
-    }
-    static rijwegplanNietGevonden(beweging) {
-        return new Message(Severity.ERROR, `Rijwegplan van PPLG ${beweging.vanPplg} niet gevonden`);
-    }
-    static dwangNietGevonden(beweging) {
-        return new Message(Severity.ERROR, `Dwang ${beweging.dwangNummer} voor rijweg van ${beweging.vanSpoor} in PPLG ${beweging.vanPplg} naar ${beweging.naarSpoor} niet gevonden`);
-    }
-    static nietGevondenSBI(err) {
-        return new Message(Severity.ERROR, 'Error bij het ophalen van signaleringsbeeldinfo: ' + Utils.getValidErorrMessage(err));
-    }
-    static actieHighlightError(actieZonderElementen) {
-        return new Message(Severity.ERROR, 'Highlight error. Geen elementen kunnen vinden voor actie(s) met id: ' + actieZonderElementen);
-    }
-    static ritFileAlGewijzigdError(beweging) {
-        return new Message(Severity.ERROR, 'Rit bevat een beweging met status \'Gewijzigd\': Beweging met ID:' + beweging.id);
+class MstLoggingResource {
+    constructor(controller, store) {
+        this.controller = controller;
+        this.store = store;
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(this.store.select('baseUrl').subscribe(baseUrl => controller.configuration.basePath = baseUrl + '/mst'));
     }
-    static meerDan12BladenGevonden(bladAmount) {
-        return new Message(Severity.WARNING, 'Warning, Rit bevat ' + bladAmount + ' bladen. Er worden maximaal 12 bladen ondersteund.');
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    static nietGevondenTakkenOngeplandeActies(nietGevondenTakken) {
-        return new Message(Severity.INFORMATION, 'Info, Niet gevonden takken uit \'OngeplandeActies\': ' + nietGevondenTakken);
+    logMessages(logDto) {
+        this.controller.log(logDto).subscribe();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstLoggingResource, deps: [{ token: LogControllerService }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstLoggingResource }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstLoggingResource, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: LogControllerService }, { type: i2$1.Store }] });
 
 class LoggingHelper {
-    constructor(sbmService, store) {
-        this.sbmService = sbmService;
+    constructor(store) {
         this.store = store;
     }
     maakLogDTO(melding, actie) {
-        let iaVersie = '';
-        let algemeneRitInfoDto = null;
-        let actieDto = null;
-        this.store.select('algemeneRitInfoDto').pipe(take(1)).subscribe(dto => {
-            algemeneRitInfoDto = dto;
-        });
-        this.store.select('iaVersie').pipe(take(1)).subscribe(ia => {
-            iaVersie = ia.versie;
-        });
-        if (actie) {
-            actieDto = new ActieDto({
-                pplgNaam: actie.pplgNaam,
-                ritActieTypeOmschrijving: actie.ritActieTypeOmschrijving,
-                ritActieStatus: actie.ritActieStatus,
-                bewegingId: actie.bewegingId,
-                wisselType: actie.wisselType,
-                wisselNaam: actie.wisselNaam,
-                wisselKantCode: actie.wisselKantCode,
-                vanKilometerlint: actie.vanKilometerlint,
-                vanKilometrering: actie.vanKilometrering,
-                totKilometerlint: actie.totKilometerlint,
-                totKilometrering: actie.totKilometrering
-            });
-        }
-        return new MstLoggingDto({
-            iaVersie,
-            meldingLevel: melding.meldingLevel,
-            meldingMessage: melding.meldingMessage,
-            actieDto,
-            algemeneRitInfoDto,
-            sbinfoDtos: this.getSbInfoDtos()
-        });
+        return combineLatest([
+            this.store.select('algemeneRitInfoDto'),
+            this.store.select('iaVersie')
+        ]).pipe(take(1), map(([algemeneRitInfoDto, iaVersie]) => {
+            let actieDto = null;
+            if (actie) {
+                actieDto = {
+                    pplgNaam: actie.pplgNaam,
+                    ritActieTypeOmschrijving: actie.ritActieTypeOmschrijving,
+                    ritActieStatus: actie.ritActieStatus,
+                    bewegingId: actie.bewegingId,
+                    wisselType: actie.wisselType,
+                    wisselNaam: actie.wisselNaam,
+                    wisselKantCode: actie.wisselKantCode,
+                    vanKilometerlint: actie.vanKilometerlint,
+                    vanKilometrering: actie.vanKilometrering,
+                    totKilometerlint: actie.totKilometerlint,
+                    totKilometrering: actie.totKilometrering
+                };
+            }
+            return {
+                iaVersie: iaVersie.versie,
+                meldingLevel: melding.meldingLevel,
+                meldingMessage: melding.meldingMessage,
+                actieDto,
+                algemeneRitInfoDto,
+                sbinfoDtos: this.getSbInfoDtos()
+            };
+        }));
     }
     getSbInfoDtos() {
         const sbInfoDtos = [];
@@ -1215,12 +2616,12 @@ class LoggingHelper {
         });
         return sbInfoDtos;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoggingHelper, deps: [{ token: SignaleringsBeeldManagerService }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoggingHelper }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggingHelper, deps: [{ token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggingHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoggingHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggingHelper, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: SignaleringsBeeldManagerService }, { type: i2$1.Store }] });
+        }], ctorParameters: () => [{ type: i2$1.Store }] });
 
 /**
  * export const RIT_ACTIE_1 = 1;
@@ -1316,6 +2717,7 @@ class ActieHelper {
         this.messagesService = messagesService;
         this.store = store;
         this.loggingHelper = loggingHelper;
+        this.debug = false;
         this.store.select('debug').subscribe(debug => this.debug = debug);
     }
     static getActieTopoElements(ritDeel, sbmService) {
@@ -1349,10 +2751,10 @@ class ActieHelper {
         }
     }
     static actieComparator(actie1, actie2) {
-        if (actie1.vanKilometrering !== actie2.vanKilometrering) {
+        if (actie1.vanKilometrering && actie2.vanKilometrering && actie1.vanKilometrering !== actie2.vanKilometrering) {
             return actie1.vanKilometrering > actie2.vanKilometrering ? 1 : -1;
         }
-        if (actie1.ritActieTypeOmschrijving !== actie2.ritActieTypeOmschrijving) {
+        if (actie1.ritActieTypeOmschrijving && actie2.ritActieTypeOmschrijving && actie1.ritActieTypeOmschrijving !== actie2.ritActieTypeOmschrijving) {
             return actie1.ritActieTypeOmschrijving > actie2.ritActieTypeOmschrijving ? 1 : -1;
         }
         if (actie1.wisselNaam !== actie2.wisselNaam) {
@@ -1392,9 +2794,9 @@ class ActieHelper {
     // make sure the elems are sorted in ascending order
     static sorteerTopoElementen(topoElems) {
         const topoElementen = topoElems.slice();
-        let lint = null;
-        let first = null;
-        let second = null;
+        let lint = undefined;
+        let first;
+        let second;
         for (const topoElement of topoElementen) {
             let kilometreringen = null;
             const kms = JsJavaUtil.listToArray(topoElement.getKilometreringen());
@@ -1426,11 +2828,11 @@ class ActieHelper {
             if (!totKilometreringen && vanKilometreringen) {
                 totKilometreringen = [new MstKilometrering(vanKilometreringen[0].getKmLint(), 100000)];
             }
-            if (vanKilometreringen[0] > totKilometreringen[0]) {
+            if (vanKilometreringen && totKilometreringen && vanKilometreringen[0] > totKilometreringen[0]) {
                 kmRanges.push(KmRange.rangeVoorStrekObject(e, this.addKm(vanKilometreringen, -1), this.addKm(totKilometreringen, 1)));
             }
             else {
-                kmRanges.push(KmRange.rangeVoorStrekObject(e, this.addKm(vanKilometreringen, 1), this.addKm(totKilometreringen, -1)));
+                kmRanges.push(KmRange.rangeVoorStrekObject(e, this.addKm(vanKilometreringen ?? [], 1), this.addKm(totKilometreringen ?? [], -1)));
             }
         });
     }
@@ -1521,21 +2923,23 @@ class ActieHelper {
             else {
                 const puics = [];
                 kmRanges.forEach(kmRange => {
-                    let vanKilometrering = new MstKilometrering(actie.vanKilometerlint, actie.vanKilometrering);
-                    let totKilometrering = new MstKilometrering(actie.totKilometerlint, actie.totKilometrering);
-                    if (actie.vanKilometrering > actie.totKilometrering) {
-                        const temp = { van: vanKilometrering, tot: totKilometrering };
-                        vanKilometrering = temp.tot;
-                        totKilometrering = temp.van;
-                    }
-                    if (kmRange.heeftOverlap(vanKilometrering, totKilometrering)) {
-                        puics.push(kmRange.topologyElement.getPuic());
+                    if (actie.vanKilometrering && actie.vanKilometerlint && actie.totKilometrering && actie.totKilometerlint) {
+                        let vanKilometrering = new MstKilometrering(actie.vanKilometerlint, actie.vanKilometrering);
+                        let totKilometrering = new MstKilometrering(actie.totKilometerlint, actie.totKilometrering);
+                        if (actie.vanKilometrering > actie.totKilometrering) {
+                            const temp = { van: vanKilometrering, tot: totKilometrering };
+                            vanKilometrering = temp.tot;
+                            totKilometrering = temp.van;
+                        }
+                        if (kmRange.heeftOverlap(vanKilometrering, totKilometrering)) {
+                            puics.push(kmRange.topologyElement.getPuic());
+                        }
                     }
                 });
                 if (puics.length === 0) {
                     actieZonderElementen.push(actie.id);
                     const melding = MeldingBuilder.actieHighlightError(actieZonderElementen);
-                    logMeldingDTOs.push(this.loggingHelper.maakLogDTO(melding, actie));
+                    this.loggingHelper.maakLogDTO(melding, actie).pipe(tap(dto => logMeldingDTOs.push(dto))).subscribe();
                 }
                 retval.putAll(actie, puics);
             }
@@ -1543,15 +2947,15 @@ class ActieHelper {
         this.logLegeMeldingDto(logMeldingDTOs);
         return retval;
     }
-    logLegeMeldingDto(logMeldingDTOs) {
-        if (logMeldingDTOs.length > 0) {
-            this.mstLogResource.logErrorMessages(logMeldingDTOs);
+    logLegeMeldingDto(logDto) {
+        if (logDto.length > 0) {
+            return this.mstLogResource.logMessages(logDto);
         }
     }
     verwerkTopoElementen(topoElementen) {
         const kmRanges = [];
         let topoElementenZonderKms = [];
-        let laatstePuntKms = null;
+        let laatstePuntKms = undefined;
         topoElementen.forEach(elem => {
             const kms = JsJavaUtil.listToArray(elem.getKilometreringen());
             if (kms.length > 0) {
@@ -1565,7 +2969,7 @@ class ActieHelper {
             }
         });
         if (topoElementenZonderKms.length > 0 && laatstePuntKms) {
-            ActieHelper.corrigeerTopoElementenZonderKms(topoElementenZonderKms, laatstePuntKms, null, kmRanges);
+            ActieHelper.corrigeerTopoElementenZonderKms(topoElementenZonderKms, laatstePuntKms, undefined, kmRanges);
         }
         return kmRanges;
     }
@@ -1628,21 +3032,21 @@ class ActieHelper {
         if (ActieHelper.isKantCodeLinks(kantcode)) {
             return wissel.getLeft();
         }
-        return null;
+        return undefined;
     }
     bepaalPuicVoorWisselSlijpenActie(actie) {
         const storingsSymboolPuic = this.sbmService.getSBWissel(actie.wisselNaam, actie.pplgNaam)?.getStoringSymboolPuic();
         if (!storingsSymboolPuic && this.debug) {
             const melding = MeldingBuilder.actieHighlightError([actie.id]);
             this.messagesService.showMessage(MessageBuilder.actieHighlightError([actie.id]));
-            this.mstLogResource.logErrorMessages([this.loggingHelper.maakLogDTO(melding, actie)]);
+            this.loggingHelper.maakLogDTO(melding, actie).pipe(tap(logDto => this.mstLogResource.logMessages([logDto]))).subscribe();
         }
         return storingsSymboolPuic ? [storingsSymboolPuic] : [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActieHelper, deps: [{ token: SignaleringsBeeldManagerService }, { token: MstLoggingResource }, { token: MessagesService }, { token: i2$1.Store }, { token: LoggingHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActieHelper }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActieHelper, deps: [{ token: SignaleringsBeeldManagerService }, { token: MstLoggingResource }, { token: MessagesService }, { token: i2$1.Store }, { token: LoggingHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActieHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActieHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActieHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: SignaleringsBeeldManagerService }, { type: MstLoggingResource }, { type: MessagesService }, { type: i2$1.Store }, { type: LoggingHelper }] });
 
@@ -1650,10 +3054,16 @@ 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) => {
@@ -1664,9 +3074,6 @@ 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')
@@ -1703,12 +3110,14 @@ 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) {
-        const acties = this.selectedRitdeel.acties;
+        if (!this.selectedRitdeel)
+            return;
+        const acties = this.selectedRitdeel.acties ?? [];
         const idx = acties.indexOf(actie);
         if (idx >= 0) {
             this.verhuisActieNaarOngepland(actie);
@@ -1734,7 +3143,7 @@ class RitdelenLijstComponent {
     }
     voegActieToeAanRit(ongeplandeActie) {
         const idx = this.selectedRitdeelOngeplandeActies.indexOf(ongeplandeActie);
-        if (idx >= 0) {
+        if (idx >= 0 && this.selectedRitdeel) {
             this.store.dispatch(addRitdeelActie(this.selectedRitdeel, this.selectedRitdeelOngeplandeActies[idx].actie));
             this.store.dispatch(AddGeplandeActie(ongeplandeActie.actie, ongeplandeActie.puics));
             this.store.dispatch(DeleteOngeplandeActie(ongeplandeActie));
@@ -1836,13 +3245,13 @@ class RitdelenLijstComponent {
         return `${prefix}${ActieHelper.getVSTActieOmschrijving(actie)}`;
     }
     bepaalPrefixVoorActieOmschrijving(actie) {
-        const prefix = '';
-        if (this.selectedRitdeel.acties.includes(actie)) {
+        const noPrefix = '';
+        if (this.selectedRitdeel?.acties.includes(actie)) {
             // Afwijkende naam bij niet gevisualiseerde actie in rit
             const puics = this.geplandeActies.get(actie);
-            return puics.length > 0 ? prefix : this.NG_ACTIE_PREFIX;
+            return puics.length > 0 ? noPrefix : this.NG_ACTIE_PREFIX;
         }
-        return prefix;
+        return noPrefix;
     }
     actieVanKmTekst(actie) {
         if (ActieHelper.isWisselSlijpenActie(actie)) {
@@ -1863,6 +3272,7 @@ class RitdelenLijstComponent {
         return ritdeel.getPplgString();
     }
     getKantCode(stand) {
+        // @ts-ignore
         if (stand === window['domein'].Stand.LINKS) {
             return 'L';
         }
@@ -1872,10 +3282,10 @@ class RitdelenLijstComponent {
         this.keurAlleActiesGoed.emit();
         this.deselectRitdeel();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenLijstComponent, deps: [{ token: i2$1.Store }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RitdelenLijstComponent, selector: "ritdelen-lijst", inputs: { nietGeplandeActies: "nietGeplandeActies" }, outputs: { focusEmitter: "focusEmitter", keurAlleActiesGoed: "keurAlleActiesGoed" }, ngImport: i0, template: "<div id=\"ritdelen-lijst\">\n    <div class=\"sidebar-header\">\n        <h3 [attr.data-test-id]=\"'title-rit-details'\">Ritdetails</h3>\n    </div>\n    <div class=\"panes-container\">\n        <div class=\"top-pane tableFixHead\" id=\"top-pane\">\n            <table class=\"table\" aria-hidden=\"true\" [attr.data-test-id]=\"'table-rit-details'\">\n                <thead>\n                <tr>\n                    <th scope=\"col\">\n                        <input #input\n                               type=\"checkbox\"\n                               checked\n                               class=\"checkbox col-visibility\"\n                               (change)=\"toggleZichtbaarheidAlleRitdelen(input.checked)\"\n                               id=\"ritdetails-selecteerAlles\"\n                               title=\"Selecteer alles\"\n                               [attr.data-test-id]=\"'checkbox-alle-bewegingen'\">\n                    </th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">DW</th>\n                    <th scope=\"col\">PPLG(s)</th>\n                    <th scope=\"col\">Treinnr.</th>\n                    <th scope=\"col\"></th>\n                </tr>\n                </thead>\n\n                <tr *ngFor=\"let ritdeelViewModel of ritdeelViewModels; let i = index\"\n                    class=\"{{ selectedRitdeelClass(ritdeelViewModel.ritdeel) }}\" id=\"ritdetails-r{{i}}\">\n                    <td>\n                        <input id=\"ritdetails-r{{i}}-zichtbaar\"\n                               [attr.data-test-id]=\"'checkbox-r'+i\"\n                               type=\"checkbox\"\n                               class=\"checkbox col-visibility\"\n                               [checked]=\"ritdeelViewModel.isZichtbaar\"\n                               [title]=\"ritdeelViewModel.title\"\n                               (change)=\"toggleRitdeelZichtbaarheid(ritdeelViewModel.ritdeel)\"\n                               [hidden]=\"ritdeelViewModel.isNietBeschikbaar\"/>\n                    </td>\n                    <td id=\"ritdetails-r{{i}}-gewijzigd\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.isNieuw}}</td>\n                    <td id=\"ritdetails-r{{i}}-vanSpoor\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.vanPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSpoor\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.naarPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-dwangNummer\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.dwangNummer}}</td>\n                    <td id=\"ritdetails-r{{i}}-pplgs\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.pplgString}}</td>\n                    <td id=\"ritdetails-r{{i}}-treinNummer\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.treinNummer}}</td>\n                    <td style=\"text-align:right\">\n                        <button *ngIf=\"editable\"\n                                id=\"ritdetails-r{{i}}-del\"\n                                type=\"button\"\n                                class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                (click)=\"deleteRitdeel(ritdeelViewModel.ritdeel)\">X\n                        </button>\n                    </td>\n                </tr>\n\n            </table>\n        </div>\n        <div class=\"actie-pane\">\n            <div *ngIf=\"selectedRitdeel  && (selectedRitdeelActies.length > 0 || selectedRitdeelOngeplandeActies.length > 0) \"\n                 id=\"actie-pane\">\n                <h4>Geplande acties</h4>\n                <table aria-hidden=\"true\">\n                    <tr>\n                        <th scope=\"col\">Actie</th>\n                        <th scope=\"col\">Van</th>\n                        <th scope=\"col\">Tot</th>\n                        <th scope=\"col\">\n                            <button *ngIf=\"editable\"\n                                    [hidden]=\"selectedRitdeelActies.length===0\"\n                                    id=\"bulkSetOngeplandButton\"\n                                    [attr.data-test-id]=\"'unplan-all-actions'\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                    (click)=\"deleteActiesUitRit()\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">X\n                            </button>\n                        </th>\n                    </tr>\n\n                    <tr *ngFor=\"let actie of selectedRitdeelActies; let i = index\" id=\"ritdetails-a{{i}}\">\n                        <td id=\"ritdetails-a{{i}}-omschrijving\" class=\"nowrap\">{{ actieOmschrijvingTekst(actie) }}</td>\n                        <td id=\"ritdetails-a{{i}}-vanKmLint\">{{ actieVanKmTekst(actie)}}</td>\n                        <td id=\"ritdetails-a{{i}}-totKmLint\">{{ actieTotKmTekst(actie)}}</td>\n                        <td style=\"text-align:right\">\n                            <button *ngIf=\"editable\"\n                                    id=\"ritdetails-a{{i}}-del\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                    (click)=\"deleteActieUitRit(actie)\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">X\n                            </button>\n                        </td>\n                    </tr>\n                </table>\n                <h4>Ongeplande acties</h4>\n                <table aria-hidden=\"true\">\n                    <tr>\n                        <th scope=\"col\">Actie</th>\n                        <th scope=\"col\">Van</th>\n                        <th scope=\"col\">Tot</th>\n                        <th scope=\"col\">\n                            <button *ngIf=\"editable\"\n                                    [hidden]=\"selectedRitdeelOngeplandeActies.length===0\"\n                                    id=\"bulkSetGeplandButton\"\n                                    [attr.data-test-id]=\"'plan-all-actions'\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-success loxia-btn-sm\"\n                                    (click)=\"voegActiesToeAanRit()\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">^\n                            </button>\n                        </th>\n                    </tr>\n\n                    <tr *ngFor=\"let ongeplandeActie of selectedRitdeelOngeplandeActies; let i = index\"\n                        id=\"ritdetails-oa{{i}}\">\n                        <td id=\"ritdetails-oa{{i}}-omschrijving\" class=\"nowrap\">{{actieOmschrijvingTekst(ongeplandeActie.actie) }}</td>\n                        <td id=\"ritdetails-oa{{i}}-vanKmLint\">{{ actieVanKmTekst(ongeplandeActie.actie)}}</td>\n                        <td id=\"ritdetails-oa{{i}}-totKmLint\">{{ actieTotKmTekst(ongeplandeActie.actie)}}</td>\n                        <td style=\"text-align:right\">\n                            <button *ngIf=\"editable\"\n                                    id=\"ritdetails-oa{{i}}-del\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-success loxia-btn-sm\"\n                                    (click)=\"voegActieToeAanRit(ongeplandeActie)\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">^\n                            </button>\n                        </td>\n                    </tr>\n                </table>\n            </div>\n        </div>\n        <div class=\"knop-pane\">\n            <button type=\"button\"\n                    class=\"loxia-btn loxia-btn-primary loxia-btn-sm\"\n                    [attr.data-test-id]=\"'plan-all-actions-for-file'\"\n                    [innerText]=\"'Plan acties hele rit'\"\n                    (click)=\"planAlleRitActies()\">\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".panes-container{display:inline;height:100%;border:1px solid black}table{width:100%}th{padding:5px;z-index:1000}td{padding:4px}tr:nth-child(2n){background:#f0f0f0}tr:nth-child(odd){background:#fff}.top-pane{height:45vh;overflow:auto}.actie-pane{height:35vh;overflow:auto}.knop-pane{height:5vh;justify-content:center;display:flex;align-items:center}.panes-container,.panes-separator,.top-pane,.actie-pane{margin:0;padding:0;width:100%}.selected{background:#ffff80!important}.disabled{background:gray!important}.visible-outside-window{background:#87cefa!important}.table-scroll-header-fix tbody{display:block;height:40vh;overflow:auto}.tableFixHead{overflow-y:auto}.tableFixHead thead th{position:sticky;top:0;background-color:#fff}.table{margin-bottom:0}.table td,.table th{border-top:none;border-bottom:none;padding-left:.75em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenLijstComponent, deps: [{ token: i2$1.Store }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RitdelenLijstComponent, selector: "ritdelen-lijst", inputs: { nietGeplandeActies: "nietGeplandeActies" }, outputs: { focusEmitter: "focusEmitter", keurAlleActiesGoed: "keurAlleActiesGoed" }, ngImport: i0, template: "<div id=\"ritdelen-lijst\">\n    <div class=\"sidebar-header\">\n        <h3 [attr.data-test-id]=\"'title-rit-details'\">Ritdetails</h3>\n    </div>\n    <div class=\"panes-container\">\n        <div class=\"top-pane tableFixHead\" id=\"top-pane\">\n            <table class=\"table\" aria-hidden=\"true\" [attr.data-test-id]=\"'table-rit-details'\">\n                <thead>\n                <tr>\n                    <th scope=\"col\">\n                        <input #input\n                               type=\"checkbox\"\n                               checked\n                               class=\"checkbox col-visibility\"\n                               (change)=\"toggleZichtbaarheidAlleRitdelen(input.checked)\"\n                               id=\"ritdetails-selecteerAlles\"\n                               title=\"Selecteer alles\"\n                               [attr.data-test-id]=\"'checkbox-alle-bewegingen'\">\n                    </th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">DW</th>\n                    <th scope=\"col\">PPLG(s)</th>\n                    <th scope=\"col\">Treinnr.</th>\n                    <th scope=\"col\"></th>\n                </tr>\n                </thead>\n\n                <tr *ngFor=\"let ritdeelViewModel of ritdeelViewModels; let i = index\"\n                    class=\"{{ selectedRitdeelClass(ritdeelViewModel.ritdeel) }}\" id=\"ritdetails-r{{i}}\">\n                    <td>\n                        <input id=\"ritdetails-r{{i}}-zichtbaar\"\n                               [attr.data-test-id]=\"'checkbox-r'+i\"\n                               type=\"checkbox\"\n                               class=\"checkbox col-visibility\"\n                               [checked]=\"ritdeelViewModel.isZichtbaar\"\n                               [title]=\"ritdeelViewModel.title\"\n                               (change)=\"toggleRitdeelZichtbaarheid(ritdeelViewModel.ritdeel)\"\n                               [hidden]=\"ritdeelViewModel.isNietBeschikbaar\"/>\n                    </td>\n                    <td id=\"ritdetails-r{{i}}-gewijzigd\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.isNieuw}}</td>\n                    <td id=\"ritdetails-r{{i}}-vanSpoor\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.vanPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSpoor\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.naarPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-dwangNummer\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.dwangNummer}}</td>\n                    <td id=\"ritdetails-r{{i}}-pplgs\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.pplgString}}</td>\n                    <td id=\"ritdetails-r{{i}}-treinNummer\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.treinNummer}}</td>\n                    <td style=\"text-align:right\">\n                        <button *ngIf=\"editable\"\n                                id=\"ritdetails-r{{i}}-del\"\n                                type=\"button\"\n                                class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                (click)=\"deleteRitdeel(ritdeelViewModel.ritdeel)\">X\n                        </button>\n                    </td>\n                </tr>\n\n            </table>\n        </div>\n        <div class=\"actie-pane\">\n            <div *ngIf=\"selectedRitdeel  && (selectedRitdeelActies.length > 0 || selectedRitdeelOngeplandeActies.length > 0) \"\n                 id=\"actie-pane\">\n                <h4>Geplande acties</h4>\n                <table aria-hidden=\"true\">\n                    <tr>\n                        <th scope=\"col\">Actie</th>\n                        <th scope=\"col\">Van</th>\n                        <th scope=\"col\">Tot</th>\n                        <th scope=\"col\">\n                            <button *ngIf=\"editable\"\n                                    [hidden]=\"selectedRitdeelActies.length===0\"\n                                    id=\"bulkSetOngeplandButton\"\n                                    [attr.data-test-id]=\"'unplan-all-actions'\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                    (click)=\"deleteActiesUitRit()\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">X\n                            </button>\n                        </th>\n                    </tr>\n\n                    <tr *ngFor=\"let actie of selectedRitdeelActies; let i = index\" id=\"ritdetails-a{{i}}\">\n                        <td id=\"ritdetails-a{{i}}-omschrijving\" class=\"nowrap\">{{ actieOmschrijvingTekst(actie) }}</td>\n                        <td id=\"ritdetails-a{{i}}-vanKmLint\">{{ actieVanKmTekst(actie)}}</td>\n                        <td id=\"ritdetails-a{{i}}-totKmLint\">{{ actieTotKmTekst(actie)}}</td>\n                        <td style=\"text-align:right\">\n                            <button *ngIf=\"editable\"\n                                    id=\"ritdetails-a{{i}}-del\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                    (click)=\"deleteActieUitRit(actie)\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">X\n                            </button>\n                        </td>\n                    </tr>\n                </table>\n                <h4>Ongeplande acties</h4>\n                <table aria-hidden=\"true\">\n                    <tr>\n                        <th scope=\"col\">Actie</th>\n                        <th scope=\"col\">Van</th>\n                        <th scope=\"col\">Tot</th>\n                        <th scope=\"col\">\n                            <button *ngIf=\"editable\"\n                                    [hidden]=\"selectedRitdeelOngeplandeActies.length===0\"\n                                    id=\"bulkSetGeplandButton\"\n                                    [attr.data-test-id]=\"'plan-all-actions'\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-success loxia-btn-sm\"\n                                    (click)=\"voegActiesToeAanRit()\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">^\n                            </button>\n                        </th>\n                    </tr>\n\n                    <tr *ngFor=\"let ongeplandeActie of selectedRitdeelOngeplandeActies; let i = index\"\n                        id=\"ritdetails-oa{{i}}\">\n                        <td id=\"ritdetails-oa{{i}}-omschrijving\" class=\"nowrap\">{{actieOmschrijvingTekst(ongeplandeActie.actie) }}</td>\n                        <td id=\"ritdetails-oa{{i}}-vanKmLint\">{{ actieVanKmTekst(ongeplandeActie.actie)}}</td>\n                        <td id=\"ritdetails-oa{{i}}-totKmLint\">{{ actieTotKmTekst(ongeplandeActie.actie)}}</td>\n                        <td style=\"text-align:right\">\n                            <button *ngIf=\"editable\"\n                                    id=\"ritdetails-oa{{i}}-del\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-success loxia-btn-sm\"\n                                    (click)=\"voegActieToeAanRit(ongeplandeActie)\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">^\n                            </button>\n                        </td>\n                    </tr>\n                </table>\n            </div>\n        </div>\n        <div class=\"knop-pane\">\n            <button type=\"button\"\n                    class=\"loxia-btn loxia-btn-primary loxia-btn-sm\"\n                    [attr.data-test-id]=\"'plan-all-actions-for-file'\"\n                    [innerText]=\"'Plan acties hele rit'\"\n                    (click)=\"planAlleRitActies()\">\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".panes-container{display:inline;height:100%;border:1px solid black}table{width:100%}th{padding:5px;z-index:1000}td{padding:4px}tr:nth-child(2n){background:#f0f0f0}tr:nth-child(odd){background:#fff}.top-pane{height:45vh;overflow:auto}.actie-pane{height:35vh;overflow:auto}.knop-pane{height:5vh;justify-content:center;display:flex;align-items:center}.panes-container,.panes-separator,.top-pane,.actie-pane{margin:0;padding:0;width:100%}.selected{background:#ffff80!important}.disabled{background:gray!important}.visible-outside-window{background:#87cefa!important}.table-scroll-header-fix tbody{display:block;height:40vh;overflow:auto}.tableFixHead{overflow-y:auto}.tableFixHead thead th{position:sticky;top:0;background-color:#fff}.table{margin-bottom:0}.table td,.table th{border-top:none;border-bottom:none;padding-left:.75em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenLijstComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenLijstComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ritdelen-lijst', changeDetection: ChangeDetectionStrategy.Default, template: "<div id=\"ritdelen-lijst\">\n    <div class=\"sidebar-header\">\n        <h3 [attr.data-test-id]=\"'title-rit-details'\">Ritdetails</h3>\n    </div>\n    <div class=\"panes-container\">\n        <div class=\"top-pane tableFixHead\" id=\"top-pane\">\n            <table class=\"table\" aria-hidden=\"true\" [attr.data-test-id]=\"'table-rit-details'\">\n                <thead>\n                <tr>\n                    <th scope=\"col\">\n                        <input #input\n                               type=\"checkbox\"\n                               checked\n                               class=\"checkbox col-visibility\"\n                               (change)=\"toggleZichtbaarheidAlleRitdelen(input.checked)\"\n                               id=\"ritdetails-selecteerAlles\"\n                               title=\"Selecteer alles\"\n                               [attr.data-test-id]=\"'checkbox-alle-bewegingen'\">\n                    </th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">DW</th>\n                    <th scope=\"col\">PPLG(s)</th>\n                    <th scope=\"col\">Treinnr.</th>\n                    <th scope=\"col\"></th>\n                </tr>\n                </thead>\n\n                <tr *ngFor=\"let ritdeelViewModel of ritdeelViewModels; let i = index\"\n                    class=\"{{ selectedRitdeelClass(ritdeelViewModel.ritdeel) }}\" id=\"ritdetails-r{{i}}\">\n                    <td>\n                        <input id=\"ritdetails-r{{i}}-zichtbaar\"\n                               [attr.data-test-id]=\"'checkbox-r'+i\"\n                               type=\"checkbox\"\n                               class=\"checkbox col-visibility\"\n                               [checked]=\"ritdeelViewModel.isZichtbaar\"\n                               [title]=\"ritdeelViewModel.title\"\n                               (change)=\"toggleRitdeelZichtbaarheid(ritdeelViewModel.ritdeel)\"\n                               [hidden]=\"ritdeelViewModel.isNietBeschikbaar\"/>\n                    </td>\n                    <td id=\"ritdetails-r{{i}}-gewijzigd\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.isNieuw}}</td>\n                    <td id=\"ritdetails-r{{i}}-vanSpoor\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.vanPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSpoor\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.naarPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-dwangNummer\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.dwangNummer}}</td>\n                    <td id=\"ritdetails-r{{i}}-pplgs\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.pplgString}}</td>\n                    <td id=\"ritdetails-r{{i}}-treinNummer\" (click)=\"selectRitdeel($event, ritdeelViewModel.ritdeel)\">{{ritdeelViewModel.treinNummer}}</td>\n                    <td style=\"text-align:right\">\n                        <button *ngIf=\"editable\"\n                                id=\"ritdetails-r{{i}}-del\"\n                                type=\"button\"\n                                class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                (click)=\"deleteRitdeel(ritdeelViewModel.ritdeel)\">X\n                        </button>\n                    </td>\n                </tr>\n\n            </table>\n        </div>\n        <div class=\"actie-pane\">\n            <div *ngIf=\"selectedRitdeel  && (selectedRitdeelActies.length > 0 || selectedRitdeelOngeplandeActies.length > 0) \"\n                 id=\"actie-pane\">\n                <h4>Geplande acties</h4>\n                <table aria-hidden=\"true\">\n                    <tr>\n                        <th scope=\"col\">Actie</th>\n                        <th scope=\"col\">Van</th>\n                        <th scope=\"col\">Tot</th>\n                        <th scope=\"col\">\n                            <button *ngIf=\"editable\"\n                                    [hidden]=\"selectedRitdeelActies.length===0\"\n                                    id=\"bulkSetOngeplandButton\"\n                                    [attr.data-test-id]=\"'unplan-all-actions'\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                    (click)=\"deleteActiesUitRit()\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">X\n                            </button>\n                        </th>\n                    </tr>\n\n                    <tr *ngFor=\"let actie of selectedRitdeelActies; let i = index\" id=\"ritdetails-a{{i}}\">\n                        <td id=\"ritdetails-a{{i}}-omschrijving\" class=\"nowrap\">{{ actieOmschrijvingTekst(actie) }}</td>\n                        <td id=\"ritdetails-a{{i}}-vanKmLint\">{{ actieVanKmTekst(actie)}}</td>\n                        <td id=\"ritdetails-a{{i}}-totKmLint\">{{ actieTotKmTekst(actie)}}</td>\n                        <td style=\"text-align:right\">\n                            <button *ngIf=\"editable\"\n                                    id=\"ritdetails-a{{i}}-del\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-danger btn-sm\"\n                                    (click)=\"deleteActieUitRit(actie)\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">X\n                            </button>\n                        </td>\n                    </tr>\n                </table>\n                <h4>Ongeplande acties</h4>\n                <table aria-hidden=\"true\">\n                    <tr>\n                        <th scope=\"col\">Actie</th>\n                        <th scope=\"col\">Van</th>\n                        <th scope=\"col\">Tot</th>\n                        <th scope=\"col\">\n                            <button *ngIf=\"editable\"\n                                    [hidden]=\"selectedRitdeelOngeplandeActies.length===0\"\n                                    id=\"bulkSetGeplandButton\"\n                                    [attr.data-test-id]=\"'plan-all-actions'\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-success loxia-btn-sm\"\n                                    (click)=\"voegActiesToeAanRit()\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">^\n                            </button>\n                        </th>\n                    </tr>\n\n                    <tr *ngFor=\"let ongeplandeActie of selectedRitdeelOngeplandeActies; let i = index\"\n                        id=\"ritdetails-oa{{i}}\">\n                        <td id=\"ritdetails-oa{{i}}-omschrijving\" class=\"nowrap\">{{actieOmschrijvingTekst(ongeplandeActie.actie) }}</td>\n                        <td id=\"ritdetails-oa{{i}}-vanKmLint\">{{ actieVanKmTekst(ongeplandeActie.actie)}}</td>\n                        <td id=\"ritdetails-oa{{i}}-totKmLint\">{{ actieTotKmTekst(ongeplandeActie.actie)}}</td>\n                        <td style=\"text-align:right\">\n                            <button *ngIf=\"editable\"\n                                    id=\"ritdetails-oa{{i}}-del\"\n                                    type=\"button\"\n                                    class=\"loxia-btn loxia-btn-success loxia-btn-sm\"\n                                    (click)=\"voegActieToeAanRit(ongeplandeActie)\"\n                                    [disabled]=\"disableActieKnoppenVanRitdeel\">^\n                            </button>\n                        </td>\n                    </tr>\n                </table>\n            </div>\n        </div>\n        <div class=\"knop-pane\">\n            <button type=\"button\"\n                    class=\"loxia-btn loxia-btn-primary loxia-btn-sm\"\n                    [attr.data-test-id]=\"'plan-all-actions-for-file'\"\n                    [innerText]=\"'Plan acties hele rit'\"\n                    (click)=\"planAlleRitActies()\">\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".panes-container{display:inline;height:100%;border:1px solid black}table{width:100%}th{padding:5px;z-index:1000}td{padding:4px}tr:nth-child(2n){background:#f0f0f0}tr:nth-child(odd){background:#fff}.top-pane{height:45vh;overflow:auto}.actie-pane{height:35vh;overflow:auto}.knop-pane{height:5vh;justify-content:center;display:flex;align-items:center}.panes-container,.panes-separator,.top-pane,.actie-pane{margin:0;padding:0;width:100%}.selected{background:#ffff80!important}.disabled{background:gray!important}.visible-outside-window{background:#87cefa!important}.table-scroll-header-fix tbody{display:block;height:40vh;overflow:auto}.tableFixHead{overflow-y:auto}.tableFixHead thead th{position:sticky;top:0;background-color:#fff}.table{margin-bottom:0}.table td,.table th{border-top:none;border-bottom:none;padding-left:.75em}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: SignaleringsBeeldManagerService }], propDecorators: { nietGeplandeActies: [{
@@ -1975,10 +3385,10 @@ class RitdelenViewComponent {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenViewComponent, deps: [{ token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RitdelenViewComponent, selector: "ritdelen-view", outputs: { focusEmitter: "focusEmitter" }, host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div id=\"ritdelen-lijst\">\n    <div class=\"sidebar-header\">\n        <h3>Ritdetails view</h3>\n    </div>\n    <div class=\"panes-container\">\n        <div class=\"top-pane tableFixHead\" id=\"top-pane\">\n            <table class=\"table\" aria-hidden=\"true\">\n                <thead>\n                <tr>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\" colspan=\"2\" style=\"text-align:center;\">Spoor</th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\" colspan=\"2\" style=\"text-align:center;\">Sein</th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\"></th>\n                </tr>\n                <tr>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">DW</th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">Treinnummer</th>\n                    <th scope=\"col\"></th>\n                </tr>\n                </thead>\n\n                <tr *ngFor=\"let ritdeelViewModel of ritdeelViewModels; let i = index\"\n                    class=\"{{ selectedRitdeelClass(ritdeelViewModel.ritdeel) }}\" id=\"ritdetails-r{{i}}\">\n                    <td id=\"ritdetails-r{{i}}-gewijzigd\" (click)=\"selectRitdeel(i)\"></td>\n                    <td id=\"ritdetails-r{{i}}-vanSpoor\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.vanPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSpoor\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.naarPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-dwangNummer\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.dwangNummer}}</td>\n                    <td id=\"ritdetails-r{{i}}-vanSeinName\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.vanSeinName}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSeinName\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.naarSeinName}}</td>\n                    <td id=\"ritdetails-r{{i}}-treinNummer\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.treinNummer}}</td>\n                    <td style=\"text-align:right\">\n                    </td>\n                </tr>\n            </table>\n        </div>\n    </div>\n</div>\n", styles: [".panes-container{display:inline;height:100%}table{width:100%}th,td{padding:5px}tr:nth-child(2n){background:#f0f0f0}tr:nth-child(odd){background:#fff}.top-pane{height:90vh;overflow:auto}.panes-container,.panes-separator,.top-pane{margin:0;padding:0;width:100%}.selected{background:#ffff80!important}.disabled{background:gray!important}.visible-outside-window{background:#87cefa!important}.table-scroll-header-fix tbody{display:block;height:40vh;overflow:auto}.tableFixHead{overflow-y:auto}.tableFixHead thead th{position:sticky;top:0;background-color:#fff}.table{margin-bottom:0}.table td,.table th{border-top:none;border-bottom:none;padding-left:.75em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenViewComponent, deps: [{ token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RitdelenViewComponent, selector: "ritdelen-view", outputs: { focusEmitter: "focusEmitter" }, host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div id=\"ritdelen-lijst\">\n    <div class=\"sidebar-header\">\n        <h3>Ritdetails view</h3>\n    </div>\n    <div class=\"panes-container\">\n        <div class=\"top-pane tableFixHead\" id=\"top-pane\">\n            <table class=\"table\" aria-hidden=\"true\">\n                <thead>\n                <tr>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\" colspan=\"2\" style=\"text-align:center;\">Spoor</th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\" colspan=\"2\" style=\"text-align:center;\">Sein</th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\"></th>\n                </tr>\n                <tr>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">DW</th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">Treinnummer</th>\n                    <th scope=\"col\"></th>\n                </tr>\n                </thead>\n\n                <tr *ngFor=\"let ritdeelViewModel of ritdeelViewModels; let i = index\"\n                    class=\"{{ selectedRitdeelClass(ritdeelViewModel.ritdeel) }}\" id=\"ritdetails-r{{i}}\">\n                    <td id=\"ritdetails-r{{i}}-gewijzigd\" (click)=\"selectRitdeel(i)\"></td>\n                    <td id=\"ritdetails-r{{i}}-vanSpoor\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.vanPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSpoor\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.naarPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-dwangNummer\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.dwangNummer}}</td>\n                    <td id=\"ritdetails-r{{i}}-vanSeinName\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.vanSeinName}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSeinName\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.naarSeinName}}</td>\n                    <td id=\"ritdetails-r{{i}}-treinNummer\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.treinNummer}}</td>\n                    <td style=\"text-align:right\">\n                    </td>\n                </tr>\n            </table>\n        </div>\n    </div>\n</div>\n", styles: [".panes-container{display:inline;height:100%}table{width:100%}th,td{padding:5px}tr:nth-child(2n){background:#f0f0f0}tr:nth-child(odd){background:#fff}.top-pane{height:90vh;overflow:auto}.panes-container,.panes-separator,.top-pane{margin:0;padding:0;width:100%}.selected{background:#ffff80!important}.disabled{background:gray!important}.visible-outside-window{background:#87cefa!important}.table-scroll-header-fix tbody{display:block;height:40vh;overflow:auto}.tableFixHead{overflow-y:auto}.tableFixHead thead th{position:sticky;top:0;background-color:#fff}.table{margin-bottom:0}.table td,.table th{border-top:none;border-bottom:none;padding-left:.75em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ritdelen-view', template: "<div id=\"ritdelen-lijst\">\n    <div class=\"sidebar-header\">\n        <h3>Ritdetails view</h3>\n    </div>\n    <div class=\"panes-container\">\n        <div class=\"top-pane tableFixHead\" id=\"top-pane\">\n            <table class=\"table\" aria-hidden=\"true\">\n                <thead>\n                <tr>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\" colspan=\"2\" style=\"text-align:center;\">Spoor</th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\" colspan=\"2\" style=\"text-align:center;\">Sein</th>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\"></th>\n                </tr>\n                <tr>\n                    <th scope=\"col\"></th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">DW</th>\n                    <th scope=\"col\">Van</th>\n                    <th scope=\"col\">Naar</th>\n                    <th scope=\"col\">Treinnummer</th>\n                    <th scope=\"col\"></th>\n                </tr>\n                </thead>\n\n                <tr *ngFor=\"let ritdeelViewModel of ritdeelViewModels; let i = index\"\n                    class=\"{{ selectedRitdeelClass(ritdeelViewModel.ritdeel) }}\" id=\"ritdetails-r{{i}}\">\n                    <td id=\"ritdetails-r{{i}}-gewijzigd\" (click)=\"selectRitdeel(i)\"></td>\n                    <td id=\"ritdetails-r{{i}}-vanSpoor\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.vanPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSpoor\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.naarPrlSpoor}}</td>\n                    <td id=\"ritdetails-r{{i}}-dwangNummer\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.dwangNummer}}</td>\n                    <td id=\"ritdetails-r{{i}}-vanSeinName\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.vanSeinName}}</td>\n                    <td id=\"ritdetails-r{{i}}-naarSeinName\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.naarSeinName}}</td>\n                    <td id=\"ritdetails-r{{i}}-treinNummer\" (click)=\"selectRitdeel(i)\">{{ritdeelViewModel.treinNummer}}</td>\n                    <td style=\"text-align:right\">\n                    </td>\n                </tr>\n            </table>\n        </div>\n    </div>\n</div>\n", styles: [".panes-container{display:inline;height:100%}table{width:100%}th,td{padding:5px}tr:nth-child(2n){background:#f0f0f0}tr:nth-child(odd){background:#fff}.top-pane{height:90vh;overflow:auto}.panes-container,.panes-separator,.top-pane{margin:0;padding:0;width:100%}.selected{background:#ffff80!important}.disabled{background:gray!important}.visible-outside-window{background:#87cefa!important}.table-scroll-header-fix tbody{display:block;height:40vh;overflow:auto}.tableFixHead{overflow-y:auto}.tableFixHead thead th{position:sticky;top:0;background-color:#fff}.table{margin-bottom:0}.table td,.table th{border-top:none;border-bottom:none;padding-left:.75em}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }], propDecorators: { focusEmitter: [{
@@ -1999,49 +3409,18 @@ 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;
         this.viewerControlsService = viewerControlsService;
         this.bewegingUtils = bewegingUtils;
         this.paginationSize = 4;
+        this.treinpad = undefined;
+        this.goedgekeurd = new EventEmitter();
         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 }) {
@@ -2050,27 +3429,26 @@ class ViewerControlsComponent {
         }
     }
     showGoedkeuren() {
-        return this.editable && this.viewerControlsService.selectieInfos.length !== 0;
+        return this.editable;
     }
     goedkeurenClick() {
-        const ritDelen = this.viewerControlsService.ritdelen;
-        if (ritDelen) {
-            delete this.treinpad.aantalRitActies;
-            this.treinpad.bewegingen = this.bewegingUtils.extractBewegingenUitRitdelen(ritDelen, this.viewerControlsService.origineelTreinPad.bewegingen);
-            this.goedgekeurd.emit(this.treinpad);
-            this.viewerControlsService.setOrigineelTreinPad(this.treinpad);
-        }
+        this.store.select('ritDelen').pipe(filter(ritdelen => !!ritdelen), tap(ritDelen => {
+            if (this.treinpad) {
+                delete this.treinpad.aantalRitActies;
+                this.treinpad.bewegingen = this.bewegingUtils.extractBewegingenUitRitdelen(ritDelen, this.viewerControlsService.origineelTreinPad.bewegingen);
+                this.goedgekeurd.emit(this.treinpad);
+                this.viewerControlsService.setOrigineelTreinPad(this.treinpad);
+            }
+        })).subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ViewerControlsComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: BewegingUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ViewerControlsComponent, selector: "viewer-controls", inputs: { paginationSize: "paginationSize", iaversieinfo: "iaversieinfo", treinpad: "treinpad", goedgekeurd: "goedgekeurd" }, usesOnChanges: true, ngImport: i0, template: "<button id=\"toonSideNavKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm open-sidenav-button\"\n        (click)=\"viewerControlsService.toggleSideNavVisible()\"\n        [class.active]=\"viewerControlsService.sideNavOpen$ | async\"\n        [hidden]=\"printing$ | async\">Ritdetails\n</button>\n<button *ngIf=\"showGoedkeuren()\"\n        id=\"goedkeurenKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm goedkeuren-button\"\n        (click)=\"goedkeurenClick()\"\n        [disabled]=\"(valideRit$ | async ) === false\"\n        [hidden]=\"printing$ | async\">Goedkeuren\n</button>\n\n<carousel-controls [paginationSize]=\"paginationSize\"\n                   [iaversieinfo]=\"iaversieinfo\"\n                   [sideNavOpen]=\"viewerControlsService.sideNavOpen$ | async\">\n</carousel-controls>\n", styles: [".open-sidenav-button.active{visibility:hidden}.open-sidenav-button,.goedkeuren-button{position:absolute;top:15px;z-index:600}.open-sidenav-button{left:15px}.goedkeuren-button{right:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CarouselControlsComponent, selector: "carousel-controls", inputs: ["paginationSize", "iaversieinfo", "sideNavOpen"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewerControlsComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: BewegingUtils }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ViewerControlsComponent, selector: "viewer-controls", inputs: { paginationSize: "paginationSize", treinpad: "treinpad", goedgekeurd: "goedgekeurd" }, usesOnChanges: true, ngImport: i0, template: "<button id=\"toonSideNavKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm open-sidenav-button\"\n        (click)=\"viewerControlsService.toggleSideNavVisible()\"\n        [class.active]=\"viewerControlsService.sideNavOpen$ | async\"\n        [hidden]=\"printing$ | async\">Ritdetails\n</button>\n<button *ngIf=\"showGoedkeuren()\"\n        id=\"goedkeurenKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm goedkeuren-button\"\n        (click)=\"goedkeurenClick()\"\n        [disabled]=\"(valideRit$ | async ) === false\"\n        [hidden]=\"printing$ | async\">Goedkeuren\n</button>\n\n<carousel-controls [paginationSize]=\"paginationSize\"\n                   [sideNavOpen]=\"viewerControlsService.sideNavOpen$ | async\">\n</carousel-controls>\n", styles: [".open-sidenav-button.active{visibility:hidden}.open-sidenav-button,.goedkeuren-button{position:absolute;top:15px;z-index:600}.open-sidenav-button{left:15px}.goedkeuren-button{right:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CarouselControlsComponent, selector: "carousel-controls", inputs: ["paginationSize", "sideNavOpen"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ViewerControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewerControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'viewer-controls', template: "<button id=\"toonSideNavKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm open-sidenav-button\"\n        (click)=\"viewerControlsService.toggleSideNavVisible()\"\n        [class.active]=\"viewerControlsService.sideNavOpen$ | async\"\n        [hidden]=\"printing$ | async\">Ritdetails\n</button>\n<button *ngIf=\"showGoedkeuren()\"\n        id=\"goedkeurenKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm goedkeuren-button\"\n        (click)=\"goedkeurenClick()\"\n        [disabled]=\"(valideRit$ | async ) === false\"\n        [hidden]=\"printing$ | async\">Goedkeuren\n</button>\n\n<carousel-controls [paginationSize]=\"paginationSize\"\n                   [iaversieinfo]=\"iaversieinfo\"\n                   [sideNavOpen]=\"viewerControlsService.sideNavOpen$ | async\">\n</carousel-controls>\n", styles: [".open-sidenav-button.active{visibility:hidden}.open-sidenav-button,.goedkeuren-button{position:absolute;top:15px;z-index:600}.open-sidenav-button{left:15px}.goedkeuren-button{right:15px}\n"] }]
+            args: [{ selector: 'viewer-controls', template: "<button id=\"toonSideNavKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm open-sidenav-button\"\n        (click)=\"viewerControlsService.toggleSideNavVisible()\"\n        [class.active]=\"viewerControlsService.sideNavOpen$ | async\"\n        [hidden]=\"printing$ | async\">Ritdetails\n</button>\n<button *ngIf=\"showGoedkeuren()\"\n        id=\"goedkeurenKnop\"\n        class=\"loxia-btn loxia-btn-primary loxia-btn-sm goedkeuren-button\"\n        (click)=\"goedkeurenClick()\"\n        [disabled]=\"(valideRit$ | async ) === false\"\n        [hidden]=\"printing$ | async\">Goedkeuren\n</button>\n\n<carousel-controls [paginationSize]=\"paginationSize\"\n                   [sideNavOpen]=\"viewerControlsService.sideNavOpen$ | async\">\n</carousel-controls>\n", styles: [".open-sidenav-button.active{visibility:hidden}.open-sidenav-button,.goedkeuren-button{position:absolute;top:15px;z-index:600}.open-sidenav-button{left:15px}.goedkeuren-button{right:15px}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: ViewerControlService }, { type: BewegingUtils }], propDecorators: { paginationSize: [{
                 type: Input
-            }], iaversieinfo: [{
-                type: Input
             }], treinpad: [{
                 type: Input
             }], goedgekeurd: [{
@@ -2125,7 +3503,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, { treinNummer: undefined, actie: entry.value.actie });
+                    puicNaarOngeplandeActieMap.put(entry.key, { actie: entry.value.actie });
                 }
             });
         }
@@ -2185,12 +3563,16 @@ 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.selectieInfos$ = this.store.select('selectieInfos');
         this.rightClickableIds = [];
         this.contextMenuActions = [];
         this.contextMenuStyle = { display: 'none' };
+        this.editable = false;
         this.puicNaarBeginSeinRitdeel = new Map();
         this.puicNaarEindSeinCombinatie = new Map();
         this.puicNaarAlternatieveRoute = new Map();
@@ -2214,7 +3596,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());
@@ -2241,7 +3623,6 @@ class SvgVisualisatieComponent {
                 this.store.dispatch(navigeerBuitenRit(puic));
             }
         }
-        this.store.dispatch(SetSelectedRitdeel(undefined));
     }
     handleImxviewRightClick(evt) {
         const fn = () => {
@@ -2272,7 +3653,7 @@ class SvgVisualisatieComponent {
     handleNieuweRouteToegevoegd() {
         this.store.select('nieuweRoute')
             .subscribe((nieuweRoute) => {
-            if (nieuweRoute.isValid()) {
+            if (nieuweRoute?.isValid()) {
                 this.store.dispatch(ResetNieuweRoute());
                 this.store.dispatch(ritdeelInvoegen(nieuweRoute));
             }
@@ -2385,7 +3766,7 @@ class SvgVisualisatieComponent {
         });
         this.viewerControlsService.setValideRit(!gebrokenRit);
         this.store.dispatch(SetGeplandeActies(actieOpRitSelectiePuics));
-        const actieOpRitSelectiePuicsArray = Utils.flatMap(Array.from(actieOpRitSelectiePuics.values()), x => x);
+        const actieOpRitSelectiePuicsArray = Array.from(actieOpRitSelectiePuics.values()).flat();
         this.store.dispatch(SetActieOpRitSelectieIds(actieOpRitSelectiePuicsArray));
         ritSelectiePuics = ritSelectiePuics.filter(item => actieOpRitSelectiePuicsArray.indexOf(item) < 0); // make mutually exclusive
         this.store.dispatch(SetRitSelectieIds(ritSelectiePuics));
@@ -2418,12 +3799,12 @@ class SvgVisualisatieComponent {
     getPuics(topoElementen) {
         return topoElementen.map(e => e.getPuic());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgVisualisatieComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: ActieHelper }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SvgVisualisatieComponent, selector: "svg-visualisatie", inputs: { nietGeplandeActies: "nietGeplandeActies", useClickArea: "useClickArea" }, viewQueries: [{ propertyName: "imxviewer", first: true, predicate: ["imxviewercontainer"], descendants: true }], ngImport: i0, template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"viewerControlsService.selectieInfos\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.ImxViewerComponent, selector: "imx-viewer", inputs: ["useClickArea", "inlineDgnCssImport", "svgInfo", "selectieInfos", "clickableIds", "rightClickableIds", "popoverInfos", "zoomScaleSensitivity", "autoAlignSvgsHorizontally", "initialPanAndZoom"], outputs: ["clickHandler", "rightClickHandler", "svgLoaded", "panned"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgVisualisatieComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: ActieHelper }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SvgVisualisatieComponent, selector: "svg-visualisatie", inputs: { nietGeplandeActies: "nietGeplandeActies", useClickArea: "useClickArea" }, viewQueries: [{ propertyName: "imxviewer", first: true, predicate: ["imxviewercontainer"], descendants: true }], ngImport: i0, template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"selectieInfos$ | async\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.ImxViewerComponent, selector: "imx-viewer", inputs: ["useClickArea", "inlineDgnCssImport", "svgInfo", "selectieInfos", "clickableIds", "rightClickableIds", "popoverInfos", "zoomScaleSensitivity", "autoAlignSvgsHorizontally", "initialPanAndZoom"], outputs: ["clickHandler", "rightClickHandler", "svgLoaded", "panned"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgVisualisatieComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgVisualisatieComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg-visualisatie', template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"viewerControlsService.selectieInfos\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"] }]
+            args: [{ selector: 'svg-visualisatie', template: "<imx-viewer #imxviewercontainer\n            [svgInfo]=\"svgInfos$ | async\"\n            [selectieInfos]=\"selectieInfos$ | async\"\n            [clickableIds]=\"clickableIds\"\n            [rightClickableIds]=\"rightClickableIds\"\n            [popoverInfos]=\"popoverInfos\"\n            [inlineDgnCssImport]=\"false\"\n            [useClickArea]=\"useClickArea\"\n            [zoomScaleSensitivity]=\"0.25\"\n            (clickHandler)=\"handleImxviewClick($event)\"\n            (rightClickHandler)=\"handleImxviewRightClick($event)\"\n          ></imx-viewer>\n\n<ul id=\"contextMenu\" class=\"dropdown-menu\" role=\"menu\" [ngStyle]=\"contextMenuStyle\">\n    <li *ngFor=\"let action of contextMenuActions\"><a class=\"dropdown-item\" tabindex=\"-1\"\n                                                     (click)=\"action.click()\">{{action.label}}</a></li>\n</ul>\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: ViewerControlService }, { type: ActieHelper }, { type: SignaleringsBeeldManagerService }, { type: EditorService }], propDecorators: { nietGeplandeActies: [{
                 type: Input
             }], useClickArea: [{
@@ -2441,6 +3822,9 @@ class MstviewerComponent {
         this.printBewegingService = printBewegingService;
         this.paginationSize = 4;
         this.baseurl = 'https://acceptatie.raildesign.nl';
+        this.debug = false;
+        this.viewer = false;
+        this.useClickArea = false;
         this.goedgekeurd = new EventEmitter();
         this.subscriptions = new Subscription();
         this.subscriptions.add(this.store.select('nieuweBewegingen').subscribe(nieuweRit => {
@@ -2491,23 +3875,26 @@ class MstviewerComponent {
         }
     }
     printFocusBeweging(bewegingId) {
-        return this.printBewegingService.printBeweging(bewegingId, this.paginationSize, this.iaversieinfo);
+        return this.printBewegingService.printBeweging(bewegingId, this.paginationSize);
     }
     keurAlleActiesGoed() {
         this.viewerControlsService.keurAlleActiesGoed(this.ongeplandeActies);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstviewerComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: DebugService }, { token: PrintBewegingService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MstviewerComponent, selector: "mst-viewer", inputs: { iaversieinfo: "iaversieinfo", treinpad: "treinpad", ongeplandeActies: "ongeplandeActies", paginationSize: "paginationSize", baseurl: "baseurl", debug: "debug", viewer: "viewer", useClickArea: "useClickArea" }, outputs: { goedgekeurd: "goedgekeurd" }, usesOnChanges: true, ngImport: i0, template: "<loxia-messages></loxia-messages>\n<loxia-overlay *ngIf=\"(progressIndicator$ | async)\">\n    <loxia-progress-indicator id=\"progress-indicator\" [border]=\"false\" upperText=\"\">\n    </loxia-progress-indicator>\n</loxia-overlay>\n\n<div style=\"position: relative\">\n    <rpe-component [baseurl]=\"baseurl\" path=\"/mst/editor/editor.nocache.js\"></rpe-component>\n\n    <svg-visualisatie [useClickArea]=\"useClickArea\" [nietGeplandeActies]=\"ongeplandeActies\"></svg-visualisatie>\n\n    <nav [class.active]=\"(viewerControlsService.sideNavOpen$ | async) === false\" id=\"sidebar\">\n        <div id=\"dismiss\">\n            <em id=\"verbergSideNav\" class=\"fa fa-arrow-left\" (click)=\"viewerControlsService.toggleSideNavVisible()\">&times;</em>\n        </div>\n        <ritdelen-lijst *ngIf=\"!viewer\" (focusEmitter)=\"focusRitdeel($event)\" (keurAlleActiesGoed)=\"keurAlleActiesGoed()\"\n                        [nietGeplandeActies]=\"ongeplandeActies\"></ritdelen-lijst>\n        <ritdelen-view *ngIf=\"viewer\" (focusEmitter)=\"focusRitdeel($event)\"></ritdelen-view>\n    </nav>\n\n    <viewer-controls [paginationSize]=\"paginationSize\"\n                     [iaversieinfo]=\"iaversieinfo\"\n                     [treinpad]=\"treinpad\"\n                     [goedgekeurd]=\"goedgekeurd\"\n    ></viewer-controls>\n\n</div>\n", styles: ["#sidebar{min-width:350px;max-width:475px;background:#fff;transition:all .3s;height:93vh;position:absolute;top:0;z-index:20}#sidebar.active{margin-left:-475px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#dismiss{width:20px;height:20px;position:absolute;cursor:pointer;top:5px;right:0;color:#000;z-index:300}[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverlayComponent, selector: "loxia-overlay" }, { kind: "component", type: ProgressIndicatorComponent, selector: "loxia-progress-indicator" }, { kind: "component", type: RpeComponent, selector: "rpe-component", inputs: ["baseurl", "path"] }, { kind: "component", type: RitdelenLijstComponent, selector: "ritdelen-lijst", inputs: ["nietGeplandeActies"], outputs: ["focusEmitter", "keurAlleActiesGoed"] }, { kind: "component", type: RitdelenViewComponent, selector: "ritdelen-view", outputs: ["focusEmitter"] }, { kind: "component", type: ViewerControlsComponent, selector: "viewer-controls", inputs: ["paginationSize", "iaversieinfo", "treinpad", "goedgekeurd"] }, { kind: "component", type: SvgVisualisatieComponent, selector: "svg-visualisatie", inputs: ["nietGeplandeActies", "useClickArea"] }, { kind: "component", type: MessagesComponent, selector: "loxia-messages" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstviewerComponent, deps: [{ token: i2$1.Store }, { token: ViewerControlService }, { token: DebugService }, { token: PrintBewegingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MstviewerComponent, selector: "mst-viewer", inputs: { iaversieinfo: "iaversieinfo", treinpad: "treinpad", ongeplandeActies: "ongeplandeActies", paginationSize: "paginationSize", baseurl: "baseurl", debug: "debug", viewer: "viewer", useClickArea: "useClickArea" }, outputs: { goedgekeurd: "goedgekeurd" }, usesOnChanges: true, ngImport: i0, template: "<loxia-messages></loxia-messages>\n<loxia-overlay *ngIf=\"(progressIndicator$ | async)\">\n    <loxia-progress-indicator id=\"progress-indicator\" [border]=\"false\" upperText=\"\">\n    </loxia-progress-indicator>\n</loxia-overlay>\n\n<div style=\"position: relative\">\n    <rpe-component [baseurl]=\"baseurl\" path=\"/mst/editor/editor.nocache.js\"></rpe-component>\n\n    <svg-visualisatie [useClickArea]=\"useClickArea\" [nietGeplandeActies]=\"ongeplandeActies\"></svg-visualisatie>\n\n    <nav [class.active]=\"(viewerControlsService.sideNavOpen$ | async) === false\" id=\"sidebar\">\n        <div id=\"dismiss\">\n            <em id=\"verbergSideNav\" class=\"fa fa-arrow-left\" (click)=\"viewerControlsService.toggleSideNavVisible()\">&times;</em>\n        </div>\n        <ritdelen-lijst *ngIf=\"!viewer\" (focusEmitter)=\"focusRitdeel($event)\" (keurAlleActiesGoed)=\"keurAlleActiesGoed()\"\n                        [nietGeplandeActies]=\"ongeplandeActies\"></ritdelen-lijst>\n        <ritdelen-view *ngIf=\"viewer\" (focusEmitter)=\"focusRitdeel($event)\"></ritdelen-view>\n    </nav>\n\n    <viewer-controls [paginationSize]=\"paginationSize\"\n                     [treinpad]=\"treinpad\"\n                     [goedgekeurd]=\"goedgekeurd\"\n    ></viewer-controls>\n\n</div>\n", styles: ["#sidebar{min-width:350px;max-width:475px;background:#fff;transition:all .3s;height:93vh;position:absolute;top:0;z-index:20}#sidebar.active{margin-left:-475px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#dismiss{width:20px;height:20px;position:absolute;cursor:pointer;top:5px;right:0;color:#000;z-index:300}[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OverlayComponent, selector: "loxia-overlay" }, { kind: "component", type: ProgressIndicatorComponent, selector: "loxia-progress-indicator" }, { kind: "component", type: RpeComponent, selector: "rpe-component", inputs: ["baseurl", "path"] }, { kind: "component", type: RitdelenLijstComponent, selector: "ritdelen-lijst", inputs: ["nietGeplandeActies"], outputs: ["focusEmitter", "keurAlleActiesGoed"] }, { kind: "component", type: RitdelenViewComponent, selector: "ritdelen-view", outputs: ["focusEmitter"] }, { kind: "component", type: ViewerControlsComponent, selector: "viewer-controls", inputs: ["paginationSize", "treinpad", "goedgekeurd"] }, { kind: "component", type: SvgVisualisatieComponent, selector: "svg-visualisatie", inputs: ["nietGeplandeActies", "useClickArea"] }, { kind: "component", type: MessagesComponent, selector: "loxia-messages" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstviewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstviewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mst-viewer', template: "<loxia-messages></loxia-messages>\n<loxia-overlay *ngIf=\"(progressIndicator$ | async)\">\n    <loxia-progress-indicator id=\"progress-indicator\" [border]=\"false\" upperText=\"\">\n    </loxia-progress-indicator>\n</loxia-overlay>\n\n<div style=\"position: relative\">\n    <rpe-component [baseurl]=\"baseurl\" path=\"/mst/editor/editor.nocache.js\"></rpe-component>\n\n    <svg-visualisatie [useClickArea]=\"useClickArea\" [nietGeplandeActies]=\"ongeplandeActies\"></svg-visualisatie>\n\n    <nav [class.active]=\"(viewerControlsService.sideNavOpen$ | async) === false\" id=\"sidebar\">\n        <div id=\"dismiss\">\n            <em id=\"verbergSideNav\" class=\"fa fa-arrow-left\" (click)=\"viewerControlsService.toggleSideNavVisible()\">&times;</em>\n        </div>\n        <ritdelen-lijst *ngIf=\"!viewer\" (focusEmitter)=\"focusRitdeel($event)\" (keurAlleActiesGoed)=\"keurAlleActiesGoed()\"\n                        [nietGeplandeActies]=\"ongeplandeActies\"></ritdelen-lijst>\n        <ritdelen-view *ngIf=\"viewer\" (focusEmitter)=\"focusRitdeel($event)\"></ritdelen-view>\n    </nav>\n\n    <viewer-controls [paginationSize]=\"paginationSize\"\n                     [iaversieinfo]=\"iaversieinfo\"\n                     [treinpad]=\"treinpad\"\n                     [goedgekeurd]=\"goedgekeurd\"\n    ></viewer-controls>\n\n</div>\n", styles: ["#sidebar{min-width:350px;max-width:475px;background:#fff;transition:all .3s;height:93vh;position:absolute;top:0;z-index:20}#sidebar.active{margin-left:-475px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#dismiss{width:20px;height:20px;position:absolute;cursor:pointer;top:5px;right:0;color:#000;z-index:300}[hidden]{display:none}\n"] }]
+            args: [{ selector: 'mst-viewer', template: "<loxia-messages></loxia-messages>\n<loxia-overlay *ngIf=\"(progressIndicator$ | async)\">\n    <loxia-progress-indicator id=\"progress-indicator\" [border]=\"false\" upperText=\"\">\n    </loxia-progress-indicator>\n</loxia-overlay>\n\n<div style=\"position: relative\">\n    <rpe-component [baseurl]=\"baseurl\" path=\"/mst/editor/editor.nocache.js\"></rpe-component>\n\n    <svg-visualisatie [useClickArea]=\"useClickArea\" [nietGeplandeActies]=\"ongeplandeActies\"></svg-visualisatie>\n\n    <nav [class.active]=\"(viewerControlsService.sideNavOpen$ | async) === false\" id=\"sidebar\">\n        <div id=\"dismiss\">\n            <em id=\"verbergSideNav\" class=\"fa fa-arrow-left\" (click)=\"viewerControlsService.toggleSideNavVisible()\">&times;</em>\n        </div>\n        <ritdelen-lijst *ngIf=\"!viewer\" (focusEmitter)=\"focusRitdeel($event)\" (keurAlleActiesGoed)=\"keurAlleActiesGoed()\"\n                        [nietGeplandeActies]=\"ongeplandeActies\"></ritdelen-lijst>\n        <ritdelen-view *ngIf=\"viewer\" (focusEmitter)=\"focusRitdeel($event)\"></ritdelen-view>\n    </nav>\n\n    <viewer-controls [paginationSize]=\"paginationSize\"\n                     [treinpad]=\"treinpad\"\n                     [goedgekeurd]=\"goedgekeurd\"\n    ></viewer-controls>\n\n</div>\n", styles: ["#sidebar{min-width:350px;max-width:475px;background:#fff;transition:all .3s;height:93vh;position:absolute;top:0;z-index:20}#sidebar.active{margin-left:-475px}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#dismiss{width:20px;height:20px;position:absolute;cursor:pointer;top:5px;right:0;color:#000;z-index:300}[hidden]{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: ViewerControlService }, { type: DebugService }, { type: PrintBewegingService }], propDecorators: { iaversieinfo: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], treinpad: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], ongeplandeActies: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], paginationSize: [{
                 type: Input
             }], baseurl: [{
@@ -2523,24 +3910,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 let SignaleringsbeeldInfoResource = class SignaleringsbeeldInfoResource extends Resource {
-    constructor(restHandler, store) {
+    constructor(restHandler, store, sbControllerService) {
         super(restHandler);
+        this.restHandler = restHandler;
         this.store = store;
+        this.sbControllerService = sbControllerService;
         this.subscriptions = new Subscription();
-        this.subscriptions.add(this.store.select('baseUrl').subscribe(baseUrl => this.$setUrl(baseUrl)));
+        this.subscriptions.add(this.store.select('baseUrl').subscribe(baseUrl => {
+            this.$setUrl(baseUrl);
+            sbControllerService.configuration.basePath = baseUrl + '/mst';
+        }));
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsbeeldInfoResource, deps: [{ token: i1.ResourceHandler }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsbeeldInfoResource }); }
+    laadSignaleringsbeeldInfo(versie, pplgs) {
+        return this.sbControllerService.getSignaleringsbeelden(versie, pplgs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsbeeldInfoResource, deps: [{ token: i1$1.ResourceHandler }, { token: i2$1.Store }, { token: SbControllerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsbeeldInfoResource }); }
 };
-__decorate([
-    ResourceAction({
-        path: '/',
-        method: ResourceRequestMethod.Post
-    })
-], SignaleringsbeeldInfoResource.prototype, "laadSignaleringsbeeldInfo", void 0);
 __decorate([
     ResourceAction({
         path: '/valideeriaversie'
@@ -2551,9 +3940,9 @@ SignaleringsbeeldInfoResource = __decorate([
         pathPrefix: '/mst/rest/signaleringsbeeldeninfo'
     })
 ], SignaleringsbeeldInfoResource);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsbeeldInfoResource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsbeeldInfoResource, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.ResourceHandler }, { type: i2$1.Store }], propDecorators: { laadSignaleringsbeeldInfo: [], getBestaatIALevering: [] } });
+        }], ctorParameters: () => [{ type: i1$1.ResourceHandler }, { type: i2$1.Store }, { type: SbControllerService }], propDecorators: { getBestaatIALevering: [] } });
 class SignaleringsbeeldInfoDto extends ResourceModel {
     constructor(data) {
         super();
@@ -2581,21 +3970,23 @@ class BaseRestService {
         this.httpClient = httpClient;
         this.store = store;
         this.subscriptions = new Subscription();
+        this.baseUrl = '';
+        this.iaVersie = '';
         this.subscriptions.add(this.store.select('baseUrl').subscribe(baseUrl => this.baseUrl = baseUrl));
         this.subscriptions.add(this.store.select('iaVersie').subscribe(iaVersie => this.iaVersie = iaVersie.versie));
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseRestService, deps: [{ token: i1$1.HttpClient }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseRestService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseRestService, deps: [{ token: i1.HttpClient }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseRestService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseRestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseRestService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i2$1.Store }] });
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2$1.Store }] });
 
 class BewegingVerrijkerService extends BaseRestService {
     getBewegingen(bewegingen, ongeplandeActies) {
@@ -2611,10 +4002,10 @@ class BewegingVerrijkerService extends BaseRestService {
         this.store.dispatch(ClearProgress());
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingVerrijkerService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingVerrijkerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingVerrijkerService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingVerrijkerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingVerrijkerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingVerrijkerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2756,13 +4147,13 @@ class Ritdeel {
         return retval;
     }
     getVrijebaanRijwegplan() {
-        return this.vrijebaanRijwegplanRijwegDwangCombi.rijwegplan;
+        return this.vrijebaanRijwegplanRijwegDwangCombi?.rijwegplan;
     }
     getVrijebaanRijweg() {
-        return this.vrijebaanRijwegplanRijwegDwangCombi.rijweg;
+        return this.vrijebaanRijwegplanRijwegDwangCombi?.rijweg;
     }
     getVrijebaanDwang() {
-        return this.vrijebaanRijwegplanRijwegDwangCombi.dwang;
+        return this.vrijebaanRijwegplanRijwegDwangCombi?.dwang;
     }
     getDwangNummer() {
         return this.rijwegplanRijwegDwangCombi.getDwangNummer();
@@ -2779,7 +4170,7 @@ class Ritdeel {
     isBinnenWindow() {
         return (this.zichtbaarheid === RitdeelZichtbaarheid.ZICHTBAAR ||
             this.zichtbaarheid === RitdeelZichtbaarheid.ONZICHTBAAR_DOOR_GEBRUIKER)
-            && this.zichtbaarBuitenPaginatie === false;
+            && !this.zichtbaarBuitenPaginatie;
     }
     isNietBeschikbaar() {
         return this.zichtbaarheid === RitdeelZichtbaarheid.ONZICHTBAAR_DOOR_SYSTEEM;
@@ -2802,10 +4193,10 @@ class Ritdeel {
         }
     }
     heeftVrijebaanInfo() {
-        return this.vrijebaanRijwegplanRijwegDwangCombi && !!this.vrijebaanRijwegplanRijwegDwangCombi.dwang;
+        return !!this.vrijebaanRijwegplanRijwegDwangCombi && !!this.vrijebaanRijwegplanRijwegDwangCombi.dwang;
     }
     getVrijebaanPrlRoute() {
-        return this.vrijebaanRijwegplanRijwegDwangCombi.getRoute();
+        return this.vrijebaanRijwegplanRijwegDwangCombi?.getRoute();
     }
     getTopologieElementen() {
         return this.topoElementen;
@@ -2837,10 +4228,10 @@ class Ritdeel {
     getZichtbaarheidBuitenPaginatie() {
         return this.zichtbaarBuitenPaginatie;
     }
-    bepaalTopologieElementen(signaleringsBeeldManagerService) {
-        const topoElementen = signaleringsBeeldManagerService.bepaalRouteElementen(this.getRoute());
+    bepaalTopologieElementen(sbmService) {
+        const topoElementen = sbmService.bepaalRouteElementen(this.getRoute());
         if (this.heeftVrijebaanInfo()) {
-            const vrijebaanTopoElementen = signaleringsBeeldManagerService.bepaalRouteElementen(this.getVrijebaanPrlRoute());
+            const vrijebaanTopoElementen = sbmService.bepaalRouteElementen(this.getVrijebaanPrlRoute());
             topoElementen.push(...vrijebaanTopoElementen);
         }
         this.topoElementen = topoElementen;
@@ -2886,7 +4277,7 @@ class RitLezerService {
         ritDelen.push(new Ritdeel(dwangInfo, beweging.ritActies, beweging, vrijebaanDwangInfo, vervolgSpoor, []));
     }
     extractVrijebaanDwangInfo(beweging, rijwegPlan, rijweg) {
-        let vrijebaanDwangInfo = null;
+        let vrijebaanDwangInfo = undefined;
         let vervolgSpoor;
         if (beweging.naarSpoor.endsWith(SPOOR_NAAR_VRIJEBAAN_POSTFIX) ||
             beweging.naarSpoor.endsWith(SPOOR_NAAR_VEERWISSEL_VRIJEBAAN_POSTFIX)) {
@@ -2900,9 +4291,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 };
@@ -2936,10 +4327,10 @@ class RitLezerService {
     isGewijzigd(beweging) {
         return beweging.wijzigStatus === 'Gewijzigd';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitLezerService, deps: [{ token: EditorService }, { token: MessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitLezerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitLezerService, deps: [{ token: EditorService }, { token: MessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitLezerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitLezerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitLezerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EditorService }, { type: MessagesService }] });
 
@@ -2955,7 +4346,7 @@ class BepaalOngeplandeActiesEffect {
         this.bepaalOngeplandeActies$ = createEffect(() => this.actions$.pipe(ofType(BepaalOngeplandeActies), withLatestFrom(this.store), map(([action, store]) => {
             const puicActieMap = new ArrayMultimap();
             const nietGevondenTakken = [];
-            const logMeldingDTOs = [];
+            const logMeldingDTOs$ = [];
             const acties = store.ritDelen.flatMap(rd => rd.acties);
             action.ongeplandeActies.forEach(actie => {
                 const alreadyAdded = acties.filter(a => a.id === actie.id).length > 0;
@@ -2971,11 +4362,11 @@ class BepaalOngeplandeActiesEffect {
                         if (!spoortak && nietGevondenTakken.indexOf(takId) < 0) {
                             nietGevondenTakken.push(takId);
                             const melding = MeldingBuilder.nietGevondenTakkenOngeplandeActies(nietGevondenTakken);
-                            logMeldingDTOs.push(this.loggingHelper.maakLogDTO(melding, actie));
+                            logMeldingDTOs$.push(this.loggingHelper.maakLogDTO(melding, actie));
                         }
                         else if (spoortak) {
                             const melding = MeldingBuilder.actieHighlightError([actie.id]);
-                            logMeldingDTOs.push(this.loggingHelper.maakLogDTO(melding, actie));
+                            logMeldingDTOs$.push(this.loggingHelper.maakLogDTO(melding, actie));
                             this.messagesService.showMessage(MessageBuilder.actieHighlightError([actie.id]));
                         }
                     }
@@ -2984,8 +4375,8 @@ class BepaalOngeplandeActiesEffect {
             if (nietGevondenTakken.length > 0) {
                 this.messagesService.showMessage(MessageBuilder.nietGevondenTakkenOngeplandeActies(nietGevondenTakken));
             }
-            if (logMeldingDTOs.length > 0) {
-                this.mstLogResource.logErrorMessages(logMeldingDTOs);
+            if (logMeldingDTOs$.length > 0) {
+                forkJoin(logMeldingDTOs$).pipe(tap(dtos => this.mstLogResource.logMessages(dtos))).subscribe();
             }
             this.store.dispatch(SetOngeplandeActies(puicActieMap));
             this.store.dispatch(SetOngeplandeActieSelectieIds(Array.from(puicActieMap.keys())));
@@ -2997,10 +4388,10 @@ class BepaalOngeplandeActiesEffect {
             puicMap.put(puic, ongeplandeActie);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalOngeplandeActiesEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: MstLoggingResource }, { token: MessagesService }, { token: ActieHelper }, { token: LoggingHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalOngeplandeActiesEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalOngeplandeActiesEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: MstLoggingResource }, { token: MessagesService }, { token: ActieHelper }, { token: LoggingHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalOngeplandeActiesEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalOngeplandeActiesEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalOngeplandeActiesEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: MstLoggingResource }, { type: MessagesService }, { type: ActieHelper }, { type: LoggingHelper }] });
 
@@ -3009,10 +4400,10 @@ class DateService {
     getCurrentDate() {
         return new Date();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3055,7 +4446,7 @@ class BepaalSbInfosEffect {
             next: _res => this.store.dispatch(laadEnVerwerkSignaleringsbeeldInfo(treinpad, paginationSize, pplgs, ritGewijzigdToegestaan)),
             error: err => {
                 this.messagesService.showMessage(new Message(Severity.INFORMATION, Utils.getValidErorrMessage(err)));
-                const iaVersieInfo = { versie: 'DONNA_77136_VER_1', ingangsDatum: this.dateService.getCurrentDate() };
+                const iaVersieInfo = { versie: 'DONNA_97207_VER_1', ingangsDatum: this.dateService.getCurrentDate() };
                 this.store.dispatch(SetIaVersie(iaVersieInfo));
                 this.store.dispatch(laadEnVerwerkSignaleringsbeeldInfo(treinpad, paginationSize, pplgs, ritGewijzigdToegestaan));
             }
@@ -3066,10 +4457,10 @@ class BepaalSbInfosEffect {
             pplgs.push(pplg);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalSbInfosEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsbeeldInfoResource }, { token: MessagesService }, { token: DateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalSbInfosEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalSbInfosEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsbeeldInfoResource }, { token: MessagesService }, { token: DateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalSbInfosEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalSbInfosEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalSbInfosEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsbeeldInfoResource }, { type: MessagesService }, { type: DateService }] });
 
@@ -3128,10 +4519,10 @@ class BewegingInvoegenEffect {
         });
         return combinaties;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingInvoegenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingInvoegenEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingInvoegenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingInvoegenEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingInvoegenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingInvoegenEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: EditorService }] });
 
@@ -3160,10 +4551,10 @@ class DeleteOngeplandeActieEffect {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DeleteOngeplandeActieEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DeleteOngeplandeActieEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteOngeplandeActieEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteOngeplandeActieEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DeleteOngeplandeActieEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteOngeplandeActieEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }] });
 
@@ -3178,7 +4569,7 @@ class FocusEffect {
             const dwangPuics = this.getPuics(topoElementen);
             if (ritdeel.isNietBeschikbaar()) {
                 this.store.dispatch(SetOngeplandeActiesBepaald(false));
-                this.store.dispatch(navigeerVanaf(actie.paginationSize, actie.iaVersieInfo, ritdeel));
+                this.store.dispatch(navigeerVanaf(actie.paginationSize, ritdeel));
             }
             return focusOpIds(dwangPuics);
         })));
@@ -3186,10 +4577,10 @@ class FocusEffect {
     getPuics(topoElementen) {
         return topoElementen.map(e => e.getPuic());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FocusEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FocusEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FocusEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }] });
 
@@ -3200,16 +4591,16 @@ class LaadRouteFilesEffect {
         this.ritLezer = ritLezer;
         this.editorService = editorService;
         this.messagesService = messagesService;
-        this.authActions$ = createEffect(() => this.actions$.pipe(ofType(SetSignaleringsbeeldInfoDtos), map(action => this.laadRouteFiles(action))), { dispatch: false });
+        this.authActions$ = createEffect(() => this.actions$.pipe(ofType(SetSignaleringsbeeldInfoDtos), withLatestFrom(this.store), map(([action, storeState]) => this.laadRouteFiles(action, storeState.iaVersie.versie))), { dispatch: false });
     }
-    laadRouteFiles(actie) {
+    laadRouteFiles(actie, iaVersie) {
         const isReady = this.editorService.isReady();
         isReady.then(() => {
             const pplgs = this.bepaalSbDtoPplgs(actie.dtos);
-            const promise = this.editorService.laadRouteFiles(actie.iaversieinfo.versie, pplgs);
+            const promise = this.editorService.laadRouteFiles(iaVersie, pplgs);
             promise.then(() => {
                 this.updateRitdelen(actie);
-            }, err => {
+            }, (err) => {
                 this.messagesService.showMessage(MessageBuilder.rwpDataNietGevonden(Utils.getValidErorrMessage(err)));
             });
         });
@@ -3220,7 +4611,7 @@ class LaadRouteFilesEffect {
                 if (ritdelen.length === 0) {
                     ritdelen = this.ritLezer.parseRit(actie.treinpad, actie.ritGewijzigdToegestaan);
                 }
-                this.store.dispatch(setRitDelen(ritdelen, actie.paginationSize, actie.iaversieinfo));
+                this.store.dispatch(setRitDelen(ritdelen, actie.paginationSize));
                 this.store.dispatch(setEditable(actie.treinpad.ritStatus !== 'Definitief'));
             });
         }, 0);
@@ -3228,7 +4619,7 @@ class LaadRouteFilesEffect {
     bepaalSbDtoPplgs(dtos) {
         const pplgs = [];
         dtos.forEach(dto => {
-            dto.pplgs.forEach(pplg => {
+            dto.pplgs?.forEach(pplg => {
                 if (!pplgs.includes(pplg)) {
                     pplgs.push(pplg);
                 }
@@ -3236,10 +4627,10 @@ class LaadRouteFilesEffect {
         });
         return pplgs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadRouteFilesEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: RitLezerService }, { token: EditorService }, { token: MessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadRouteFilesEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadRouteFilesEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: RitLezerService }, { token: EditorService }, { token: MessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadRouteFilesEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadRouteFilesEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadRouteFilesEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: RitLezerService }, { type: EditorService }, { type: MessagesService }] });
 
@@ -3258,10 +4649,10 @@ class ConnectorService extends BaseRestService {
         this.store.dispatch(ClearProgress());
         return [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConnectorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConnectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConnectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3269,14 +4660,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class LaadSignaleringsbeeldenEffect {
-    constructor(actions$, store, signaleringsBeeldManagerService, editorService, sbiResource, connectorService, messagesSerivce) {
+    constructor(actions$, store, signaleringsBeeldManagerService, editorService, sbiResource, connectorService, messagesService) {
         this.actions$ = actions$;
         this.store = store;
         this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.editorService = editorService;
         this.sbiResource = sbiResource;
         this.connectorService = connectorService;
-        this.messagesSerivce = messagesSerivce;
+        this.messagesService = messagesService;
         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));
@@ -3290,14 +4681,14 @@ class LaadSignaleringsbeeldenEffect {
         }).pipe(switchMap(this.getOtherRand.bind(this)), switchMap(this.loadRouteFilesAndSignaleringsbeeldInfo.bind(this)), switchMap(this.loadSignaleringsbeelden.bind(this)), map(this.processSvgsAndUpdateRitdelen.bind(this))))), { dispatch: false });
     }
     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.messagesSerivce.showMessage(MessageBuilder.nietGevondenSBI(err));
+        return this.sbiResource.laadSignaleringsbeeldInfo(storeState.iaVersie.versie, actie.pplgs).pipe(take(1), tap((dtos) => this.processResponse({ dtos, storeState, actie })), catchError((err) => {
+            this.messagesService.showMessage(MessageBuilder.nietGevondenSBI(err));
             return throwError(() => err);
         }));
     }
     processResponse({ dtos, storeState, actie }) {
         if (dtos && dtos.filter(dto => dto.metVisualisatie).length > 12) {
-            this.messagesSerivce.showMessage(MessageBuilder.meerDan12BladenGevonden(dtos.length));
+            this.messagesService.showMessage(MessageBuilder.meerDan12BladenGevonden(dtos.length));
         }
         this.store.dispatch(SetSignaleringsbeeldInfoDtos(dtos, storeState.iaVersie, actie.rit, actie.paginationSize, actie.ritGewijzigdToegestaan));
         this.store.dispatch(SetVisibleSignaleringsbeeldInfoDtos(dtos));
@@ -3307,14 +4698,14 @@ class LaadSignaleringsbeeldenEffect {
     }
     loadRouteFilesAndSignaleringsbeeldInfo({ otherPplg, rand, storeState }) {
         this.editorService.laadRouteFiles(storeState.iaVersie.versie, [rand.getPPLG(), otherPplg]);
-        return this.sbiResource.laadSignaleringsbeeldInfo(this.createSignaleringsbeeldInfoQueryDto([rand.getPPLG(), otherPplg], storeState.iaVersie)).pipe(map(dtos => ({ dtos, storeState })));
+        return this.sbiResource.laadSignaleringsbeeldInfo(storeState.iaVersie.versie, [rand.getPPLG(), otherPplg]).pipe(map(dtos => ({ dtos, storeState })));
     }
     loadSignaleringsbeelden({ dtos, storeState }) {
-        return this.editorService.laadSignaleringsbeelden(storeState.iaVersie.versie, dtos).pipe(map(svgDataUrls => ({ svgDataUrls, storeState, dtos })));
+        return this.editorService.laadSignaleringsbeelden(storeState.iaVersie.versie, dtos).pipe(map(svgDataUrls => ({ svgDataUrls, ritDelen: storeState.ritDelen, dtos })));
     }
-    processSvgsAndUpdateRitdelen({ svgDataUrls, storeState, dtos }) {
+    processSvgsAndUpdateRitdelen({ svgDataUrls, ritDelen, dtos }) {
         this.verwerkSvgs(svgDataUrls);
-        const nieuweRitdelen = this.updateRitdelen(storeState.ritDelen, dtos);
+        const nieuweRitdelen = this.updateRitdelen(ritDelen, dtos);
         this.store.dispatch(UpdateVisibleSignaleringsbeeldInfoDtos(dtos));
         this.store.dispatch(updateRitDelen(nieuweRitdelen));
     }
@@ -3327,11 +4718,11 @@ class LaadSignaleringsbeeldenEffect {
         const visibleRitPplgs = visibleRitDelen.map(r => r.getPplg()).filter(this.distinct);
         const visibleDtos = this.bepaalZichtbareDtos(visibleRitPplgs, storeDtos);
         const loadingDtos = this.bepaalToLoadDtos(visibleDtos, ritDelen, visibleRitDelen, visibleRitPplgs, storeState);
-        this.editorService.laadSignaleringsbeelden(actie.iaversieinfo.versie, loadingDtos).pipe(tap(svgDataUrls => {
+        this.editorService.laadSignaleringsbeelden(storeState.iaVersie.versie, loadingDtos).pipe(tap(svgDataUrls => {
             this.verwerkSvgs(svgDataUrls);
             this.updateState(ritDelen, visibleDtos, storeState, visibleRitPplgs, loadingDtos, isInit, storeDtos);
         }), catchError(err => {
-            this.messagesSerivce.showMessage(MessageBuilder.rwpDataNietGevonden(Utils.getValidErorrMessage(err)));
+            this.messagesService.showMessage(MessageBuilder.rwpDataNietGevonden(Utils.getValidErorrMessage(err)));
             throw err;
         })).subscribe();
     }
@@ -3346,10 +4737,6 @@ class LaadSignaleringsbeeldenEffect {
             this.store.dispatch(updateRitDelen(nieuweRitdelen));
         }, 0);
     }
-    createSignaleringsbeeldInfoQueryDto(pplgs, iainfo) {
-        const datum = iainfo.ingangsDatum && !isNaN(iainfo.ingangsDatum.getTime()) ? iainfo.ingangsDatum.toISOString() : undefined;
-        return { pplgs, versie: iainfo.versie, ingangsDatum: datum };
-    }
     verwerkSvgs(svgDataUrls) {
         this.store.dispatch(SetSvgInfos(this.bepaalSvgInfos(svgDataUrls)));
     }
@@ -3376,7 +4763,7 @@ class LaadSignaleringsbeeldenEffect {
     bepaalZichtbareDtos(visibleRitPplgs, dtos) {
         const visibleDtos = [];
         visibleRitPplgs.forEach(pplg => {
-            dtos.filter(dto => dto.pplgs.includes(pplg)).forEach(dto => {
+            dtos.filter(dto => dto.pplgs?.includes(pplg)).forEach(dto => {
                 if (!visibleDtos.includes(dto)) {
                     visibleDtos.push(dto);
                 }
@@ -3386,13 +4773,13 @@ class LaadSignaleringsbeeldenEffect {
         dtos.filter(d => !visibleDtos.includes(d)).forEach(d => d.metVisualisatie = false);
         return visibleDtos;
     }
-    distinct(value, index, self) {
-        return self.indexOf(value) === index;
+    distinct(value, index, values) {
+        return values.indexOf(value) === index;
     }
     addPrevNonVisibleDto(firstIdx, ritdelen, loadingDtos, visibleRitPplgs, allDtos) {
         if (firstIdx >= 0) {
             const pplg = ritdelen[firstIdx].getPplg();
-            const ritdeelDtos = allDtos.filter(dto => dto.pplgs.includes(pplg)).filter(dto => !loadingDtos.includes(dto));
+            const ritdeelDtos = allDtos.filter(dto => dto.pplgs?.includes(pplg)).filter(dto => !loadingDtos.includes(dto));
             if (!visibleRitPplgs.includes(pplg) && ritdeelDtos.length > 0) {
                 ritdeelDtos.filter(d => !loadingDtos.includes(d)).forEach(d => {
                     d.metVisualisatie = false;
@@ -3407,7 +4794,7 @@ class LaadSignaleringsbeeldenEffect {
     addNextNonVisibleDto(lastIdx, ritdelen, loadingDtos, visibleRitPplgs, allDtos) {
         if (lastIdx <= ritdelen.length - 1) {
             const pplg = ritdelen[lastIdx].getPplg();
-            const ritdeelDtos = allDtos.filter(dto => dto.pplgs.includes(pplg)).filter(dto => !loadingDtos.includes(dto));
+            const ritdeelDtos = allDtos.filter(dto => dto.pplgs?.includes(pplg)).filter(dto => !loadingDtos.includes(dto));
             if (!visibleRitPplgs.includes(pplg) && ritdeelDtos.length > 0) {
                 ritdeelDtos.filter(d => !loadingDtos.includes(d)).forEach(d => {
                     d.metVisualisatie = false;
@@ -3476,7 +4863,7 @@ class LaadSignaleringsbeeldenEffect {
                 }
             }
         }
-        this.updateZichtbaarheidAangrezendeRitdelen(min, max, ritdelen, visibleDtos);
+        this.updateZichtbaarheidAangrenzendeRitdelen(min, max, ritdelen, visibleDtos);
         return this.updateZichtbaarheidBuitenWindow(ritdelen, visibleDtos);
     }
     updateZichtbaarheidBuitenWindow(nieuweRitdelen, visibleDtos) {
@@ -3492,7 +4879,7 @@ class LaadSignaleringsbeeldenEffect {
         }
         return nieuweRitdelen;
     }
-    updateZichtbaarheidAangrezendeRitdelen(min, max, nieuweRitdelen, visibleDtos) {
+    updateZichtbaarheidAangrenzendeRitdelen(min, max, nieuweRitdelen, visibleDtos) {
         let i = min - 1;
         while (i >= 0) {
             i = this.updateZichtbaarHeid(i, 0, visibleDtos, nieuweRitdelen) - 1;
@@ -3528,9 +4915,11 @@ class LaadSignaleringsbeeldenEffect {
     }
     bevatGevisualiseerdePplg(visibleDtos, pplg) {
         for (const dto of visibleDtos) {
-            for (const dtopplg of dto.pplgs) {
-                if (dtopplg === pplg) {
-                    return true;
+            if (dto.pplgs) {
+                for (const dtopplg of dto.pplgs) {
+                    if (dtopplg === pplg) {
+                        return true;
+                    }
                 }
             }
         }
@@ -3580,7 +4969,7 @@ class LaadSignaleringsbeeldenEffect {
             pplgsWindow.push(itemPplg);
         }
         const pplgDtos = [];
-        dtos.filter(dto => dto.pplgs.includes(itemPplg)).forEach(dto => {
+        dtos.filter(dto => dto.pplgs?.includes(itemPplg)).forEach(dto => {
             if (!pplgDtos.includes(dto)) {
                 pplgDtos.push(dto);
             }
@@ -3605,10 +4994,10 @@ class LaadSignaleringsbeeldenEffect {
         }
         return -1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadSignaleringsbeeldenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: EditorService }, { token: SignaleringsbeeldInfoResource }, { token: ConnectorService }, { token: MessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadSignaleringsbeeldenEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadSignaleringsbeeldenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: EditorService }, { token: SignaleringsbeeldInfoResource }, { token: ConnectorService }, { token: MessagesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadSignaleringsbeeldenEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadSignaleringsbeeldenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadSignaleringsbeeldenEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: EditorService }, { type: SignaleringsbeeldInfoResource }, { type: ConnectorService }, { type: MessagesService }] });
 
@@ -3619,19 +5008,19 @@ class RitGoedkeurenEffect {
         this.bewegingVerrijker = bewegingVerrijker;
         this.keurAllesGoed$ = createEffect(() => this.actions$.pipe(ofType(KeurAlleActiesGoed), withLatestFrom(this.store), switchMap(([action, _store]) => from(this.bewegingVerrijker.getBewegingen(action.bewegingen, action.ongeplandeActies))), map((bewegingen) => UpdateRit(bewegingen))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitGoedkeurenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: BewegingVerrijkerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitGoedkeurenEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitGoedkeurenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: BewegingVerrijkerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitGoedkeurenEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitGoedkeurenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitGoedkeurenEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: BewegingVerrijkerService }] });
 
 class RitdelenEffect {
-    constructor(actions$, store, sbmService, rijwegPlanEditorService) {
+    constructor(actions$, store, sbmService, editorService) {
         this.actions$ = actions$;
         this.store = store;
         this.sbmService = sbmService;
-        this.rijwegPlanEditorService = rijwegPlanEditorService;
+        this.editorService = editorService;
         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);
@@ -3649,25 +5038,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, this.rijwegPlanEditorService, this.sbmService);
+            const ritDelen = this.ritdeelInvoegenFunc(storeState.ritDelen, actie.nieuweRoute);
             return setRitdelenAfterUpdate(ritDelen);
         })));
     }
-    ritdeelInvoegenFunc(ritDelen, nieuweRoute, rijwegPlanEditorService, sbmService) {
+    ritdeelInvoegenFunc(ritDelen, nieuweRoute) {
         const origineelRitdeel = nieuweRoute.beginSeinOpRitdeel.ritdeel;
         const beginSein = nieuweRoute.beginSeinOpRitdeel.sein;
-        const rijwegplan = rijwegPlanEditorService.getRijwegplan(beginSein.getPPLG());
+        const rijwegplan = this.editorService.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, sbmService, ritDelen);
+            newRitdeel1 = this.verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, ritDelen);
         }
-        if (nieuweRoute.combinatieVoorEindsein.isVrijeBaanRijweg()) {
-            this.extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute, sbmService);
+        if (nieuweRoute.combinatieVoorEindsein?.isVrijeBaanRijweg()) {
+            this.extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute);
         }
         else {
-            this.maakNieuwRitdeel(newRitdeel1, nieuweRoute, sbmService, ritDelen);
+            this.maakNieuwRitdeel(newRitdeel1, nieuweRoute, ritDelen);
         }
         if (isSamengesteldeRoute) {
             ritDelen.splice(ritDelen.indexOf(origineelRitdeel), 1);
@@ -3682,74 +5071,102 @@ class RitdelenEffect {
             }
         }
     }
-    verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, sbmService, ritDelen) {
+    verwerkSamengesteldeRoute(origineelRitdeel, rijwegplan, dwangen, 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, [], null, null, null, []);
+        const newRitdeel1 = new Ritdeel(dwangInfo1, [], undefined, undefined, undefined, []);
         // remove vrijbaan info uit ritdeel
-        newRitdeel1.vrijebaanRijwegplanRijwegDwangCombi = null;
-        newRitdeel1.vervolgSpoor = null;
-        newRitdeel1.bepaalTopologieElementen(sbmService);
+        newRitdeel1.vrijebaanRijwegplanRijwegDwangCombi = undefined;
+        newRitdeel1.vervolgSpoor = undefined;
+        newRitdeel1.bepaalTopologieElementen(this.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, [], null, null, null, []);
-        newRitdeel2.bepaalTopologieElementen(sbmService);
+        const newRitdeel2 = new Ritdeel(dwangInfo2, [], undefined, undefined, undefined, []);
+        newRitdeel2.bepaalTopologieElementen(this.sbmService);
         this.insertRitdeel(ritDelen, newRitdeel1, newRitdeel2);
         return newRitdeel1;
     }
-    extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute, sbmService) {
+    extendRitdeelMetVrijebaanInfo(newRitdeel1, nieuweRoute) {
         newRitdeel1.vrijebaanRijwegplanRijwegDwangCombi = nieuweRoute.combinatieVoorEindsein;
-        const vbrwp = nieuweRoute.combinatieVoorEindsein.rijwegplan;
-        newRitdeel1.vervolgSpoor = vbrwp.getVervolgSpoor(nieuweRoute.combinatieVoorEindsein.rijweg);
-        newRitdeel1.bepaalTopologieElementen(sbmService);
+        const vbrwp = nieuweRoute.combinatieVoorEindsein?.rijwegplan;
+        newRitdeel1.vervolgSpoor = nieuweRoute.combinatieVoorEindsein ?
+            vbrwp.getVervolgSpoor(nieuweRoute.combinatieVoorEindsein?.rijweg) : undefined;
+        newRitdeel1.bepaalTopologieElementen(this.sbmService);
     }
-    maakNieuwRitdeel(newRitdeel1, nieuweRoute, sbmService, ritDelen) {
+    maakNieuwRitdeel(newRitdeel1, nieuweRoute, ritDelen) {
         let newRitdeel = this.createRitdeel(nieuweRoute);
-        const altRoutes = sbmService.bepaalAlternativeRoutes(newRitdeel.getRijweg());
+        const altRoutes = this.sbmService.bepaalAlternativeRoutes(newRitdeel.getRijweg());
         newRitdeel = newRitdeel.copyMetAlternatieveRoutes(altRoutes);
-        newRitdeel.bepaalTopologieElementen(sbmService);
+        newRitdeel.bepaalTopologieElementen(this.sbmService);
         this.insertRitdeel(ritDelen, newRitdeel1, newRitdeel);
     }
     createRitdeel(nieuweRoute) {
-        return new Ritdeel(nieuweRoute.combinatieVoorEindsein, [], null, null, null, []);
+        return new Ritdeel(nieuweRoute.combinatieVoorEindsein, [], undefined, undefined, undefined, []);
     }
     insertRitdeel(ritdelen, naRitdeelPositie, newRitdeel) {
         const idx = ritdelen.indexOf(naRitdeelPositie);
         ritdelen.splice(idx + 1, 0, newRitdeel);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenEffect }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitdelenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: EditorService }] });
 
 class SvgViewEffect {
-    constructor(actions$, store, signaleringsBeeldManagerService, sbSvgUtilService) {
+    constructor(actions$, store, sbSvgUtilService, svgService) {
         this.actions$ = actions$;
         this.store = store;
-        this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.sbSvgUtilService = sbSvgUtilService;
-        this.updateSvgView$ = createEffect(() => this.actions$.pipe(ofType(SetSvgInfos), map((_actie) => {
+        this.svgService = svgService;
+        this.updateSvgView$ = createEffect(() => this.actions$.pipe(ofType(SetSvgInfos), withLatestFrom(this.store), switchMap(([_actie, storeState]) => this.svgService.getSvgInfo(storeState.iaVersie.versie, storeState.signaleringsbeeldInfoDtos)), map((svgInfo) => {
             setTimeout(() => {
+                const svgTopology = svgInfo.topology;
+                if (!svgTopology) {
+                    return;
+                }
                 this.sbSvgUtilService.addSvgDefs();
                 const wisselEnStoringskaderPuicMap = new Map();
-                this.signaleringsBeeldManagerService.getAlleSoortenWissels()
-                    .forEach(wissel => wisselEnStoringskaderPuicMap.set(wissel.getPuic(), wissel.getStoringSymboolPuic()));
+                svgTopology.alleSoortenWissels
+                    ?.forEach(wissel => wisselEnStoringskaderPuicMap.set(wissel.puic, wissel.storingSymboolPuic));
                 this.sbSvgUtilService.zetClassOpStoringSymbolenMetMap(wisselEnStoringskaderPuicMap);
-                this.sbSvgUtilService.zetClassOpSpoornummers(this.signaleringsBeeldManagerService.getPuicsVoorSpoornummers());
+                this.sbSvgUtilService.zetClassOpSpoornummers(svgTopology.puicVoorSpoorNummers ?? []);
                 this.sbSvgUtilService.maakOngewensteElementenOnzichtbaar();
                 this.sbSvgUtilService.zetClassOpLangeText();
-                this.sbSvgUtilService.maakOngewensteSeindelenOnzichtbaar(this.signaleringsBeeldManagerService.getSeinen());
-                this.sbSvgUtilService.maakSignaleringsElementenOnzichtbaar(this.signaleringsBeeldManagerService.getSignaleringsElementen());
-                const puicsVoorRanden = this.signaleringsBeeldManagerService.getPuicsVoorRanden();
+                const seinen = svgTopology.seinen?.map(this.toSbSein) ?? [];
+                this.sbSvgUtilService.maakOngewensteSeindelenOnzichtbaar(seinen);
+                this.sbSvgUtilService.maakSignaleringsElementenOnzichtbaar(svgTopology.signaleringsElementen
+                    ?.map(signaleringsElement => this.toSbSignaleringsElement(signaleringsElement)) ?? []);
+                const puicsVoorRanden = svgTopology.puicVoorRanden ?? [];
                 this.zetClassOpRanden(puicsVoorRanden);
-                this.sbSvgUtilService.zetClassOpRijrichtingen(this.signaleringsBeeldManagerService.getSeinen());
+                this.sbSvgUtilService.zetClassOpRijrichtingen(seinen);
                 this.store.dispatch(SetConnectorenClickableIds(puicsVoorRanden));
+                this.store.dispatch(svgUpdateFinished());
             }, 0);
         })), { dispatch: false });
+        this.updateSelectieInfos$ = createEffect(() => this.actions$.pipe(ofType(svgUpdateFinished), switchMap(() => combineLatest([
+            this.store.select('ritSelectieIds'),
+            this.store.select('actieOpRitSelectieIds'),
+            this.store.select('ongeplandeActieSelectieIds'),
+            this.store.select('gebrokenRitSelectieIds'),
+            this.store.select('alternatievenSelectieIds'),
+            this.store.select('beginSeinSelectieIds'),
+            this.store.select('eindSeinSelectieIds')
+        ]).pipe(map(([rit, actieOpRitSelectieIds, ongeplandeActieSelectieIds, gebrokenRit, alternatieven, begin, eind]) => {
+            return setSelectieInfos([
+                new SelectieInfo(rit, 'rit'),
+                new SelectieInfo(actieOpRitSelectieIds, 'actieoprit'),
+                new SelectieInfo(ongeplandeActieSelectieIds, 'ongeplandeActie'),
+                new SelectieInfo(gebrokenRit, 'gebrokenrit'),
+                new SelectieInfo(alternatieven, 'alternatieveRoute'),
+                new SelectieInfo(begin, 'zigzagVan'),
+                new SelectieInfo(eind, 'zigzagNaar')
+            ]);
+        })))));
+        this.store.select('baseUrl').pipe(filter(baseUrl => !!baseUrl), take(1), tap(baseUrl => svgService.configuration.basePath = baseUrl + '/mst')).subscribe();
     }
     zetClassOpRanden(puics) {
         puics.forEach(element => {
@@ -3757,12 +5174,35 @@ class SvgViewEffect {
             rand?.classList.add('connector');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: SignaleringsBeeldManagerService }, { token: i4.SignaleringsbeeldSvgUtilityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect }); }
+    toSbSein(sein) {
+        return {
+            getPuic: () => sein.puic,
+            isBediend: () => sein.bediend,
+            getType: () => sein.type
+        };
+    }
+    toSbSignaleringsElement(signaleringsElement) {
+        return {
+            getPuic: () => signaleringsElement.puic
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgViewEffect, deps: [{ token: i1$2.Actions }, { token: i2$1.Store }, { token: i3.SignaleringsbeeldSvgUtilityService }, { token: SvgControllerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgViewEffect }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgViewEffect, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: i4.SignaleringsbeeldSvgUtilityService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: i3.SignaleringsbeeldSvgUtilityService }, { type: SvgControllerService }] });
+
+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) {
@@ -3770,7 +5210,7 @@ class NieuweRoute {
         this.combinatieVoorEindsein = combinatieVoorEindsein;
     }
     isValid() {
-        return this.combinatieVoorEindsein !== null;
+        return !!this.combinatieVoorEindsein;
     }
 }
 
@@ -3836,10 +5276,11 @@ 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(undefined, on(ShowProgress, () => ({ progressIndicator: {} })), on(ClearProgress, () => undefined));
+const progressIndicatorReducer = createReducer({}, on(ShowProgress, () => ({ progressIndicator: new ProgressIndicator() })), on(ClearProgress, () => ({})));
 const svgInfoReducer = createReducer([], on(SetSvgInfos, (_, { svgInfos }) => svgInfos));
 const debugReducer = createReducer(false, on(SetDebug, (_, { debug }) => debug));
 const ritSelectieIdsReducer = createIdsReducer(SetRitSelectieIds);
+const selectieInfosReducer = createReducer([], on(setSelectieInfos, (_, { selectieInfos }) => selectieInfos));
 const actieOpRitReducer = createReducer(new ArrayMultimap(), on(SetGeplandeActies, (_, { geplandeActiesMap }) => geplandeActiesMap), on(AddGeplandeActie, (geplandeActies, { actie, puics }) => {
     geplandeActies.putAll(actie, puics);
     return new ArrayMultimap(geplandeActies);
@@ -3862,12 +5303,10 @@ const ongeplandeActieReducer = createReducer(new ArrayMultimap(), on(SetOngeplan
     ongeplandeActie.puics.forEach(puic => ongeplandeActies.delete(puic, ongeplandeActie));
     return new ArrayMultimap(ongeplandeActies);
 }));
-const ongeplandeActieSelectieIdsReducer = createReducer([], 
-// on(MstActions.SetOngeplandeActieSelectieIds, (_, { ids }) => ids),
-onIdsActionHandler(SetOngeplandeActieSelectieIds), on(AddOngeplandeActie, (ids, { ongeplandeActie }) => {
+const ongeplandeActieSelectieIdsReducer = createReducer([], onIdsActionHandler(SetOngeplandeActieSelectieIds), on(AddOngeplandeActie, (ids, { ongeplandeActie }) => {
     ongeplandeActie.puics.filter(puic => !ids.includes(puic)).forEach(puic => ids.push(puic));
     return [...ids];
-}), on(DeleteOngeplandeActieSelectieId, (ids, { id }) => [].concat(ids.includes(id) ? ids.filter(_id => _id !== id) : ids)));
+}), on(DeleteOngeplandeActieSelectieId, (ids, { id }) => ids.includes(id) ? ids.filter(_id => _id !== id) : ids));
 const gebrokenRitSelectieIdsReducer = createIdsReducer(SetGebrokenRitSelectieIds);
 const alternatievenSelectieIdsReducer = createIdsReducer(SetAlternatievenSelectieIds);
 const beginSeinSelectieIdsReducer = createIdsReducer(SetBeginSeinSelectieIds);
@@ -3876,16 +5315,15 @@ const alternatievenClickableIdsReducer = createIdsReducer(SetAlternatievenClicka
 const eindSeinenClickableIdsReducer = createIdsReducer(SetEindSeinenClickableIds);
 const connectorClickableIdsReducer = createIdsReducer(SetConnectorenClickableIds);
 const beginSeinRightClickableIdsReducer = createIdsReducer(SetBeginSeinRightClickableIds);
-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 nieuweRouteReducer = createReducer(undefined, on(SetNieuwRouteBeginSein, (_, { startSeinOpRitdeel }) => new NieuweRoute(startSeinOpRitdeel, undefined)), on(SetNieuwRouteEindSein, (nieuweRoute, { combinatieVoorEindsein }) => nieuweRoute ? new NieuweRoute(nieuweRoute.beginSeinOpRitdeel, combinatieVoorEindsein) : undefined), on(ResetNieuweRoute, () => undefined));
 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({}, on(SetIaVersie, (_, { iaVersie }) => Object.assign({}, iaVersie, { versie: iaVersie.versie.toUpperCase() })));
-const algemeneRitInfoDtoReducer = createReducer(new AlgemeneRitInfoDto(), on(SetAlgemeneRitInfo, (_, { algemeneRitInfoDto }) => algemeneRitInfoDto));
+const iaVersieReducer = createReducer({ versie: 'unknown', ingangsDatum: new Date() }, 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(undefined, on(SetBaseUrl, (_, { baseUrl }) => baseUrl));
-const focusIdsReducer = createReducer({}, on(focusOpIds, (_, { puics }) => puics));
-const selectedRitdeelIdReducer = createReducer({}, on(SetSelectedRitdeel, (_, { id }) => id));
+const nieuweBewegingReducer = createReducer([], on(UpdateRit, (_, { bewegingen }) => bewegingen));
+const baseUrlReducer = createReducer('', on(SetBaseUrl, (_, { baseUrl }) => baseUrl));
+const focusIdsReducer = createReducer([], on(focusOpIds, (_, { puics }) => puics));
 const storeReducers = {
     ritDelen: ritdelenReducer,
     ritSelectieIds: ritSelectieIdsReducer,
@@ -3914,9 +5352,10 @@ const storeReducers = {
     nieuweBewegingen: nieuweBewegingReducer,
     baseUrl: baseUrlReducer,
     focusIds: focusIdsReducer,
-    selectedRitdeelId: selectedRitdeelIdReducer
+    selectieInfos: selectieInfosReducer
 };
 
+// @ts-nocheck
 class ZoneUtil {
     constructor(ngZone) {
         this.ngZone = ngZone;
@@ -3940,10 +5379,10 @@ class ZoneUtil {
     proxy(target) {
         return new Proxy(target, this.zoneHandler);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ZoneUtil, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ZoneUtil }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZoneUtil, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZoneUtil }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ZoneUtil, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZoneUtil, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -3979,12 +5418,13 @@ class MstViewerModule {
     constructor(service, zoneUtil) {
         this.service = service;
         // maak de EditorService toegankelijk voor GWT code
+        // @ts-ignore
         window['rpe'] = {
             EditorService: zoneUtil.proxy(service)
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstViewerModule, deps: [{ token: EditorService }, { token: ZoneUtil }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: MstViewerModule, declarations: [MessageComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstViewerModule, deps: [{ token: EditorService }, { token: ZoneUtil }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: MstViewerModule, declarations: [MessageComponent,
             MstviewerComponent,
             OverlayComponent,
             ProgressIndicatorComponent,
@@ -3996,8 +5436,8 @@ class MstViewerModule {
             SvgVisualisatieComponent,
             MessagesComponent], imports: [CommonModule,
             ImxViewerModule,
-            RijwegenModule, i1.ResourceModule, i2$1.StoreRootModule, i1$2.EffectsRootModule], exports: [MstviewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstViewerModule, providers: [
+            RijwegenModule, i1$1.ResourceModule, i2$1.StoreRootModule, i1$2.EffectsRootModule], exports: [MstviewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstViewerModule, providers: [
             ZoneUtil,
             SignaleringsbeeldInfoResource,
             MstLoggingResource,
@@ -4010,7 +5450,7 @@ class MstViewerModule {
             BewegingVerrijkerService
         ], imports: [imports] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports,