fabrikantencore 1.4.3 → 2.0.2

package/fesm2015/fabrikantencore.mjs

@@ -24,16 +24,16 @@ import * as i8 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i6$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i9$1 from '@angular/material/select';
+import * as i10 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i10 from '@angular/material/core';
+import * as i11 from '@angular/material/core';
 import * as i7$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8$1 from '@angular/material/tabs';
+import * as i10$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i1$3 from '@angular/material/dialog';
 import { MatDialogConfig, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i9$2 from '@angular/material/button-toggle';
+import * as i9$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i4$2 from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -43,7 +43,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTableModule } from '@angular/material/table';
 import * as i3$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i10$1 from '@angular/material/checkbox';
+import * as i10$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTreeModule } from '@angular/material/tree';
 import { MatDividerModule } from '@angular/material/divider';
@@ -1288,6 +1288,56 @@ class FiltersApiClient {
         }
         return of(null);
     }
+    getRangeInputsViewModel() {
+        let url_ = this.baseUrl + "/api/filters/getrangeinputsviewmodel";
+        url_ = url_.replace(/[?&]$/, "");
+        let options_ = {
+            observe: "response",
+            responseType: "blob",
+            headers: new HttpHeaders({
+                "Accept": "application/json"
+            })
+        };
+        return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
+            return this.processGetRangeInputsViewModel(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processGetRangeInputsViewModel(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processGetRangeInputsViewModel(response) {
+        const status = response.status;
+        const responseBlob = response instanceof HttpResponse ? response.body :
+            response.error instanceof Blob ? response.error : undefined;
+        let _headers = {};
+        if (response.headers) {
+            for (let key of response.headers.keys()) {
+                _headers[key] = response.headers.get(key);
+            }
+        }
+        if (status === 200) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                let result200 = null;
+                let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = RangeInputsViewModel.fromJS(resultData200);
+                return of(result200);
+            }));
+        }
+        else if (status !== 200 && status !== 204) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            }));
+        }
+        return of(null);
+    }
     createFilter(pCreateFilterRequest) {
         let url_ = this.baseUrl + "/api/filters/createfilter";
         url_ = url_.replace(/[?&]$/, "");
@@ -1999,10 +2049,10 @@ class ProductsApiClient {
         }
         return of(null);
     }
-    connectBCBEigenschapOptieFilterOption(pKoppelEigenschapOptieRequest) {
-        let url_ = this.baseUrl + "/api/products/connectbcbeigenschapoptiefilteroption";
+    connectBCBEigenschapOptieFilterOptionPreview(pConnectEigenschapOptieRequest) {
+        let url_ = this.baseUrl + "/api/products/connectbcbeigenschapoptiefilteroptionpreview";
         url_ = url_.replace(/[?&]$/, "");
-        const content_ = JSON.stringify(pKoppelEigenschapOptieRequest);
+        const content_ = JSON.stringify(pConnectEigenschapOptieRequest);
         let options_ = {
             body: content_,
             observe: "response",
@@ -2013,11 +2063,11 @@ class ProductsApiClient {
             })
         };
         return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
-            return this.processConnectBCBEigenschapOptieFilterOption(response_);
+            return this.processConnectBCBEigenschapOptieFilterOptionPreview(response_);
         })).pipe(catchError((response_) => {
             if (response_ instanceof HttpResponseBase) {
                 try {
-                    return this.processConnectBCBEigenschapOptieFilterOption(response_);
+                    return this.processConnectBCBEigenschapOptieFilterOptionPreview(response_);
                 }
                 catch (e) {
                     return throwError(e);
@@ -2027,7 +2077,7 @@ class ProductsApiClient {
                 return throwError(response_);
         }));
     }
-    processConnectBCBEigenschapOptieFilterOption(response) {
+    processConnectBCBEigenschapOptieFilterOptionPreview(response) {
         const status = response.status;
         const responseBlob = response instanceof HttpResponse ? response.body :
             response.error instanceof Blob ? response.error : undefined;
@@ -2041,7 +2091,7 @@ class ProductsApiClient {
             return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
                 let result200 = null;
                 let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = KoppelEigenschapOptieResponse.fromJS(resultData200);
+                result200 = ConnectEigenschapOptieResponse.fromJS(resultData200);
                 return of(result200);
             }));
         }
@@ -2052,6 +2102,55 @@ class ProductsApiClient {
         }
         return of(null);
     }
+    connectBCBEigenschapOptieFilterOption(pConnectEigenschapOptieRequest) {
+        let url_ = this.baseUrl + "/api/products/connectbcbeigenschapoptiefilteroption";
+        url_ = url_.replace(/[?&]$/, "");
+        const content_ = JSON.stringify(pConnectEigenschapOptieRequest);
+        let options_ = {
+            body: content_,
+            observe: "response",
+            responseType: "blob",
+            headers: new HttpHeaders({
+                "Content-Type": "application/json",
+            })
+        };
+        return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
+            return this.processConnectBCBEigenschapOptieFilterOption(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processConnectBCBEigenschapOptieFilterOption(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processConnectBCBEigenschapOptieFilterOption(response) {
+        const status = response.status;
+        const responseBlob = response instanceof HttpResponse ? response.body :
+            response.error instanceof Blob ? response.error : undefined;
+        let _headers = {};
+        if (response.headers) {
+            for (let key of response.headers.keys()) {
+                _headers[key] = response.headers.get(key);
+            }
+        }
+        if (status === 200) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return of(null);
+            }));
+        }
+        else if (status !== 200 && status !== 204) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            }));
+        }
+        return of(null);
+    }
     connectBCBOpbouwOptieFilterOption(pConnectOpbouwOptieRequest) {
         let url_ = this.baseUrl + "/api/products/connectbcbopbouwoptiefilteroption";
         url_ = url_.replace(/[?&]$/, "");
@@ -2558,6 +2657,59 @@ class ProductsApiClient {
         }
         return of(null);
     }
+    connectBCBEigenschapRangeInputPreview(pConnectBCBEigenschapRangeInputRequest) {
+        let url_ = this.baseUrl + "/api/products/connectbcbeigenschaprangeinputpreview";
+        url_ = url_.replace(/[?&]$/, "");
+        const content_ = JSON.stringify(pConnectBCBEigenschapRangeInputRequest);
+        let options_ = {
+            body: content_,
+            observe: "response",
+            responseType: "blob",
+            headers: new HttpHeaders({
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            })
+        };
+        return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
+            return this.processConnectBCBEigenschapRangeInputPreview(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processConnectBCBEigenschapRangeInputPreview(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processConnectBCBEigenschapRangeInputPreview(response) {
+        const status = response.status;
+        const responseBlob = response instanceof HttpResponse ? response.body :
+            response.error instanceof Blob ? response.error : undefined;
+        let _headers = {};
+        if (response.headers) {
+            for (let key of response.headers.keys()) {
+                _headers[key] = response.headers.get(key);
+            }
+        }
+        if (status === 200) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                let result200 = null;
+                let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                result200 = ConnectBCBEigenschapRangeInputResponse.fromJS(resultData200);
+                return of(result200);
+            }));
+        }
+        else if (status !== 200 && status !== 204) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            }));
+        }
+        return of(null);
+    }
     connectBCBEigenschapRangeInput(pConnectBCBEigenschapRangeInputRequest) {
         let url_ = this.baseUrl + "/api/products/connectbcbeigenschaprangeinput";
         url_ = url_.replace(/[?&]$/, "");
@@ -3600,16 +3752,6 @@ class BCBProductViewModel {
             this.connected = _data["connected"];
             this.importStatus = _data["importStatus"];
             this.bcbeboViewModel = _data["bcbeboViewModel"] ? BCBEBOViewModel.fromJS(_data["bcbeboViewModel"]) : undefined;
-            if (Array.isArray(_data["bcbProductEigenschapViewModels"])) {
-                this.bcbProductEigenschapViewModels = [];
-                for (let item of _data["bcbProductEigenschapViewModels"])
-                    this.bcbProductEigenschapViewModels.push(BCBProductEigenschapViewModel.fromJS(item));
-            }
-            if (Array.isArray(_data["bcbProductOpbouwViewModels"])) {
-                this.bcbProductOpbouwViewModels = [];
-                for (let item of _data["bcbProductOpbouwViewModels"])
-                    this.bcbProductOpbouwViewModels.push(BCBProductOpbouwViewModel.fromJS(item));
-            }
         }
     }
     static fromJS(data) {
@@ -3627,16 +3769,6 @@ class BCBProductViewModel {
         data["connected"] = this.connected;
         data["importStatus"] = this.importStatus;
         data["bcbeboViewModel"] = this.bcbeboViewModel ? this.bcbeboViewModel.toJSON() : undefined;
-        if (Array.isArray(this.bcbProductEigenschapViewModels)) {
-            data["bcbProductEigenschapViewModels"] = [];
-            for (let item of this.bcbProductEigenschapViewModels)
-                data["bcbProductEigenschapViewModels"].push(item.toJSON());
-        }
-        if (Array.isArray(this.bcbProductOpbouwViewModels)) {
-            data["bcbProductOpbouwViewModels"] = [];
-            for (let item of this.bcbProductOpbouwViewModels)
-                data["bcbProductOpbouwViewModels"].push(item.toJSON());
-        }
         return data;
     }
 }
@@ -3653,11 +3785,24 @@ class BCBEBOViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            this.location = _data["location"];
+            this.connected = _data["connected"];
+            this.open = _data["open"];
             if (Array.isArray(_data["dOs"])) {
                 this.dOs = [];
                 for (let item of _data["dOs"])
                     this.dOs.push(BCBEBODOViewModel.fromJS(item));
             }
+            if (Array.isArray(_data["bcbEigenschapViewModels"])) {
+                this.bcbEigenschapViewModels = [];
+                for (let item of _data["bcbEigenschapViewModels"])
+                    this.bcbEigenschapViewModels.push(BCBEigenschapViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["bcbOpbouwViewModels"])) {
+                this.bcbOpbouwViewModels = [];
+                for (let item of _data["bcbOpbouwViewModels"])
+                    this.bcbOpbouwViewModels.push(BCBOpbouwViewModel.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
@@ -3670,11 +3815,24 @@ class BCBEBOViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        data["location"] = this.location;
+        data["connected"] = this.connected;
+        data["open"] = this.open;
         if (Array.isArray(this.dOs)) {
             data["dOs"] = [];
             for (let item of this.dOs)
                 data["dOs"].push(item.toJSON());
         }
+        if (Array.isArray(this.bcbEigenschapViewModels)) {
+            data["bcbEigenschapViewModels"] = [];
+            for (let item of this.bcbEigenschapViewModels)
+                data["bcbEigenschapViewModels"].push(item.toJSON());
+        }
+        if (Array.isArray(this.bcbOpbouwViewModels)) {
+            data["bcbOpbouwViewModels"] = [];
+            for (let item of this.bcbOpbouwViewModels)
+                data["bcbOpbouwViewModels"].push(item.toJSON());
+        }
         return data;
     }
 }
@@ -3710,48 +3868,6 @@ class BCBEBODOViewModel {
         return data;
     }
 }
