@loxia/mst-viewer 8.1.3-202512032157 → 8.1.3-202512072334

package/fesm2022/loxia-mst-viewer.mjs

@@ -1,10 +1,10 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, Injectable, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, NgModule, SkipSelf, HostListener } from '@angular/core';
+import { EventEmitter, Output, Input, Component, Injectable, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, SkipSelf, NgModule, HostListener } from '@angular/core';
 import * as i7 from '@loxia/imx-viewer';
-import { PopoverInfo, Point, SvgInfo, ImxViewerComponent, SelectieInfo, ImxViewerModule } from '@loxia/imx-viewer';
-import * as i3 from '@loxia/rijwegen';
+import { SelectieInfo, PopoverInfo, Point, SvgInfo, ImxViewerComponent, ImxViewerModule } from '@loxia/imx-viewer';
+import * as i4 from '@loxia/rijwegen';
 import { JsJavaUtil, RijwegenModule } from '@loxia/rijwegen';
 import * as i1$2 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
@@ -17,7 +17,7 @@ import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpParams } from '@angular/common/http';
 import { __decorate } from 'tslib';
 import * as i1$1 from '@ngx-resource/core';
-import { Resource, ResourceAction, ResourceParams, ResourceModel } from '@ngx-resource/core';
+import { Resource, ResourceAction, ResourceRequestMethod, ResourceParams, ResourceModel } from '@ngx-resource/core';
 
 class Message {
     constructor(severity, text, timeout = 0) {
@@ -55,10 +55,10 @@ class MessageComponent {
     get severity() {
         return this.message?.severity ?? '?';
     }
-    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"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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.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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -98,28 +98,28 @@ class MessagesComponent {
     trackbyIndex(index) {
         return index;
     }
-    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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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.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"] }); }
+    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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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.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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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" }]
         }] });