-class BCBProductEigenschapViewModel {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.id = _data["id"];
-            this.connected = _data["connected"];
-            this.open = _data["open"];
-            this.bcbEigenschapViewModel = _data["bcbEigenschapViewModel"] ? BCBEigenschapViewModel.fromJS(_data["bcbEigenschapViewModel"]) : undefined;
-            if (Array.isArray(_data["bcbProductEigenschapOptieViewModels"])) {
-                this.bcbProductEigenschapOptieViewModels = [];
-                for (let item of _data["bcbProductEigenschapOptieViewModels"])
-                    this.bcbProductEigenschapOptieViewModels.push(BCBProductEigenschapOptieViewModel.fromJS(item));
-            }
-        }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new BCBProductEigenschapViewModel();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["id"] = this.id;
-        data["connected"] = this.connected;
-        data["open"] = this.open;
-        data["bcbEigenschapViewModel"] = this.bcbEigenschapViewModel ? this.bcbEigenschapViewModel.toJSON() : undefined;
-        if (Array.isArray(this.bcbProductEigenschapOptieViewModels)) {
-            data["bcbProductEigenschapOptieViewModels"] = [];
-            for (let item of this.bcbProductEigenschapOptieViewModels)
-                data["bcbProductEigenschapOptieViewModels"].push(item.toJSON());
-        }
-        return data;
-    }
-}
 class BCBEigenschapViewModel {
     constructor(data) {
         if (data) {
@@ -3766,6 +3882,13 @@ class BCBEigenschapViewModel {
             this.id = _data["id"];
             this.name = _data["name"];
             this.connected = _data["connected"];
+            this.open = _data["open"];
+            this.location = _data["location"];
+            if (Array.isArray(_data["opties"])) {
+                this.opties = [];
+                for (let item of _data["opties"])
+                    this.opties.push(BCBEigenschapOptieViewModel.fromJS(item));
+            }
             if (Array.isArray(_data["bereiken"])) {
                 this.bereiken = [];
                 for (let item of _data["bereiken"])
@@ -3789,6 +3912,13 @@ class BCBEigenschapViewModel {
         data["id"] = this.id;
         data["name"] = this.name;
         data["connected"] = this.connected;
+        data["open"] = this.open;
+        data["location"] = this.location;
+        if (Array.isArray(this.opties)) {
+            data["opties"] = [];
+            for (let item of this.opties)
+                data["opties"].push(item.toJSON());
+        }
         if (Array.isArray(this.bereiken)) {
             data["bereiken"] = [];
             for (let item of this.bereiken)
@@ -3802,7 +3932,7 @@ class BCBEigenschapViewModel {
         return data;
     }
 }
-class BCBEigenschapBereikViewModel {
+class BCBEigenschapOptieViewModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -3814,31 +3944,45 @@ class BCBEigenschapBereikViewModel {
     init(_data) {
         if (_data) {
             this.id = _data["id"];
-            this.typeField = _data["typeField"];
-            this.minimum = _data["minimum"];
-            this.maximum = _data["maximum"];
-            this.inclusiefMinimum = _data["inclusiefMinimum"];
-            this.inclusiefMaximum = _data["inclusiefMaximum"];
+            this.name = _data["name"];
+            this.connected = _data["connected"];
+            if (Array.isArray(_data["bcbEigenschapOptieFilterOptionViewModels"])) {
+                this.bcbEigenschapOptieFilterOptionViewModels = [];
+                for (let item of _data["bcbEigenschapOptieFilterOptionViewModels"])
+                    this.bcbEigenschapOptieFilterOptionViewModels.push(BCBEigenschapOptieFilterOptionViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["bcbEigenschapOptieCategoryViewModels"])) {
+                this.bcbEigenschapOptieCategoryViewModels = [];
+                for (let item of _data["bcbEigenschapOptieCategoryViewModels"])
+                    this.bcbEigenschapOptieCategoryViewModels.push(BCBEigenschapOptieCategoryViewModel.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new BCBEigenschapBereikViewModel();
+        let result = new BCBEigenschapOptieViewModel();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
-        data["typeField"] = this.typeField;
-        data["minimum"] = this.minimum;
-        data["maximum"] = this.maximum;
-        data["inclusiefMinimum"] = this.inclusiefMinimum;
-        data["inclusiefMaximum"] = this.inclusiefMaximum;
+        data["name"] = this.name;
+        data["connected"] = this.connected;
+        if (Array.isArray(this.bcbEigenschapOptieFilterOptionViewModels)) {
+            data["bcbEigenschapOptieFilterOptionViewModels"] = [];
+            for (let item of this.bcbEigenschapOptieFilterOptionViewModels)
+                data["bcbEigenschapOptieFilterOptionViewModels"].push(item.toJSON());
+        }
+        if (Array.isArray(this.bcbEigenschapOptieCategoryViewModels)) {
+            data["bcbEigenschapOptieCategoryViewModels"] = [];
+            for (let item of this.bcbEigenschapOptieCategoryViewModels)
+                data["bcbEigenschapOptieCategoryViewModels"].push(item.toJSON());
+        }
         return data;
     }
 }
-class BCBEigenschapRangeInputModel {
+class BCBEigenschapOptieFilterOptionViewModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -3850,23 +3994,25 @@ class BCBEigenschapRangeInputModel {
     init(_data) {
         if (_data) {
             this.id = _data["id"];
-            this.rangeInputModel = _data["rangeInputModel"] ? RangeInputViewModel.fromJS(_data["rangeInputModel"]) : undefined;
+            this.location = _data["location"];
+            this.filterOptionViewModel = _data["filterOptionViewModel"] ? FilterOptionViewModel.fromJS(_data["filterOptionViewModel"]) : undefined;
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new BCBEigenschapRangeInputModel();
+        let result = new BCBEigenschapOptieFilterOptionViewModel();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
-        data["rangeInputModel"] = this.rangeInputModel ? this.rangeInputModel.toJSON() : undefined;
+        data["location"] = this.location;
+        data["filterOptionViewModel"] = this.filterOptionViewModel ? this.filterOptionViewModel.toJSON() : undefined;
         return data;
     }
 }
-class RangeInputViewModel {
+class FilterOptionViewModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -3879,11 +4025,13 @@ class RangeInputViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            this.colour = _data["colour"];
+            this.filterName = _data["filterName"];
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new RangeInputViewModel();
+        let result = new FilterOptionViewModel();
         result.init(data);
         return result;
     }
@@ -3891,10 +4039,12 @@ class RangeInputViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        data["colour"] = this.colour;
+        data["filterName"] = this.filterName;
         return data;
     }
 }
-class BCBProductEigenschapOptieViewModel {
+class BCBEigenschapOptieCategoryViewModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -3906,25 +4056,25 @@ class BCBProductEigenschapOptieViewModel {
     init(_data) {
         if (_data) {
             this.id = _data["id"];
-            this.bcbEigenschapOptieViewModel = _data["bcbEigenschapOptieViewModel"] ? BCBEigenschapOptieViewModel.fromJS(_data["bcbEigenschapOptieViewModel"]) : undefined;
-            this.connected = _data["connected"];
+            this.location = _data["location"];
+            this.categoryViewModel = _data["categoryViewModel"] ? CategoryViewModel.fromJS(_data["categoryViewModel"]) : undefined;
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new BCBProductEigenschapOptieViewModel();
+        let result = new BCBEigenschapOptieCategoryViewModel();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
-        data["bcbEigenschapOptieViewModel"] = this.bcbEigenschapOptieViewModel ? this.bcbEigenschapOptieViewModel.toJSON() : undefined;
-        data["connected"] = this.connected;
+        data["location"] = this.location;
+        data["categoryViewModel"] = this.categoryViewModel ? this.categoryViewModel.toJSON() : undefined;
         return data;
     }
 }
-class BCBEigenschapOptieViewModel {
+class BCBEigenschapBereikViewModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -3936,45 +4086,31 @@ class BCBEigenschapOptieViewModel {
     init(_data) {
         if (_data) {
             this.id = _data["id"];
-            this.name = _data["name"];
-            this.connected = _data["connected"];
-            if (Array.isArray(_data["bcbEigenschapOptieFilterOptionViewModels"])) {
-                this.bcbEigenschapOptieFilterOptionViewModels = [];
-                for (let item of _data["bcbEigenschapOptieFilterOptionViewModels"])
-                    this.bcbEigenschapOptieFilterOptionViewModels.push(BCBEigenschapOptieFilterOptionViewModel.fromJS(item));
-            }
-            if (Array.isArray(_data["bcbEigenschapOptieCategoryViewModels"])) {
-                this.bcbEigenschapOptieCategoryViewModels = [];
-                for (let item of _data["bcbEigenschapOptieCategoryViewModels"])
-                    this.bcbEigenschapOptieCategoryViewModels.push(BCBEigenschapOptieCategoryViewModel.fromJS(item));
-            }
+            this.typeField = _data["typeField"];
+            this.minimum = _data["minimum"];
+            this.maximum = _data["maximum"];
+            this.inclusiefMinimum = _data["inclusiefMinimum"];
+            this.inclusiefMaximum = _data["inclusiefMaximum"];
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new BCBEigenschapOptieViewModel();
+        let result = new BCBEigenschapBereikViewModel();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
-        data["name"] = this.name;
-        data["connected"] = this.connected;
-        if (Array.isArray(this.bcbEigenschapOptieFilterOptionViewModels)) {
-            data["bcbEigenschapOptieFilterOptionViewModels"] = [];
-            for (let item of this.bcbEigenschapOptieFilterOptionViewModels)
-                data["bcbEigenschapOptieFilterOptionViewModels"].push(item.toJSON());
-        }
-        if (Array.isArray(this.bcbEigenschapOptieCategoryViewModels)) {
-            data["bcbEigenschapOptieCategoryViewModels"] = [];
-            for (let item of this.bcbEigenschapOptieCategoryViewModels)
-                data["bcbEigenschapOptieCategoryViewModels"].push(item.toJSON());
-        }
+        data["typeField"] = this.typeField;
+        data["minimum"] = this.minimum;
+        data["maximum"] = this.maximum;
+        data["inclusiefMinimum"] = this.inclusiefMinimum;
+        data["inclusiefMaximum"] = this.inclusiefMaximum;
         return data;
     }
 }
-class BCBEigenschapOptieFilterOptionViewModel {
+class BCBEigenschapRangeInputModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -3986,23 +4122,25 @@ class BCBEigenschapOptieFilterOptionViewModel {
     init(_data) {
         if (_data) {
             this.id = _data["id"];
-            this.filterOptionViewModel = _data["filterOptionViewModel"] ? FilterOptionViewModel.fromJS(_data["filterOptionViewModel"]) : undefined;
+            this.location = _data["location"];
+            this.rangeInputModel = _data["rangeInputModel"] ? RangeInputViewModel.fromJS(_data["rangeInputModel"]) : undefined;
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new BCBEigenschapOptieFilterOptionViewModel();
+        let result = new BCBEigenschapRangeInputModel();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
-        data["filterOptionViewModel"] = this.filterOptionViewModel ? this.filterOptionViewModel.toJSON() : undefined;
+        data["location"] = this.location;
+        data["rangeInputModel"] = this.rangeInputModel ? this.rangeInputModel.toJSON() : undefined;
         return data;
     }
 }
-class FilterOptionViewModel {
+class RangeInputViewModel {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -4015,13 +4153,11 @@ class FilterOptionViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
-            this.colour = _data["colour"];
-            this.filterName = _data["filterName"];
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new FilterOptionViewModel();
+        let result = new RangeInputViewModel();
         result.init(data);
         return result;
     }
@@ -4029,78 +4165,6 @@ class FilterOptionViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
-        data["colour"] = this.colour;
-        data["filterName"] = this.filterName;
-        return data;
-    }
-}
-class BCBEigenschapOptieCategoryViewModel {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.id = _data["id"];
-            this.categoryViewModel = _data["categoryViewModel"] ? CategoryViewModel.fromJS(_data["categoryViewModel"]) : undefined;
-        }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new BCBEigenschapOptieCategoryViewModel();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["id"] = this.id;
-        data["categoryViewModel"] = this.categoryViewModel ? this.categoryViewModel.toJSON() : undefined;
-        return data;
-    }
-}
-class BCBProductOpbouwViewModel {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.id = _data["id"];
-            this.connected = _data["connected"];
-            this.open = _data["open"];
-            this.bcbOpbouwViewModel = _data["bcbOpbouwViewModel"] ? BCBOpbouwViewModel.fromJS(_data["bcbOpbouwViewModel"]) : undefined;
-            if (Array.isArray(_data["opties"])) {
-                this.opties = [];
-                for (let item of _data["opties"])
-                    this.opties.push(BCBProductOpbouwOptieViewModel.fromJS(item));
-            }
-        }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new BCBProductOpbouwViewModel();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["id"] = this.id;
-        data["connected"] = this.connected;
-        data["open"] = this.open;
-        data["bcbOpbouwViewModel"] = this.bcbOpbouwViewModel ? this.bcbOpbouwViewModel.toJSON() : undefined;
-        if (Array.isArray(this.opties)) {
-            data["opties"] = [];
-            for (let item of this.opties)
-                data["opties"].push(item.toJSON());
-        }
         return data;
     }
 }
@@ -4117,142 +4181,34 @@ class BCBOpbouwViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
-        }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new BCBOpbouwViewModel();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["id"] = this.id;
-        data["name"] = this.name;
-        return data;
-    }
-}
-class BCBProductOpbouwOptieViewModel {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.id = _data["id"];
+            this.location = _data["location"];
             this.connected = _data["connected"];
             this.open = _data["open"];
-            this.bcbOpbouwOptieViewModel = _data["bcbOpbouwOptieViewModel"] ? BCBOpbouwOptieViewModel.fromJS(_data["bcbOpbouwOptieViewModel"]) : undefined;
-            if (Array.isArray(_data["bcbProductEigenschapViewModels"])) {
-                this.bcbProductEigenschapViewModels = [];
-                for (let item of _data["bcbProductEigenschapViewModels"])
-                    this.bcbProductEigenschapViewModels.push(BCBProductEigenschapViewModel.fromJS(item));
-            }
-            if (Array.isArray(_data["bcbProductOpbouwViewModels"])) {
-                this.bcbProductOpbouwViewModels = [];
-                for (let item of _data["bcbProductOpbouwViewModels"])
-                    this.bcbProductOpbouwViewModels.push(BCBProductOpbouwViewModel.fromJS(item));
+            if (Array.isArray(_data["ebos"])) {
+                this.ebos = [];
+                for (let item of _data["ebos"])
+                    this.ebos.push(BCBEBOViewModel.fromJS(item));
             }
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new BCBProductOpbouwOptieViewModel();
+        let result = new BCBOpbouwViewModel();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
+        data["name"] = this.name;
+        data["location"] = this.location;
         data["connected"] = this.connected;
         data["open"] = this.open;
-        data["bcbOpbouwOptieViewModel"] = this.bcbOpbouwOptieViewModel ? this.bcbOpbouwOptieViewModel.toJSON() : undefined;
-        if (Array.isArray(this.bcbProductEigenschapViewModels)) {
-            data["bcbProductEigenschapViewModels"] = [];
-            for (let item of this.bcbProductEigenschapViewModels)
-                data["bcbProductEigenschapViewModels"].push(item.toJSON());
-        }
-        if (Array.isArray(this.bcbProductOpbouwViewModels)) {
-            data["bcbProductOpbouwViewModels"] = [];
-            for (let item of this.bcbProductOpbouwViewModels)
-                data["bcbProductOpbouwViewModels"].push(item.toJSON());
-        }
-        return data;
-    }
-}
-class BCBOpbouwOptieViewModel {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.id = _data["id"];
-            this.parent = _data["parent"];
-            this.connected = _data["connected"];
-            this.ignore = _data["ignore"];
-            this.bcbeboViewModel = _data["bcbeboViewModel"] ? BCBEBOViewModel.fromJS(_data["bcbeboViewModel"]) : undefined;
-            if (Array.isArray(_data["bcbOpbouwOptieFilterOptionViewModels"])) {
-                this.bcbOpbouwOptieFilterOptionViewModels = [];
-                for (let item of _data["bcbOpbouwOptieFilterOptionViewModels"])
-                    this.bcbOpbouwOptieFilterOptionViewModels.push(BCBOpbouwOptieFilterOptionViewModel.fromJS(item));
-            }
-        }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new BCBOpbouwOptieViewModel();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["id"] = this.id;
-        data["parent"] = this.parent;
-        data["connected"] = this.connected;
-        data["ignore"] = this.ignore;
-        data["bcbeboViewModel"] = this.bcbeboViewModel ? this.bcbeboViewModel.toJSON() : undefined;
-        if (Array.isArray(this.bcbOpbouwOptieFilterOptionViewModels)) {
-            data["bcbOpbouwOptieFilterOptionViewModels"] = [];
-            for (let item of this.bcbOpbouwOptieFilterOptionViewModels)
-                data["bcbOpbouwOptieFilterOptionViewModels"].push(item.toJSON());
-        }
-        return data;
-    }
-}
-class BCBOpbouwOptieFilterOptionViewModel {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.id = _data["id"];
-            this.filterOption = _data["filterOption"] ? FilterOptionViewModel.fromJS(_data["filterOption"]) : undefined;
+        if (Array.isArray(this.ebos)) {
+            data["ebos"] = [];
+            for (let item of this.ebos)
+                data["ebos"].push(item.toJSON());
         }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new BCBOpbouwOptieFilterOptionViewModel();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["id"] = this.id;
-        data["filterOption"] = this.filterOption ? this.filterOption.toJSON() : undefined;
         return data;
     }
 }
@@ -4818,6 +4774,9 @@ class FabrikantenBCBProductViewModel {
             this.id = _data["id"];
             this.name = _data["name"];
             this.description = _data["description"];
+            this.has3D = _data["has3D"];
+            this.has2D5 = _data["has2D5"];
+            this.snedes = _data["snedes"];
             this.bcbeboViewModel = _data["bcbeboViewModel"] ? BCBEBOViewModel.fromJS(_data["bcbeboViewModel"]) : undefined;
             if (Array.isArray(_data["bcbProductAfbeeldingen"])) {
                 this.bcbProductAfbeeldingen = [];
@@ -4837,6 +4796,9 @@ class FabrikantenBCBProductViewModel {
         data["id"] = this.id;
         data["name"] = this.name;
         data["description"] = this.description;
+        data["has3D"] = this.has3D;
+        data["has2D5"] = this.has2D5;
+        data["snedes"] = this.snedes;
         data["bcbeboViewModel"] = this.bcbeboViewModel ? this.bcbeboViewModel.toJSON() : undefined;
         if (Array.isArray(this.bcbProductAfbeeldingen)) {
             data["bcbProductAfbeeldingen"] = [];
@@ -5522,6 +5484,40 @@ class FilterViewModel {
         return data;
     }
 }
+class RangeInputsViewModel {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            if (Array.isArray(_data["rangeInputs"])) {
+                this.rangeInputs = [];
+                for (let item of _data["rangeInputs"])
+                    this.rangeInputs.push(RangeInputViewModel.fromJS(item));
+            }
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new RangeInputsViewModel();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        if (Array.isArray(this.rangeInputs)) {
+            data["rangeInputs"] = [];
+            for (let item of this.rangeInputs)
+                data["rangeInputs"].push(item.toJSON());
+        }
+        return data;
+    }
+}
 class CreateFilterResponse {
     constructor(data) {
         if (data) {
@@ -5966,6 +5962,7 @@ class BCBImportOpenTempRequest {
     init(_data) {
         if (_data) {
             this.base = _data["base"];
+            this.bcbImportSetId = _data["bcbImportSetId"];
             if (Array.isArray(_data["dOs"])) {
                 this.dOs = [];
                 for (let item of _data["dOs"])
@@ -5982,6 +5979,7 @@ class BCBImportOpenTempRequest {
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["base"] = this.base;
+        data["bcbImportSetId"] = this.bcbImportSetId;
         if (Array.isArray(this.dOs)) {
             data["dOs"] = [];
             for (let item of this.dOs)
@@ -6308,7 +6306,7 @@ class CleanUpResponseModel {
         return data;
     }
 }
-class KoppelEigenschapOptieResponse {
+class ConnectEigenschapOptieResponse {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -6319,22 +6317,30 @@ class KoppelEigenschapOptieResponse {
     }
     init(_data) {
         if (_data) {
-            this.success = _data["success"];
+            if (Array.isArray(_data["locations"])) {
+                this.locations = [];
+                for (let item of _data["locations"])
+                    this.locations.push(ConnectBCBEigenschapOptieLocation.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new KoppelEigenschapOptieResponse();
+        let result = new ConnectEigenschapOptieResponse();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
-        data["success"] = this.success;
+        if (Array.isArray(this.locations)) {
+            data["locations"] = [];
+            for (let item of this.locations)
+                data["locations"].push(item.toJSON());
+        }
         return data;
     }
 }
-class KoppelEigenschapOptieRequest {
+class ConnectBCBEigenschapOptieLocation {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -6345,24 +6351,32 @@ class KoppelEigenschapOptieRequest {
     }
     init(_data) {
         if (_data) {
-            this.bcbProductEigenschapOptieId = _data["bcbProductEigenschapOptieId"];
-            this.filterOptionId = _data["filterOptionId"];
+            this.location = _data["location"];
+            if (Array.isArray(_data["ebos"])) {
+                this.ebos = [];
+                for (let item of _data["ebos"])
+                    this.ebos.push(item);
+            }
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new KoppelEigenschapOptieRequest();
+        let result = new ConnectBCBEigenschapOptieLocation();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
-        data["bcbProductEigenschapOptieId"] = this.bcbProductEigenschapOptieId;
-        data["filterOptionId"] = this.filterOptionId;
+        data["location"] = this.location;
+        if (Array.isArray(this.ebos)) {
+            data["ebos"] = [];
+            for (let item of this.ebos)
+                data["ebos"].push(item);
+        }
         return data;
     }
 }
-class ConnectOpbouwOptieRequest {
+class ConnectEigenschapOptieRequest {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -6373,24 +6387,56 @@ class ConnectOpbouwOptieRequest {
     }
     init(_data) {
         if (_data) {
-            this.bcbProductOpbouwOptieId = _data["bcbProductOpbouwOptieId"];
+            this.location = _data["location"];
+            this.bcbEigenschapOptieId = _data["bcbEigenschapOptieId"];
+            this.bcbProductId = _data["bcbProductId"];
             this.filterOptionId = _data["filterOptionId"];
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new ConnectOpbouwOptieRequest();
+        let result = new ConnectEigenschapOptieRequest();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
-        data["bcbProductOpbouwOptieId"] = this.bcbProductOpbouwOptieId;
+        data["location"] = this.location;
+        data["bcbEigenschapOptieId"] = this.bcbEigenschapOptieId;
+        data["bcbProductId"] = this.bcbProductId;
         data["filterOptionId"] = this.filterOptionId;
         return data;
     }
 }
-class IgnoreOpbouwOptieRequest {
+class ConnectOpbouwOptieRequest {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            this.bcbProductOpbouwOptieId = _data["bcbProductOpbouwOptieId"];
+            this.filterOptionId = _data["filterOptionId"];
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new ConnectOpbouwOptieRequest();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["bcbProductOpbouwOptieId"] = this.bcbProductOpbouwOptieId;
+        data["filterOptionId"] = this.filterOptionId;
+        return data;
+    }
+}
+class IgnoreOpbouwOptieRequest {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -6572,11 +6618,6 @@ class ConnectManyPreviewContainerResponse {
     init(_data) {
         if (_data) {
             this.name = _data["name"];
-            if (Array.isArray(_data["opties"])) {
-                this.opties = [];
-                for (let item of _data["opties"])
-                    this.opties.push(ConnectManyPreviewOptieResponse.fromJS(item));
-            }
             if (Array.isArray(_data["ebOs"])) {
                 this.ebOs = [];
                 for (let item of _data["ebOs"])
@@ -6593,11 +6634,6 @@ class ConnectManyPreviewContainerResponse {
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["name"] = this.name;
-        if (Array.isArray(this.opties)) {
-            data["opties"] = [];
-            for (let item of this.opties)
-                data["opties"].push(item.toJSON());
-        }
         if (Array.isArray(this.ebOs)) {
             data["ebOs"] = [];
             for (let item of this.ebOs)
@@ -6606,32 +6642,6 @@ class ConnectManyPreviewContainerResponse {
         return data;
     }
 }
-class ConnectManyPreviewOptieResponse {
-    constructor(data) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    this[property] = data[property];
-            }
-        }
-    }
-    init(_data) {
-        if (_data) {
-            this.name = _data["name"];
-        }
-    }
-    static fromJS(data) {
-        data = typeof data === 'object' ? data : {};
-        let result = new ConnectManyPreviewOptieResponse();
-        result.init(data);
-        return result;
-    }
-    toJSON(data) {
-        data = typeof data === 'object' ? data : {};
-        data["name"] = this.name;
-        return data;
-    }
-}
 class ConnectManyPreviewEBOResponse {
     constructor(data) {
         if (data) {
@@ -6750,6 +6760,76 @@ class ConnectManyEBODORequest {
         return data;
     }
 }
+class ConnectBCBEigenschapRangeInputResponse {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            if (Array.isArray(_data["eigenschappen"])) {
+                this.eigenschappen = [];
+                for (let item of _data["eigenschappen"])
+                    this.eigenschappen.push(BCBEigenschapLocation.fromJS(item));
+            }
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new ConnectBCBEigenschapRangeInputResponse();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        if (Array.isArray(this.eigenschappen)) {
+            data["eigenschappen"] = [];
+            for (let item of this.eigenschappen)
+                data["eigenschappen"].push(item.toJSON());
+        }
+        return data;
+    }
+}
+class BCBEigenschapLocation {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            this.location = _data["location"];
+            if (Array.isArray(_data["eigenschappen"])) {
+                this.eigenschappen = [];
+                for (let item of _data["eigenschappen"])
+                    this.eigenschappen.push(item);
+            }
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new BCBEigenschapLocation();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["location"] = this.location;
+        if (Array.isArray(this.eigenschappen)) {
+            data["eigenschappen"] = [];
+            for (let item of this.eigenschappen)
+                data["eigenschappen"].push(item);
+        }
+        return data;
+    }
+}
 class ConnectBCBEigenschapRangeInputRequest {
     constructor(data) {
         if (data) {
@@ -6761,8 +6841,11 @@ class ConnectBCBEigenschapRangeInputRequest {
     }
     init(_data) {
         if (_data) {
+            this.location = _data["location"];
             this.rangeInput = _data["rangeInput"];
-            this.bcbProductEigenschapId = _data["bcbProductEigenschapId"];
+            this.rangeInputId = _data["rangeInputId"];
+            this.bcbEigenschapId = _data["bcbEigenschapId"];
+            this.bcbProductId = _data["bcbProductId"];
         }
     }
     static fromJS(data) {
@@ -6773,8 +6856,11 @@ class ConnectBCBEigenschapRangeInputRequest {
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
+        data["location"] = this.location;
         data["rangeInput"] = this.rangeInput;
-        data["bcbProductEigenschapId"] = this.bcbProductEigenschapId;
+        data["rangeInputId"] = this.rangeInputId;
+        data["bcbEigenschapId"] = this.bcbEigenschapId;
+        data["bcbProductId"] = this.bcbProductId;
         return data;
     }
 }
@@ -9144,7 +9230,7 @@ class FabFilterComponent {
     }
 }
 FabFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabFilterComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabFilterComponent, selector: "app-fab-filter", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label\">\r\n      {{ TranslateService.GetActiveValueFilter(filter.id) }}<span *ngIf=\"filter.blocksProductSelect\">*</span>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.id\" class=\"select-mat-option\">\r\n          <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n            <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n              &nbsp;\r\n              &nbsp;\r\n            </span>\r\n          </ng-container>\r\n          \r\n          {{ TranslateService.GetActiveValueFilterOption(option.id) }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
+FabFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabFilterComponent, selector: "app-fab-filter", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label\">\r\n      {{ TranslateService.GetActiveValueFilter(filter.id) }}<span *ngIf=\"filter.blocksProductSelect\">*</span>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.id\" class=\"select-mat-option\">\r\n          <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n            <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n              &nbsp;\r\n              &nbsp;\r\n            </span>\r\n          </ng-container>\r\n          \r\n          {{ TranslateService.GetActiveValueFilterOption(option.id) }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-fab-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label\">\r\n      {{ TranslateService.GetActiveValueFilter(filter.id) }}<span *ngIf=\"filter.blocksProductSelect\">*</span>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <mat-option *ngFor=\"let option of filter.options\" [value]=\"option.id\" class=\"select-mat-option\">\r\n          <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n            <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n              &nbsp;\r\n              &nbsp;\r\n            </span>\r\n          </ng-container>\r\n          \r\n          {{ TranslateService.GetActiveValueFilterOption(option.id) }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}\n"] }]
@@ -9443,10 +9529,10 @@ class FabProductBestekComponent {
     }
 }
 FabProductBestekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductBestekComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: BestekService }], target: i0.ɵɵFactoryTarget.Component });
-FabProductBestekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductBestekComponent, selector: "app-fab-product-bestek", viewQueries: [{ propertyName: "fabProductBestek", first: true, predicate: ["fabProductBestek"], descendants: true }], ngImport: i0, template: "<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\n  <div *ngIf=\"ShowBestek()\">\n    <div *ngIf=\"!BestekService.Loading\">\n\n      <div class=\"bestek-settings\">\n        <mat-card>\n          <mat-card-content>\n            <div class=\"column\">\n              <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"SelectedTabChange($event)\" appearance=\"legacy\">\n                <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\n              </mat-button-toggle-group>\n              <div>\n                &nbsp;\n              </div>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">content_copy</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">file_download</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">open_in_new</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                  </div>\n                </div>\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n\n\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["app-fab-product-bestek .row{display:flex;line-height:37px}app-fab-product-bestek .icon{margin-right:3px}app-fab-product-bestek .row-icon{align-items:center;display:flex}app-fab-product-bestek .column{display:flex;flex-direction:column}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .toolbar{display:flex;padding-bottom:5px}app-fab-product-bestek .toolbar-mobile{padding-bottom:5px}app-fab-product-bestek .toolbar-actions{flex:auto}app-fab-product-bestek .toolbar-button{margin-top:3px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }], encapsulation: i0.ViewEncapsulation.None });
+FabProductBestekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductBestekComponent, selector: "app-fab-product-bestek", viewQueries: [{ propertyName: "fabProductBestek", first: true, predicate: ["fabProductBestek"], descendants: true }], ngImport: i0, template: "<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\n  <div *ngIf=\"ShowBestek()\">\n    <div *ngIf=\"!BestekService.Loading\">\n\n      <div class=\"bestek-settings\">\n        <mat-card>\n          <mat-card-content>\n            <div class=\"column\">\n              <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"SelectedTabChange($event)\" appearance=\"legacy\">\n                <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\n              </mat-button-toggle-group>\n              <div>\n                &nbsp;\n              </div>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">content_copy</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">file_download</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">open_in_new</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                  </div>\n                </div>\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n\n\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["app-fab-product-bestek .row{display:flex;line-height:37px}app-fab-product-bestek .multiplevariants{padding:10px}app-fab-product-bestek .icon{margin-right:3px}app-fab-product-bestek .row-icon{align-items:center;display:flex}app-fab-product-bestek .column{display:flex;flex-direction:column}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .toolbar{display:flex;padding-bottom:5px}app-fab-product-bestek .toolbar-mobile{padding-bottom:5px}app-fab-product-bestek .toolbar-actions{flex:auto}app-fab-product-bestek .toolbar-button{margin-top:3px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductBestekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product-bestek', encapsulation: ViewEncapsulation.None, template: "<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\n  <div *ngIf=\"ShowBestek()\">\n    <div *ngIf=\"!BestekService.Loading\">\n\n      <div class=\"bestek-settings\">\n        <mat-card>\n          <mat-card-content>\n            <div class=\"column\">\n              <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"SelectedTabChange($event)\" appearance=\"legacy\">\n                <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\n              </mat-button-toggle-group>\n              <div>\n                &nbsp;\n              </div>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">content_copy</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">file_download</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">open_in_new</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                  </div>\n                </div>\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n\n\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["app-fab-product-bestek .row{display:flex;line-height:37px}app-fab-product-bestek .icon{margin-right:3px}app-fab-product-bestek .row-icon{align-items:center;display:flex}app-fab-product-bestek .column{display:flex;flex-direction:column}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .toolbar{display:flex;padding-bottom:5px}app-fab-product-bestek .toolbar-mobile{padding-bottom:5px}app-fab-product-bestek .toolbar-actions{flex:auto}app-fab-product-bestek .toolbar-button{margin-top:3px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"] }]
+            args: [{ selector: 'app-fab-product-bestek', encapsulation: ViewEncapsulation.None, template: "<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\n  <div *ngIf=\"ShowBestek()\">\n    <div *ngIf=\"!BestekService.Loading\">\n\n      <div class=\"bestek-settings\">\n        <mat-card>\n          <mat-card-content>\n            <div class=\"column\">\n              <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"SelectedTabChange($event)\" appearance=\"legacy\">\n                <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\n                <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\n              </mat-button-toggle-group>\n              <div>\n                &nbsp;\n              </div>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">content_copy</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">file_download</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\n                  </div>\n                </div>\n              </button>\n              <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n                <div class=\"row\">\n                  <div class=\"row-icon\">\n                    <mat-icon class=\"icon\">open_in_new</mat-icon>\n                  </div>\n                  <div class=\"row-title\">\n                    {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                  </div>\n                </div>\n              </button>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n\n\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["app-fab-product-bestek .row{display:flex;line-height:37px}app-fab-product-bestek .multiplevariants{padding:10px}app-fab-product-bestek .icon{margin-right:3px}app-fab-product-bestek .row-icon{align-items:center;display:flex}app-fab-product-bestek .column{display:flex;flex-direction:column}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .toolbar{display:flex;padding-bottom:5px}app-fab-product-bestek .toolbar-mobile{padding-bottom:5px}app-fab-product-bestek .toolbar-actions{flex:auto}app-fab-product-bestek .toolbar-button{margin-top:3px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: BestekService }]; }, propDecorators: { fabProductBestek: [{
                 type: ViewChild,
                 args: ['fabProductBestek']
@@ -9655,10 +9741,10 @@ class FabWebglViewerComponent {
     }
 }
 FabWebglViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabWebglViewerComponent, deps: [{ token: FabrikantenService }, { token: WebGLService }, { token: TranslateService }, { token: MobileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabWebglViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer", viewQueries: [{ propertyName: "viewercontainer", first: true, predicate: ["viewercontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\n    <div #viewercontainer class=\"viewer-container\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n\n    <div class=\"webgl-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n    <div class=\"row\">\n      <div class=\"row-icon\">\n        <mat-icon class=\"icon\">file_download</mat-icon>\n      </div>\n      <div class=\"row-title\">\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n      </div>\n    </div>\n  </button>-->\n            <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+FabWebglViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer", viewQueries: [{ propertyName: "viewercontainer", first: true, predicate: ["viewercontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\n    <div #viewercontainer class=\"viewer-container\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n\n    <div class=\"webgl-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n    <div class=\"row\">\n      <div class=\"row-icon\">\n        <mat-icon class=\"icon\">file_download</mat-icon>\n      </div>\n      <div class=\"row-title\">\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n      </div>\n    </div>\n  </button>-->\n            <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabWebglViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-webgl-viewer', template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\n    <div #viewercontainer class=\"viewer-container\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n\n    <div class=\"webgl-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n    <div class=\"row\">\n      <div class=\"row-icon\">\n        <mat-icon class=\"icon\">file_download</mat-icon>\n      </div>\n      <div class=\"row-title\">\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n      </div>\n    </div>\n  </button>-->\n            <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
+            args: [{ selector: 'app-fab-webgl-viewer', template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\n    <div #viewercontainer class=\"viewer-container\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n\n    <div class=\"webgl-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n    <div class=\"row\">\n      <div class=\"row-icon\">\n        <mat-icon class=\"icon\">file_download</mat-icon>\n      </div>\n      <div class=\"row-title\">\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n      </div>\n    </div>\n  </button>-->\n            <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: WebGLService }, { type: TranslateService }, { type: MobileService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewercontainer: [{
                 type: ViewChild,
                 args: ['viewercontainer']
@@ -9724,10 +9810,10 @@ class FabSvgViewerComponent {
     }
 }
 FabSvgViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabSvgViewerComponent, deps: [{ token: FabrikantenService }, { token: SVGService }, { token: TranslateService }, { token: i4$2.DomSanitizer }, { token: MobileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabSvgViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer", viewQueries: [{ propertyName: "svgcontainer", first: true, predicate: ["svgcontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  \n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\n    <div #svgcontainer class=\"svg-container\">\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\n    </div>\n\n    <div class=\"svg-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\n                <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\n                  {{ TranslateService.GetActiveValue(\"Common\", snede) }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\n                <mat-option [value]=\"'0'\">1:1</mat-option>\n                <mat-option [value]=\"'1'\">1:2</mat-option>\n                <mat-option [value]=\"'2'\">1:5</mat-option>\n                <mat-option [value]=\"'3'\">1:10</mat-option>\n                <mat-option [value]=\"'4'\">1:20</mat-option>\n                <mat-option [value]=\"'5'\">1:50</mat-option>\n                <mat-option [value]=\"'6'\">1:100</mat-option>\n                <mat-option [value]=\"'7'\">1:200</mat-option>\n                <mat-option [value]=\"'8'\">1:500</mat-option>\n                <mat-option [value]=\"'9'\">1:1000</mat-option>\n                <mat-option [value]=\"'10'\">1:2000</mat-option>\n                <mat-option [value]=\"'11'\">1:5000</mat-option>\n                <mat-option [value]=\"'12'\">1:10000</mat-option>\n                <mat-option [value]=\"'13'\">1:20000</mat-option>\n                <mat-option [value]=\"'14'\">1:50000</mat-option>\n              </mat-select>\n            </mat-form-field>\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"SVGService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+FabSvgViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer", viewQueries: [{ propertyName: "svgcontainer", first: true, predicate: ["svgcontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  \n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\n    <div #svgcontainer class=\"svg-container\">\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\n    </div>\n\n    <div class=\"svg-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\n                <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\n                  {{ TranslateService.GetActiveValue(\"Common\", snede) }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\n                <mat-option [value]=\"'0'\">1:1</mat-option>\n                <mat-option [value]=\"'1'\">1:2</mat-option>\n                <mat-option [value]=\"'2'\">1:5</mat-option>\n                <mat-option [value]=\"'3'\">1:10</mat-option>\n                <mat-option [value]=\"'4'\">1:20</mat-option>\n                <mat-option [value]=\"'5'\">1:50</mat-option>\n                <mat-option [value]=\"'6'\">1:100</mat-option>\n                <mat-option [value]=\"'7'\">1:200</mat-option>\n                <mat-option [value]=\"'8'\">1:500</mat-option>\n                <mat-option [value]=\"'9'\">1:1000</mat-option>\n                <mat-option [value]=\"'10'\">1:2000</mat-option>\n                <mat-option [value]=\"'11'\">1:5000</mat-option>\n                <mat-option [value]=\"'12'\">1:10000</mat-option>\n                <mat-option [value]=\"'13'\">1:20000</mat-option>\n                <mat-option [value]=\"'14'\">1:50000</mat-option>\n              </mat-select>\n            </mat-form-field>\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"SVGService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabSvgViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-svg-viewer', template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  \n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\n    <div #svgcontainer class=\"svg-container\">\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\n    </div>\n\n    <div class=\"svg-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\n                <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\n                  {{ TranslateService.GetActiveValue(\"Common\", snede) }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\n                <mat-option [value]=\"'0'\">1:1</mat-option>\n                <mat-option [value]=\"'1'\">1:2</mat-option>\n                <mat-option [value]=\"'2'\">1:5</mat-option>\n                <mat-option [value]=\"'3'\">1:10</mat-option>\n                <mat-option [value]=\"'4'\">1:20</mat-option>\n                <mat-option [value]=\"'5'\">1:50</mat-option>\n                <mat-option [value]=\"'6'\">1:100</mat-option>\n                <mat-option [value]=\"'7'\">1:200</mat-option>\n                <mat-option [value]=\"'8'\">1:500</mat-option>\n                <mat-option [value]=\"'9'\">1:1000</mat-option>\n                <mat-option [value]=\"'10'\">1:2000</mat-option>\n                <mat-option [value]=\"'11'\">1:5000</mat-option>\n                <mat-option [value]=\"'12'\">1:10000</mat-option>\n                <mat-option [value]=\"'13'\">1:20000</mat-option>\n                <mat-option [value]=\"'14'\">1:50000</mat-option>\n              </mat-select>\n            </mat-form-field>\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"SVGService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
+            args: [{ selector: 'app-fab-svg-viewer', template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  \n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\n    <div #svgcontainer class=\"svg-container\">\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\n    </div>\n\n    <div class=\"svg-settings\">\n      <mat-card>\n        <mat-card-content>\n          <div class=\"column\">\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\n                <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\n                  {{ TranslateService.GetActiveValue(\"Common\", snede) }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <mat-form-field appearance=\"fill\">\n              <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\n              <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\n                <mat-option [value]=\"'0'\">1:1</mat-option>\n                <mat-option [value]=\"'1'\">1:2</mat-option>\n                <mat-option [value]=\"'2'\">1:5</mat-option>\n                <mat-option [value]=\"'3'\">1:10</mat-option>\n                <mat-option [value]=\"'4'\">1:20</mat-option>\n                <mat-option [value]=\"'5'\">1:50</mat-option>\n                <mat-option [value]=\"'6'\">1:100</mat-option>\n                <mat-option [value]=\"'7'\">1:200</mat-option>\n                <mat-option [value]=\"'8'\">1:500</mat-option>\n                <mat-option [value]=\"'9'\">1:1000</mat-option>\n                <mat-option [value]=\"'10'\">1:2000</mat-option>\n                <mat-option [value]=\"'11'\">1:5000</mat-option>\n                <mat-option [value]=\"'12'\">1:10000</mat-option>\n                <mat-option [value]=\"'13'\">1:20000</mat-option>\n                <mat-option [value]=\"'14'\">1:50000</mat-option>\n              </mat-select>\n            </mat-form-field>\n            <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"SVGService.HasNativeRFA()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">file_download</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\n                  <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\n                </div>\n              </div>\n            </button>\n            <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n              <div class=\"row\">\n                <div class=\"row-icon\">\n                  <mat-icon class=\"icon\">open_in_new</mat-icon>\n                </div>\n                <div class=\"row-title\">\n                  {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n                </div>\n              </div>\n            </button>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: SVGService }, { type: TranslateService }, { type: i4$2.DomSanitizer }, { type: MobileService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { svgcontainer: [{
                 type: ViewChild,
                 args: ['svgcontainer']
@@ -9759,6 +9845,28 @@ class FabProductComponent {
     SelectedTabChange(event) {
         this.FabrikantenService.TabSelectionChanged(event.tab.textLabel, this.ChangeDetectorRef);
     }
+    Show3D() {
+        var _a, _b;
+        if (((_b = (_a = this.FabrikantenService.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.selectedProduct) === null || _b === void 0 ? void 0 : _b.fabrikantenBCBProductViewModels) != null) {
+            for (var i = 0; i < this.FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels.length; i++) {
+                if (this.FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[i].has3D) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    Show2D() {
+        var _a, _b;
+        if (((_b = (_a = this.FabrikantenService.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.selectedProduct) === null || _b === void 0 ? void 0 : _b.fabrikantenBCBProductViewModels) != null) {
+            for (var i = 0; i < this.FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels.length; i++) {
+                if (this.FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[i].snedes != '') {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
     GetHeight() {
         var height = 0;
         if (this.header != undefined) {
@@ -9768,10 +9876,10 @@ class FabProductComponent {
     }
 }
 FabProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: WebGLService }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductComponent, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }, { kind: "component", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer" }], encapsulation: i0.ViewEncapsulation.None });
+FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductComponent, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i10$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }, { kind: "component", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"] }]
+            args: [{ selector: 'app-fab-product', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: BestekService }, { type: TranslateService }, { type: WebGLService }, { type: i1$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -10007,16 +10115,17 @@ class ImportSetsService {
         this.ImportApiClient = ImportApiClient;
         this.LoadingImportSets = true;
         this.LoadingOpen = false;
-        this.LoadImportSets();
+        this.ProductsService = null;
     }
-    ChangeImportSetValue(value, enabled) {
+    ChangeImportSetValue(value, enabled, ChangeDetectorRef) {
         this.LoadingImportSets = true;
+        ChangeDetectorRef.detectChanges();
         var model = new ChangeImportSetRequest();
         model.importSetId = this.BCBImportSetSelected;
         model.value = value;
         model.enabled = enabled;
         this.ImportApiClient.changeImportSet(model).subscribe(() => {
-            this.LoadImportSets();
+            this.LoadImportSets(ChangeDetectorRef);
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -10025,16 +10134,19 @@ class ImportSetsService {
                 console.log(error);
             }
             this.LoadingImportSets = false;
+            ChangeDetectorRef.detectChanges();
         });
     }
-    Open(id) {
+    Open(id, ChangeDetectorRef) {
         this.LoadingOpen = true;
+        ChangeDetectorRef.detectChanges();
         var request = new BCBImportOpenRequest();
         request.bcbeboId = id;
         this.ImportApiClient.openBCBProduct(request).subscribe((model) => {
             this.BCBImportOpenResponse = model;
             this.RefreshBCBImportOpenResponse();
             this.LoadingOpen = false;
+            ChangeDetectorRef.detectChanges();
         });
     }
     GetActiveImportSet() {
@@ -10049,8 +10161,9 @@ class ImportSetsService {
         }
         return new BCBImportSetViewModel();
     }
-    LoadImportSets() {
+    LoadImportSets(ChangeDetectorRef) {
         this.LoadingImportSets = true;
+        ChangeDetectorRef.detectChanges();
         this.ImportApiClient.getBCBImportSetsViewModel().subscribe((model) => {
             var _a;
             this.BCBImportSetsViewModel = model;
@@ -10061,6 +10174,10 @@ class ImportSetsService {
             }
             this.RefreshBCBImportOpenResponse();
             this.LoadingImportSets = false;
+            ChangeDetectorRef.detectChanges();
+            if (this.ProductsService != null) {
+                this.ProductsService.Reload(ChangeDetectorRef);
+            }
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -10069,6 +10186,7 @@ class ImportSetsService {
                 console.log(error);
             }
             this.LoadingImportSets = false;
+            ChangeDetectorRef.detectChanges();
         });
     }
     RefreshBCBImportOpenResponse() {
@@ -10113,6 +10231,7 @@ class ProductsService {
         this.LoadingProducts = false;
         this.BCBProductViewModel = undefined;
         this.ProductViewModel = undefined;
+        this.ImportSetsService.ProductsService = this;
     }
     Loading() {
         return this.LoadingProducts;
@@ -10132,18 +10251,19 @@ class ProductsService {
         }
         return new Array();
     }
-    Reload() {
-        this.LoadProducts();
+    Reload(changeDetectorRef) {
+        this.LoadProducts(changeDetectorRef);
     }
-    SaveProductViewModel(product) {
+    SaveProductViewModel(product, changeDetectorRef) {
         var model = new SaveProductViewModel();
         model.id = product.id;
         model.name = product.name;
         model.position = product.position;
         model.importSetId = parseInt(product.importSetId.toString());
         this.LoadingProducts = true;
+        changeDetectorRef.detectChanges();
         this.ProductsApiClient.saveProduct(model).subscribe(() => {
-            this.LoadProducts();
+            this.LoadProducts(changeDetectorRef);
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -10152,9 +10272,10 @@ class ProductsService {
                 console.log(error);
             }
             this.LoadingProducts = false;
+            changeDetectorRef.detectChanges();
         });
     }
-    ResetImport(productid, bcbproductid) {
+    ResetImport(productid, bcbproductid, changeDetectorRef) {
         var model = new ResetImportRequestModel();
         model.productId = productid;
         model.bcbProductId = bcbproductid;
@@ -10162,8 +10283,9 @@ class ProductsService {
             model.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
         }
         this.LoadingProducts = true;
+        changeDetectorRef.detectChanges();
         this.ProductsApiClient.resetImport(model).subscribe(() => {
-            this.LoadProducts();
+            this.LoadProducts(changeDetectorRef);
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -10172,6 +10294,7 @@ class ProductsService {
                 console.log(error);
             }
             this.LoadingProducts = false;
+            changeDetectorRef.detectChanges();
         });
     }
     CleanUp() {
@@ -10189,13 +10312,15 @@ class ProductsService {
             this.LoadingProducts = false;
         });
     }
-    LoadProducts() {
+    LoadProducts(changeDetectorRef) {
         if (this.ImportSetsService.BCBImportSetSelected != undefined) {
             this.LoadingProducts = true;
             var request = new ProductsViewModelRequest();
             request.importSetId = this.ImportSetsService.BCBImportSetSelected;
+            changeDetectorRef.detectChanges();
             this.ProductsApiClient.getProductsViewModel(request).subscribe((model) => {
                 this.ProductsViewModel = model;
+                changeDetectorRef.detectChanges();
                 var array = this.ProductsViewModel.productViewModels;
                 if (array != null) {
                     if (array.length > 0) {
@@ -10226,6 +10351,7 @@ class ProductsService {
                     }
                 }
                 this.LoadingProducts = false;
+                changeDetectorRef.detectChanges();
             }, (error) => {
                 if (error.status == 400)
                     console.log(error.json());
@@ -10234,6 +10360,7 @@ class ProductsService {
                     console.log(error);
                 }
                 this.LoadingProducts = false;
+                changeDetectorRef.detectChanges();
             });
         }
     }
@@ -10273,8 +10400,16 @@ class ProductsService {
         }
     }
     MergeBCBProductViewModel(newproduct, oldproduct) {
-        this.MergeBCBProductViewModelEigenschap(newproduct === null || newproduct === void 0 ? void 0 : newproduct.bcbProductEigenschapViewModels, oldproduct === null || oldproduct === void 0 ? void 0 : oldproduct.bcbProductEigenschapViewModels);
-        this.MergeBCBProductViewModelOpbouw(newproduct === null || newproduct === void 0 ? void 0 : newproduct.bcbProductOpbouwViewModels, oldproduct === null || oldproduct === void 0 ? void 0 : oldproduct.bcbProductOpbouwViewModels);
+        //this.MergeBCBProductViewModelEigenschap(newproduct?.bcbProductEigenschapViewModels, oldproduct?.bcbProductEigenschapViewModels);
+        //this.MergeBCBProductViewModelOpbouw(newproduct?.bcbProductOpbouwViewModels, oldproduct?.bcbProductOpbouwViewModels);
+        if ((newproduct === null || newproduct === void 0 ? void 0 : newproduct.bcbeboViewModel) != null && (oldproduct === null || oldproduct === void 0 ? void 0 : oldproduct.bcbeboViewModel) != null) {
+            newproduct.bcbeboViewModel.open = oldproduct.bcbeboViewModel.open;
+            this.MergeBCBEBO(newproduct.bcbeboViewModel, oldproduct.bcbeboViewModel);
+        }
+    }
+    MergeBCBEBO(newproduct, oldproduct) {
+        this.MergeBCBProductViewModelEigenschap(newproduct === null || newproduct === void 0 ? void 0 : newproduct.bcbEigenschapViewModels, oldproduct === null || oldproduct === void 0 ? void 0 : oldproduct.bcbEigenschapViewModels);
+        this.MergeBCBProductViewModelOpbouw(newproduct === null || newproduct === void 0 ? void 0 : newproduct.bcbOpbouwViewModels, oldproduct === null || oldproduct === void 0 ? void 0 : oldproduct.bcbOpbouwViewModels);
     }
     MergeBCBProductViewModelEigenschap(newproduct, oldproduct) {
         if (newproduct != null && oldproduct != null) {
@@ -10293,21 +10428,13 @@ class ProductsService {
                 for (var p = 0; p < oldproduct.length; p++) {
                     if (newproduct[j].id == oldproduct[p].id) {
                         newproduct[j].open = oldproduct[p].open;
-                        this.MergeBCBProductViewModelOpbouwOpties(newproduct[j].opties, oldproduct[p].opties);
-                    }
-                }
-            }
-        }
-    }
-    MergeBCBProductViewModelOpbouwOpties(newproduct, oldproduct) {
-        var _a, _b, _c, _d;
-        if (newproduct != null && oldproduct != null) {
-            for (var j = 0; j < newproduct.length; j++) {
-                for (var p = 0; p < oldproduct.length; p++) {
-                    if (newproduct[j].id == oldproduct[p].id) {
-                        newproduct[j].open = oldproduct[p].open;
-                        this.MergeBCBProductViewModelEigenschap((_a = newproduct[j]) === null || _a === void 0 ? void 0 : _a.bcbProductEigenschapViewModels, (_b = oldproduct[p]) === null || _b === void 0 ? void 0 : _b.bcbProductEigenschapViewModels);
-                        this.MergeBCBProductViewModelOpbouw((_c = newproduct[j]) === null || _c === void 0 ? void 0 : _c.bcbProductOpbouwViewModels, (_d = oldproduct[p]) === null || _d === void 0 ? void 0 : _d.bcbProductOpbouwViewModels);
+                        var ebosnew = newproduct[j].ebos;
+                        var ebosold = oldproduct[p].ebos;
+                        if (ebosnew != null && ebosold != null) {
+                            for (var o = 0; o < ebosnew.length; o++) {
+                                this.MergeBCBEBO(ebosnew[o], ebosold[o]);
+                            }
+                        }
                     }
                 }
             }
@@ -10334,88 +10461,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class BeheerProductsProductComponent {
-    constructor(ProductsService) {
+    constructor(ProductsService, ChangeDetectorRef) {
         this.ProductsService = ProductsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
     }
     ResetImport() {
-        this.ProductsService.ResetImport(this.ProductViewModel.id, -1);
+        this.ProductsService.ResetImport(this.ProductViewModel.id, -1, this.ChangeDetectorRef);
     }
     ngOnInit() {
     }
 }
-BeheerProductsProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsProductComponent, deps: [{ token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsProductComponent, deps: [{ token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 BeheerProductsProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsProductComponent, selector: "app-beheer-products-product", inputs: { ProductViewModel: "ProductViewModel" }, ngImport: i0, template: "<mat-card>\r\n  <div class=\"product-bar\">\r\n    <div class=\"product-first block\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Naam</mat-label>\r\n        <input matInput [(ngModel)]=\"ProductViewModel.name\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"ResetImport()\">\r\n        Reset Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Opslaan\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Verwijderen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</mat-card>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.block{padding:3px}\n"], dependencies: [{ kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsProductComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-products-product', template: "<mat-card>\r\n  <div class=\"product-bar\">\r\n    <div class=\"product-first block\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Naam</mat-label>\r\n        <input matInput [(ngModel)]=\"ProductViewModel.name\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button (click)=\"ResetImport()\">\r\n        Reset Import\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Opslaan\r\n      </button>\r\n    </div>\r\n    <div class=\"block\">\r\n      <button mat-raised-button [disabled]=\"true\">\r\n        Verwijderen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</mat-card>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.block{padding:3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ProductsService }]; }, propDecorators: { ProductViewModel: [{
+        }], ctorParameters: function () { return [{ type: ProductsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ProductViewModel: [{
                 type: Input
             }] } });
 
-class BeheerConnectCategoryDialogComponent {
-    constructor(dialogRef, data, CategoriesApiClient) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.CategoriesApiClient = CategoriesApiClient;
-        this.Loading = true;
-        this.DOType = "DOType";
-        this.DONaam = "DONaam";
-        this.CategoryName = "";
-        this.DOType = data.dotype;
-        this.DONaam = data.donaam;
-        this.CategoryName = data.donaam;
-    }
-    ngOnInit() {
-        this.LoadCategories();
-    }
-    Nieuw() {
-        this.Loading = true;
-        var requestcategory = new CreateCategoryRequest();
-        requestcategory.name = this.CategoryName;
-        this.CategoriesApiClient.createCategory(requestcategory).subscribe((model) => {
-            this.Loading = false;
-            this.dialogRef.close(model.id);
-        }, (error) => {
-            if (error.status == 400)
-                console.log(error.json());
-            else {
-                console.log('An unexpected error occured');
-                console.log(error);
-            }
-            this.Loading = false;
-        });
-    }
-    Bestaand() {
-        this.dialogRef.close(this.CategorySelected);
-    }
-    LoadCategories() {
-        this.Loading = true;
-        this.CategoriesApiClient.getCategoriesViewModel().subscribe((model) => {
-            this.CategoriesViewModel = model;
-            this.Loading = false;
-        }, (error) => {
-            if (error.status == 400)
-                console.log(error.json());
-            else {
-                console.log('An unexpected error occured');
-                console.log(error);
-            }
-            this.Loading = false;
-        });
-    }
-}
-BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerConnectCategoryDialogComponent, selector: "app-beheer-connect-category-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-beheer-connect-category-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }, { type: CategoriesApiClient }];
-    } });
-
 class BeheerDisplayEboComponent {
     constructor() { }
     ngOnInit() {
@@ -10638,10 +10702,10 @@ class BeheerProductsConnectManynameDialogComponent {
     }
 }
 BeheerProductsConnectManynameDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectManynameDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: ProductsService }, { token: ImportSetsService }, { token: FiltersApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsConnectManynameDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsConnectManynameDialogComponent, selector: "app-beheer-products-connect-manyname-dialog", ngImport: i0, template: "<div>\r\n  <div *ngIf=\"Loading()\">\r\n    <app-fab-loader></app-fab-loader>\r\n  </div>\r\n  <div *ngIf=\"!Loading()\">\r\n    <div class=\"displayflex\" *ngIf=\"bcbebodoid == null\">\r\n      <mat-form-field appearance=\"fill\" (change)=\"Refresh()\">\r\n        <mat-label>Levels</mat-label>\r\n        <input matInput type=\"number\" [(ngModel)]=\"LevelsDeep\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div *ngFor=\"let result of ConnectManyPreviewResponse.containers\">\r\n        <div class=\"container-name\">{{ result.name }}</div>\r\n        <div class=\"opties\">\r\n          <div class=\"optie\" *ngFor=\"let optie of result.opties\">\r\n            {{ optie.name }}\r\n          </div>\r\n        </div>\r\n        <div class=\"opties optie\" >\r\n          <div *ngFor=\"let ebo of result.ebOs\" class=\"displayflex\">\r\n            <div >\r\n              {{ ebo.count }}x\r\n            </div>\r\n            <app-beheer-display-ebo [ebo]=\"ebo.ebo\"></app-beheer-display-ebo>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"displayflex\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div *ngIf=\"bcbproducteigenschapoptieid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"Connect()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbebodoid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"ConnectEBODO()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbproductopbouwoptieid != null\" class=\"displayflex\">\r\n        <div *ngFor=\"let type of GetConnects()\">\r\n          <button class=\"button\" mat-raised-button (click)=\"ConnectType(type)\">\r\n            {{ type }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".displayflex{display:flex}.button{height:38px;width:100px}.main-content{padding:10px}.opties{padding-left:10px;max-height:600px;overflow:auto}.container-name{padding:3px;border-bottom:2px solid #000;font-weight:700}.optie{padding:2px;border-bottom:1px solid #000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerDisplayEboComponent, selector: "app-beheer-display-ebo", inputs: ["ebo"] }] });
+BeheerProductsConnectManynameDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsConnectManynameDialogComponent, selector: "app-beheer-products-connect-manyname-dialog", ngImport: i0, template: "<div>\r\n  <div *ngIf=\"Loading()\">\r\n    <app-fab-loader></app-fab-loader>\r\n  </div>\r\n  <div *ngIf=\"!Loading()\">\r\n    <div class=\"displayflex\" *ngIf=\"bcbebodoid == null\">\r\n      <mat-form-field appearance=\"fill\" (change)=\"Refresh()\">\r\n        <mat-label>Levels</mat-label>\r\n        <input matInput type=\"number\" [(ngModel)]=\"LevelsDeep\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div *ngFor=\"let result of ConnectManyPreviewResponse.containers\">\r\n        <div class=\"container-name\">{{ result.name }}</div>\r\n        <div class=\"opties optie\" >\r\n          <div *ngFor=\"let ebo of result.ebOs\" class=\"displayflex\">\r\n            <div >\r\n              {{ ebo.count }}x\r\n            </div>\r\n            <app-beheer-display-ebo [ebo]=\"ebo.ebo\"></app-beheer-display-ebo>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"displayflex\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div *ngIf=\"bcbproducteigenschapoptieid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"Connect()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbebodoid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"ConnectEBODO()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbproductopbouwoptieid != null\" class=\"displayflex\">\r\n        <div *ngFor=\"let type of GetConnects()\">\r\n          <button class=\"button\" mat-raised-button (click)=\"ConnectType(type)\">\r\n            {{ type }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".displayflex{display:flex}.button{height:38px;width:100px}.main-content{padding:10px}.opties{padding-left:10px;max-height:600px;overflow:auto}.container-name{padding:3px;border-bottom:2px solid #000;font-weight:700}.optie{padding:2px;border-bottom:1px solid #000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerDisplayEboComponent, selector: "app-beheer-display-ebo", inputs: ["ebo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectManynameDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-connect-manyname-dialog', template: "<div>\r\n  <div *ngIf=\"Loading()\">\r\n    <app-fab-loader></app-fab-loader>\r\n  </div>\r\n  <div *ngIf=\"!Loading()\">\r\n    <div class=\"displayflex\" *ngIf=\"bcbebodoid == null\">\r\n      <mat-form-field appearance=\"fill\" (change)=\"Refresh()\">\r\n        <mat-label>Levels</mat-label>\r\n        <input matInput type=\"number\" [(ngModel)]=\"LevelsDeep\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div *ngFor=\"let result of ConnectManyPreviewResponse.containers\">\r\n        <div class=\"container-name\">{{ result.name }}</div>\r\n        <div class=\"opties\">\r\n          <div class=\"optie\" *ngFor=\"let optie of result.opties\">\r\n            {{ optie.name }}\r\n          </div>\r\n        </div>\r\n        <div class=\"opties optie\" >\r\n          <div *ngFor=\"let ebo of result.ebOs\" class=\"displayflex\">\r\n            <div >\r\n              {{ ebo.count }}x\r\n            </div>\r\n            <app-beheer-display-ebo [ebo]=\"ebo.ebo\"></app-beheer-display-ebo>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"displayflex\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div *ngIf=\"bcbproducteigenschapoptieid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"Connect()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbebodoid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"ConnectEBODO()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbproductopbouwoptieid != null\" class=\"displayflex\">\r\n        <div *ngFor=\"let type of GetConnects()\">\r\n          <button class=\"button\" mat-raised-button (click)=\"ConnectType(type)\">\r\n            {{ type }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".displayflex{display:flex}.button{height:38px;width:100px}.main-content{padding:10px}.opties{padding-left:10px;max-height:600px;overflow:auto}.container-name{padding:3px;border-bottom:2px solid #000;font-weight:700}.optie{padding:2px;border-bottom:1px solid #000}\n"] }]
+            args: [{ selector: 'app-beheer-products-connect-manyname-dialog', template: "<div>\r\n  <div *ngIf=\"Loading()\">\r\n    <app-fab-loader></app-fab-loader>\r\n  </div>\r\n  <div *ngIf=\"!Loading()\">\r\n    <div class=\"displayflex\" *ngIf=\"bcbebodoid == null\">\r\n      <mat-form-field appearance=\"fill\" (change)=\"Refresh()\">\r\n        <mat-label>Levels</mat-label>\r\n        <input matInput type=\"number\" [(ngModel)]=\"LevelsDeep\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div *ngFor=\"let result of ConnectManyPreviewResponse.containers\">\r\n        <div class=\"container-name\">{{ result.name }}</div>\r\n        <div class=\"opties optie\" >\r\n          <div *ngFor=\"let ebo of result.ebOs\" class=\"displayflex\">\r\n            <div >\r\n              {{ ebo.count }}x\r\n            </div>\r\n            <app-beheer-display-ebo [ebo]=\"ebo.ebo\"></app-beheer-display-ebo>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"displayflex\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div *ngIf=\"bcbproducteigenschapoptieid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"Connect()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbebodoid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"ConnectEBODO()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbproductopbouwoptieid != null\" class=\"displayflex\">\r\n        <div *ngFor=\"let type of GetConnects()\">\r\n          <button class=\"button\" mat-raised-button (click)=\"ConnectType(type)\">\r\n            {{ type }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".displayflex{display:flex}.button{height:38px;width:100px}.main-content{padding:10px}.opties{padding-left:10px;max-height:600px;overflow:auto}.container-name{padding:3px;border-bottom:2px solid #000;font-weight:700}.optie{padding:2px;border-bottom:1px solid #000}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -10649,52 +10713,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
                     }] }, { type: ProductsApiClient }, { type: ProductsService }, { type: ImportSetsService }, { type: FiltersApiClient }];
     } });
 
-class BeheerProductsConnectRangeinputComponent {
-    constructor(dialogRef, data, ProductsApiClient, ProductsService) {
+class BeheerProductsKoppelFilteroptionDailogComponent {
+    constructor(dialogRef, data, FiltersApiClient, ProductsApiClient, ProductsService) {
         this.dialogRef = dialogRef;
         this.data = data;
+        this.FiltersApiClient = FiltersApiClient;
         this.ProductsApiClient = ProductsApiClient;
         this.ProductsService = ProductsService;
-        this.RangeInputNaamNieuw = "";
-        this.Loading = false;
-        this.bcbproducteigenschapid = data.bcbproducteigenschapid;
-    }
-    ngOnInit() {
-    }
-    NieuwToevoegen() {
-        var request = new ConnectBCBEigenschapRangeInputRequest();
-        request.bcbProductEigenschapId = this.bcbproducteigenschapid;
-        request.rangeInput = this.RangeInputNaamNieuw;
-        this.ProductsApiClient.connectBCBEigenschapRangeInput(request).subscribe(() => {
-            this.dialogRef.close();
-            this.ProductsService.LoadProduct();
-        }, (error) => {
-            alert(error);
-        });
-    }
-}
-BeheerProductsConnectRangeinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsConnectRangeinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsConnectRangeinputComponent, selector: "app-beheer-products-connect-rangeinput", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe range input\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range input</mat-label>\r\n          <input matInput [(ngModel)]=\"RangeInputNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-beheer-products-connect-rangeinput', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe range input\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range input</mat-label>\r\n          <input matInput [(ngModel)]=\"RangeInputNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n" }]
-        }], ctorParameters: function () {
-        return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }, { type: ProductsApiClient }, { type: ProductsService }];
-    } });
-
-class BeheerProductsKoppelFilteroptionDailogComponent {
-    constructor(dialogRef, FiltersApiClient) {
-        this.dialogRef = dialogRef;
-        this.FiltersApiClient = FiltersApiClient;
         this.FilterNaamNieuw = "";
         this.FilterOptionNaamNieuw = "";
-        this.Loading = true;
+        this.LoadingFilters = true;
+        this.LoadingOpties = true;
+        this.BCBEigenschapOptieId = data.bcbeigenschapoptieid;
+        this.Location = data.location;
+        this.FilterNaamNieuw = data.suggestedfilter;
+        this.FilterOptionNaamNieuw = data.suggestedoption;
     }
     ngOnInit() {
         this.LoadFilters();
+        this.LoadOpties();
     }
     handleKeyUpFilter(e) {
         if (e.keyCode === 13) {
@@ -10707,16 +10744,16 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
         }
     }
     NieuwFilterToevoegen() {
-        this.Loading = true;
+        this.LoadingFilters = true;
         var requestfilter = new CreateFilterRequest();
         requestfilter.name = this.FilterNaamNieuw;
         this.FiltersApiClient.createFilter(requestfilter).subscribe((model) => {
-            this.Loading = false;
+            this.LoadingFilters = false;
             var requestfilteroption = new CreateFilterOptionRequest();
             requestfilteroption.filterId = model.id;
             requestfilteroption.name = this.FilterOptionNaamNieuw;
             this.FiltersApiClient.createFilterOption(requestfilteroption).subscribe((model) => {
-                this.Loading = false;
+                this.LoadingFilters = false;
                 this.dialogRef.close({ filter: null, filteroption: model.id });
             }, (error) => {
                 if (error.status == 400)
@@ -10725,7 +10762,7 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
                     console.log('An unexpected error occured');
                     console.log(error);
                 }
-                this.Loading = false;
+                this.LoadingFilters = false;
             });
         }, (error) => {
             if (error.status == 400)
@@ -10734,16 +10771,16 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
                 console.log('An unexpected error occured');
                 console.log(error);
             }
-            this.Loading = false;
+            this.LoadingFilters = false;
         });
     }
     NieuwFilterOptionToevoegen() {
-        this.Loading = true;
+        this.LoadingFilters = true;
         var requestfilteroption = new CreateFilterOptionRequest();
         requestfilteroption.filterId = this.FilterSelected;
         requestfilteroption.name = this.FilterOptionNaamNieuw;
         this.FiltersApiClient.createFilterOption(requestfilteroption).subscribe((model) => {
-            this.Loading = false;
+            this.LoadingFilters = false;
             this.dialogRef.close({ filter: null, filteroption: model.id });
         }, (error) => {
             if (error.status == 400)
@@ -10752,7 +10789,7 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
                 console.log('An unexpected error occured');
                 console.log(error);
             }
-            this.Loading = false;
+            this.LoadingFilters = false;
         });
     }
     BestaandToevoegen() {
@@ -10774,10 +10811,92 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
     KoppelManyName() {
         this.dialogRef.close({ filter: this.FilterSelected, filteroption: null });
     }
+    Loading() {
+        return this.LoadingOpties || this.LoadingFilters;
+    }
     LoadFilters() {
-        this.Loading = true;
+        this.LoadingFilters = true;
         this.FiltersApiClient.getFiltersViewModel().subscribe((model) => {
             this.FiltersViewModel = model;
+            this.LoadingFilters = false;
+        }, (error) => {
+            if (error.status == 400)
+                console.log(error.json());
+            else {
+                console.log('An unexpected error occured');
+                console.log(error);
+            }
+            this.LoadingFilters = false;
+        });
+    }
+    LoadOpties() {
+        if (this.ProductsService.BCBProductViewModel != null) {
+            this.LoadingOpties = true;
+            var request = new ConnectEigenschapOptieRequest();
+            request.bcbEigenschapOptieId = this.BCBEigenschapOptieId;
+            request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
+            request.location = this.Location;
+            this.ProductsApiClient.connectBCBEigenschapOptieFilterOptionPreview(request).subscribe((model) => {
+                this.ConnectEigenschapOptieResponse = model;
+                this.LoadingOpties = false;
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
+}
+BeheerProductsKoppelFilteroptionDailogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FiltersApiClient }, { token: ProductsApiClient }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsKoppelFilteroptionDailogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsKoppelFilteroptionDailogComponent, selector: "app-beheer-products-koppel-filteroption-dailog", ngImport: i0, template: "<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <!--<mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <app-beheer-connect-manyname></app-beheer-connect-manyname>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>-->\r\n  </mat-tab-group>\r\n\r\n  <div class=\"options-container\">\r\n    <div *ngFor=\"let location of ConnectEigenschapOptieResponse.locations\">\r\n      <b>{{ location.location }}</b>\r\n      <div *ngFor=\"let ebo of location.ebos\">\r\n        {{ ebo }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".full-width{width:100%}.options-container{max-height:300px}.tool-bar{padding:2px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beheer-products-koppel-filteroption-dailog', template: "<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <!--<mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <app-beheer-connect-manyname></app-beheer-connect-manyname>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>-->\r\n  </mat-tab-group>\r\n\r\n  <div class=\"options-container\">\r\n    <div *ngFor=\"let location of ConnectEigenschapOptieResponse.locations\">\r\n      <b>{{ location.location }}</b>\r\n      <div *ngFor=\"let ebo of location.ebos\">\r\n        {{ ebo }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".full-width{width:100%}.options-container{max-height:300px}.tool-bar{padding:2px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: FiltersApiClient }, { type: ProductsApiClient }, { type: ProductsService }];
+    } });
+
+class BeheerConnectCategoryDialogComponent {
+    constructor(dialogRef, data, CategoriesApiClient) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.CategoriesApiClient = CategoriesApiClient;
+        this.Loading = true;
+        this.DOType = "DOType";
+        this.DONaam = "DONaam";
+        this.CategoryName = "";
+        this.DOType = data.dotype;
+        this.DONaam = data.donaam;
+        this.CategoryName = data.donaam;
+    }
+    ngOnInit() {
+        this.LoadCategories();
+    }
+    Nieuw() {
+        this.Loading = true;
+        var requestcategory = new CreateCategoryRequest();
+        requestcategory.name = this.CategoryName;
+        this.CategoriesApiClient.createCategory(requestcategory).subscribe((model) => {
+            this.Loading = false;
+            this.dialogRef.close(model.id);
+        }, (error) => {
+            if (error.status == 400)
+                console.log(error.json());
+            else {
+                console.log('An unexpected error occured');
+                console.log(error);
+            }
+            this.Loading = false;
+        });
+    }
+    Bestaand() {
+        this.dialogRef.close(this.CategorySelected);
+    }
+    LoadCategories() {
+        this.Loading = true;
+        this.CategoriesApiClient.getCategoriesViewModel().subscribe((model) => {
+            this.CategoriesViewModel = model;
             this.Loading = false;
         }, (error) => {
             if (error.status == 400)
@@ -10790,12 +10909,110 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
         });
     }
 }
-BeheerProductsKoppelFilteroptionDailogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: FiltersApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsKoppelFilteroptionDailogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsKoppelFilteroptionDailogComponent, selector: "app-beheer-products-koppel-filteroption-dailog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <!--<mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <app-beheer-connect-manyname></app-beheer-connect-manyname>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>-->\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, decorators: [{
+BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerConnectCategoryDialogComponent, selector: "app-beheer-connect-category-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-koppel-filteroption-dailog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuwe filter\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <input matInput [(ngModel)]=\"FilterNaamNieuw\">\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilter($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUpFilterOption($event)\" [(ngModel)]=\"FilterOptionNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwFilterOptionToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Filter</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterSelected\">\r\n            <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n              {{filter.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptionSelected\">\r\n            <mat-option *ngFor=\"let filteroption of GetSelectedFiltersOptions()\" [value]=\"filteroption.id\">\r\n              {{filteroption.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <!--<mat-tab label=\"Many Name\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <app-beheer-connect-manyname></app-beheer-connect-manyname>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"KoppelManyName()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>-->\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: FiltersApiClient }]; } });
+            args: [{ selector: 'app-beheer-connect-category-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: CategoriesApiClient }];
+    } });
+
+class BeheerProductsConnectRangeinputComponent {
+    constructor(dialogRef, data, ProductsApiClient, FiltersApiClient, ImportSetsService, ProductsService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.ProductsApiClient = ProductsApiClient;
+        this.FiltersApiClient = FiltersApiClient;
+        this.ImportSetsService = ImportSetsService;
+        this.ProductsService = ProductsService;
+        this.RangeInputNaamNieuw = "";
+        this.LoadingRangeInputs = false;
+        this.LoadingOptions = false;
+        this.location = data.location;
+        this.bcbeigenschapid = data.bcbeigenschapid;
+        this.LoadRangeInput();
+        this.LoadOptions();
+    }
+    ngOnInit() {
+    }
+    NieuwToevoegen() {
+        var _a;
+        if (this.ProductsService.BCBProductViewModel != null) {
+            var request = new ConnectBCBEigenschapRangeInputRequest();
+            request.bcbEigenschapId = this.bcbeigenschapid;
+            request.rangeInput = this.RangeInputNaamNieuw;
+            request.rangeInputId = -1;
+            request.bcbProductId = (_a = this.ProductsService.BCBProductViewModel) === null || _a === void 0 ? void 0 : _a.id;
+            request.location = this.location;
+            this.ProductsApiClient.connectBCBEigenschapRangeInput(request).subscribe(() => {
+                this.dialogRef.close();
+                this.ProductsService.LoadProduct();
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
+    Bestaand() {
+        var _a;
+        if (this.ProductsService.BCBProductViewModel != null) {
+            var request = new ConnectBCBEigenschapRangeInputRequest();
+            request.bcbEigenschapId = this.bcbeigenschapid;
+            request.rangeInput = "";
+            request.rangeInputId = this.RangeInputSelected;
+            request.bcbProductId = (_a = this.ProductsService.BCBProductViewModel) === null || _a === void 0 ? void 0 : _a.id;
+            request.location = this.location;
+            this.ProductsApiClient.connectBCBEigenschapRangeInput(request).subscribe(() => {
+                this.dialogRef.close();
+                this.ProductsService.LoadProduct();
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
+    LoadRangeInput() {
+        this.LoadingRangeInputs = true;
+        this.FiltersApiClient.getRangeInputsViewModel().subscribe((model) => {
+            this.RangeInputsViewModel = model;
+            this.LoadingRangeInputs = false;
+        }, (error) => {
+            alert(error);
+        });
+    }
+    LoadOptions() {
+        var _a;
+        if (this.ProductsService.BCBProductViewModel != null) {
+            this.LoadingOptions = true;
+            var request = new ConnectBCBEigenschapRangeInputRequest();
+            request.bcbEigenschapId = this.bcbeigenschapid;
+            request.bcbProductId = (_a = this.ProductsService.BCBProductViewModel) === null || _a === void 0 ? void 0 : _a.id;
+            request.location = this.location;
+            this.ProductsApiClient.connectBCBEigenschapRangeInputPreview(request).subscribe((model) => {
+                this.Options = model;
+                this.LoadingOptions = false;
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
+    Loading() {
+        return this.LoadingRangeInputs || this.LoadingOptions;
+    }
+}
+BeheerProductsConnectRangeinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: FiltersApiClient }, { token: ImportSetsService }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsConnectRangeinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsConnectRangeinputComponent, selector: "app-beheer-products-connect-rangeinput", ngImport: i0, template: "<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range input</mat-label>\r\n          <input matInput [(ngModel)]=\"RangeInputNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range Input</mat-label>\r\n          <mat-select [(ngModel)]=\"RangeInputSelected\">\r\n            <mat-option *ngFor=\"let range of RangeInputsViewModel.rangeInputs\" [value]=\"range.id\">\r\n              {{range.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n  <div class=\"options-container\">\r\n    <div *ngFor=\"let fullname of Options.eigenschappen\">\r\n      <b>{{ fullname.location }}</b>\r\n      <div *ngFor=\"let ebo of fullname.eigenschappen\">\r\n        {{ ebo }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".options-container{max-height:300px}.tool-bar{padding:2px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beheer-products-connect-rangeinput', template: "<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range input</mat-label>\r\n          <input matInput [(ngModel)]=\"RangeInputNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range Input</mat-label>\r\n          <mat-select [(ngModel)]=\"RangeInputSelected\">\r\n            <mat-option *ngFor=\"let range of RangeInputsViewModel.rangeInputs\" [value]=\"range.id\">\r\n              {{range.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n  <div class=\"options-container\">\r\n    <div *ngFor=\"let fullname of Options.eigenschappen\">\r\n      <b>{{ fullname.location }}</b>\r\n      <div *ngFor=\"let ebo of fullname.eigenschappen\">\r\n        {{ ebo }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".options-container{max-height:300px}.tool-bar{padding:2px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }, { type: ProductsApiClient }, { type: FiltersApiClient }, { type: ImportSetsService }, { type: ProductsService }];
+    } });
 
 class BeheerProductsEigenschapBereikComponent {
     constructor() { }
@@ -10822,19 +11039,30 @@ class BeheerProductsEigenschapComponent {
     Toggle() {
         this.eigenschap.open = !this.eigenschap.open;
     }
-    Connect(id) {
-        var dialogRef = this.dialog.open(BeheerProductsKoppelFilteroptionDailogComponent);
+    Connect(id, filter, option) {
+        var dialogRef = this.dialog.open(BeheerProductsKoppelFilteroptionDailogComponent, {
+            data: {
+                location: this.eigenschap.location,
+                bcbeigenschapoptieid: id,
+                suggestedfilter: filter,
+                suggestedoption: option
+            }
+        });
         dialogRef.afterClosed().subscribe((result) => {
             if (result != null) {
                 if (result.filteroption != null && result.filteroption > 0) {
-                    var request = new KoppelEigenschapOptieRequest();
-                    request.bcbProductEigenschapOptieId = id;
-                    request.filterOptionId = result.filteroption;
-                    this.ProductsApiClient.connectBCBEigenschapOptieFilterOption(request).subscribe((model) => {
-                        this.ProductsService.LoadProduct();
-                    }, (error) => {
-                        alert(error);
-                    });
+                    if (this.ProductsService.BCBProductViewModel != null) {
+                        var request = new ConnectEigenschapOptieRequest();
+                        request.bcbEigenschapOptieId = id;
+                        request.filterOptionId = result.filteroption;
+                        request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
+                        request.location = this.eigenschap.location;
+                        this.ProductsApiClient.connectBCBEigenschapOptieFilterOption(request).subscribe(() => {
+                            this.ProductsService.LoadProduct();
+                        }, (error) => {
+                            alert(error);
+                        });
+                    }
                 }
                 else if (result.filter != null) {
                     var request2 = new ConnectManyNameRequest();
@@ -10859,7 +11087,8 @@ class BeheerProductsEigenschapComponent {
     ConnectRange() {
         var dialogRef = this.dialog.open(BeheerProductsConnectRangeinputComponent, {
             data: {
-                bcbproducteigenschapid: this.eigenschap.id
+                bcbeigenschapid: this.eigenschap.id,
+                location: this.eigenschap.location
             }
         });
     }
@@ -10884,23 +11113,23 @@ class BeheerProductsEigenschapComponent {
         });
     }
     Show() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (((_b = (_a = this.eigenschap) === null || _a === void 0 ? void 0 : _a.bcbProductEigenschapOptieViewModels) === null || _b === void 0 ? void 0 : _b.length) != null &&
-            ((_d = (_c = this.eigenschap) === null || _c === void 0 ? void 0 : _c.bcbProductEigenschapOptieViewModels) === null || _d === void 0 ? void 0 : _d.length) > 0) {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = this.eigenschap) === null || _a === void 0 ? void 0 : _a.opties) === null || _b === void 0 ? void 0 : _b.length) != null &&
+            this.eigenschap.opties.length > 0) {
             return true;
         }
-        if (((_g = (_f = (_e = this.eigenschap) === null || _e === void 0 ? void 0 : _e.bcbEigenschapViewModel) === null || _f === void 0 ? void 0 : _f.bereiken) === null || _g === void 0 ? void 0 : _g.length) != null &&
-            ((_k = (_j = (_h = this.eigenschap) === null || _h === void 0 ? void 0 : _h.bcbEigenschapViewModel) === null || _j === void 0 ? void 0 : _j.bereiken) === null || _k === void 0 ? void 0 : _k.length) > 0) {
+        if (((_d = (_c = this.eigenschap) === null || _c === void 0 ? void 0 : _c.bereiken) === null || _d === void 0 ? void 0 : _d.length) != null &&
+            this.eigenschap.bereiken.length > 0) {
             return true;
         }
         return false;
     }
 }
 BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: ProductsService }, { token: i1$3.MatDialog }, { token: ProductsApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.bcbEigenschapViewModel.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bcbEigenschapViewModel.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bcbEigenschapViewModel.bereiken.length > 0\">\r\n      <div *ngIf=\"eigenschap.bcbEigenschapViewModel.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let rangeinput of eigenschap.bcbEigenschapViewModel.rangeInputs\">\r\n        {{ rangeinput.rangeInputModel.name }}\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.bcbProductEigenschapOptieViewModels\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.bcbEigenschapOptieViewModel.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.bcbEigenschapViewModel.name, optie.bcbEigenschapOptieViewModel.name)\">\r\n            Category\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
+BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n            Category\r\n          </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-eigenschap', template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.bcbEigenschapViewModel.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bcbEigenschapViewModel.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bcbEigenschapViewModel.bereiken.length > 0\">\r\n      <div *ngIf=\"eigenschap.bcbEigenschapViewModel.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let rangeinput of eigenschap.bcbEigenschapViewModel.rangeInputs\">\r\n        {{ rangeinput.rangeInputModel.name }}\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.bcbProductEigenschapOptieViewModels\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.bcbEigenschapOptieViewModel.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.bcbEigenschapViewModel.name, optie.bcbEigenschapOptieViewModel.name)\">\r\n            Category\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieViewModel.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
+            args: [{ selector: 'app-beheer-products-eigenschap', template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n            Category\r\n          </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductsService }, { type: i1$3.MatDialog }, { type: ProductsApiClient }]; }, propDecorators: { eigenschap: [{
                 type: Input
             }] } });
@@ -10914,25 +11143,23 @@ class BeheerProductsEboComponent {
     ngOnInit() {
     }
     ConnectAv() {
-        var _a, _b, _c, _d;
-        if (((_a = this.optie.bcbOpbouwOptieViewModel) === null || _a === void 0 ? void 0 : _a.ignore) == true) {
-            return false;
-        }
-        if (((_b = this.optie.bcbOpbouwOptieViewModel) === null || _b === void 0 ? void 0 : _b.bcbOpbouwOptieFilterOptionViewModels) != null &&
-            ((_d = (_c = this.optie.bcbOpbouwOptieViewModel) === null || _c === void 0 ? void 0 : _c.bcbOpbouwOptieFilterOptionViewModels) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-            return false;
-        }
+        //if (this.optie.bcbOpbouwOptieViewModel?.ignore == true) {
+        //  return false;
+        //}
+        //if (this.optie.bcbOpbouwOptieViewModel?.bcbOpbouwOptieFilterOptionViewModels != null &&
+        //  this.optie.bcbOpbouwOptieViewModel?.bcbOpbouwOptieFilterOptionViewModels?.length > 0) {
+        //  return false;
+        //}
         return true;
     }
     GetConnect() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (((_a = this.optie.bcbOpbouwOptieViewModel) === null || _a === void 0 ? void 0 : _a.ignore) == true) {
-            return "Ignore";
-        }
-        if (((_b = this.optie.bcbOpbouwOptieViewModel) === null || _b === void 0 ? void 0 : _b.bcbOpbouwOptieFilterOptionViewModels) != null &&
-            ((_d = (_c = this.optie.bcbOpbouwOptieViewModel) === null || _c === void 0 ? void 0 : _c.bcbOpbouwOptieFilterOptionViewModels) === null || _d === void 0 ? void 0 : _d.length) > 0) {
-            return ((_f = (_e = this.optie.bcbOpbouwOptieViewModel) === null || _e === void 0 ? void 0 : _e.bcbOpbouwOptieFilterOptionViewModels[0].filterOption) === null || _f === void 0 ? void 0 : _f.filterName) + ": " + ((_h = (_g = this.optie.bcbOpbouwOptieViewModel) === null || _g === void 0 ? void 0 : _g.bcbOpbouwOptieFilterOptionViewModels[0].filterOption) === null || _h === void 0 ? void 0 : _h.name) + "";
-        }
+        //if (this.optie.bcbOpbouwOptieViewModel?.ignore == true) {
+        //  return "Ignore";
+        //}
+        //if (this.optie.bcbOpbouwOptieViewModel?.bcbOpbouwOptieFilterOptionViewModels != null &&
+        //  this.optie.bcbOpbouwOptieViewModel?.bcbOpbouwOptieFilterOptionViewModels?.length > 0) {
+        //  return this.optie.bcbOpbouwOptieViewModel?.bcbOpbouwOptieFilterOptionViewModels[0].filterOption?.filterName + ": " + this.optie.bcbOpbouwOptieViewModel?.bcbOpbouwOptieFilterOptionViewModels[0].filterOption?.name + "";
+        //}
         return "";
     }
     Connect() {
@@ -10941,7 +11168,7 @@ class BeheerProductsEboComponent {
             if (result != null) {
                 if (result.filteroption != null && result.filteroption > 0) {
                     var request = new ConnectOpbouwOptieRequest();
-                    request.bcbProductOpbouwOptieId = this.optie.id;
+                    //request.bcbProductOpbouwOptieId = this.optie.id;
                     request.filterOptionId = result.filteroption;
                     this.ProductsApiClient.connectBCBOpbouwOptieFilterOption(request).subscribe(() => {
                         this.ProductsService.LoadProduct();
@@ -10958,13 +11185,13 @@ class BeheerProductsEboComponent {
     ConnectMany() {
         var dialogRef = this.dialog.open(BeheerProductsConnectManynameDialogComponent, {
             data: {
-                bcbproductopbouwoptieid: this.optie.id
+            //bcbproductopbouwoptieid: this.optie.id
             }
         });
     }
     Ignore() {
         var request = new IgnoreOpbouwOptieRequest();
-        request.bcbProductOpbouwOptieId = this.optie.id;
+        // request.bcbProductOpbouwOptieId = this.optie.id;
         this.ProductsApiClient.ignoreBCBOpbouwOptieFilterOption(request).subscribe(() => {
             this.ProductsService.LoadProduct();
         }, (error) => {
@@ -10973,7 +11200,7 @@ class BeheerProductsEboComponent {
     }
     Remove() {
         var request = new RemoveOpbouwOptieRequest();
-        request.bcbProductOpbouwOptieId = this.optie.id;
+        //request.bcbProductOpbouwOptieId = this.optie.id;
         this.ProductsApiClient.removeBCBOpbouwOptieFilterOption(request).subscribe(() => {
             this.ProductsService.LoadProduct();
         }, (error) => {
@@ -10981,15 +11208,15 @@ class BeheerProductsEboComponent {
         });
     }
     Toggle() {
-        this.optie.open = !this.optie.open;
+        this.ebo.open = !this.ebo.open;
     }
 }
 BeheerProductsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEboComponent, deps: [{ token: i1$3.MatDialog }, { token: ProductsApiClient }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: { optie: "optie" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !optie.connected, 'normal': optie.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!optie.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"optie.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"name\" colspan=\"2\">\r\n      {{ optie.bcbOpbouwOptieViewModel?.bcbeboViewModel?.name }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"optie.open\" class=\"main-block\">\r\n    <div class=\"displayflex\" *ngIf=\"ConnectAv()\">\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        FilterOptionMany\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        {{ GetConnect() }}\r\n      </div>\r\n      <button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"optie.bcbProductOpbouwViewModels.length > 0\" class=\"title\">Opbouw</div>\r\n    <app-beheer-products-opbouw *ngFor=\"let opbouw of optie.bcbProductOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n    <div *ngIf=\"optie.bcbProductEigenschapViewModels.length > 0\" class=\"title\">Eigenschap</div>\r\n    <app-beheer-products-eigenschap *ngFor=\"let eigenschap of optie.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.text{padding:8px;font-size:17px}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.name{flex:auto}.icon-td{width:24px;height:24px}.warning{background-color:#f08080}.normal{background-color:#fff}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i4.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i7.MatButton; }), selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerProductsEigenschapComponent; }), selector: "app-beheer-products-eigenschap", inputs: ["eigenschap"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerProductsOpbouwComponent; }), selector: "app-beheer-products-opbouw", inputs: ["opbouw"] }] });
+BeheerProductsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !ebo.connected, 'normal': ebo.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!ebo.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"ebo.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"name\" colspan=\"2\">\r\n      {{ ebo.name }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"ebo.open\" class=\"main-block\">\r\n    <!--<div class=\"displayflex\" *ngIf=\"!ebo.connected && ConnectAv()\">\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        FilterOptionMany\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        {{ GetConnect() }}\r\n      </div>\r\n      <button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>\r\n    </div>-->\r\n\r\n    <div *ngIf=\"ebo.bcbOpbouwViewModels?.length != 0\">\r\n      <div class=\"title\">Opbouw</div>\r\n      <app-beheer-products-opbouw *ngFor=\"let opbouw of ebo.bcbOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n    </div>\r\n    <div *ngIf=\"ebo.bcbEigenschapViewModels?.length != 0\">\r\n      <div class=\"title\">Eigenschap</div>\r\n      <app-beheer-products-eigenschap *ngFor=\"let eigenschap of ebo.bcbEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.text{padding:8px;font-size:17px}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.name{flex:auto}.icon-td{width:24px;height:24px}.warning{background-color:#f08080}.normal{background-color:#fff}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i4.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerProductsEigenschapComponent; }), selector: "app-beheer-products-eigenschap", inputs: ["eigenschap"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerProductsOpbouwComponent; }), selector: "app-beheer-products-opbouw", inputs: ["opbouw"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEboComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-ebo', template: "<div class=\"container\" [ngClass]=\"{'warning': !optie.connected, 'normal': optie.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!optie.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"optie.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"name\" colspan=\"2\">\r\n      {{ optie.bcbOpbouwOptieViewModel?.bcbeboViewModel?.name }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"optie.open\" class=\"main-block\">\r\n    <div class=\"displayflex\" *ngIf=\"ConnectAv()\">\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        FilterOptionMany\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        {{ GetConnect() }}\r\n      </div>\r\n      <button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"optie.bcbProductOpbouwViewModels.length > 0\" class=\"title\">Opbouw</div>\r\n    <app-beheer-products-opbouw *ngFor=\"let opbouw of optie.bcbProductOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n    <div *ngIf=\"optie.bcbProductEigenschapViewModels.length > 0\" class=\"title\">Eigenschap</div>\r\n    <app-beheer-products-eigenschap *ngFor=\"let eigenschap of optie.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.text{padding:8px;font-size:17px}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.name{flex:auto}.icon-td{width:24px;height:24px}.warning{background-color:#f08080}.normal{background-color:#fff}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: ProductsApiClient }, { type: ProductsService }]; }, propDecorators: { optie: [{
+            args: [{ selector: 'app-beheer-products-ebo', template: "<div class=\"container\" [ngClass]=\"{'warning': !ebo.connected, 'normal': ebo.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!ebo.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"ebo.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"name\" colspan=\"2\">\r\n      {{ ebo.name }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"ebo.open\" class=\"main-block\">\r\n    <!--<div class=\"displayflex\" *ngIf=\"!ebo.connected && ConnectAv()\">\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        FilterOptionMany\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        {{ GetConnect() }}\r\n      </div>\r\n      <button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>\r\n    </div>-->\r\n\r\n    <div *ngIf=\"ebo.bcbOpbouwViewModels?.length != 0\">\r\n      <div class=\"title\">Opbouw</div>\r\n      <app-beheer-products-opbouw *ngFor=\"let opbouw of ebo.bcbOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n    </div>\r\n    <div *ngIf=\"ebo.bcbEigenschapViewModels?.length != 0\">\r\n      <div class=\"title\">Eigenschap</div>\r\n      <app-beheer-products-eigenschap *ngFor=\"let eigenschap of ebo.bcbEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.text{padding:8px;font-size:17px}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.name{flex:auto}.icon-td{width:24px;height:24px}.warning{background-color:#f08080}.normal{background-color:#fff}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: ProductsApiClient }, { type: ProductsService }]; }, propDecorators: { ebo: [{
                 type: Input
             }] } });
 class BeheerProductsOpbouwComponent {
@@ -11001,24 +11228,25 @@ class BeheerProductsOpbouwComponent {
     }
 }
 BeheerProductsOpbouwComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsOpbouwComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsOpbouwComponent, selector: "app-beheer-products-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !opbouw.connected, 'normal': opbouw.connected }\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{opbouw?.bcbOpbouwViewModel.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"opbouw.open\" class=\"main-block\">\r\n    <div *ngFor=\"let optie of opbouw.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <app-beheer-products-ebo [optie]=\"optie\"></app-beheer-products-ebo>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer;display:flex}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.eigenschapcel{flex:auto}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: ["optie"] }] });
+BeheerProductsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsOpbouwComponent, selector: "app-beheer-products-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !opbouw.connected, 'normal': opbouw.connected }\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{opbouw?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"opbouw.open\" class=\"main-block\">\r\n    <div *ngFor=\"let ebo of opbouw.ebos\" [ngClass]=\"{'warning': !ebo.connected}\">\r\n      <app-beheer-products-ebo [ebo]=\"ebo\"></app-beheer-products-ebo>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer;display:flex}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.eigenschapcel{flex:auto}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: ["ebo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsOpbouwComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-opbouw', template: "<div class=\"container\" [ngClass]=\"{'warning': !opbouw.connected, 'normal': opbouw.connected }\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{opbouw?.bcbOpbouwViewModel.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"opbouw.open\" class=\"main-block\">\r\n    <div *ngFor=\"let optie of opbouw.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <app-beheer-products-ebo [optie]=\"optie\"></app-beheer-products-ebo>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer;display:flex}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.eigenschapcel{flex:auto}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
+            args: [{ selector: 'app-beheer-products-opbouw', template: "<div class=\"container\" [ngClass]=\"{'warning': !opbouw.connected, 'normal': opbouw.connected }\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{opbouw?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"opbouw.open\" class=\"main-block\">\r\n    <div *ngFor=\"let ebo of opbouw.ebos\" [ngClass]=\"{'warning': !ebo.connected}\">\r\n      <app-beheer-products-ebo [ebo]=\"ebo\"></app-beheer-products-ebo>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".card{margin:3px}.full-width{width:100%}.row{cursor:pointer;display:flex}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.eigenschapcel{flex:auto}.optiecel{border-bottom:1px solid #000}.optiecellast{width:50%}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { opbouw: [{
                 type: Input
             }] } });
 
 class BeheerProductsBcbproductComponent {
-    constructor(ImportApiClient, ProductsService) {
+    constructor(ImportApiClient, ProductsService, ChangeDetectorRef) {
         this.ImportApiClient = ImportApiClient;
         this.ProductsService = ProductsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
         this.Loading = false;
     }
     ngOnInit() {
     }
     ResetImport() {
-        this.ProductsService.ResetImport(-1, this.BCBProductViewModel.id);
+        this.ProductsService.ResetImport(-1, this.BCBProductViewModel.id, this.ChangeDetectorRef);
     }
     Import() {
         var request = new BCBImportProductRequest();
@@ -11029,7 +11257,7 @@ class BeheerProductsBcbproductComponent {
                 alert(model.message);
             }
             this.Loading = false;
-            this.ProductsService.Reload();
+            this.ProductsService.Reload(this.ChangeDetectorRef);
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -11040,12 +11268,12 @@ class BeheerProductsBcbproductComponent {
         });
     }
 }
-BeheerProductsBcbproductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsBcbproductComponent, deps: [{ token: ImportApiClient }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: { BCBProductViewModel: "BCBProductViewModel" }, ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"title\">Opbouw</div>\r\n      <app-beheer-products-opbouw *ngFor=\"let opbouw of BCBProductViewModel.bcbProductOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n      <div class=\"title\">Eigenschap</div>\r\n      <app-beheer-products-eigenschap *ngFor=\"let eigenschap of BCBProductViewModel.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: ["eigenschap"] }, { kind: "component", type: BeheerProductsOpbouwComponent, selector: "app-beheer-products-opbouw", inputs: ["opbouw"] }] });
+BeheerProductsBcbproductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsBcbproductComponent, deps: [{ token: ImportApiClient }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: { BCBProductViewModel: "BCBProductViewModel" }, ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <app-beheer-products-ebo [ebo]=\"BCBProductViewModel.bcbeboViewModel\"></app-beheer-products-ebo>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: ["ebo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsBcbproductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-bcbproduct', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"title\">Opbouw</div>\r\n      <app-beheer-products-opbouw *ngFor=\"let opbouw of BCBProductViewModel.bcbProductOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n      <div class=\"title\">Eigenschap</div>\r\n      <app-beheer-products-eigenschap *ngFor=\"let eigenschap of BCBProductViewModel.bcbProductEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ImportApiClient }, { type: ProductsService }]; }, propDecorators: { BCBProductViewModel: [{
+            args: [{ selector: 'app-beheer-products-bcbproduct', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <app-beheer-products-ebo [ebo]=\"BCBProductViewModel.bcbeboViewModel\"></app-beheer-products-ebo>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ImportApiClient }, { type: ProductsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { BCBProductViewModel: [{
                 type: Input
             }] } });
 
@@ -11058,7 +11286,7 @@ class BeheerProductsComponent {
         this.BCBImportSetsViewModel = undefined;
     }
     ngOnInit() {
-        this.ProductsService.Reload();
+        this.ImportSetsService.LoadImportSets(this.ChangeDetectorRef);
     }
     Import() {
         var _a;
@@ -11093,7 +11321,7 @@ class BeheerProductsComponent {
                     this.ImportBCBProduct(next);
                 }
                 else {
-                    this.ProductsService.Reload();
+                    this.ProductsService.Reload(this.ChangeDetectorRef);
                 }
             }
         }, (error) => {
@@ -11107,7 +11335,7 @@ class BeheerProductsComponent {
         });
     }
     ResetImport() {
-        this.ProductsService.ResetImport(-1, -1);
+        this.ProductsService.ResetImport(-1, -1, this.ChangeDetectorRef);
     }
     CleanUp() {
         this.ProductsService.CleanUp();
@@ -11125,7 +11353,7 @@ class BeheerProductsComponent {
         }
     }
     SaveProduct(product) {
-        this.ProductsService.SaveProductViewModel(product);
+        this.ProductsService.SaveProductViewModel(product, this.ChangeDetectorRef);
     }
     SelectBCBProduct(bcbproduct) {
         if (this.ProductsService.BCBProductViewModel != bcbproduct) {
@@ -11179,10 +11407,10 @@ class BeheerProductsComponent {
     }
 }
 BeheerProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsComponent, deps: [{ token: ProductsService }, { token: ImportSetsService }, { token: ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsComponent, selector: "app-beheer-products", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"ProductsService.Loading() || ImportSetsService.LoadingImportSets\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!ProductsService.Loading() && !ImportSetsService.LoadingImportSets\" class=\"main-block\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"displayflex\">\r\n        <div class=\"displayflex\">\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Import set</mat-label>\r\n            <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n              <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n                {{importset.name}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n         \r\n        </div>\r\n\r\n        <div>\r\n          <button mat-raised-button (click)=\"ProductsService.Reload()\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"flex-auto\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"ResetImport()\">\r\n            Reset Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"Import()\">\r\n            Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"CleanUp()\">\r\n            CleanUp\r\n          </button>\r\n        </div>\r\n      </div>\r\n      \r\n\r\n      \r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div class=\"displayflex\" *ngIf=\"this.ProductsService.ProductsViewModel != undefined\">\r\n    <div class=\"tree-block\">\r\n      <div class=\"limiter\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <table class=\"full-width\">\r\n              <tr class=\"table-head\">\r\n                <td></td>\r\n                <td>Id</td>\r\n                <td>Naam</td>\r\n                <td>Variants</td>\r\n                <td>Importset</td>\r\n              </tr>\r\n              <ng-container *ngFor=\"let product of this.ProductsService.ProductsViewModel.productViewModels\">\r\n                <tr (click)=\"SelectProduct(product)\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td>{{ product.id }}</td>\r\n                  <td>{{ product.name }}</td>\r\n                  <td>{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 145px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px)}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsProductComponent, selector: "app-beheer-products-product", inputs: ["ProductViewModel"] }, { kind: "component", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: ["BCBProductViewModel"] }] });
+BeheerProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsComponent, selector: "app-beheer-products", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"ProductsService.Loading() || ImportSetsService.LoadingImportSets\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!ProductsService.Loading() && !ImportSetsService.LoadingImportSets\" class=\"main-block\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"displayflex\">\r\n        <div class=\"displayflex\">\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Import set</mat-label>\r\n            <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n              <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n                {{importset.name}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n         \r\n        </div>\r\n\r\n        <div>\r\n          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"flex-auto\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"ResetImport()\">\r\n            Reset Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"Import()\">\r\n            Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"CleanUp()\">\r\n            CleanUp\r\n          </button>\r\n        </div>\r\n      </div>\r\n      \r\n\r\n      \r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div class=\"displayflex\" *ngIf=\"this.ProductsService.ProductsViewModel != undefined\">\r\n    <div class=\"tree-block\">\r\n      <div class=\"limiter\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <table class=\"full-width\">\r\n              <tr class=\"table-head\">\r\n                <td></td>\r\n                <td>Id</td>\r\n                <td>Naam</td>\r\n                <td>Variants</td>\r\n                <td>Importset</td>\r\n              </tr>\r\n              <ng-container *ngFor=\"let product of this.ProductsService.ProductsViewModel.productViewModels\">\r\n                <tr (click)=\"SelectProduct(product)\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td>{{ product.id }}</td>\r\n                  <td>{{ product.name }}</td>\r\n                  <td>{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 179px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px);overflow:auto}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsProductComponent, selector: "app-beheer-products-product", inputs: ["ProductViewModel"] }, { kind: "component", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: ["BCBProductViewModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"ProductsService.Loading() || ImportSetsService.LoadingImportSets\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!ProductsService.Loading() && !ImportSetsService.LoadingImportSets\" class=\"main-block\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"displayflex\">\r\n        <div class=\"displayflex\">\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Import set</mat-label>\r\n            <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n              <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n                {{importset.name}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n         \r\n        </div>\r\n\r\n        <div>\r\n          <button mat-raised-button (click)=\"ProductsService.Reload()\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"flex-auto\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"ResetImport()\">\r\n            Reset Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"Import()\">\r\n            Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"CleanUp()\">\r\n            CleanUp\r\n          </button>\r\n        </div>\r\n      </div>\r\n      \r\n\r\n      \r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div class=\"displayflex\" *ngIf=\"this.ProductsService.ProductsViewModel != undefined\">\r\n    <div class=\"tree-block\">\r\n      <div class=\"limiter\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <table class=\"full-width\">\r\n              <tr class=\"table-head\">\r\n                <td></td>\r\n                <td>Id</td>\r\n                <td>Naam</td>\r\n                <td>Variants</td>\r\n                <td>Importset</td>\r\n              </tr>\r\n              <ng-container *ngFor=\"let product of this.ProductsService.ProductsViewModel.productViewModels\">\r\n                <tr (click)=\"SelectProduct(product)\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td>{{ product.id }}</td>\r\n                  <td>{{ product.name }}</td>\r\n                  <td>{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 145px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px)}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"] }]
+            args: [{ selector: 'app-beheer-products', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"ProductsService.Loading() || ImportSetsService.LoadingImportSets\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!ProductsService.Loading() && !ImportSetsService.LoadingImportSets\" class=\"main-block\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"displayflex\">\r\n        <div class=\"displayflex\">\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Import set</mat-label>\r\n            <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n              <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n                {{importset.name}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n         \r\n        </div>\r\n\r\n        <div>\r\n          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"flex-auto\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"ResetImport()\">\r\n            Reset Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"Import()\">\r\n            Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"CleanUp()\">\r\n            CleanUp\r\n          </button>\r\n        </div>\r\n      </div>\r\n      \r\n\r\n      \r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div class=\"displayflex\" *ngIf=\"this.ProductsService.ProductsViewModel != undefined\">\r\n    <div class=\"tree-block\">\r\n      <div class=\"limiter\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <table class=\"full-width\">\r\n              <tr class=\"table-head\">\r\n                <td></td>\r\n                <td>Id</td>\r\n                <td>Naam</td>\r\n                <td>Variants</td>\r\n                <td>Importset</td>\r\n              </tr>\r\n              <ng-container *ngFor=\"let product of this.ProductsService.ProductsViewModel.productViewModels\">\r\n                <tr (click)=\"SelectProduct(product)\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td>{{ product.id }}</td>\r\n                  <td>{{ product.name }}</td>\r\n                  <td>{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 179px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px);overflow:auto}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductsService }, { type: ImportSetsService }, { type: ImportApiClient }, { type: i0.ChangeDetectorRef }]; } });
 
 class BeheerFiltersComponent {
@@ -11205,7 +11433,7 @@ class BeheerSettingsOptionsComponent {
     }
 }
 BeheerSettingsOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerSettingsOptionsComponent, deps: [{ token: ProjectSettingService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSettingsOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerSettingsOptionsComponent, selector: "app-beheer-settings-options", inputs: { projectsetting: "projectsetting" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"projectsetting != null\">\r\n  <div *ngIf=\"!projectsetting.default\">\r\n    <button mat-raised-button (click)=\"projectsettingservice.Reset(projectsetting)\">\r\n      Reset\r\n    </button>\r\n  </div>\r\n  <div class=\"expand\">\r\n    <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n      <mat-label>Default</mat-label>\r\n      <mat-select [(value)]=\"projectsetting.defaultValue\" [disabled]=\"!projectsetting.default\" (selectionChange)=\"projectsettingservice.Save(projectsetting)\">\r\n        <mat-option value=\"{{ option }}\" *ngFor=\"let option of projectsetting.options\">\r\n          {{ option }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"projectsetting != null && projectsetting.pipelineSteps != null && projectsetting.pipelineSteps.length > 0\">\r\n  <div *ngFor=\"let pipeline of projectsetting.pipelineSteps\">\r\n    <div class=\"row\">\r\n      <div *ngIf=\"!pipeline.default\">\r\n        <button mat-raised-button (click)=\"projectsettingservice.ResetPipelineStep(projectsetting, pipeline)\">\r\n          Reset\r\n        </button>\r\n      </div>\r\n      <div class=\"expand\">\r\n        <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n          <mat-label>{{ pipeline.pipelineStep }}</mat-label>\r\n          <mat-select [(value)]=\"pipeline.value\" [disabled]=\"!pipeline.default\" (selectionChange)=\"projectsettingservice.SavePipelineStep(projectsetting, pipeline)\">\r\n            <mat-option value=\"{{ option }}\" *ngFor=\"let option of projectsetting.options\">\r\n              {{ option }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex}.expand{flex:auto}.pipeline-row{text-align:right;padding:5px}.pipeline-block{padding:5px;display:inline-block;border:1px solid #000}.pipeline-info{font-weight:700}.projectsetting-item{border-bottom:1px solid #000!important}.fullwidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+BeheerSettingsOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerSettingsOptionsComponent, selector: "app-beheer-settings-options", inputs: { projectsetting: "projectsetting" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"projectsetting != null\">\r\n  <div *ngIf=\"!projectsetting.default\">\r\n    <button mat-raised-button (click)=\"projectsettingservice.Reset(projectsetting)\">\r\n      Reset\r\n    </button>\r\n  </div>\r\n  <div class=\"expand\">\r\n    <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n      <mat-label>Default</mat-label>\r\n      <mat-select [(value)]=\"projectsetting.defaultValue\" [disabled]=\"!projectsetting.default\" (selectionChange)=\"projectsettingservice.Save(projectsetting)\">\r\n        <mat-option value=\"{{ option }}\" *ngFor=\"let option of projectsetting.options\">\r\n          {{ option }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"projectsetting != null && projectsetting.pipelineSteps != null && projectsetting.pipelineSteps.length > 0\">\r\n  <div *ngFor=\"let pipeline of projectsetting.pipelineSteps\">\r\n    <div class=\"row\">\r\n      <div *ngIf=\"!pipeline.default\">\r\n        <button mat-raised-button (click)=\"projectsettingservice.ResetPipelineStep(projectsetting, pipeline)\">\r\n          Reset\r\n        </button>\r\n      </div>\r\n      <div class=\"expand\">\r\n        <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n          <mat-label>{{ pipeline.pipelineStep }}</mat-label>\r\n          <mat-select [(value)]=\"pipeline.value\" [disabled]=\"!pipeline.default\" (selectionChange)=\"projectsettingservice.SavePipelineStep(projectsetting, pipeline)\">\r\n            <mat-option value=\"{{ option }}\" *ngFor=\"let option of projectsetting.options\">\r\n              {{ option }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex}.expand{flex:auto}.pipeline-row{text-align:right;padding:5px}.pipeline-block{padding:5px;display:inline-block;border:1px solid #000}.pipeline-info{font-weight:700}.projectsetting-item{border-bottom:1px solid #000!important}.fullwidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerSettingsOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-settings-options', template: "<div class=\"row\" *ngIf=\"projectsetting != null\">\r\n  <div *ngIf=\"!projectsetting.default\">\r\n    <button mat-raised-button (click)=\"projectsettingservice.Reset(projectsetting)\">\r\n      Reset\r\n    </button>\r\n  </div>\r\n  <div class=\"expand\">\r\n    <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n      <mat-label>Default</mat-label>\r\n      <mat-select [(value)]=\"projectsetting.defaultValue\" [disabled]=\"!projectsetting.default\" (selectionChange)=\"projectsettingservice.Save(projectsetting)\">\r\n        <mat-option value=\"{{ option }}\" *ngFor=\"let option of projectsetting.options\">\r\n          {{ option }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"projectsetting != null && projectsetting.pipelineSteps != null && projectsetting.pipelineSteps.length > 0\">\r\n  <div *ngFor=\"let pipeline of projectsetting.pipelineSteps\">\r\n    <div class=\"row\">\r\n      <div *ngIf=\"!pipeline.default\">\r\n        <button mat-raised-button (click)=\"projectsettingservice.ResetPipelineStep(projectsetting, pipeline)\">\r\n          Reset\r\n        </button>\r\n      </div>\r\n      <div class=\"expand\">\r\n        <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n          <mat-label>{{ pipeline.pipelineStep }}</mat-label>\r\n          <mat-select [(value)]=\"pipeline.value\" [disabled]=\"!pipeline.default\" (selectionChange)=\"projectsettingservice.SavePipelineStep(projectsetting, pipeline)\">\r\n            <mat-option value=\"{{ option }}\" *ngFor=\"let option of projectsetting.options\">\r\n              {{ option }}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex}.expand{flex:auto}.pipeline-row{text-align:right;padding:5px}.pipeline-block{padding:5px;display:inline-block;border:1px solid #000}.pipeline-info{font-weight:700}.projectsetting-item{border-bottom:1px solid #000!important}.fullwidth{width:100%}\n"] }]
@@ -11311,7 +11539,7 @@ class BeheerSearchproductsKoppelDialogComponent {
     }
 }
 BeheerSearchproductsKoppelDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerSearchproductsKoppelDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: SearchProductsApiClient }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSearchproductsKoppelDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerSearchproductsKoppelDialogComponent, selector: "app-beheer-searchproducts-koppel-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\" *ngIf=\"Suggestion.length > 0\">\r\n        <button *ngFor=\"let sugg of Suggestion\" mat-raised-button (click)=\"NaamNieuw = sugg;\">{{ sugg }}</button>\r\n      </div>\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUp($event)\" [(ngModel)]=\"NaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProductsViewModel.productViewModels\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Los\">\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"LosKenmerk()\">Kenmerk</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}.bar{padding-top:5px;padding-left:3px;padding-right:3px}.tool-bar{text-align:right;padding-bottom:3px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+BeheerSearchproductsKoppelDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerSearchproductsKoppelDialogComponent, selector: "app-beheer-searchproducts-koppel-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\" *ngIf=\"Suggestion.length > 0\">\r\n        <button *ngFor=\"let sugg of Suggestion\" mat-raised-button (click)=\"NaamNieuw = sugg;\">{{ sugg }}</button>\r\n      </div>\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUp($event)\" [(ngModel)]=\"NaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProductsViewModel.productViewModels\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Los\">\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"LosKenmerk()\">Kenmerk</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}.bar{padding-top:5px;padding-left:3px;padding-right:3px}.tool-bar{text-align:right;padding-bottom:3px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerSearchproductsKoppelDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-searchproducts-koppel-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\" *ngIf=\"Suggestion.length > 0\">\r\n        <button *ngFor=\"let sugg of Suggestion\" mat-raised-button (click)=\"NaamNieuw = sugg;\">{{ sugg }}</button>\r\n      </div>\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput (keyup)=\"handleKeyUp($event)\" [(ngModel)]=\"NaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProductsViewModel.productViewModels\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"BestaandToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Los\">\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"LosKenmerk()\">Kenmerk</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".full-width{width:100%}.bar{padding-top:5px;padding-left:3px;padding-right:3px}.tool-bar{text-align:right;padding-bottom:3px}\n"] }]
@@ -11602,7 +11830,7 @@ class BeheerSearchProductsComponent {
     }
 }
 BeheerSearchProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerSearchProductsComponent, deps: [{ token: i1$3.MatDialog }, { token: SearchProductsApiClient }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSearchProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerSearchProductsComponent, selector: "app-beheer-searchproducts", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div class=\"main-window\">\r\n  <div>\r\n    <mat-card>\r\n      <div class=\"main-block-search\">\r\n        <div class=\"block\">\r\n          <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>Zoekterm</mat-label>\r\n            <input matInput placeholder=\"bv. Merk Serie\" (keyup)=\"handleKeyUp($event)\" [(ngModel)]=\"ZoekTerm\">\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"zoeken-block\">\r\n          <button mat-raised-button (click)=\"Zoek()\" [disabled]=\"Loading\">Zoeken</button>\r\n        </div>\r\n      </div>\r\n    </mat-card>\r\n\r\n    <div *ngIf=\"Loading\">\r\n      <app-fab-loader></app-fab-loader>\r\n    </div>\r\n\r\n    <div *ngIf=\"!Loading\" class=\"resultblock\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <table class=\"ebo-table\">\r\n            <tr>\r\n              <td>\r\n                <button mat-raised-button (click)=\"SelectAll()\" class=\"selectall\">V</button>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>BOT</mat-label>\r\n                  <input matInput [(ngModel)]=\"BOT\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO1Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO1Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO1Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO1Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO2Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO2Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO2Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO2Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO3Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO3Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO3Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO3Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO4Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO4Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO4Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO4Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>Kenmerk</mat-label>\r\n                  <input matInput [(ngModel)]=\"Kenmerk\">\r\n                </mat-form-field>\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let ebo of GetEbos(false)\" class=\"table-row\" (click)=\"SelectRow(ebo)\">\r\n              <td>\r\n                <div *ngIf=\"ebo.inUseBy == ''\">\r\n                  <mat-checkbox class=\"row-check\" [(ngModel)]=\"ebo.selected\" [color]=\"Primary\" (change)=\"UpdateSnackBar()\"></mat-checkbox>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let do of ebo.dOs\">\r\n                <td *ngIf=\"ShowCell(do.doType)\">{{ do.doType }}</td>\r\n                <td>{{ do.doNaam }}</td>\r\n              </ng-container>\r\n            </tr>\r\n            <tr *ngFor=\"let ebo of GetEbos(true)\" class=\"table-row\" (click)=\"SelectRow(ebo)\">\r\n              <td>\r\n                <div *ngIf=\"ebo.inUseBy == ''\">\r\n                  <mat-checkbox class=\"row-check\" [(ngModel)]=\"ebo.selected\" [color]=\"Primary\" (change)=\"UpdateSnackBar()\"></mat-checkbox>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let do of ebo.dOs\">\r\n                <td *ngIf=\"ShowCell(do.doType)\">{{ do.doType }}</td>\r\n                <td>{{ do.doNaam }}</td>\r\n              </ng-container>\r\n            </tr>\r\n          </table>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-searchproducts .full-width{width:100%}app-beheer-searchproducts .block{flex:auto}app-beheer-searchproducts .selectall{height:50px;margin-bottom:20px}app-beheer-searchproducts .main-window{padding:5px}app-beheer-searchproducts .table-row:hover{background-color:#d3d3d3}app-beheer-searchproducts .ebo-table{width:100%}app-beheer-searchproducts .header-check{top:-9px;position:relative;left:-7px}app-beheer-searchproducts .row-check{position:relative;left:-7px}app-beheer-searchproducts .resultblock{margin:5px}app-beheer-searchproducts .main-block-search{display:flex}app-beheer-searchproducts .zoeken-block{padding-left:10px}app-beheer-searchproducts .selected{font-weight:700}app-beheer-searchproducts .table-row{cursor:pointer}app-beheer-searchproducts .table-row-selected{font-weight:700}app-beheer-searchproducts .mat-form-field-infix{width:auto!important}.mat-simple-snackbar-action{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }], encapsulation: i0.ViewEncapsulation.None });
+BeheerSearchProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerSearchProductsComponent, selector: "app-beheer-searchproducts", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div class=\"main-window\">\r\n  <div>\r\n    <mat-card>\r\n      <div class=\"main-block-search\">\r\n        <div class=\"block\">\r\n          <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>Zoekterm</mat-label>\r\n            <input matInput placeholder=\"bv. Merk Serie\" (keyup)=\"handleKeyUp($event)\" [(ngModel)]=\"ZoekTerm\">\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"zoeken-block\">\r\n          <button mat-raised-button (click)=\"Zoek()\" [disabled]=\"Loading\">Zoeken</button>\r\n        </div>\r\n      </div>\r\n    </mat-card>\r\n\r\n    <div *ngIf=\"Loading\">\r\n      <app-fab-loader></app-fab-loader>\r\n    </div>\r\n\r\n    <div *ngIf=\"!Loading\" class=\"resultblock\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <table class=\"ebo-table\">\r\n            <tr>\r\n              <td>\r\n                <button mat-raised-button (click)=\"SelectAll()\" class=\"selectall\">V</button>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>BOT</mat-label>\r\n                  <input matInput [(ngModel)]=\"BOT\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO1Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO1Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO1Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO1Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO2Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO2Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO2Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO2Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO3Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO3Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO3Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO3Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO4Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO4Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO4Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO4Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>Kenmerk</mat-label>\r\n                  <input matInput [(ngModel)]=\"Kenmerk\">\r\n                </mat-form-field>\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let ebo of GetEbos(false)\" class=\"table-row\" (click)=\"SelectRow(ebo)\">\r\n              <td>\r\n                <div *ngIf=\"ebo.inUseBy == ''\">\r\n                  <mat-checkbox class=\"row-check\" [(ngModel)]=\"ebo.selected\" [color]=\"Primary\" (change)=\"UpdateSnackBar()\"></mat-checkbox>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let do of ebo.dOs\">\r\n                <td *ngIf=\"ShowCell(do.doType)\">{{ do.doType }}</td>\r\n                <td>{{ do.doNaam }}</td>\r\n              </ng-container>\r\n            </tr>\r\n            <tr *ngFor=\"let ebo of GetEbos(true)\" class=\"table-row\" (click)=\"SelectRow(ebo)\">\r\n              <td>\r\n                <div *ngIf=\"ebo.inUseBy == ''\">\r\n                  <mat-checkbox class=\"row-check\" [(ngModel)]=\"ebo.selected\" [color]=\"Primary\" (change)=\"UpdateSnackBar()\"></mat-checkbox>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let do of ebo.dOs\">\r\n                <td *ngIf=\"ShowCell(do.doType)\">{{ do.doType }}</td>\r\n                <td>{{ do.doNaam }}</td>\r\n              </ng-container>\r\n            </tr>\r\n          </table>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-searchproducts .full-width{width:100%}app-beheer-searchproducts .block{flex:auto}app-beheer-searchproducts .selectall{height:50px;margin-bottom:20px}app-beheer-searchproducts .main-window{padding:5px}app-beheer-searchproducts .table-row:hover{background-color:#d3d3d3}app-beheer-searchproducts .ebo-table{width:100%}app-beheer-searchproducts .header-check{top:-9px;position:relative;left:-7px}app-beheer-searchproducts .row-check{position:relative;left:-7px}app-beheer-searchproducts .resultblock{margin:5px}app-beheer-searchproducts .main-block-search{display:flex}app-beheer-searchproducts .zoeken-block{padding-left:10px}app-beheer-searchproducts .selected{font-weight:700}app-beheer-searchproducts .table-row{cursor:pointer}app-beheer-searchproducts .table-row-selected{font-weight:700}app-beheer-searchproducts .mat-form-field-infix{width:auto!important}.mat-simple-snackbar-action{color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerSearchProductsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-searchproducts', encapsulation: ViewEncapsulation.None, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div class=\"main-window\">\r\n  <div>\r\n    <mat-card>\r\n      <div class=\"main-block-search\">\r\n        <div class=\"block\">\r\n          <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n            <mat-label>Zoekterm</mat-label>\r\n            <input matInput placeholder=\"bv. Merk Serie\" (keyup)=\"handleKeyUp($event)\" [(ngModel)]=\"ZoekTerm\">\r\n          </mat-form-field>\r\n        </div>\r\n        <div class=\"zoeken-block\">\r\n          <button mat-raised-button (click)=\"Zoek()\" [disabled]=\"Loading\">Zoeken</button>\r\n        </div>\r\n      </div>\r\n    </mat-card>\r\n\r\n    <div *ngIf=\"Loading\">\r\n      <app-fab-loader></app-fab-loader>\r\n    </div>\r\n\r\n    <div *ngIf=\"!Loading\" class=\"resultblock\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <table class=\"ebo-table\">\r\n            <tr>\r\n              <td>\r\n                <button mat-raised-button (click)=\"SelectAll()\" class=\"selectall\">V</button>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>BOT</mat-label>\r\n                  <input matInput [(ngModel)]=\"BOT\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO1Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO1Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO1Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO1Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO2Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO2Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO2Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO2Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO3Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO3Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO3Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO3Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO4Type</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO4Type\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>DO4Naam</mat-label>\r\n                  <input matInput [(ngModel)]=\"DO4Naam\">\r\n                </mat-form-field>\r\n              </td>\r\n              <td>\r\n                <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n                  <mat-label>Kenmerk</mat-label>\r\n                  <input matInput [(ngModel)]=\"Kenmerk\">\r\n                </mat-form-field>\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let ebo of GetEbos(false)\" class=\"table-row\" (click)=\"SelectRow(ebo)\">\r\n              <td>\r\n                <div *ngIf=\"ebo.inUseBy == ''\">\r\n                  <mat-checkbox class=\"row-check\" [(ngModel)]=\"ebo.selected\" [color]=\"Primary\" (change)=\"UpdateSnackBar()\"></mat-checkbox>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let do of ebo.dOs\">\r\n                <td *ngIf=\"ShowCell(do.doType)\">{{ do.doType }}</td>\r\n                <td>{{ do.doNaam }}</td>\r\n              </ng-container>\r\n            </tr>\r\n            <tr *ngFor=\"let ebo of GetEbos(true)\" class=\"table-row\" (click)=\"SelectRow(ebo)\">\r\n              <td>\r\n                <div *ngIf=\"ebo.inUseBy == ''\">\r\n                  <mat-checkbox class=\"row-check\" [(ngModel)]=\"ebo.selected\" [color]=\"Primary\" (change)=\"UpdateSnackBar()\"></mat-checkbox>\r\n                </div>\r\n              </td>\r\n              <ng-container *ngFor=\"let do of ebo.dOs\">\r\n                <td *ngIf=\"ShowCell(do.doType)\">{{ do.doType }}</td>\r\n                <td>{{ do.doNaam }}</td>\r\n              </ng-container>\r\n            </tr>\r\n          </table>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-searchproducts .full-width{width:100%}app-beheer-searchproducts .block{flex:auto}app-beheer-searchproducts .selectall{height:50px;margin-bottom:20px}app-beheer-searchproducts .main-window{padding:5px}app-beheer-searchproducts .table-row:hover{background-color:#d3d3d3}app-beheer-searchproducts .ebo-table{width:100%}app-beheer-searchproducts .header-check{top:-9px;position:relative;left:-7px}app-beheer-searchproducts .row-check{position:relative;left:-7px}app-beheer-searchproducts .resultblock{margin:5px}app-beheer-searchproducts .main-block-search{display:flex}app-beheer-searchproducts .zoeken-block{padding-left:10px}app-beheer-searchproducts .selected{font-weight:700}app-beheer-searchproducts .table-row{cursor:pointer}app-beheer-searchproducts .table-row-selected{font-weight:700}app-beheer-searchproducts .mat-form-field-infix{width:auto!important}.mat-simple-snackbar-action{color:#fff!important}\n"] }]
@@ -11651,8 +11879,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
     } });
 
 class BeheerImportSetsEigenschapComponent {
-    constructor(ImportSetsService) {
+    constructor(ImportSetsService, ChangeDetectorRef) {
         this.ImportSetsService = ImportSetsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
     }
     ngOnInit() {
     }
@@ -11663,21 +11892,22 @@ class BeheerImportSetsEigenschapComponent {
             base += "#";
         }
         base += this.eigenschap.value + "";
-        this.ImportSetsService.ChangeImportSetValue(base, this.eigenschap.selected);
+        this.ImportSetsService.ChangeImportSetValue(base, this.eigenschap.selected, this.ChangeDetectorRef);
     }
 }
-BeheerImportSetsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEigenschapComponent, deps: [{ token: ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"top-row\">\n  <div class=\"text-div flexauto\" (click)=\"UpdateSelected()\">\n    {{ eigenschap.name }}\n  </div>\n  <div class=\"check-div\">\n    <mat-checkbox [checked]=\"eigenschap.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n  </div>\n</div>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}\n"], dependencies: [{ kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+BeheerImportSetsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEigenschapComponent, deps: [{ token: ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"top-row\">\n  <div class=\"text-div flexauto\" (click)=\"UpdateSelected()\">\n    {{ eigenschap.name }}\n  </div>\n  <div class=\"check-div\">\n    <mat-checkbox [checked]=\"eigenschap.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n  </div>\n</div>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}\n"], dependencies: [{ kind: "component", type: i10$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEigenschapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-eigenschap', template: "<div class=\"top-row\">\n  <div class=\"text-div flexauto\" (click)=\"UpdateSelected()\">\n    {{ eigenschap.name }}\n  </div>\n  <div class=\"check-div\">\n    <mat-checkbox [checked]=\"eigenschap.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n  </div>\n</div>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: ImportSetsService }]; }, propDecorators: { eigenschap: [{
+        }], ctorParameters: function () { return [{ type: ImportSetsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { eigenschap: [{
                 type: Input
             }] } });
 
 class BeheerImportSetsEboComponent {
-    constructor(ImportApiClient) {
+    constructor(ImportApiClient, ImportSetsService) {
         this.ImportApiClient = ImportApiClient;
+        this.ImportSetsService = ImportSetsService;
         this.Opened = false;
         this.Loading = true;
     }
@@ -11692,6 +11922,7 @@ class BeheerImportSetsEboComponent {
                 var request = new BCBImportOpenTempRequest();
                 request.dOs = new Array();
                 request.base = this.ebo.base;
+                request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
                 for (var i = 0; i < array.length; i++) {
                     var newdo = new BCBImportOpenTempDORequest();
                     newdo.naam = array[i].doNaam;
@@ -11709,17 +11940,18 @@ class BeheerImportSetsEboComponent {
         }
     }
 }
-BeheerImportSetsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEboComponent, deps: [{ token: ImportApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEboComponent, deps: [{ token: ImportApiClient }, { token: ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
 BeheerImportSetsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"icon-div\" (click)=\"Open()\">\n    <mat-icon *ngIf=\"!Opened\">expand_more</mat-icon>\n    <mat-icon *ngIf=\"Opened\">expand_less</mat-icon>\n  </div>\n  <div class=\"text-div\">\n    <div class=\"row\">\n      <div class=\"flex-auto text-box\" *ngFor=\"let do of ebo.dOs\">\n        <mat-form-field class=\"full-width\" appearance=\"fill\">\n          <mat-label>{{ do.doType }}</mat-label>\n          <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"Opened\">\n  <div *ngIf=\"Loading\">\n    <app-fab-loader></app-fab-loader>\n  </div>\n  <div *ngIf=\"!Loading\" class=\"props\">\n    <div class=\"opbouw\">Opbouw</div>\n    <div *ngFor=\"let opbouw of BCBImportOpenResponse.bcbImportOpbouwen\">\n      <app-beheer-import-sets-opbouw [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\n    </div>\n\n    <div class=\"opbouw\">Eigenschap</div>\n    <div *ngFor=\"let eigenschap of BCBImportOpenResponse.bcbImportEigenschappen\">\n      <app-beheer-import-sets-eigenschap [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\n    </div>\n  </div>\n</div>\n\n", styles: ["app-beheer-import-sets-ebo .row{display:flex;align-items:center}app-beheer-import-sets-ebo .full-width{width:100%}app-beheer-import-sets-ebo .icon-div{width:22px;height:24px;cursor:pointer}app-beheer-import-sets-ebo .text-div{flex:auto;cursor:pointer}app-beheer-import-sets-ebo .props{padding-left:20px}app-beheer-import-sets-ebo .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}app-beheer-import-sets-ebo .flex-auto{flex:auto}app-beheer-import-sets-ebo .check-div{padding-left:5px}app-beheer-import-sets-ebo .card{margin:3px}app-beheer-import-sets-ebo .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets-ebo .mat-form-field-underline{bottom:0}app-beheer-import-sets-ebo .mat-form-field-infix{width:auto}app-beheer-import-sets-ebo .text-box{padding-left:3px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i4$1.MatFormField; }), selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i4$1.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return FabLoaderComponent; }), selector: "app-fab-loader" }, { kind: "component", type: i0.forwardRef(function () { return BeheerImportSetsOpbouwComponent; }), selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerImportSetsEigenschapComponent; }), selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsEboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-ebo', encapsulation: ViewEncapsulation.None, template: "<div class=\"row\">\n  <div class=\"icon-div\" (click)=\"Open()\">\n    <mat-icon *ngIf=\"!Opened\">expand_more</mat-icon>\n    <mat-icon *ngIf=\"Opened\">expand_less</mat-icon>\n  </div>\n  <div class=\"text-div\">\n    <div class=\"row\">\n      <div class=\"flex-auto text-box\" *ngFor=\"let do of ebo.dOs\">\n        <mat-form-field class=\"full-width\" appearance=\"fill\">\n          <mat-label>{{ do.doType }}</mat-label>\n          <input matInput value=\"{{do.doNaam}}\" [readonly]=\"true\">\n        </mat-form-field>\n      </div>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"Opened\">\n  <div *ngIf=\"Loading\">\n    <app-fab-loader></app-fab-loader>\n  </div>\n  <div *ngIf=\"!Loading\" class=\"props\">\n    <div class=\"opbouw\">Opbouw</div>\n    <div *ngFor=\"let opbouw of BCBImportOpenResponse.bcbImportOpbouwen\">\n      <app-beheer-import-sets-opbouw [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\n    </div>\n\n    <div class=\"opbouw\">Eigenschap</div>\n    <div *ngFor=\"let eigenschap of BCBImportOpenResponse.bcbImportEigenschappen\">\n      <app-beheer-import-sets-eigenschap [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\n    </div>\n  </div>\n</div>\n\n", styles: ["app-beheer-import-sets-ebo .row{display:flex;align-items:center}app-beheer-import-sets-ebo .full-width{width:100%}app-beheer-import-sets-ebo .icon-div{width:22px;height:24px;cursor:pointer}app-beheer-import-sets-ebo .text-div{flex:auto;cursor:pointer}app-beheer-import-sets-ebo .props{padding-left:20px}app-beheer-import-sets-ebo .opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}app-beheer-import-sets-ebo .flex-auto{flex:auto}app-beheer-import-sets-ebo .check-div{padding-left:5px}app-beheer-import-sets-ebo .card{margin:3px}app-beheer-import-sets-ebo .mat-form-field-wrapper{padding-bottom:0}app-beheer-import-sets-ebo .mat-form-field-underline{bottom:0}app-beheer-import-sets-ebo .mat-form-field-infix{width:auto}app-beheer-import-sets-ebo .text-box{padding-left:3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ImportApiClient }]; }, propDecorators: { ebo: [{
+        }], ctorParameters: function () { return [{ type: ImportApiClient }, { type: ImportSetsService }]; }, propDecorators: { ebo: [{
                 type: Input
             }] } });
 class BeheerImportSetsOpbouwComponent {
-    constructor(ImportSetsService) {
+    constructor(ImportSetsService, ChangeDetectorRef) {
         this.ImportSetsService = ImportSetsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
     }
     ngOnInit() {
     }
@@ -11738,15 +11970,15 @@ class BeheerImportSetsOpbouwComponent {
             base += "#";
         }
         base += this.opbouw.value + "";
-        this.ImportSetsService.ChangeImportSetValue(base, this.opbouw.selected);
+        this.ImportSetsService.ChangeImportSetValue(base, this.opbouw.selected, this.ChangeDetectorRef);
     }
 }
-BeheerImportSetsOpbouwComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsOpbouwComponent, deps: [{ token: ImportSetsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<div class=\"top-row\">\n  <div class=\"icon-div\" (click)=\"Toggle()\">\n    <ng-container *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\n    </ng-container>\n    \n  </div>\n  <div class=\"text-div flexauto\" (click)=\"Toggle()\">\n    {{ opbouw.name }}\n  </div>\n  <div class=\"check-div\">\n    <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n  </div>\n</div>\n<div class=\"content\" *ngIf=\"opbouw.open\">\n  <div class=\"ebobox\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\">\n    <app-beheer-import-sets-ebo [ebo]=\"ebo\"></app-beheer-import-sets-ebo>\n  </div>\n</div>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}.ebobox{padding:10px;margin:10px;border:1px solid}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: ["ebo"] }] });
+BeheerImportSetsOpbouwComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsOpbouwComponent, deps: [{ token: ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerImportSetsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: { opbouw: "opbouw" }, ngImport: i0, template: "<div class=\"top-row\">\n  <div class=\"icon-div\" (click)=\"Toggle()\">\n    <ng-container *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\n    </ng-container>\n    \n  </div>\n  <div class=\"text-div flexauto\" (click)=\"Toggle()\">\n    {{ opbouw.name }}\n  </div>\n  <div class=\"check-div\">\n    <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n  </div>\n</div>\n<div class=\"content\" *ngIf=\"opbouw.open\">\n  <div class=\"ebobox\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\">\n    <app-beheer-import-sets-ebo [ebo]=\"ebo\"></app-beheer-import-sets-ebo>\n  </div>\n</div>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}.ebobox{padding:10px;margin:10px;border:1px solid}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: BeheerImportSetsEboComponent, selector: "app-beheer-import-sets-ebo", inputs: ["ebo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsOpbouwComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-opbouw', template: "<div class=\"top-row\">\n  <div class=\"icon-div\" (click)=\"Toggle()\">\n    <ng-container *ngIf=\"opbouw.wizardEBOViewModels != null && opbouw.wizardEBOViewModels.length > 0\">\n      <mat-icon *ngIf=\"!opbouw.open\">expand_more</mat-icon>\n      <mat-icon *ngIf=\"opbouw.open\">expand_less</mat-icon>\n    </ng-container>\n    \n  </div>\n  <div class=\"text-div flexauto\" (click)=\"Toggle()\">\n    {{ opbouw.name }}\n  </div>\n  <div class=\"check-div\">\n    <mat-checkbox [checked]=\"opbouw.selected\" (change)=\"UpdateSelected()\"></mat-checkbox>\n  </div>\n</div>\n<div class=\"content\" *ngIf=\"opbouw.open\">\n  <div class=\"ebobox\" *ngFor=\"let ebo of opbouw.wizardEBOViewModels\">\n    <app-beheer-import-sets-ebo [ebo]=\"ebo\"></app-beheer-import-sets-ebo>\n  </div>\n</div>\n", styles: [".top-row{display:flex;align-items:center}.icon-div{width:22px;height:24px;cursor:pointer}.text-div{cursor:pointer;padding:3px;border-bottom:1px solid lightgray}.text-div:hover{border-bottom:1px solid #000}.card{margin:3px}.flexauto{flex:auto}.ebobox{padding:10px;margin:10px;border:1px solid}\n"] }]
-        }], ctorParameters: function () { return [{ type: ImportSetsService }]; }, propDecorators: { opbouw: [{
+        }], ctorParameters: function () { return [{ type: ImportSetsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { opbouw: [{
                 type: Input
             }] } });
 
@@ -11759,7 +11991,7 @@ class BeheerImportSetsComponent {
         this.ChangeDetectorRef = ChangeDetectorRef;
     }
     ngOnInit() {
-        this.ProductsService.Reload();
+        this.ImportSetsService.LoadImportSets(this.ChangeDetectorRef);
     }
     Wijzig() {
         var dialogRef = this.dialog.open(BeheerImportSetsDialogComponent, {
@@ -11781,11 +12013,15 @@ class BeheerImportSetsComponent {
         return this.ProductsService.Loading() || this.ImportSetsService.LoadingImportSets;
     }
     Open() {
-        this.ImportSetsService.Open(this.ProductsService.BCBProductSelected);
+        this.ImportSetsService.Open(this.ProductsService.BCBProductSelected, this.ChangeDetectorRef);
+    }
+    Reload() {
+        this.ProductsService.Reload(this.ChangeDetectorRef);
     }
     GetProducts() {
+        var _a;
         var array = new Array();
-        var products = this.ProductsService.ProductsViewModel.productViewModels;
+        var products = (_a = this.ProductsService.ProductsViewModel) === null || _a === void 0 ? void 0 : _a.productViewModels;
         if (products != null) {
             for (var i = 0; i < products.length; i++) {
                 if (products[i].importSetId == this.ImportSetsService.GetActiveImportSet().id) {
@@ -11797,10 +12033,10 @@ class BeheerImportSetsComponent {
     }
 }
 BeheerImportSetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsComponent, deps: [{ token: i1$3.MatDialog }, { token: ProductsService }, { token: ImportSetsService }, { token: ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsComponent, selector: "app-beheer-import-sets", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading() && ImportSetsService.BCBImportSetsViewModel != null && ProductsService.ProductsViewModel != null\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}.opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }] });
+BeheerImportSetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerImportSetsComponent, selector: "app-beheer-import-sets", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading()\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (selectionChange)=\"Reload()\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}.opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerImportSetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-import-sets', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading() && ImportSetsService.BCBImportSetsViewModel != null && ProductsService.ProductsViewModel != null\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}.opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
+            args: [{ selector: 'app-beheer-import-sets', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading()\" class=\"main-content\">\r\n  <mat-card>\r\n    <div class=\"toolbar\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Import set</mat-label>\r\n          <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (selectionChange)=\"Reload()\">\r\n            <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n              {{importset.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Wijzig()\">\r\n          Wijzig\r\n        </button>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Toevoegen()\">\r\n          Toevoegen\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"toolbar\" *ngIf=\"GetProducts().length > 0\">\r\n      <div class=\"toolbar-item\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Product</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.ProductSelected\">\r\n            <mat-option *ngFor=\"let product of GetProducts()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"toolbar-item flex-auto\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>BCBProduct</mat-label>\r\n          <mat-select [(ngModel)]=\"ProductsService.BCBProductSelected\">\r\n            <mat-option *ngFor=\"let product of ProductsService.GetBCBProductsSelected()\" [value]=\"product.id\">\r\n              {{product.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"\">\r\n        <button mat-raised-button (click)=\"Open()\">\r\n          Open\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n\r\n  <div class=\"main-block\">\r\n    <div class=\"flex-auto block\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div *ngIf=\"ImportSetsService.LoadingOpen\">\r\n            <app-fab-loader></app-fab-loader>\r\n          </div>\r\n          <div *ngIf=\"!ImportSetsService.LoadingOpen && ImportSetsService.BCBImportOpenResponse != null\">\r\n            <h3 class=\"title\">{{ ImportSetsService.BCBImportOpenResponse?.bcbeboViewModel?.name }}</h3>\r\n\r\n            <div class=\"opbouw\">Opbouw</div>\r\n            <app-beheer-import-sets-opbouw *ngFor=\"let opbouw of ImportSetsService.BCBImportOpenResponse.bcbImportOpbouwen\" [opbouw]=\"opbouw\"></app-beheer-import-sets-opbouw>\r\n\r\n            <div class=\"opbouw\">Eigenschap</div>\r\n            <app-beheer-import-sets-eigenschap *ngFor=\"let eigenschap of ImportSetsService.BCBImportOpenResponse.bcbImportEigenschappen\" [eigenschap]=\"eigenschap\"></app-beheer-import-sets-eigenschap>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n\r\n    </div>\r\n    <div class=\"importset-block block\">\r\n      <mat-card>\r\n        <mat-card-title>{{ ImportSetsService.GetActiveImportSet().name }}</mat-card-title>\r\n        <mat-card-content>\r\n          <mat-card class=\"value-block\" *ngFor=\"let value of ImportSetsService.GetActiveImportSet().bcbImportSetValueViewModels\">\r\n            <mat-card-content>\r\n              {{ value.value }}\r\n            </mat-card-content>\r\n          </mat-card>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-content{padding:5px}.flex-auto{flex:auto}.full-width{width:100%}.value-block{margin:3px}.importset-block{min-width:300px}.full-height{height:100%}.main-block{display:flex}.block{margin:5px}.toolbar{display:flex}.toolbar-item{margin-right:3px}.card{margin:3px}.opbouw{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: ProductsService }, { type: ImportSetsService }, { type: ImportApiClient }, { type: i0.ChangeDetectorRef }]; } });
 
 class FabBcbProductComponent {
@@ -11816,21 +12052,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class BeheerEboKoppelComponent {
-    constructor(EBOKoppelApiClient, ImportSetsService, dialog) {
+    constructor(EBOKoppelApiClient, ImportSetsService, dialog, ChangeDetectorRef) {
         this.EBOKoppelApiClient = EBOKoppelApiClient;
         this.ImportSetsService = ImportSetsService;
         this.dialog = dialog;
-        this.Loading = true;
-        this.LoadModel();
+        this.ChangeDetectorRef = ChangeDetectorRef;
+        this.LoadingModel = false;
     }
     ngOnInit() {
+        this.ImportSetsService.LoadImportSets(this.ChangeDetectorRef);
+    }
+    Loading() {
+        return this.ImportSetsService.LoadingImportSets || this.LoadingModel;
     }
     Connect(id) {
         var dialogRef = this.dialog.open(BeheerProductsKoppelFilteroptionDailogComponent);
         dialogRef.afterClosed().subscribe((result) => {
             if (result != null) {
                 if (result.filteroption != null && result.filteroption > 0) {
-                    this.Loading = true;
+                    this.LoadingModel = true;
                     var request = new KoppelEBOOptieRequest();
                     request.bcbebodoId = id;
                     request.filterOptionId = result.filteroption;
@@ -11873,7 +12113,7 @@ class BeheerEboKoppelComponent {
         });
         dialogRef.afterClosed().subscribe((result) => {
             if (result != null && result > 0) {
-                this.Loading = true;
+                this.LoadingModel = true;
                 var request = new ConnectEBODOCategoryRequest();
                 request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
                 request.bcbebodoId = id;
@@ -11888,25 +12128,25 @@ class BeheerEboKoppelComponent {
     }
     LoadModel() {
         if (this.ImportSetsService.BCBImportSetSelected > 0) {
-            this.Loading = true;
+            this.LoadingModel = true;
             var model = new EBOConnectRequestModel();
             model.importSetId = this.ImportSetsService.BCBImportSetSelected;
             this.EBOKoppelApiClient.getEBOKoppelViewModel(model).subscribe((model) => {
                 this.EBOKoppelViewModel = model;
-                this.Loading = false;
+                this.LoadingModel = false;
             });
         }
         else {
-            this.Loading = false;
+            this.LoadingModel = false;
         }
     }
 }
-BeheerEboKoppelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: EBOKoppelApiClient }, { token: ImportSetsService }, { token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-BeheerEboKoppelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerEboKoppelComponent, selector: "app-beheer-ebo-koppel", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\r\n          <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n            {{importset.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(do.id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+BeheerEboKoppelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: EBOKoppelApiClient }, { token: ImportSetsService }, { token: i1$3.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerEboKoppelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerEboKoppelComponent, selector: "app-beheer-ebo-koppel", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\r\n          <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n            {{importset.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(do.id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerEboKoppelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-ebo-koppel', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\r\n          <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n            {{importset.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(do.id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: EBOKoppelApiClient }, { type: ImportSetsService }, { type: i1$3.MatDialog }]; } });
+            args: [{ selector: 'app-beheer-ebo-koppel', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\" *ngIf=\"!ImportSetsService.LoadingImportSets\">\r\n        <mat-label>Import set</mat-label>\r\n        <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\" (change)=\"LoadModel()\">\r\n          <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n            {{importset.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <button mat-raised-button (click)=\"LoadModel()\">\r\n        Refresh\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <mat-accordion *ngIf=\"EBOKoppelViewModel != null\">\r\n    <mat-expansion-panel *ngFor=\"let type of EBOKoppelViewModel.eboKoppelTypeViewModels\">\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{ type.type }}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          {{ type.namen.length }} EBO(s)\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let do of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ do.doNaam }}\r\n              </div>\r\n              <div *ngIf=\"!do.connected\">\r\n                <button mat-raised-button (click)=\"Connect(do.id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(do.id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(do.id, do.doType, do.doNaam)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </mat-expansion-panel>\r\n\r\n  </mat-accordion>\r\n</div>\r\n", styles: [".card{margin:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: EBOKoppelApiClient }, { type: ImportSetsService }, { type: i1$3.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
 
 class BeheerCategoriesComponent {
     constructor(CategoriesApiClient) {
@@ -11940,22 +12180,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: CategoriesApiClient }]; } });
 
 class FabStartComponent {
-    constructor(FabrikantenService, TranslateService, ChangeDetectorRef) {
+    constructor(FabrikantenService, TranslateService, ChangeDetectorRef, router) {
         this.FabrikantenService = FabrikantenService;
         this.TranslateService = TranslateService;
         this.ChangeDetectorRef = ChangeDetectorRef;
+        this.router = router;
+        //this.router.navigateByUrl('/beheer');
     }
     ngOnInit() {
         this.FabrikantenService.LoadFabrikantenViewModel(this.ChangeDetectorRef);
         this.TranslateService.LoadTranslations(this.ChangeDetectorRef);
     }
 }
-FabStartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabStartComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FabStartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabStartComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
 FabStartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabStartComponent, selector: "app-fab-start", ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\n  <mat-card class=\"loader-card\">\n    <mat-card-content>\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [".loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.loader{display:flex;align-items:center;width:100%;height:100%;justify-content:center;z-index:20;background-color:#ffffffb3;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabStartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-fab-start', template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\n  <mat-card class=\"loader-card\">\n    <mat-card-content>\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [".loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.loader{display:flex;align-items:center;width:100%;height:100%;justify-content:center;z-index:20;background-color:#ffffffb3;top:0;left:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; } });
+        }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Router }]; } });
 
 class FabCategoryTileComponent {
     constructor(FabrikantenService, sanitization, ChangeDetectorRef, TranslateService) {
@@ -12114,7 +12356,7 @@ class BeheerTranslateComponent {
     }
 }
 BeheerTranslateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerTranslateComponent, deps: [{ token: TranslateService }, { token: TranslateApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerTranslateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerTranslateComponent, selector: "app-beheer-translate", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<app-fab-loader *ngIf=\"TranslateService.Loading\"></app-fab-loader>\r\n\r\n<div *ngIf=\"!TranslateService.Loading\">\r\n  <mat-card class=\"main-bar\">\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>Category</mat-label>\r\n        <mat-select [(ngModel)]=\"TranslateService.SelectedCategory\">\r\n          <mat-option *ngFor=\"let cat of TranslateService.Categories\" [value]=\"cat\">\r\n            {{cat}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-raised-button (click)=\"Export()\">\r\n        Export\r\n      </button>\r\n      <button mat-raised-button (click)=\"Import()\">\r\n        Import\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <mat-card class=\"main\">\r\n    <mat-card-content>\r\n      <table class=\"full-width\">\r\n        <ng-container *ngIf=\"TranslateService.GetActiveCategorie() != null\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              {{ TranslateService.GetActiveCategorie().name }}\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let key of TranslateService.GetActiveCategorie().keys\">\r\n            <td>{{ key.id }}</td>\r\n            <td>{{ key.name }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValue(language, TranslateService.GetActiveCategorie().name, key.name) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Categories'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Categories\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let cat of GetCategoryEntries()\">\r\n            <td>{{ cat.categoryId }}</td>\r\n            <td>{{ cat.categoryName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueCategory(language, cat.categoryId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Products'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Products\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let prod of GetProductEntries()\">\r\n            <td>{{ prod.productId }}</td>\r\n            <td>{{ prod.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueProduct(language, prod.productId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Filter'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Filters\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <ng-container *ngFor=\"let filter of GetFilterEntries()\">\r\n            <tr>\r\n              <td class=\"cat-row\">{{ filter.filterId }}</td>\r\n              <td class=\"cat-row\">{{ filter.filterName }}</td>\r\n              <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n                {{ TranslateService.GetValueFilter(language, filter.filterId) }}\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let option of GetFilterOptionEntries(filter.filterId)\">\r\n              <td>{{ option.filterOptionId }}</td>\r\n              <td>{{ option.filterOptionName }}</td>\r\n              <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n                {{ TranslateService.GetValueFilterOption(language, option.filterOptionId) }}\r\n              </td>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Description'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Description\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let description of GetDescriptionEntries()\">\r\n            <td>{{ description.bcbProductId }}</td>\r\n            <td>{{ description.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueDescription(language, description.bcbProductId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Afbeelding'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Afbeelding\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let afbeelding of GetAfbeeldingEntries()\">\r\n            <td>{{ afbeelding.bcbProductAfbeeldingId }}</td>\r\n            <td>{{ afbeelding.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueAfbeelding(language, afbeelding.bcbProductAfbeeldingId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n", styles: [".cat-row{font-weight:700;border-bottom:1px solid #000;padding-top:20px}.main{margin:20px;max-height:calc(100vH - 235px);overflow:auto}.main-bar{margin:20px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabFlagComponent, selector: "fab-flag", inputs: ["country"] }] });
+BeheerTranslateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerTranslateComponent, selector: "app-beheer-translate", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<app-fab-loader *ngIf=\"TranslateService.Loading\"></app-fab-loader>\r\n\r\n<div *ngIf=\"!TranslateService.Loading\">\r\n  <mat-card class=\"main-bar\">\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>Category</mat-label>\r\n        <mat-select [(ngModel)]=\"TranslateService.SelectedCategory\">\r\n          <mat-option *ngFor=\"let cat of TranslateService.Categories\" [value]=\"cat\">\r\n            {{cat}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-raised-button (click)=\"Export()\">\r\n        Export\r\n      </button>\r\n      <button mat-raised-button (click)=\"Import()\">\r\n        Import\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <mat-card class=\"main\">\r\n    <mat-card-content>\r\n      <table class=\"full-width\">\r\n        <ng-container *ngIf=\"TranslateService.GetActiveCategorie() != null\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              {{ TranslateService.GetActiveCategorie().name }}\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let key of TranslateService.GetActiveCategorie().keys\">\r\n            <td>{{ key.id }}</td>\r\n            <td>{{ key.name }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValue(language, TranslateService.GetActiveCategorie().name, key.name) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Categories'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Categories\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let cat of GetCategoryEntries()\">\r\n            <td>{{ cat.categoryId }}</td>\r\n            <td>{{ cat.categoryName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueCategory(language, cat.categoryId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Products'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Products\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let prod of GetProductEntries()\">\r\n            <td>{{ prod.productId }}</td>\r\n            <td>{{ prod.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueProduct(language, prod.productId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Filter'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Filters\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <ng-container *ngFor=\"let filter of GetFilterEntries()\">\r\n            <tr>\r\n              <td class=\"cat-row\">{{ filter.filterId }}</td>\r\n              <td class=\"cat-row\">{{ filter.filterName }}</td>\r\n              <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n                {{ TranslateService.GetValueFilter(language, filter.filterId) }}\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let option of GetFilterOptionEntries(filter.filterId)\">\r\n              <td>{{ option.filterOptionId }}</td>\r\n              <td>{{ option.filterOptionName }}</td>\r\n              <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n                {{ TranslateService.GetValueFilterOption(language, option.filterOptionId) }}\r\n              </td>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Description'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Description\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let description of GetDescriptionEntries()\">\r\n            <td>{{ description.bcbProductId }}</td>\r\n            <td>{{ description.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueDescription(language, description.bcbProductId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Afbeelding'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Afbeelding\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let afbeelding of GetAfbeeldingEntries()\">\r\n            <td>{{ afbeelding.bcbProductAfbeeldingId }}</td>\r\n            <td>{{ afbeelding.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueAfbeelding(language, afbeelding.bcbProductAfbeeldingId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n", styles: [".cat-row{font-weight:700;border-bottom:1px solid #000;padding-top:20px}.main{margin:20px;max-height:calc(100vH - 235px);overflow:auto}.main-bar{margin:20px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$2.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabFlagComponent, selector: "fab-flag", inputs: ["country"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerTranslateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-translate', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<app-fab-loader *ngIf=\"TranslateService.Loading\"></app-fab-loader>\r\n\r\n<div *ngIf=\"!TranslateService.Loading\">\r\n  <mat-card class=\"main-bar\">\r\n    <mat-card-content>\r\n      <mat-form-field appearance=\"fill\">\r\n        <mat-label>Category</mat-label>\r\n        <mat-select [(ngModel)]=\"TranslateService.SelectedCategory\">\r\n          <mat-option *ngFor=\"let cat of TranslateService.Categories\" [value]=\"cat\">\r\n            {{cat}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n      <button mat-raised-button (click)=\"Export()\">\r\n        Export\r\n      </button>\r\n      <button mat-raised-button (click)=\"Import()\">\r\n        Import\r\n      </button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <mat-card class=\"main\">\r\n    <mat-card-content>\r\n      <table class=\"full-width\">\r\n        <ng-container *ngIf=\"TranslateService.GetActiveCategorie() != null\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              {{ TranslateService.GetActiveCategorie().name }}\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let key of TranslateService.GetActiveCategorie().keys\">\r\n            <td>{{ key.id }}</td>\r\n            <td>{{ key.name }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValue(language, TranslateService.GetActiveCategorie().name, key.name) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Categories'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Categories\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let cat of GetCategoryEntries()\">\r\n            <td>{{ cat.categoryId }}</td>\r\n            <td>{{ cat.categoryName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueCategory(language, cat.categoryId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Products'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Products\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let prod of GetProductEntries()\">\r\n            <td>{{ prod.productId }}</td>\r\n            <td>{{ prod.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueProduct(language, prod.productId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Filter'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Filters\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <ng-container *ngFor=\"let filter of GetFilterEntries()\">\r\n            <tr>\r\n              <td class=\"cat-row\">{{ filter.filterId }}</td>\r\n              <td class=\"cat-row\">{{ filter.filterName }}</td>\r\n              <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n                {{ TranslateService.GetValueFilter(language, filter.filterId) }}\r\n              </td>\r\n            </tr>\r\n            <tr *ngFor=\"let option of GetFilterOptionEntries(filter.filterId)\">\r\n              <td>{{ option.filterOptionId }}</td>\r\n              <td>{{ option.filterOptionName }}</td>\r\n              <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n                {{ TranslateService.GetValueFilterOption(language, option.filterOptionId) }}\r\n              </td>\r\n            </tr>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Description'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Description\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let description of GetDescriptionEntries()\">\r\n            <td>{{ description.bcbProductId }}</td>\r\n            <td>{{ description.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueDescription(language, description.bcbProductId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"TranslateService.SelectedCategory == 'Afbeelding'\">\r\n          <tr>\r\n            <td colspan=\"2\" class=\"cat-row\">\r\n              Afbeelding\r\n            </td>\r\n            <td class=\"cat-row\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              <fab-flag [country]=\"language.flag\"></fab-flag> {{ language.name }}\r\n            </td>\r\n          </tr>\r\n          <tr *ngFor=\"let afbeelding of GetAfbeeldingEntries()\">\r\n            <td>{{ afbeelding.bcbProductAfbeeldingId }}</td>\r\n            <td>{{ afbeelding.productName }}</td>\r\n            <td *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\r\n              {{ TranslateService.GetValueAfbeelding(language, afbeelding.bcbProductAfbeeldingId) }}\r\n            </td>\r\n          </tr>\r\n        </ng-container>\r\n      </table>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n", styles: [".cat-row{font-weight:700;border-bottom:1px solid #000;padding-top:20px}.main{margin:20px;max-height:calc(100vH - 235px);overflow:auto}.main-bar{margin:20px}\n"] }]
@@ -12396,5 +12638,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwOptieFilterOptionViewModel, BCBOpbouwOptieViewModel, BCBOpbouwViewModel, BCBProductEigenschapOptieViewModel, BCBProductEigenschapViewModel, BCBProductOpbouwOptieViewModel, BCBProductOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ConnectBCBEigenschapOptieCategoryRequest, ConnectBCBEigenschapRangeInputRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectManyEBODORequest, ConnectManyEBORequest, ConnectManyNameRequest, ConnectManyNameResponse, ConnectManyPreviewContainerResponse, ConnectManyPreviewEBOResponse, ConnectManyPreviewOptieResponse, ConnectManyPreviewRequest, ConnectManyPreviewResponse, ConnectOpbouwOptieRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenViewModel, FilterOptionViewModel, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreOpbouwOptieRequest, ImportApiClient, KoppelEBOOptieRequest, KoppelEBOOptieResponse, KoppelEigenschapOptieRequest, KoppelEigenschapOptieResponse, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsViewModel, RangeInputViewModel, ReadExportRequest, RemoveOpbouwOptieRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectCategoryRequest, SelectFilterOptionRequest, SelectProductRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
+export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ConnectBCBEigenschapOptieCategoryRequest, ConnectBCBEigenschapOptieLocation, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectEigenschapOptieResponse, ConnectManyEBODORequest, ConnectManyEBORequest, ConnectManyNameRequest, ConnectManyNameResponse, ConnectManyPreviewContainerResponse, ConnectManyPreviewEBOResponse, ConnectManyPreviewRequest, ConnectManyPreviewResponse, ConnectOpbouwOptieRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenViewModel, FilterOptionViewModel, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreOpbouwOptieRequest, ImportApiClient, KoppelEBOOptieRequest, KoppelEBOOptieResponse, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveOpbouwOptieRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectCategoryRequest, SelectFilterOptionRequest, SelectProductRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
 //# sourceMappingURL=fabrikantencore.mjs.map