@@ -189,10 +189,10 @@ class CarouselControlsComponent {
     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" }] }); }
+    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", 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: [{
+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: [{
@@ -246,8 +246,6 @@ 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 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 }));
@@ -291,8 +289,6 @@ 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 svgUpdateFinished = createAction(TRIGGER_SELECTIE_UPDATE);
-const setSelectieInfos = createAction(SET_SELECTIE_INFOS, (selectieInfos) => ({ selectieInfos }));
 // do not export return value
 const mstActions = union({
     setEditable,
@@ -330,9 +326,7 @@ const mstActions = union({
     ClearProgress,
     BewegingInvoegen,
     KeurAlleActiesGoed,
-    UpdateRit,
-    svgUpdateFinished,
-    setSelectieInfos
+    UpdateRit
 });
 
 /**
@@ -492,10 +486,10 @@ class SignaleringsBeeldManagerService {
     getEersteVerbindingPuicVoorSplitEngelseWissel(engelsWisselNaam, kantcode) {
         return this.signaleringsBeeldManager.getEersteVerbindingPuicVoorSplitEngelseWissel(engelsWisselNaam, kantcode);
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsBeeldManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsBeeldManagerService, decorators: [{
             type: Injectable
         }] });
 
@@ -538,10 +532,10 @@ class EditorService {
             that.resolveReadyPromise = resolve;
         }) : this.promise;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: SignaleringsBeeldManagerService }] });
 
@@ -673,10 +667,10 @@ class BewegingUtils {
     static toRouteFileDwangNummer(dwangNummer) {
         return (dwangNummer === 0) ? -1 : dwangNummer;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingUtils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingUtils, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EditorService }] });
 
@@ -684,11 +678,32 @@ 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.selectieInfos = [];
         this.origineelTreinPad = {};
+        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;
+        }));
     }
     toggleSideNavVisible() {
         this.sideNavOpen = !this.sideNavOpen;
@@ -747,10 +762,10 @@ class ViewerControlService {
     isPrinting$() {
         return this.printing$;
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewerControlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ViewerControlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -800,10 +815,10 @@ class DebugService {
             console.log(logline);
         }
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DebugService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DebugService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -860,10 +875,10 @@ class PrintBewegingService {
     getPuics(topoElementen) {
         return topoElementen.map(e => e.getPuic());
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PrintBewegingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrintBewegingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -890,10 +905,10 @@ class RpeComponent {
     ngAfterViewInit() {
         this.convertToScript();
     }
-    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" }); }
+    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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RpeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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: [{
@@ -1281,10 +1296,10 @@ class AppConfigControllerService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: AppConfigControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppConfigControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppConfigControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1427,10 +1442,10 @@ class BewegingControllerService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: BewegingControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1558,10 +1573,10 @@ class Class0BuildPropertiesService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: Class0BuildPropertiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Class0BuildPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: Class0BuildPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1695,10 +1710,10 @@ class ConnectorControllerService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: ConnectorControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConnectorControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1836,10 +1851,10 @@ class LogControllerService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: LogControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LogControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LogControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2063,10 +2078,10 @@ class P21ControllerService {
             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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: P21ControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: P21ControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: P21ControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2150,25 +2165,16 @@ class SbControllerService {
         }
         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');
-            });
+    getSignaleringsbeelden(signaleringsbeeldRequestDto, observe = 'body', reportProgress = false, options) {
+        if (signaleringsbeeldRequestDto === null || signaleringsbeeldRequestDto === undefined) {
+            throw new Error('Required parameter signaleringsbeeldRequestDto was null or undefined when calling getSignaleringsbeelden.');
         }
         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);
         }
@@ -2183,6 +2189,14 @@ class SbControllerService {
         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')) {
@@ -2195,10 +2209,10 @@ class SbControllerService {
                 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}`, {
+        let localVarPath = `/rest/signaleringsbeeldeninfo`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
-            params: localVarQueryParameters,
+            body: signaleringsbeeldRequestDto,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -2257,156 +2271,10 @@ class SbControllerService {
             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();
-    }
-    // @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;
-    }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: SbControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SbControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2420,7 +2288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     type: Optional
                 }] }] });
 
-const APIS = [AppConfigControllerService, BewegingControllerService, Class0BuildPropertiesService, ConnectorControllerService, LogControllerService, P21ControllerService, SbControllerService, SvgControllerService];
+const APIS = [AppConfigControllerService, BewegingControllerService, Class0BuildPropertiesService, ConnectorControllerService, LogControllerService, P21ControllerService, SbControllerService];
 
 /**
  * MST
@@ -2446,40 +2314,6 @@ const APIS = [AppConfigControllerService, BewegingControllerService, Class0Build
  * 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)
@@ -2532,11 +2366,11 @@ class ApiModule {
                 '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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ApiModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ApiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ApiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -2565,10 +2399,10 @@ class MstLoggingResource {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: MstLoggingResource }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstLoggingResource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstLoggingResource, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: LogControllerService }, { type: i2$1.Store }] });
 
@@ -2616,10 +2450,10 @@ class LoggingHelper {
         });
         return sbInfoDtos;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: LoggingHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoggingHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LoggingHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i2$1.Store }] });
 
@@ -3043,10 +2877,10 @@ class ActieHelper {
         }
         return storingsSymboolPuic ? [storingsSymboolPuic] : [];
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActieHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ActieHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: SignaleringsBeeldManagerService }, { type: MstLoggingResource }, { type: MessagesService }, { type: i2$1.Store }, { type: LoggingHelper }] });
 
@@ -3282,10 +3116,10 @@ class RitdelenLijstComponent {
         this.keurAlleActiesGoed.emit();
         this.deselectRitdeel();
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenLijstComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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: [{
@@ -3385,10 +3219,10 @@ class RitdelenViewComponent {
         }
         return false;
     }
-    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"] }] }); }
+    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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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: [{
@@ -3429,7 +3263,7 @@ class ViewerControlsComponent {
         }
     }
     showGoedkeuren() {
-        return this.editable;
+        return this.editable && this.viewerControlsService.selectieInfos.length !== 0;
     }
     goedkeurenClick() {
         this.store.select('ritDelen').pipe(filter(ritdelen => !!ritdelen), tap(ritDelen => {
@@ -3441,10 +3275,10 @@ class ViewerControlsComponent {
             }
         })).subscribe();
     }
-    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" }] }); }
+    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", 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.14", ngImport: i0, type: ViewerControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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                   [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: [{
@@ -3568,7 +3402,6 @@ class SvgVisualisatieComponent {
         this.svgInfos$ = this.store.select('svgInfos');
         this.popoverInfos = [];
         this.clickableIds = [];
-        this.selectieInfos$ = this.store.select('selectieInfos');
         this.rightClickableIds = [];
         this.contextMenuActions = [];
         this.contextMenuStyle = { display: 'none' };
@@ -3799,12 +3632,12 @@ class SvgVisualisatieComponent {
     getPuics(topoElementen) {
         return topoElementen.map(e => e.getPuic());
     }
-    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" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgVisualisatieComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgVisualisatieComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i2$1.Store }, { type: ViewerControlService }, { type: ActieHelper }, { type: SignaleringsBeeldManagerService }, { type: EditorService }], propDecorators: { nietGeplandeActies: [{
                 type: Input
             }], useClickArea: [{
@@ -3880,10 +3713,10 @@ class MstviewerComponent {
     keurAlleActiesGoed() {
         this.viewerControlsService.keurAlleActiesGoed(this.ongeplandeActies);
     }
-    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" }] }); }
+    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                     [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.14", ngImport: i0, type: MstviewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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                     [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: [{
@@ -3910,26 +3743,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 let SignaleringsbeeldInfoResource = class SignaleringsbeeldInfoResource extends Resource {
-    constructor(restHandler, store, sbControllerService) {
+    constructor(restHandler, store) {
         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);
-            sbControllerService.configuration.basePath = baseUrl + '/mst';
-        }));
+        this.subscriptions.add(this.store.select('baseUrl').subscribe(baseUrl => this.$setUrl(baseUrl)));
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsbeeldInfoResource, deps: [{ token: i1$1.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 }); }
 };
+__decorate([
+    ResourceAction({
+        path: '/',
+        method: ResourceRequestMethod.Post
+    })
+], SignaleringsbeeldInfoResource.prototype, "laadSignaleringsbeeldInfo", void 0);
 __decorate([
     ResourceAction({
         path: '/valideeriaversie'
@@ -3940,9 +3771,9 @@ SignaleringsbeeldInfoResource = __decorate([
         pathPrefix: '/mst/rest/signaleringsbeeldeninfo'
     })
 ], SignaleringsbeeldInfoResource);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignaleringsbeeldInfoResource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SignaleringsbeeldInfoResource, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ResourceHandler }, { type: i2$1.Store }, { type: SbControllerService }], propDecorators: { getBestaatIALevering: [] } });
+        }], ctorParameters: () => [{ type: i1$1.ResourceHandler }, { type: i2$1.Store }], propDecorators: { laadSignaleringsbeeldInfo: [], getBestaatIALevering: [] } });
 class SignaleringsbeeldInfoDto extends ResourceModel {
     constructor(data) {
         super();
@@ -3978,10 +3809,10 @@ class BaseRestService {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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.7", ngImport: i0, type: BaseRestService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BaseRestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseRestService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4002,10 +3833,10 @@ class BewegingVerrijkerService extends BaseRestService {
         this.store.dispatch(ClearProgress());
         return [];
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingVerrijkerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingVerrijkerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4327,10 +4158,10 @@ class RitLezerService {
     isGewijzigd(beweging) {
         return beweging.wijzigStatus === 'Gewijzigd';
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitLezerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitLezerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: EditorService }, { type: MessagesService }] });
 
@@ -4388,10 +4219,10 @@ class BepaalOngeplandeActiesEffect {
             puicMap.put(puic, ongeplandeActie);
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalOngeplandeActiesEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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 }] });
 
@@ -4400,10 +4231,10 @@ class DateService {
     getCurrentDate() {
         return new Date();
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4457,10 +4288,10 @@ class BepaalSbInfosEffect {
             pplgs.push(pplg);
         }
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BepaalSbInfosEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BepaalSbInfosEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsbeeldInfoResource }, { type: MessagesService }, { type: DateService }] });
 
@@ -4519,10 +4350,10 @@ class BewegingInvoegenEffect {
         });
         return combinaties;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BewegingInvoegenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BewegingInvoegenEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: EditorService }] });
 
@@ -4551,10 +4382,10 @@ class 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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteOngeplandeActieEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DeleteOngeplandeActieEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }] });
 
@@ -4577,10 +4408,10 @@ class FocusEffect {
     getPuics(topoElementen) {
         return topoElementen.map(e => e.getPuic());
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FocusEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FocusEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }] });
 
@@ -4619,7 +4450,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);
                 }
@@ -4627,10 +4458,10 @@ class LaadRouteFilesEffect {
         });
         return pplgs;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadRouteFilesEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LaadRouteFilesEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: RitLezerService }, { type: EditorService }, { type: MessagesService }] });
 
@@ -4649,10 +4480,10 @@ class ConnectorService extends BaseRestService {
         this.store.dispatch(ClearProgress());
         return [];
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConnectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ConnectorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4681,7 +4512,7 @@ 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(storeState.iaVersie.versie, actie.pplgs).pipe(take(1), tap((dtos) => this.processResponse({ dtos, storeState, actie })), catchError((err) => {
+        return this.sbiResource.laadSignaleringsbeeldInfo(this.createSignaleringsbeeldInfoQueryDto(actie.pplgs, storeState.iaVersie)).pipe(take(1), tap((dtos) => this.processResponse({ dtos, storeState, actie })), catchError((err) => {
             this.messagesService.showMessage(MessageBuilder.nietGevondenSBI(err));
             return throwError(() => err);
         }));
@@ -4698,7 +4529,7 @@ class LaadSignaleringsbeeldenEffect {
     }
     loadRouteFilesAndSignaleringsbeeldInfo({ otherPplg, rand, storeState }) {
         this.editorService.laadRouteFiles(storeState.iaVersie.versie, [rand.getPPLG(), otherPplg]);
-        return this.sbiResource.laadSignaleringsbeeldInfo(storeState.iaVersie.versie, [rand.getPPLG(), otherPplg]).pipe(map(dtos => ({ dtos, storeState })));
+        return this.sbiResource.laadSignaleringsbeeldInfo(this.createSignaleringsbeeldInfoQueryDto([rand.getPPLG(), otherPplg], storeState.iaVersie)).pipe(map(dtos => ({ dtos, storeState })));
     }
     loadSignaleringsbeelden({ dtos, storeState }) {
         return this.editorService.laadSignaleringsbeelden(storeState.iaVersie.versie, dtos).pipe(map(svgDataUrls => ({ svgDataUrls, ritDelen: storeState.ritDelen, dtos })));
@@ -4737,6 +4568,10 @@ 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)));
     }
@@ -4763,7 +4598,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);
                 }
@@ -4779,7 +4614,7 @@ class LaadSignaleringsbeeldenEffect {
     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;
@@ -4794,7 +4629,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;
@@ -4915,11 +4750,9 @@ class LaadSignaleringsbeeldenEffect {
     }
     bevatGevisualiseerdePplg(visibleDtos, pplg) {
         for (const dto of visibleDtos) {
-            if (dto.pplgs) {
-                for (const dtopplg of dto.pplgs) {
-                    if (dtopplg === pplg) {
-                        return true;
-                    }
+            for (const dtopplg of dto.pplgs) {
+                if (dtopplg === pplg) {
+                    return true;
                 }
             }
         }
@@ -4969,7 +4802,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);
             }
@@ -4994,10 +4827,10 @@ class LaadSignaleringsbeeldenEffect {
         }
         return -1;
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LaadSignaleringsbeeldenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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 }] });
 
@@ -5008,10 +4841,10 @@ 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.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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitGoedkeurenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RitGoedkeurenEffect, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: BewegingVerrijkerService }] });
 
@@ -5109,64 +4942,37 @@ class RitdelenEffect {
         const idx = ritdelen.indexOf(naRitdeelPositie);
         ritdelen.splice(idx + 1, 0, newRitdeel);
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RitdelenEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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, sbSvgUtilService, svgService) {
+    constructor(actions$, store, signaleringsBeeldManagerService, sbSvgUtilService) {
         this.actions$ = actions$;
         this.store = store;
+        this.signaleringsBeeldManagerService = signaleringsBeeldManagerService;
         this.sbSvgUtilService = sbSvgUtilService;
-        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) => {
+        this.updateSvgView$ = createEffect(() => this.actions$.pipe(ofType(SetSvgInfos), map((_actie) => {
             setTimeout(() => {
-                const svgTopology = svgInfo.topology;
-                if (!svgTopology) {
-                    return;
-                }
                 this.sbSvgUtilService.addSvgDefs();
                 const wisselEnStoringskaderPuicMap = new Map();
-                svgTopology.alleSoortenWissels
-                    ?.forEach(wissel => wisselEnStoringskaderPuicMap.set(wissel.puic, wissel.storingSymboolPuic));
+                this.signaleringsBeeldManagerService.getAlleSoortenWissels()
+                    .forEach(wissel => wisselEnStoringskaderPuicMap.set(wissel.getPuic(), wissel.getStoringSymboolPuic()));
                 this.sbSvgUtilService.zetClassOpStoringSymbolenMetMap(wisselEnStoringskaderPuicMap);
-                this.sbSvgUtilService.zetClassOpSpoornummers(svgTopology.puicVoorSpoorNummers ?? []);
+                this.sbSvgUtilService.zetClassOpSpoornummers(this.signaleringsBeeldManagerService.getPuicsVoorSpoornummers());
                 this.sbSvgUtilService.maakOngewensteElementenOnzichtbaar();
                 this.sbSvgUtilService.zetClassOpLangeText();
-                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.sbSvgUtilService.maakOngewensteSeindelenOnzichtbaar(this.signaleringsBeeldManagerService.getSeinen());
+                this.sbSvgUtilService.maakSignaleringsElementenOnzichtbaar(this.signaleringsBeeldManagerService.getSignaleringsElementen());
+                const puicsVoorRanden = this.signaleringsBeeldManagerService.getPuicsVoorRanden();
                 this.zetClassOpRanden(puicsVoorRanden);
-                this.sbSvgUtilService.zetClassOpRijrichtingen(seinen);
+                this.sbSvgUtilService.zetClassOpRijrichtingen(this.signaleringsBeeldManagerService.getSeinen());
                 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 => {
@@ -5174,24 +4980,12 @@ class SvgViewEffect {
             rand?.classList.add('connector');
         });
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SvgViewEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SvgViewEffect, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: i3.SignaleringsbeeldSvgUtilityService }, { type: SvgControllerService }] });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i2$1.Store }, { type: SignaleringsBeeldManagerService }, { type: i4.SignaleringsbeeldSvgUtilityService }] });
 
 class ProgressIndicator {
     constructor(lowerText, upperText, iconClass) {
@@ -5280,7 +5074,6 @@ const progressIndicatorReducer = createReducer({}, on(ShowProgress, () => ({ pro
 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);
@@ -5352,7 +5145,6 @@ const storeReducers = {
     nieuweBewegingen: nieuweBewegingReducer,
     baseUrl: baseUrlReducer,
     focusIds: focusIdsReducer,
-    selectieInfos: selectieInfosReducer
 };
 
 // @ts-nocheck
@@ -5379,10 +5171,10 @@ class ZoneUtil {
     proxy(target) {
         return new Proxy(target, this.zoneHandler);
     }
-    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 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZoneUtil, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ZoneUtil, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -5423,8 +5215,8 @@ class MstViewerModule {
             EditorService: zoneUtil.proxy(service)
         };
     }
-    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,
+    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,
             MstviewerComponent,
             OverlayComponent,
             ProgressIndicatorComponent,
@@ -5437,7 +5229,7 @@ class MstViewerModule {
             MessagesComponent], imports: [CommonModule,
             ImxViewerModule,
             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: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstViewerModule, providers: [
             ZoneUtil,
             SignaleringsbeeldInfoResource,
             MstLoggingResource,
@@ -5450,7 +5242,7 @@ class MstViewerModule {
             BewegingVerrijkerService
         ], imports: [imports] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MstViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MstViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports,