fabrikantencore 2.1.18 → 2.2.2

package/fesm2015/fabrikantencore.mjs

@@ -10,7 +10,7 @@ import * as i6 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { mergeMap, catchError } from 'rxjs/operators';
 import { throwError, of, Observable, BehaviorSubject } from 'rxjs';
-import * as i7 from '@angular/material/button';
+import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$1 from '@angular/material/form-field';
 import * as i5 from '@angular/material/input';
@@ -21,7 +21,7 @@ import * as i1$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$3 from '@angular/cdk/clipboard';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i7$1 from '@angular/material/tooltip';
+import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatListModule } from '@angular/material/list';
 import * as i9 from '@angular/material/select';
@@ -35,7 +35,7 @@ import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i8 from '@angular/material/tabs';
+import * as i8$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i9$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -2891,10 +2891,10 @@ class ProductsApiClient {
         }
         return of(null);
     }
-    ignoreBCBOpbouw(pConnectOpbouwRequest) {
+    ignoreBCBOpbouw(pIgnoreOpbouwRequest) {
         let url_ = this.baseUrl + "/api/products/ignorebcbopbouw";
         url_ = url_.replace(/[?&]$/, "");
-        const content_ = JSON.stringify(pConnectOpbouwRequest);
+        const content_ = JSON.stringify(pIgnoreOpbouwRequest);
         let options_ = {
             body: content_,
             observe: "response",
@@ -4615,6 +4615,11 @@ class RangeInputViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            if (Array.isArray(_data["requiresRangeInputFilterOptions"])) {
+                this.requiresRangeInputFilterOptions = [];
+                for (let item of _data["requiresRangeInputFilterOptions"])
+                    this.requiresRangeInputFilterOptions.push(RangeInputFilterOptionRequiredViewModel.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
@@ -4627,6 +4632,47 @@ class RangeInputViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        if (Array.isArray(this.requiresRangeInputFilterOptions)) {
+            data["requiresRangeInputFilterOptions"] = [];
+            for (let item of this.requiresRangeInputFilterOptions)
+                data["requiresRangeInputFilterOptions"].push(item.toJSON());
+        }
+        return data;
+    }
+}
+class RangeInputFilterOptionRequiredViewModel {
+    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.requiredFilterOptionId = _data["requiredFilterOptionId"];
+            this.requiredFilterOptionName = _data["requiredFilterOptionName"];
+            this.requiredFilterName = _data["requiredFilterName"];
+            this.affectedRangeInputId = _data["affectedRangeInputId"];
+            this.affectedRangeInputName = _data["affectedRangeInputName"];
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new RangeInputFilterOptionRequiredViewModel();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["id"] = this.id;
+        data["requiredFilterOptionId"] = this.requiredFilterOptionId;
+        data["requiredFilterOptionName"] = this.requiredFilterOptionName;
+        data["requiredFilterName"] = this.requiredFilterName;
+        data["affectedRangeInputId"] = this.affectedRangeInputId;
+        data["affectedRangeInputName"] = this.affectedRangeInputName;
         return data;
     }
 }
@@ -5148,6 +5194,7 @@ class FabrikantenViewModel {
     init(_data) {
         if (_data) {
             this.sessionId = _data["sessionId"];
+            this.checksum = _data["checksum"];
             this.bcbWebserviceURLBase = _data["bcbWebserviceURLBase"];
             this.hideBreadcrumbInIframe = _data["hideBreadcrumbInIframe"];
             this.hideInformationTab = _data["hideInformationTab"];
@@ -5186,6 +5233,7 @@ class FabrikantenViewModel {
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["sessionId"] = this.sessionId;
+        data["checksum"] = this.checksum;
         data["bcbWebserviceURLBase"] = this.bcbWebserviceURLBase;
         data["hideBreadcrumbInIframe"] = this.hideBreadcrumbInIframe;
         data["hideInformationTab"] = this.hideInformationTab;
@@ -5371,11 +5419,17 @@ class FabrikantenFilterViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            this.description = _data["description"];
             this.filterType = _data["filterType"];
             this.hidden = _data["hidden"];
             this.blocksProductSelect = _data["blocksProductSelect"];
             this.required = _data["required"];
             this.selectedOption = _data["selectedOption"];
+            if (Array.isArray(_data["selectedOptions"])) {
+                this.selectedOptions = [];
+                for (let item of _data["selectedOptions"])
+                    this.selectedOptions.push(item);
+            }
             this.selectedColour = _data["selectedColour"];
             if (Array.isArray(_data["options"])) {
                 this.options = [];
@@ -5394,11 +5448,17 @@ class FabrikantenFilterViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        data["description"] = this.description;
         data["filterType"] = this.filterType;
         data["hidden"] = this.hidden;
         data["blocksProductSelect"] = this.blocksProductSelect;
         data["required"] = this.required;
         data["selectedOption"] = this.selectedOption;
+        if (Array.isArray(this.selectedOptions)) {
+            data["selectedOptions"] = [];
+            for (let item of this.selectedOptions)
+                data["selectedOptions"].push(item);
+        }
         data["selectedColour"] = this.selectedColour;
         if (Array.isArray(this.options)) {
             data["options"] = [];
@@ -5412,6 +5472,7 @@ var FilterType;
 (function (FilterType) {
     FilterType[FilterType["Dropdown"] = 1] = "Dropdown";
     FilterType[FilterType["ColourSelector"] = 2] = "ColourSelector";
+    FilterType[FilterType["MultiSelect"] = 3] = "MultiSelect";
 })(FilterType || (FilterType = {}));
 class FabrikantenFilterOptionViewModel {
     constructor(data) {
@@ -5427,6 +5488,7 @@ class FabrikantenFilterOptionViewModel {
             this.id = _data["id"];
             this.name = _data["name"];
             this.colour = _data["colour"];
+            this.hidden = _data["hidden"];
         }
     }
     static fromJS(data) {
@@ -5440,6 +5502,7 @@ class FabrikantenFilterOptionViewModel {
         data["id"] = this.id;
         data["name"] = this.name;
         data["colour"] = this.colour;
+        data["hidden"] = this.hidden;
         return data;
     }
 }
@@ -5458,6 +5521,7 @@ class FabrikantenRangeInputViewModel {
             this.name = _data["name"];
             this.value = _data["value"];
             this.required = _data["required"];
+            this.hidden = _data["hidden"];
             this.typeField = _data["typeField"];
             this.minimum = _data["minimum"];
             this.maximum = _data["maximum"];
@@ -5477,6 +5541,7 @@ class FabrikantenRangeInputViewModel {
         data["name"] = this.name;
         data["value"] = this.value;
         data["required"] = this.required;
+        data["hidden"] = this.hidden;
         data["typeField"] = this.typeField;
         data["minimum"] = this.minimum;
         data["maximum"] = this.maximum;
@@ -5498,6 +5563,7 @@ class FabrikantenProductViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            this.imagePath = _data["imagePath"];
             this.urlName = _data["urlName"];
             this.textureBaseViewModel = _data["textureBaseViewModel"] ? FabrikantenTextureBaseViewModel.fromJS(_data["textureBaseViewModel"]) : undefined;
             if (Array.isArray(_data["fabrikantenBCBProductViewModels"])) {
@@ -5517,6 +5583,7 @@ class FabrikantenProductViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        data["imagePath"] = this.imagePath;
         data["urlName"] = this.urlName;
         data["textureBaseViewModel"] = this.textureBaseViewModel ? this.textureBaseViewModel.toJSON() : undefined;
         if (Array.isArray(this.fabrikantenBCBProductViewModels)) {
@@ -5718,12 +5785,28 @@ class FabrikantenBestekViewModel {
     }
     init(_data) {
         if (_data) {
+            this.checksum = _data["checksum"];
             this.stabu = _data["stabu"];
             this.suf = _data["suf"];
             this.osfhtml = _data["osfhtml"];
             this.vrijBestekHTML = _data["vrijBestekHTML"];
             this.wuid = _data["wuid"];
             this.instantieNaam = _data["instantieNaam"];
+            if (Array.isArray(_data["dynamicDisplayValues"])) {
+                this.dynamicDisplayValues = [];
+                for (let item of _data["dynamicDisplayValues"])
+                    this.dynamicDisplayValues.push(DynamicDisplayValueViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["dynamicRangeInputs"])) {
+                this.dynamicRangeInputs = [];
+                for (let item of _data["dynamicRangeInputs"])
+                    this.dynamicRangeInputs.push(DynamicRangeInputViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["dynamicFilters"])) {
+                this.dynamicFilters = [];
+                for (let item of _data["dynamicFilters"])
+                    this.dynamicFilters.push(DynamicFiltersViewModel.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
@@ -5734,12 +5817,168 @@ class FabrikantenBestekViewModel {
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
+        data["checksum"] = this.checksum;
         data["stabu"] = this.stabu;
         data["suf"] = this.suf;
         data["osfhtml"] = this.osfhtml;
         data["vrijBestekHTML"] = this.vrijBestekHTML;
         data["wuid"] = this.wuid;
         data["instantieNaam"] = this.instantieNaam;
+        if (Array.isArray(this.dynamicDisplayValues)) {
+            data["dynamicDisplayValues"] = [];
+            for (let item of this.dynamicDisplayValues)
+                data["dynamicDisplayValues"].push(item.toJSON());
+        }
+        if (Array.isArray(this.dynamicRangeInputs)) {
+            data["dynamicRangeInputs"] = [];
+            for (let item of this.dynamicRangeInputs)
+                data["dynamicRangeInputs"].push(item.toJSON());
+        }
+        if (Array.isArray(this.dynamicFilters)) {
+            data["dynamicFilters"] = [];
+            for (let item of this.dynamicFilters)
+                data["dynamicFilters"].push(item.toJSON());
+        }
+        return data;
+    }
+}
+class DynamicDisplayValueViewModel {
+    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"];
+            this.value = _data["value"];
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new DynamicDisplayValueViewModel();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["name"] = this.name;
+        data["value"] = this.value;
+        return data;
+    }
+}
+class DynamicRangeInputViewModel {
+    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(item);
+            }
+            this.maximum = _data["maximum"];
+            this.minimum = _data["minimum"];
+            this.inclusiefMaximum = _data["inclusiefMaximum"];
+            this.inclusiefMinimum = _data["inclusiefMinimum"];
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new DynamicRangeInputViewModel();
+        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);
+        }
+        data["maximum"] = this.maximum;
+        data["minimum"] = this.minimum;
+        data["inclusiefMaximum"] = this.inclusiefMaximum;
+        data["inclusiefMinimum"] = this.inclusiefMinimum;
+        return data;
+    }
+}
+class DynamicFiltersViewModel {
+    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["filters"])) {
+                this.filters = [];
+                for (let item of _data["filters"])
+                    this.filters.push(DynamicFilterViewModel.fromJS(item));
+            }
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new DynamicFiltersViewModel();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        if (Array.isArray(this.filters)) {
+            data["filters"] = [];
+            for (let item of this.filters)
+                data["filters"].push(item.toJSON());
+        }
+        return data;
+    }
+}
+class DynamicFilterViewModel {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            this.filterId = _data["filterId"];
+            if (Array.isArray(_data["filterOptionsAllowed"])) {
+                this.filterOptionsAllowed = [];
+                for (let item of _data["filterOptionsAllowed"])
+                    this.filterOptionsAllowed.push(item);
+            }
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new DynamicFilterViewModel();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["filterId"] = this.filterId;
+        if (Array.isArray(this.filterOptionsAllowed)) {
+            data["filterOptionsAllowed"] = [];
+            for (let item of this.filterOptionsAllowed)
+                data["filterOptionsAllowed"].push(item);
+        }
         return data;
     }
 }
@@ -5780,11 +6019,27 @@ class Fabrikanten3DViewModel {
     }
     init(_data) {
         if (_data) {
+            this.checksum = _data["checksum"];
             this.wuid = _data["wuid"];
             this.instantieNaam = _data["instantieNaam"];
             this.webGLJSON = _data["webGLJSON"];
             this.nativeRFA = _data["nativeRFA"];
             this.snedes = _data["snedes"];
+            if (Array.isArray(_data["dynamicDisplayValues"])) {
+                this.dynamicDisplayValues = [];
+                for (let item of _data["dynamicDisplayValues"])
+                    this.dynamicDisplayValues.push(DynamicDisplayValueViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["dynamicRangeInputs"])) {
+                this.dynamicRangeInputs = [];
+                for (let item of _data["dynamicRangeInputs"])
+                    this.dynamicRangeInputs.push(DynamicRangeInputViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["dynamicFilters"])) {
+                this.dynamicFilters = [];
+                for (let item of _data["dynamicFilters"])
+                    this.dynamicFilters.push(DynamicFiltersViewModel.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
@@ -5795,11 +6050,27 @@ class Fabrikanten3DViewModel {
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
+        data["checksum"] = this.checksum;
         data["wuid"] = this.wuid;
         data["instantieNaam"] = this.instantieNaam;
         data["webGLJSON"] = this.webGLJSON;
         data["nativeRFA"] = this.nativeRFA;
         data["snedes"] = this.snedes;
+        if (Array.isArray(this.dynamicDisplayValues)) {
+            data["dynamicDisplayValues"] = [];
+            for (let item of this.dynamicDisplayValues)
+                data["dynamicDisplayValues"].push(item.toJSON());
+        }
+        if (Array.isArray(this.dynamicRangeInputs)) {
+            data["dynamicRangeInputs"] = [];
+            for (let item of this.dynamicRangeInputs)
+                data["dynamicRangeInputs"].push(item.toJSON());
+        }
+        if (Array.isArray(this.dynamicFilters)) {
+            data["dynamicFilters"] = [];
+            for (let item of this.dynamicFilters)
+                data["dynamicFilters"].push(item.toJSON());
+        }
         return data;
     }
 }
@@ -5842,11 +6113,27 @@ class FabrikantenSVGViewModel {
     }
     init(_data) {
         if (_data) {
+            this.checksum = _data["checksum"];
             this.wuid = _data["wuid"];
             this.instantieNaam = _data["instantieNaam"];
             this.svg = _data["svg"];
             this.nativeRFA = _data["nativeRFA"];
             this.snedes = _data["snedes"];
+            if (Array.isArray(_data["dynamicDisplayValues"])) {
+                this.dynamicDisplayValues = [];
+                for (let item of _data["dynamicDisplayValues"])
+                    this.dynamicDisplayValues.push(DynamicDisplayValueViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["dynamicRangeInputs"])) {
+                this.dynamicRangeInputs = [];
+                for (let item of _data["dynamicRangeInputs"])
+                    this.dynamicRangeInputs.push(DynamicRangeInputViewModel.fromJS(item));
+            }
+            if (Array.isArray(_data["dynamicFilters"])) {
+                this.dynamicFilters = [];
+                for (let item of _data["dynamicFilters"])
+                    this.dynamicFilters.push(DynamicFiltersViewModel.fromJS(item));
+            }
         }
     }
     static fromJS(data) {
@@ -5857,11 +6144,27 @@ class FabrikantenSVGViewModel {
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
+        data["checksum"] = this.checksum;
         data["wuid"] = this.wuid;
         data["instantieNaam"] = this.instantieNaam;
         data["svg"] = this.svg;
         data["nativeRFA"] = this.nativeRFA;
         data["snedes"] = this.snedes;
+        if (Array.isArray(this.dynamicDisplayValues)) {
+            data["dynamicDisplayValues"] = [];
+            for (let item of this.dynamicDisplayValues)
+                data["dynamicDisplayValues"].push(item.toJSON());
+        }
+        if (Array.isArray(this.dynamicRangeInputs)) {
+            data["dynamicRangeInputs"] = [];
+            for (let item of this.dynamicRangeInputs)
+                data["dynamicRangeInputs"].push(item.toJSON());
+        }
+        if (Array.isArray(this.dynamicFilters)) {
+            data["dynamicFilters"] = [];
+            for (let item of this.dynamicFilters)
+                data["dynamicFilters"].push(item.toJSON());
+        }
         return data;
     }
 }
@@ -5967,6 +6270,7 @@ class FabrikantenFileViewModel {
     init(_data) {
         if (_data) {
             this.file = _data["file"];
+            this.customRFAZip = _data["customRFAZip"];
         }
     }
     static fromJS(data) {
@@ -5978,6 +6282,7 @@ class FabrikantenFileViewModel {
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["file"] = this.file;
+        data["customRFAZip"] = this.customRFAZip;
         return data;
     }
 }
@@ -6760,6 +7065,7 @@ class SetFilterOptionRequiredRequest {
         if (_data) {
             this.filterOptionId = _data["filterOptionId"];
             this.filterId = _data["filterId"];
+            this.rangeInputId = _data["rangeInputId"];
         }
     }
     static fromJS(data) {
@@ -6772,6 +7078,7 @@ class SetFilterOptionRequiredRequest {
         data = typeof data === 'object' ? data : {};
         data["filterOptionId"] = this.filterOptionId;
         data["filterId"] = this.filterId;
+        data["rangeInputId"] = this.rangeInputId;
         return data;
     }
 }
@@ -7712,9 +8019,8 @@ class IgnoreOpbouwRequest {
     }
     init(_data) {
         if (_data) {
-            this.bcbProductId = _data["bcbProductId"];
+            this.bcbOpbouwId = _data["bcbOpbouwId"];
             this.bcbeboId = _data["bcbeboId"];
-            this.location = _data["location"];
         }
     }
     static fromJS(data) {
@@ -7725,9 +8031,8 @@ class IgnoreOpbouwRequest {
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
-        data["bcbProductId"] = this.bcbProductId;
+        data["bcbOpbouwId"] = this.bcbOpbouwId;
         data["bcbeboId"] = this.bcbeboId;
-        data["location"] = this.location;
         return data;
     }
 }
@@ -7743,8 +8048,11 @@ class ConnectOpbouwRequest {
     init(_data) {
         if (_data) {
             this.filterId = _data["filterId"];
+            this.filterOptionId = _data["filterOptionId"];
             this.bcbeboId = _data["bcbeboId"];
-            this.bcbProductId = _data["bcbProductId"];
+            this.bcbOpbouwId = _data["bcbOpbouwId"];
+            this.bcbImportSetId = _data["bcbImportSetId"];
+            this.location = _data["location"];
         }
     }
     static fromJS(data) {
@@ -7756,8 +8064,11 @@ class ConnectOpbouwRequest {
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["filterId"] = this.filterId;
+        data["filterOptionId"] = this.filterOptionId;
         data["bcbeboId"] = this.bcbeboId;
-        data["bcbProductId"] = this.bcbProductId;
+        data["bcbOpbouwId"] = this.bcbOpbouwId;
+        data["bcbImportSetId"] = this.bcbImportSetId;
+        data["location"] = this.location;
         return data;
     }
 }
@@ -9243,7 +9554,7 @@ class BeheerNavComponent {
     }
 }
 BeheerNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerNavComponent, deps: [{ token: AuthenticationService }, { token: i1$1.Router }, { token: FabrikantenApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerNavComponent, selector: "app-beheer-nav", ngImport: i0, template: "<div class=\"main-block\">\n  <div class=\"row\">\n    <div class=\"cell left-block\">\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\n        Zoeken\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\n        Import\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\n        Products\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\n        Filters\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\n        EBO Koppel\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\n        Categories\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\n        Deeplink\n      </button>\n    </div>\n    <div class=\"cell right-block\">\n      <button mat-raised-button (click)=\"ResetCache()\" class=\"link\">\n        {{ ResetCacheTitle }}\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\n        Settings\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\n        Translate\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\n        Users\n      </button>\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\n        Uitloggen\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"], dependencies: [{ 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"] }], encapsulation: i0.ViewEncapsulation.None });
+BeheerNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerNavComponent, selector: "app-beheer-nav", ngImport: i0, template: "<div class=\"main-block\">\n  <div class=\"row\">\n    <div class=\"cell left-block\">\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\n        Zoeken\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\n        Import\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\n        Products\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\n        Filters\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\n        EBO Koppel\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\n        Categories\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\n        Deeplink\n      </button>\n    </div>\n    <div class=\"cell right-block\">\n      <button mat-raised-button (click)=\"ResetCache()\" class=\"link\">\n        {{ ResetCacheTitle }}\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\n        Settings\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\n        Translate\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\n        Users\n      </button>\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\n        Uitloggen\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"], dependencies: [{ kind: "component", type: i8.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"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-nav', encapsulation: ViewEncapsulation.None, template: "<div class=\"main-block\">\n  <div class=\"row\">\n    <div class=\"cell left-block\">\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\n        Zoeken\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\n        Import\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\n        Products\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\n        Filters\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\n        EBO Koppel\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\n        Categories\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\n        Deeplink\n      </button>\n    </div>\n    <div class=\"cell right-block\">\n      <button mat-raised-button (click)=\"ResetCache()\" class=\"link\">\n        {{ ResetCacheTitle }}\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\n        Settings\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\n        Translate\n      </button>\n      <button mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\n        Users\n      </button>\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\n        Uitloggen\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"] }]
@@ -9300,7 +9611,7 @@ class BeheerInlogComponent {
     }
 }
 BeheerInlogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerInlogComponent, deps: [{ token: AuthenticationService }, { token: i1$1.Router }, { token: SecurityApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerInlogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerInlogComponent, selector: "app-beheer-inlog", ngImport: i0, template: "\r\n<div class=\"container\">\r\n  <div class=\"inlogdialog\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <div>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Gebruikersnaam</mat-label>\r\n            <input type=\"text\" [(ngModel)]=\"Username\" matInput value=\"\">\r\n          </mat-form-field>\r\n        </div>\r\n        <div>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Wachtwoord</mat-label>\r\n            <input type=\"password\" [(ngModel)]=\"Password\" matInput value=\"\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"button-bar\">\r\n          <div class=\"error-box\">\r\n            {{ Message }}\r\n          </div>\r\n          <button mat-raised-button (click)=\"Login()\" class=\"login-button\">\r\n            <span *ngIf=\"!authenticationService.LoadingLogin\">\r\n              Login\r\n            </span>\r\n            <span *ngIf=\"authenticationService.LoadingLogin\">\r\n              <app-fab-loader class=\"loader\"></app-fab-loader>\r\n            </span>\r\n          </button>\r\n        </div>\r\n        <div>\r\n          IP Address: {{ LoginIPResponseModel?.ipAddress }}\r\n        </div>\r\n        <div>\r\n          FabrikantenCore: {{ LoginIPResponseModel?.fabrikantenCoreVersion }}\r\n        </div>\r\n      </mat-card-content>\r\n    </mat-card>\r\n    \r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-inlog .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}app-beheer-inlog .error-box{font-size:12px;text-align:center;color:red;padding:3px}app-beheer-inlog .login-button{width:70px}app-beheer-inlog .loader{height:20px;top:6px;position:relative}app-beheer-inlog .inlogdialog{width:300px}app-beheer-inlog .button-bar{text-align:right}app-beheer-inlog mat-form-field{width:100%}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}\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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }], encapsulation: i0.ViewEncapsulation.None });
+BeheerInlogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerInlogComponent, selector: "app-beheer-inlog", ngImport: i0, template: "\r\n<div class=\"container\">\r\n  <div class=\"inlogdialog\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <div>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Gebruikersnaam</mat-label>\r\n            <input type=\"text\" [(ngModel)]=\"Username\" matInput value=\"\">\r\n          </mat-form-field>\r\n        </div>\r\n        <div>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Wachtwoord</mat-label>\r\n            <input type=\"password\" [(ngModel)]=\"Password\" matInput value=\"\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"button-bar\">\r\n          <div class=\"error-box\">\r\n            {{ Message }}\r\n          </div>\r\n          <button mat-raised-button (click)=\"Login()\" class=\"login-button\">\r\n            <span *ngIf=\"!authenticationService.LoadingLogin\">\r\n              Login\r\n            </span>\r\n            <span *ngIf=\"authenticationService.LoadingLogin\">\r\n              <app-fab-loader class=\"loader\"></app-fab-loader>\r\n            </span>\r\n          </button>\r\n        </div>\r\n        <div>\r\n          IP Address: {{ LoginIPResponseModel?.ipAddress }}\r\n        </div>\r\n        <div>\r\n          FabrikantenCore: {{ LoginIPResponseModel?.fabrikantenCoreVersion }}\r\n        </div>\r\n      </mat-card-content>\r\n    </mat-card>\r\n    \r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-inlog .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}app-beheer-inlog .error-box{font-size:12px;text-align:center;color:red;padding:3px}app-beheer-inlog .login-button{width:70px}app-beheer-inlog .loader{height:20px;top:6px;position:relative}app-beheer-inlog .inlogdialog{width:300px}app-beheer-inlog .button-bar{text-align:right}app-beheer-inlog mat-form-field{width:100%}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}\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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerInlogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-inlog', encapsulation: ViewEncapsulation.None, template: "\r\n<div class=\"container\">\r\n  <div class=\"inlogdialog\">\r\n    <mat-card>\r\n      <mat-card-content>\r\n        <div>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Gebruikersnaam</mat-label>\r\n            <input type=\"text\" [(ngModel)]=\"Username\" matInput value=\"\">\r\n          </mat-form-field>\r\n        </div>\r\n        <div>\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Wachtwoord</mat-label>\r\n            <input type=\"password\" [(ngModel)]=\"Password\" matInput value=\"\">\r\n          </mat-form-field>\r\n        </div>\r\n\r\n        <div class=\"button-bar\">\r\n          <div class=\"error-box\">\r\n            {{ Message }}\r\n          </div>\r\n          <button mat-raised-button (click)=\"Login()\" class=\"login-button\">\r\n            <span *ngIf=\"!authenticationService.LoadingLogin\">\r\n              Login\r\n            </span>\r\n            <span *ngIf=\"authenticationService.LoadingLogin\">\r\n              <app-fab-loader class=\"loader\"></app-fab-loader>\r\n            </span>\r\n          </button>\r\n        </div>\r\n        <div>\r\n          IP Address: {{ LoginIPResponseModel?.ipAddress }}\r\n        </div>\r\n        <div>\r\n          FabrikantenCore: {{ LoginIPResponseModel?.fabrikantenCoreVersion }}\r\n        </div>\r\n      </mat-card-content>\r\n    </mat-card>\r\n    \r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-inlog .container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}app-beheer-inlog .error-box{font-size:12px;text-align:center;color:red;padding:3px}app-beheer-inlog .login-button{width:70px}app-beheer-inlog .loader{height:20px;top:6px;position:relative}app-beheer-inlog .inlogdialog{width:300px}app-beheer-inlog .button-bar{text-align:right}app-beheer-inlog mat-form-field{width:100%}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}\n"] }]
@@ -9358,6 +9669,7 @@ class BestekService {
         this.Loading = false;
         this.TypeBestek = "STABU";
         this.fabProductBestek = null;
+        this.FabrikantenService = null;
     }
     GetBestekTekst() {
         if (this.TypeBestek == "STABU") {
@@ -9415,6 +9727,9 @@ class BestekService {
                 }
             }
             this.Loading = false;
+            if (this.FabrikantenService != null) {
+                this.FabrikantenService.ProcessDynamicModels();
+            }
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -9753,6 +10068,7 @@ class WebGLService {
         this.Loading = false;
         this.ViewerWidth = 101;
         this.ViewerHeight = 101;
+        this.FabrikantenService = null;
         this.FabWebglViewerComponent = null;
         this.FirstCheck = false;
     }
@@ -9769,6 +10085,9 @@ class WebGLService {
             if (this.FabWebglViewerComponent != null) {
                 this.FabWebglViewerComponent.RefreshViewer();
             }
+            if (this.FabrikantenService != null) {
+                this.FabrikantenService.ProcessDynamicModels();
+            }
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -9830,6 +10149,9 @@ class SVGService {
             this.CollectSnedes();
             this.Loading = false;
             ChangeDetectorRef.detectChanges();
+            if (this.FabrikantenService != null) {
+                this.FabrikantenService.ProcessDynamicModels();
+            }
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -9927,6 +10249,8 @@ class FabrikantenService {
         this.Loaded = false;
         this.NavigateService.FabrikantenService = this;
         this.SVGService.FabrikantenService = this;
+        this.WebGLService.FabrikantenService = this;
+        this.BestekService.FabrikantenService = this;
     }
     ResetAllFilters(ChangeDetectorRef) {
         this.Loading = true;
@@ -10370,6 +10694,99 @@ class FabrikantenService {
             this.SelectedTab = "Informatie";
         }
     }
+    // Dynamic models
+    GetDynamicDisplayValues() {
+        if (this.FabrikantenViewModel != null) {
+            if (this.WebGLService.Fabrikanten3DViewModel != null && this.WebGLService.Fabrikanten3DViewModel.checksum == this.FabrikantenViewModel.checksum) {
+                if (this.WebGLService.Fabrikanten3DViewModel.dynamicDisplayValues != null) {
+                    return this.WebGLService.Fabrikanten3DViewModel.dynamicDisplayValues;
+                }
+            }
+            if (this.SVGService.FabrikantenSVGViewModel != null && this.SVGService.FabrikantenSVGViewModel.checksum == this.FabrikantenViewModel.checksum) {
+                if (this.SVGService.FabrikantenSVGViewModel.dynamicDisplayValues != null) {
+                    return this.SVGService.FabrikantenSVGViewModel.dynamicDisplayValues;
+                }
+            }
+            if (this.BestekService.FabrikantenBestekViewModel != null && this.BestekService.FabrikantenBestekViewModel.checksum == this.FabrikantenViewModel.checksum) {
+                if (this.BestekService.FabrikantenBestekViewModel.dynamicDisplayValues != null) {
+                    return this.BestekService.FabrikantenBestekViewModel.dynamicDisplayValues;
+                }
+            }
+        }
+        return new Array();
+    }
+    ProcessDynamicModels() {
+        if (this.FabrikantenViewModel != null) {
+            if (this.WebGLService.Fabrikanten3DViewModel != null && this.WebGLService.Fabrikanten3DViewModel.checksum == this.FabrikantenViewModel.checksum) {
+                if (this.WebGLService.Fabrikanten3DViewModel.dynamicFilters != null) {
+                    this.ProcessDynamicFilters(this.WebGLService.Fabrikanten3DViewModel.dynamicFilters);
+                    return;
+                }
+            }
+            if (this.SVGService.FabrikantenSVGViewModel != null && this.SVGService.FabrikantenSVGViewModel.checksum == this.FabrikantenViewModel.checksum) {
+                if (this.SVGService.FabrikantenSVGViewModel.dynamicFilters != null) {
+                    this.ProcessDynamicFilters(this.SVGService.FabrikantenSVGViewModel.dynamicFilters);
+                    return;
+                }
+            }
+            if (this.BestekService.FabrikantenBestekViewModel != null && this.BestekService.FabrikantenBestekViewModel.checksum == this.FabrikantenViewModel.checksum) {
+                if (this.BestekService.FabrikantenBestekViewModel.dynamicFilters != null) {
+                    this.ProcessDynamicFilters(this.BestekService.FabrikantenBestekViewModel.dynamicFilters);
+                    return;
+                }
+            }
+        }
+    }
+    ProcessDynamicFilters(filters) {
+        var _a, _b;
+        if (this.FabrikantenViewModel.inputs != null) {
+            for (var i = 0; i < filters.length; i++) {
+                var array = filters[i].filters;
+                if (array != null) {
+                    for (var p = 0; p < array.length; p++) {
+                        for (var j = 0; j < this.FabrikantenViewModel.inputs.length; j++) {
+                            if (array[p].filterId == ((_a = this.FabrikantenViewModel.inputs[j].filter) === null || _a === void 0 ? void 0 : _a.id)) {
+                                var options = (_b = this.FabrikantenViewModel.inputs[j].filter) === null || _b === void 0 ? void 0 : _b.options;
+                                var allowedarray = array[p].filterOptionsAllowed;
+                                if (options != null && allowedarray != null) {
+                                    for (var k = 0; k < options.length; k++) {
+                                        var allowed = false;
+                                        for (var l = 0; l < allowedarray.length; l++) {
+                                            if (allowedarray[l] == options[k].id) {
+                                                allowed = true;
+                                                break;
+                                            }
+                                        }
+                                        if (!allowed) {
+                                            options[k].hidden = true;
+                                            console.log("disable: " + options[k].name);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    ProcessDynamicRangeInputs(rangeinputs) {
+        var _a, _b;
+        if (this.FabrikantenViewModel.inputs != null) {
+            for (var i = 0; i < rangeinputs.length; i++) {
+                var array = rangeinputs[i].rangeInputs;
+                if (array != null) {
+                    for (var p = 0; p < array.length; p++) {
+                        for (var j = 0; j < this.FabrikantenViewModel.inputs.length; j++) {
+                            if (array[p] == ((_a = this.FabrikantenViewModel.inputs[j].range) === null || _a === void 0 ? void 0 : _a.id)) {
+                                alert('rangeinput:' + ((_b = this.FabrikantenViewModel.inputs[j].range) === null || _b === void 0 ? void 0 : _b.name));
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
     // Downloads
     DownloadARKEYAdomi(custombcbeboid) {
         this.DownloadARKEYAdomiLoading = true;
@@ -10512,7 +10929,12 @@ class FabrikantenService {
         request.model3D = false;
         request.customBCBEBOId = custombcbeboid;
         this.FabrikantenApiClient.getFabrikantenFileViewModel(request).subscribe((model) => {
-            this.StartDownload(model.file + "", ".rfa");
+            if (model.customRFAZip) {
+                this.StartDownload(model.file + "", ".zip");
+            }
+            else {
+                this.StartDownload(model.file + "", ".rfa");
+            }
             this.DownloadRFALoading = false;
         }, (error) => {
             if (error.status == 400)
@@ -10585,23 +11007,31 @@ class FabrikantenService {
     }
     // Reloads
     TriggerReloads(ChangeDetectorRef) {
-        var _a;
-        var array = (_a = this.FabrikantenViewModel.selectedProduct) === null || _a === void 0 ? void 0 : _a.fabrikantenBCBProductViewModels;
-        if (array != null && (array.length == 1 || this.FabrikantenViewModel.alwaysShowVariant)) {
-            if (this.SelectedTab == "Bestek") {
-                this.BestekService.LoadFabrikantenBestekViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
-            }
-            else if (this.SelectedTab == "3D") {
-                this.WebGLService.LoadFabrikanten3DViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
-            }
-            else if (this.SelectedTab == "2D") {
-                this.SVGService.LoadFabrikantenSVGViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
-            }
-            else if (this.SelectedTab == "Texture") {
-                this.TextureService.LoadFabrikantenTextureViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
-            }
-            else if (this.SelectedTab == "Toebehoren") {
-                //this.ToebehorenService.LoadFabrikantenToebehorenViewModel(this.FabrikantenViewModel.sessionId as string, ChangeDetectorRef);
+        var _a, _b, _c, _d;
+        if (!this.ShowRequired()) {
+            var array = (_a = this.FabrikantenViewModel.selectedProduct) === null || _a === void 0 ? void 0 : _a.fabrikantenBCBProductViewModels;
+            if (array != null && (array.length == 1 || this.FabrikantenViewModel.alwaysShowVariant)) {
+                if (this.SelectedTab == "Bestek") {
+                    if (this.FabrikantenViewModel.checksum != ((_b = this.BestekService.FabrikantenBestekViewModel) === null || _b === void 0 ? void 0 : _b.checksum)) {
+                        this.BestekService.LoadFabrikantenBestekViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
+                    }
+                }
+                else if (this.SelectedTab == "3D") {
+                    if (this.FabrikantenViewModel.checksum != ((_c = this.WebGLService.Fabrikanten3DViewModel) === null || _c === void 0 ? void 0 : _c.checksum)) {
+                        this.WebGLService.LoadFabrikanten3DViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
+                    }
+                }
+                else if (this.SelectedTab == "2D") {
+                    if (this.FabrikantenViewModel.checksum != ((_d = this.SVGService.FabrikantenSVGViewModel) === null || _d === void 0 ? void 0 : _d.checksum)) {
+                        this.SVGService.LoadFabrikantenSVGViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
+                    }
+                }
+                else if (this.SelectedTab == "Texture") {
+                    this.TextureService.LoadFabrikantenTextureViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
+                }
+                else if (this.SelectedTab == "Toebehoren") {
+                    //this.ToebehorenService.LoadFabrikantenToebehorenViewModel(this.FabrikantenViewModel.sessionId as string, ChangeDetectorRef);
+                }
             }
         }
     }
@@ -10765,10 +11195,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
         }], ctorParameters: function () { return [{ type: ProjectSettingApiClient }]; } });
 
 class ImportSetsService {
-    constructor(ImportApiClient) {
+    constructor(ImportApiClient, FiltersApiClient) {
         this.ImportApiClient = ImportApiClient;
+        this.FiltersApiClient = FiltersApiClient;
         this.LoadingImportSets = true;
         this.LoadingOpen = false;
+        this.LoadingFilters = false;
+        this.FiltersInit = false;
         this.ProductsService = null;
     }
     ChangeImportSetValue(value, enabled, ChangeDetectorRef) {
@@ -10858,6 +11291,24 @@ class ImportSetsService {
             }
         }
     }
+    LoadFilters() {
+        if (!this.FiltersInit) {
+            this.LoadingFilters = true;
+            this.FiltersApiClient.getFiltersViewModel().subscribe((model) => {
+                this.FiltersViewModel = model;
+                this.LoadingFilters = false;
+                this.FiltersInit = false;
+            }, (error) => {
+                if (error.status == 400)
+                    console.log(error.json());
+                else {
+                    console.log('An unexpected error occured');
+                    console.log(error);
+                }
+                this.LoadingFilters = false;
+            });
+        }
+    }
     IsValueInSelectedImportSet(value) {
         var _a;
         var importset = (_a = this.GetActiveImportSet()) === null || _a === void 0 ? void 0 : _a.bcbImportSetValueViewModels;
@@ -10871,12 +11322,12 @@ class ImportSetsService {
         return false;
     }
 }
-ImportSetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ImportSetsService, deps: [{ token: ImportApiClient }], target: i0.ɵɵFactoryTarget.Injectable });
+ImportSetsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ImportSetsService, deps: [{ token: ImportApiClient }, { token: FiltersApiClient }], target: i0.ɵɵFactoryTarget.Injectable });
 ImportSetsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ImportSetsService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ImportSetsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ImportApiClient }]; } });
+        }], ctorParameters: function () { return [{ type: ImportApiClient }, { type: FiltersApiClient }]; } });
 
 class ProductsService {
     constructor(ProductsApiClient, ImportSetsService) {
@@ -11229,7 +11680,7 @@ class BeheerProductsProductComponent {
     }
 }
 BeheerProductsProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsProductComponent, deps: [{ token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
+BeheerProductsProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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"] }]
@@ -11287,12 +11738,74 @@ class BeheerSelectFilterDialogComponent {
     }
 }
 BeheerSelectFilterDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSelectFilterDialogComponent, deps: [{ token: FiltersApiClient }, { token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSelectFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSelectFilterDialogComponent, selector: "app-beheer-select-filter-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=\"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      </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=\"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      </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-group>\r\n</div>\r\n", styles: [".bar{padding: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.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.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" }] });
+BeheerSelectFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSelectFilterDialogComponent, selector: "app-beheer-select-filter-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=\"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      </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=\"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      </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-group>\r\n</div>\r\n", styles: [".bar{padding: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: i8.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.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: "15.0.0", ngImport: i0, type: BeheerSelectFilterDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-select-filter-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=\"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      </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=\"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      </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-group>\r\n</div>\r\n", styles: [".bar{padding:3px}\n"] }]
         }], ctorParameters: function () { return [{ type: FiltersApiClient }, { type: i1$4.MatDialogRef }]; } });
 
+class BeheerSelectFilteroptionDialogComponent {
+    constructor(FiltersApiClient, dialogRef, ImportSetsService, ChangeDetectorRef) {
+        this.FiltersApiClient = FiltersApiClient;
+        this.dialogRef = dialogRef;
+        this.ImportSetsService = ImportSetsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
+        this.OptieNaamNieuw = "";
+    }
+    ngOnInit() {
+        this.ImportSetsService.LoadFilters();
+        this.FilterOptieSelected = this.ImportSetsService.FilterOptieSelected;
+        this.FilterSelected = this.ImportSetsService.FilterSelected;
+    }
+    ngAfterViewInit() {
+        this.ImportSetsService.LoadFilters();
+        this.FilterOptieSelected = this.ImportSetsService.FilterOptieSelected;
+        this.FilterSelected = this.ImportSetsService.FilterSelected;
+        this.ChangeDetectorRef.detectChanges();
+    }
+    Loading() {
+        return this.ImportSetsService.LoadingFilters;
+    }
+    NieuwOptieToevoegen() {
+        this.ImportSetsService.LoadingFilters = true;
+        this.ImportSetsService.FilterOptieSelected = this.FilterOptieSelected;
+        this.ImportSetsService.FilterSelected = this.FilterSelected;
+        var requestfilter = new CreateFilterOptionRequest();
+        requestfilter.filterId = this.ImportSetsService.FilterSelected.id;
+        requestfilter.name = this.OptieNaamNieuw;
+        this.FiltersApiClient.createFilterOption(requestfilter).subscribe((model) => {
+            this.ImportSetsService.LoadingFilters = false;
+            this.dialogRef.close({ filteroption: model.id });
+        }, (error) => {
+            if (error.status == 400)
+                console.log(error.json());
+            else {
+                console.log('An unexpected error occured');
+                console.log(error);
+            }
+            this.ImportSetsService.LoadingFilters = false;
+        });
+    }
+    BestaandToevoegen() {
+        this.ImportSetsService.FilterOptieSelected = this.FilterOptieSelected;
+        this.ImportSetsService.FilterSelected = this.FilterSelected;
+        this.dialogRef.close({ filteroption: this.FilterOptieSelected.id });
+    }
+    GetOpties() {
+        var _a;
+        if (((_a = this.FilterSelected) === null || _a === void 0 ? void 0 : _a.filterOptionViewModels) != undefined) {
+            return this.FilterSelected.filterOptionViewModels;
+        }
+        return new Array();
+    }
+}
+BeheerSelectFilteroptionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSelectFilteroptionDialogComponent, deps: [{ token: FiltersApiClient }, { token: i1$4.MatDialogRef }, { token: ImportSetsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerSelectFilteroptionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSelectFilteroptionDialogComponent, selector: "app-beheer-select-filteroption-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\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 ImportSetsService.FiltersViewModel.filterViewModels\" [value]=\"filter\">\r\n          {{filter.name}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <mat-tab-group>\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>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptieSelected\">\r\n            <mat-option *ngFor=\"let optie of GetOpties()\" [value]=\"optie\">\r\n              {{optie.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=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput [(ngModel)]=\"OptieNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwOptieToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".bar{padding: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: i8.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.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: "15.0.0", ngImport: i0, type: BeheerSelectFilteroptionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beheer-select-filteroption-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\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 ImportSetsService.FiltersViewModel.filterViewModels\" [value]=\"filter\">\r\n          {{filter.name}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <mat-tab-group>\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>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptieSelected\">\r\n            <mat-option *ngFor=\"let optie of GetOpties()\" [value]=\"optie\">\r\n              {{optie.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=\"Nieuwe optie\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Optie</mat-label>\r\n          <input matInput [(ngModel)]=\"OptieNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwOptieToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [".bar{padding:3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FiltersApiClient }, { type: i1$4.MatDialogRef }, { type: ImportSetsService }, { type: i0.ChangeDetectorRef }]; } });
+
 class BeheerProductsConnectRangeinputComponent {
     constructor(dialogRef, data, ProductsApiClient, FiltersApiClient, ImportSetsService, ProductsService, ChangeDetectorRef) {
         this.dialogRef = dialogRef;
@@ -11376,7 +11889,7 @@ class BeheerProductsConnectRangeinputComponent {
     }
 }
 BeheerProductsConnectRangeinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: FiltersApiClient }, { token: ImportSetsService }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsConnectRangeinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.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" }] });
+BeheerProductsConnectRangeinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.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.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: "15.0.0", 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"] }]
@@ -11591,7 +12104,7 @@ class BeheerProductsEigenschapComponent {
     }
 }
 BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: ImportSetsService }, { token: ProductsService }, { token: i1$4.MatDialog }, { token: ProductsApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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 *ngFor=\"let toebehoren of eigenschap.toebehoren\">\r\n      {{ toebehoren.name }}\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        <button mat-raised-button (click)=\"Ignore()\">\r\n          Ignore\r\n        </button>\r\n        <button mat-raised-button (click)=\"IgnoreMany()\">\r\n          IgnoreMany\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=\"displayflex\">\r\n        <ng-container *ngIf=\"optie.colour != null && optie.colour != ''\">\r\n          <span [ngStyle]=\"{'background-color': optie.colour}\" class=\"colour-preview\">\r\n            &nbsp;\r\n            &nbsp;\r\n          </span>\r\n        </ng-container>\r\n        <div class=\"text-div line-height\">{{ optie.name }}</div>\r\n      </div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\" class=\"button-row\">\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()\">\r\n            Category\r\n          </button>-->\r\n          <button mat-raised-button (click)=\"IgnoreId(optie.id)\">\r\n            Ignore\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 *ngIf=\"optie.ignore\">\r\n          <b>Ignore</b>&nbsp;\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}.line-height{line-height:36px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.eigenschapcel{flex:auto}.button-row{display:flex;gap:4px}.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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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$2.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: "15.0.0", 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 *ngFor=\"let toebehoren of eigenschap.toebehoren\">\r\n      {{ toebehoren.name }}\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        <button mat-raised-button (click)=\"Ignore()\">\r\n          Ignore\r\n        </button>\r\n        <button mat-raised-button (click)=\"IgnoreMany()\">\r\n          IgnoreMany\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=\"displayflex\">\r\n        <ng-container *ngIf=\"optie.colour != null && optie.colour != ''\">\r\n          <span [ngStyle]=\"{'background-color': optie.colour}\" class=\"colour-preview\">\r\n            &nbsp;\r\n            &nbsp;\r\n          </span>\r\n        </ng-container>\r\n        <div class=\"text-div line-height\">{{ optie.name }}</div>\r\n      </div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\" class=\"button-row\">\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()\">\r\n            Category\r\n          </button>-->\r\n          <button mat-raised-button (click)=\"IgnoreId(optie.id)\">\r\n            Ignore\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 *ngIf=\"optie.ignore\">\r\n          <b>Ignore</b>&nbsp;\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}.line-height{line-height:36px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.eigenschapcel{flex:auto}.button-row{display:flex;gap:4px}.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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i8.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$2.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: "15.0.0", 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 && 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 *ngFor=\"let toebehoren of eigenschap.toebehoren\">\r\n      {{ toebehoren.name }}\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        <button mat-raised-button (click)=\"Ignore()\">\r\n          Ignore\r\n        </button>\r\n        <button mat-raised-button (click)=\"IgnoreMany()\">\r\n          IgnoreMany\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=\"displayflex\">\r\n        <ng-container *ngIf=\"optie.colour != null && optie.colour != ''\">\r\n          <span [ngStyle]=\"{'background-color': optie.colour}\" class=\"colour-preview\">\r\n            &nbsp;\r\n            &nbsp;\r\n          </span>\r\n        </ng-container>\r\n        <div class=\"text-div line-height\">{{ optie.name }}</div>\r\n      </div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\" class=\"button-row\">\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()\">\r\n            Category\r\n          </button>-->\r\n          <button mat-raised-button (click)=\"IgnoreId(optie.id)\">\r\n            Ignore\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 *ngIf=\"optie.ignore\">\r\n          <b>Ignore</b>&nbsp;\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}.line-height{line-height:36px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.eigenschapcel{flex:auto}.button-row{display:flex;gap:4px}.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"] }]
@@ -11600,8 +12113,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }] } });
 
 class BeheerProductsEboComponent {
-    constructor(dialog, ProductsApiClient, ProductsService, ChangeDetectorRef) {
+    constructor(dialog, ImportSetsService, ProductsApiClient, ProductsService, ChangeDetectorRef) {
         this.dialog = dialog;
+        this.ImportSetsService = ImportSetsService;
         this.ProductsApiClient = ProductsApiClient;
         this.ProductsService = ProductsService;
         this.ChangeDetectorRef = ChangeDetectorRef;
@@ -11614,12 +12128,38 @@ class BeheerProductsEboComponent {
         }
         return true;
     }
-    GetConnect() {
-        var _a, _b;
-        if (this.ebo.bcbeboFilterOptionViewModels != null && this.ebo.bcbeboFilterOptionViewModels.length > 0) {
-            return ((_a = this.ebo.bcbeboFilterOptionViewModels[0].filterOption) === null || _a === void 0 ? void 0 : _a.filterName) + ": " + ((_b = this.ebo.bcbeboFilterOptionViewModels[0].filterOption) === null || _b === void 0 ? void 0 : _b.name);
-        }
-        return "";
+    //public GetConnect(): string {
+    //  if (this.ebo.bcbeboFilterOptionViewModels != null && this.ebo.bcbeboFilterOptionViewModels.length > 0) {
+    //    return this.ebo.bcbeboFilterOptionViewModels[0].filterOption?.filterName + ": " + this.ebo.bcbeboFilterOptionViewModels[0].filterOption?.name
+    //  }
+    //  return "";
+    //}
+    Connect() {
+        var dialogRef = this.dialog.open(BeheerSelectFilteroptionDialogComponent);
+        dialogRef.afterClosed().subscribe((result) => {
+            if (this.ProductsService.BCBProductViewModel != null) {
+                if ((result === null || result === void 0 ? void 0 : result.filteroption) != null) {
+                    if (result.filteroption > 0) {
+                        if (confirm("Weet je het zeker?")) {
+                            this.ProductsService.LoadingProducts = true;
+                            this.ChangeDetectorRef.detectChanges();
+                            var request = new ConnectOpbouwRequest();
+                            request.bcbeboId = this.ebo.id;
+                            request.filterId = 0;
+                            request.location = this.ebo.location;
+                            request.filterOptionId = result.filteroption;
+                            request.bcbOpbouwId = this.ebo.opbouwParentId;
+                            request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
+                            this.ProductsApiClient.connectOpbouw(request).subscribe(() => {
+                                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+                            }, (error) => {
+                                alert(error);
+                            });
+                        }
+                    }
+                }
+            }
+        });
     }
     ConnectMany() {
         var dialogRef = this.dialog.open(BeheerSelectFilterDialogComponent, {
@@ -11636,7 +12176,10 @@ class BeheerProductsEboComponent {
                             var request = new ConnectOpbouwRequest();
                             request.bcbeboId = this.ebo.id;
                             request.filterId = result.filter;
-                            request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
+                            request.filterOptionId = 0;
+                            request.bcbOpbouwId = this.ebo.opbouwParentId;
+                            request.location = this.ebo.location;
+                            request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
                             this.ProductsApiClient.connectOpbouw(request).subscribe(() => {
                                 this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                             }, (error) => {
@@ -11648,32 +12191,34 @@ class BeheerProductsEboComponent {
             }
         });
     }
-    //public Ignore(): void {
-    //  var request = new IgnoreOpbouwRequest();
-    //  request.bcbeboId = this.ebo.id;
-    //  request.bcbOpbouwId = -1;
-    //  this.ProductsApiClient.ignoreBCBOpbouw(request).subscribe(() => {
-    //    this.ProductsService.LoadProduct(this.ChangeDetectorRef);
-    //  }, (error: Response) => {
-    //    alert(error);
-    //  });
-    //}
-    IgnoreMany() {
-        if (confirm("Weet je het zeker?")) {
-            this.ProductsService.LoadingProducts = true;
-            if (this.ProductsService.BCBProductViewModel != null) {
-                var request = new IgnoreOpbouwRequest();
-                request.bcbeboId = this.ebo.id;
-                request.location = this.ebo.location;
-                request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
-                this.ProductsApiClient.ignoreBCBOpbouw(request).subscribe(() => {
-                    this.ProductsService.LoadProduct(this.ChangeDetectorRef);
-                }, (error) => {
-                    alert(error);
-                });
-            }
+    Ignore() {
+        if (this.ebo.opbouwParentId > 0) {
+            var request = new IgnoreOpbouwRequest();
+            request.bcbeboId = this.ebo.id;
+            request.bcbOpbouwId = this.ebo.opbouwParentId;
+            this.ProductsApiClient.ignoreBCBOpbouw(request).subscribe(() => {
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+            }, (error) => {
+                alert(error);
+            });
         }
     }
+    IgnoreMany() {
+        //if (confirm("Weet je het zeker?")) {
+        //  this.ProductsService.LoadingProducts = true;
+        //  if (this.ProductsService.BCBProductViewModel != null) {
+        //    var request = new IgnoreOpbouwRequest();
+        //    request.bcbeboId = this.ebo.id;
+        //    request.location = this.ebo.location;
+        //    request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
+        //    this.ProductsApiClient.ignoreBCBOpbouw(request).subscribe(() => {
+        //      this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+        //    }, (error: Response) => {
+        //      alert(error);
+        //    });
+        //  }
+        //}
+    }
     RemoveIgnore() {
     }
     Remove() {
@@ -11689,12 +12234,12 @@ class BeheerProductsEboComponent {
         this.ebo.open = !this.ebo.open;
     }
 }
-BeheerProductsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsEboComponent, deps: [{ token: i1$4.MatDialog }, { token: ProductsApiClient }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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=\"buttonbar\" *ngIf=\"!ebo.connected && ConnectAv() && !ebo.ignore\">\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        Filter Many\r\n      </button>\r\n      <!--<button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>-->\r\n      <button mat-raised-button (click)=\"IgnoreMany()\">\r\n        Ignore Many\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    <div class=\"displayflex\" *ngIf=\"ebo.ignore\">\r\n      <div class=\"text\">\r\n        Ignore\r\n      </div>\r\n      <button mat-raised-button (click)=\"RemoveIgnore()\">\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}.buttonbar{display:flex;gap:3px}.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$2.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsEboComponent, deps: [{ token: i1$4.MatDialog }, { token: ImportSetsService }, { token: ProductsApiClient }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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=\"buttonbar\" *ngIf=\"!ebo.ignore\">\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        Filter Many\r\n      </button>\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"IgnoreMany()\">\r\n        Ignore Many\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        <div *ngFor=\"let koppeling of this.ebo.bcbeboFilterOptionViewModels\">\r\n          {{ koppeling.filterOption.filterName + \": \" + koppeling.filterOption.name }}\r\n        </div>\r\n      </div>\r\n      <!--<button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>-->\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"ebo.ignore\">\r\n      <div class=\"text\">\r\n        Ignore\r\n      </div>\r\n      <button mat-raised-button (click)=\"RemoveIgnore()\">\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}.buttonbar{display:flex;gap:3px}.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 i8.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$2.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: "15.0.0", ngImport: i0, type: BeheerProductsEboComponent, decorators: [{
             type: Component,
-            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=\"buttonbar\" *ngIf=\"!ebo.connected && ConnectAv() && !ebo.ignore\">\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        Filter Many\r\n      </button>\r\n      <!--<button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>-->\r\n      <button mat-raised-button (click)=\"IgnoreMany()\">\r\n        Ignore Many\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    <div class=\"displayflex\" *ngIf=\"ebo.ignore\">\r\n      <div class=\"text\">\r\n        Ignore\r\n      </div>\r\n      <button mat-raised-button (click)=\"RemoveIgnore()\">\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}.buttonbar{display:flex;gap:3px}.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$4.MatDialog }, { type: ProductsApiClient }, { type: ProductsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ebo: [{
+            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=\"buttonbar\" *ngIf=\"!ebo.ignore\">\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        Filter Many\r\n      </button>\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"IgnoreMany()\">\r\n        Ignore Many\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        <div *ngFor=\"let koppeling of this.ebo.bcbeboFilterOptionViewModels\">\r\n          {{ koppeling.filterOption.filterName + \": \" + koppeling.filterOption.name }}\r\n        </div>\r\n      </div>\r\n      <!--<button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>-->\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"ebo.ignore\">\r\n      <div class=\"text\">\r\n        Ignore\r\n      </div>\r\n      <button mat-raised-button (click)=\"RemoveIgnore()\">\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}.buttonbar{display:flex;gap:3px}.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$4.MatDialog }, { type: ImportSetsService }, { type: ProductsApiClient }, { type: ProductsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ebo: [{
                 type: Input
             }] } });
 class BeheerProductsOpbouwComponent {
@@ -11706,10 +12251,10 @@ class BeheerProductsOpbouwComponent {
     }
 }
 BeheerProductsOpbouwComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsOpbouwComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: ["ebo"] }] });
+BeheerProductsOpbouwComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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\">\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$2.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: "15.0.0", 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?.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"] }]
+            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\">\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
             }] } });
@@ -11749,7 +12294,7 @@ class BeheerProductsBcbproductComponent {
     }
 }
 BeheerProductsBcbproductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", 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 *ngIf=\"BCBProductViewModel?.bcbeboViewModel\">\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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.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"] }] });
+BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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 *ngIf=\"BCBProductViewModel?.bcbeboViewModel\">\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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.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: "15.0.0", 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 *ngIf=\"BCBProductViewModel?.bcbeboViewModel\">\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"] }]
@@ -11890,76 +12435,12 @@ class BeheerProductsComponent {
     }
 }
 BeheerProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", 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 gap\">\r\n        <div class=\"displayflex flex-auto gap\">\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          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"displayflex gap\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"Status()\">\r\n            Status\r\n          </button>\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    </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 [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\"><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.id }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.name }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ 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%}.gap{gap:3px}.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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.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: "15.0.0", 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 gap\">\r\n        <div class=\"displayflex flex-auto gap\">\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          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"displayflex gap\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"Status()\">\r\n            Status\r\n          </button>\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    </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 [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\"><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.id }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.name }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ 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%}.gap{gap:3px}.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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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 gap\">\r\n        <div class=\"displayflex flex-auto gap\">\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          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"displayflex gap\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"Status()\">\r\n            Status\r\n          </button>\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    </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 [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\"><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.id }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.name }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ 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%}.gap{gap:3px}.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 BeheerSelectFilteroptionDialogComponent {
-    constructor(FiltersApiClient, dialogRef) {
-        this.FiltersApiClient = FiltersApiClient;
-        this.dialogRef = dialogRef;
-        this.LoadingFilters = false;
-        this.OptieNaamNieuw = "";
-    }
-    ngOnInit() {
-        this.LoadFilters();
-    }
-    Loading() {
-        return this.LoadingFilters;
-    }
-    NieuwOptieToevoegen() {
-        this.LoadingFilters = true;
-        var requestfilter = new CreateFilterOptionRequest();
-        requestfilter.filterId = this.FilterSelected.id;
-        requestfilter.name = this.OptieNaamNieuw;
-        this.FiltersApiClient.createFilterOption(requestfilter).subscribe((model) => {
-            this.LoadingFilters = false;
-            this.dialogRef.close({ filteroption: model.id });
-        }, (error) => {
-            if (error.status == 400)
-                console.log(error.json());
-            else {
-                console.log('An unexpected error occured');
-                console.log(error);
-            }
-            this.LoadingFilters = false;
-        });
-    }
-    BestaandToevoegen() {
-        this.dialogRef.close({ filteroption: this.FilterOptieSelected.id });
-    }
-    GetOpties() {
-        var _a;
-        if (((_a = this.FilterSelected) === null || _a === void 0 ? void 0 : _a.filterOptionViewModels) != undefined) {
-            return this.FilterSelected.filterOptionViewModels;
-        }
-        return new Array();
-    }
-    LoadFilters() {
-        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;
-        });
-    }
-}
-BeheerSelectFilteroptionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSelectFilteroptionDialogComponent, deps: [{ token: FiltersApiClient }, { token: i1$4.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSelectFilteroptionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSelectFilteroptionDialogComponent, selector: "app-beheer-select-filteroption-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\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\">\r\n          {{filter.name}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <mat-tab-group>\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>Optie</mat-label>\r\n          <input matInput [(ngModel)]=\"OptieNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwOptieToevoegen()\">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>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptieSelected\">\r\n            <mat-option *ngFor=\"let optie of GetOpties()\" [value]=\"optie\">\r\n              {{optie.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-group>\r\n</div>\r\n", styles: [".bar{padding: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.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.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: "15.0.0", ngImport: i0, type: BeheerSelectFilteroptionDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-beheer-select-filteroption-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\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\">\r\n          {{filter.name}}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <mat-tab-group>\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>Optie</mat-label>\r\n          <input matInput [(ngModel)]=\"OptieNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwOptieToevoegen()\">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>Optie</mat-label>\r\n          <mat-select [(ngModel)]=\"FilterOptieSelected\">\r\n            <mat-option *ngFor=\"let optie of GetOpties()\" [value]=\"optie\">\r\n              {{optie.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-group>\r\n</div>\r\n", styles: [".bar{padding:3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: FiltersApiClient }, { type: i1$4.MatDialogRef }]; } });
-
 class BeheerFiltersComponent {
     constructor(FiltersApiClient, dialog, ChangeDetectorRef) {
         this.FiltersApiClient = FiltersApiClient;
@@ -11977,14 +12458,6 @@ class BeheerFiltersComponent {
             this.SaveInputs();
         }
     }
-    //public GetFilters(): FilterViewModel[] {
-    //  if (this.FiltersViewModel.filterViewModels != undefined) {
-    //    return this.FiltersViewModel.filterViewModels.sort((a, b) => (a.position - b.position));
-    //  }
-    //  else {
-    //    return new Array<FilterViewModel>();
-    //  }
-    //}
     GetFilterOptions() {
         var _a, _b;
         if (((_b = (_a = this.InputViewModel) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.filterOptionViewModels) != undefined) {
@@ -11994,40 +12467,6 @@ class BeheerFiltersComponent {
             return new Array();
         }
     }
-    //public MoveUp(filter: FilterViewModel) {
-    //  this.LoadingFilters = true;
-    //  var request = new MoveFilterRequest();
-    //  request.filterId = filter.id;
-    //  request.up = true;
-    //  this.FiltersApiClient.moveFilter(request).subscribe(() => {
-    //    this.LoadFilters();
-    //  }, (error: Response) => {
-    //    if (error.status == 400)
-    //      console.log(error.json());
-    //    else {
-    //      console.log('An unexpected error occured');
-    //      console.log(error);
-    //    }
-    //    this.LoadingFilters = false;
-    //  });
-    //}
-    //public MoveDown(filter: FilterViewModel) {
-    //  this.LoadingFilters = true;
-    //  var request = new MoveFilterRequest();
-    //  request.filterId = filter.id;
-    //  request.up = false;
-    //  this.FiltersApiClient.moveFilter(request).subscribe(() => {
-    //    this.LoadFilters();
-    //  }, (error: Response) => {
-    //    if (error.status == 400)
-    //      console.log(error.json());
-    //    else {
-    //      console.log('An unexpected error occured');
-    //      console.log(error);
-    //    }
-    //    this.LoadingFilters = false;
-    //  });
-    //}
     MoveUpOption(option) {
         this.Loading = true;
         var request = new MoveFilterOptionRequest();
@@ -12116,14 +12555,15 @@ class BeheerFiltersComponent {
     RequireFilterOption() {
         var dialogRef = this.dialog.open(BeheerSelectFilteroptionDialogComponent);
         dialogRef.afterClosed().subscribe((result) => {
-            var _a, _b;
+            var _a;
             if ((result === null || result === void 0 ? void 0 : result.filteroption) != null && ((_a = this.InputViewModel) === null || _a === void 0 ? void 0 : _a.filter)) {
                 if (result.filteroption > 0) {
                     if (confirm("Weet je het zeker?")) {
                         this.ChangeDetectorRef.detectChanges();
                         this.ChangeDetectorRef.detectChanges();
                         var request = new SetFilterOptionRequiredRequest();
-                        request.filterId = (_b = this.InputViewModel) === null || _b === void 0 ? void 0 : _b.filter.id;
+                        request.filterId = this.InputViewModel.filter.id;
+                        request.rangeInputId = 0;
                         request.filterOptionId = result.filteroption;
                         this.FiltersApiClient.setFilterOptionRequired(request).subscribe(() => {
                             this.LoadInputs();
@@ -12142,6 +12582,72 @@ class BeheerFiltersComponent {
         });
     }
     RemoveRequireFilterOption(require) {
+        if (confirm("Weet je het zeker?")) {
+            this.ChangeDetectorRef.detectChanges();
+            var request = new SetFilterOptionRequiredRequest();
+            request.filterId = require.affectedFilterId;
+            request.rangeInputId = 0;
+            request.filterOptionId = require.requiredFilterOptionId;
+            this.FiltersApiClient.removeFilterOptionRequired(request).subscribe(() => {
+                this.LoadInputs();
+            }, (error) => {
+                if (error.status == 400)
+                    console.log(error.json());
+                else {
+                    console.log('An unexpected error occured');
+                    console.log(error);
+                }
+                this.Loading = false;
+            });
+        }
+    }
+    RequireRangeInputFilterOption() {
+        var dialogRef = this.dialog.open(BeheerSelectFilteroptionDialogComponent);
+        dialogRef.afterClosed().subscribe((result) => {
+            var _a;
+            if ((result === null || result === void 0 ? void 0 : result.filteroption) != null && ((_a = this.InputViewModel) === null || _a === void 0 ? void 0 : _a.range)) {
+                if (result.filteroption > 0) {
+                    if (confirm("Weet je het zeker?")) {
+                        this.ChangeDetectorRef.detectChanges();
+                        var request = new SetFilterOptionRequiredRequest();
+                        request.filterId = 0;
+                        request.rangeInputId = this.InputViewModel.range.id;
+                        request.filterOptionId = result.filteroption;
+                        this.FiltersApiClient.setFilterOptionRequired(request).subscribe(() => {
+                            this.LoadInputs();
+                        }, (error) => {
+                            if (error.status == 400)
+                                console.log(error.json());
+                            else {
+                                console.log('An unexpected error occured');
+                                console.log(error);
+                            }
+                            this.Loading = false;
+                        });
+                    }
+                }
+            }
+        });
+    }
+    RemoveRequireRangeInputFilterOption(require) {
+        if (confirm("Weet je het zeker?")) {
+            this.ChangeDetectorRef.detectChanges();
+            var request = new SetFilterOptionRequiredRequest();
+            request.filterId = 0;
+            request.rangeInputId = require.affectedRangeInputId;
+            request.filterOptionId = require.requiredFilterOptionId;
+            this.FiltersApiClient.removeFilterOptionRequired(request).subscribe(() => {
+                this.LoadInputs();
+            }, (error) => {
+                if (error.status == 400)
+                    console.log(error.json());
+                else {
+                    console.log('An unexpected error occured');
+                    console.log(error);
+                }
+                this.Loading = false;
+            });
+        }
     }
     RemoveFilterOption(option) {
         this.Loading = true;
@@ -12202,10 +12708,10 @@ class BeheerFiltersComponent {
     }
 }
 BeheerFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerFiltersComponent, deps: [{ token: FiltersApiClient }, { token: i1$4.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerFiltersComponent, selector: "app-beheer-filters", 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\r\n<div *ngIf=\"!Loading\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                {{ input.filter.name }}\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                {{ input.range.name }}\r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.filter.name }}\r\n               </div>\r\n               <div>\r\n                 <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n               </div>\r\n             </div>\r\n             <div >\r\n               <div class=\"filter-name\">\r\n                 <div class=\"flexauto\">\r\n                   Requires\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n                 <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n               </div>\r\n\r\n               <div *ngFor=\"let option of InputViewModel.filter.requiresFilterOptions\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n             <div class=\"filter-options-container\">\r\n               <div *ngFor=\"let option of GetFilterOptions(); let i = index;\" class=\"filter-option\">\r\n                 <div class=\"filter-option-name\">\r\n                   {{ option.name }}\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RemoveFilterOption(option)\">Remove</button>\r\n                 <!--<button mat-raised-button [disabled]=\"i == 0\" (click)=\"MoveUpOption(option)\">&#8593;</button>\r\n  <button mat-raised-button [disabled]=\"(i + 1) == GetFilterOptions().length\" (click)=\"MoveDownOption(option)\">&#8595;</button>-->\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.range.name }}\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n           \r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden}.input-item{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+BeheerFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerFiltersComponent, selector: "app-beheer-filters", 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\r\n<div *ngIf=\"!Loading\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                {{ input.filter.name }}\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                {{ input.range.name }}\r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.filter.name }}\r\n               </div>\r\n               <div>\r\n                 <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n               </div>\r\n             </div>\r\n             <div>\r\n               <div class=\"filter-name\">\r\n                 <div class=\"flexauto\">\r\n                   Requires\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n                 <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n               </div>\r\n\r\n               <div *ngFor=\"let option of InputViewModel.filter.requiresFilterOptions\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n             <div class=\"filter-options-container\">\r\n               <div *ngFor=\"let option of GetFilterOptions(); let i = index;\" class=\"filter-option\">\r\n                 <div class=\"filter-option-name\">\r\n                   {{ option.name }}\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RemoveFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.range.name }}\r\n               </div>\r\n             </div>\r\n             <div>\r\n               <div class=\"filter-name\">\r\n                 <div class=\"flexauto\">\r\n                   Requires\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RequireRangeInputFilterOption()\">FilterOption</button>\r\n               </div>\r\n\r\n               <div *ngFor=\"let option of InputViewModel.range.requiresRangeInputFilterOptions\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireRangeInputFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n           \r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow-y:scroll;height:calc(100vH - 188px)}.input-item{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-filters', 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\r\n<div *ngIf=\"!Loading\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                {{ input.filter.name }}\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                {{ input.range.name }}\r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.filter.name }}\r\n               </div>\r\n               <div>\r\n                 <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n               </div>\r\n             </div>\r\n             <div >\r\n               <div class=\"filter-name\">\r\n                 <div class=\"flexauto\">\r\n                   Requires\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n                 <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n               </div>\r\n\r\n               <div *ngFor=\"let option of InputViewModel.filter.requiresFilterOptions\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n             <div class=\"filter-options-container\">\r\n               <div *ngFor=\"let option of GetFilterOptions(); let i = index;\" class=\"filter-option\">\r\n                 <div class=\"filter-option-name\">\r\n                   {{ option.name }}\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RemoveFilterOption(option)\">Remove</button>\r\n                 <!--<button mat-raised-button [disabled]=\"i == 0\" (click)=\"MoveUpOption(option)\">&#8593;</button>\r\n  <button mat-raised-button [disabled]=\"(i + 1) == GetFilterOptions().length\" (click)=\"MoveDownOption(option)\">&#8595;</button>-->\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.range.name }}\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n           \r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow:hidden}.input-item{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'app-beheer-filters', 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\r\n<div *ngIf=\"!Loading\" class=\"main-content\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <button mat-raised-button (click)=\"AddCategory()\">Categorie toevoegen</button>\r\n    </mat-card-content>\r\n  </mat-card>\r\n  <br />\r\n  <div class=\"displayflex\">\r\n    <div>\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <div cdkDropList class=\"input-list\" (cdkDropListDropped)=\"drop($event)\">\r\n            <div class=\"input-item\" *ngFor=\"let input of InputsViewModel.inputs\" cdkDrag>\r\n              <ng-container *ngIf=\"input.filter\">\r\n                {{ input.filter.name }}\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                {{ input.range.name }}\r\n              </ng-container>\r\n              <button (click)=\"Open(input)\">Select</button>\r\n            </div>\r\n          </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n    <div class=\"flexauto\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n         <div *ngIf=\"InputViewModel != undefined\">\r\n           <ng-container *ngIf=\"InputViewModel.filter\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.filter.name }}\r\n               </div>\r\n               <div>\r\n                 <button mat-raised-button (click)=\"Sort()\">Sort</button>\r\n               </div>\r\n             </div>\r\n             <div>\r\n               <div class=\"filter-name\">\r\n                 <div class=\"flexauto\">\r\n                   Requires\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RequireFilter()\">Filter</button>\r\n                 <button mat-raised-button (click)=\"RequireFilterOption()\">FilterOption</button>\r\n               </div>\r\n\r\n               <div *ngFor=\"let option of InputViewModel.filter.requiresFilterOptions\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n             <div class=\"filter-options-container\">\r\n               <div *ngFor=\"let option of GetFilterOptions(); let i = index;\" class=\"filter-option\">\r\n                 <div class=\"filter-option-name\">\r\n                   {{ option.name }}\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RemoveFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n\r\n           <ng-container *ngIf=\"InputViewModel.range\">\r\n             <div class=\"filter-name\">\r\n               <div class=\"flexauto\">\r\n                 Name: {{ InputViewModel.range.name }}\r\n               </div>\r\n             </div>\r\n             <div>\r\n               <div class=\"filter-name\">\r\n                 <div class=\"flexauto\">\r\n                   Requires\r\n                 </div>\r\n                 <button mat-raised-button (click)=\"RequireRangeInputFilterOption()\">FilterOption</button>\r\n               </div>\r\n\r\n               <div *ngFor=\"let option of InputViewModel.range.requiresRangeInputFilterOptions\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireRangeInputFilterOption(option)\">Remove</button>\r\n               </div>\r\n             </div>\r\n           </ng-container>\r\n           \r\n         </div>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".displayflex{display:flex;gap:10px}.filter-row{font-size:20px;line-height:30px;margin-bottom:10px}.flexauto{flex:auto}.main-content{padding:10px}.filter-name{font-size:20px;padding:10px;border-bottom:1px solid #000;display:flex}.filter-option:hover{background-color:gray}.filter-options-container{border:1px solid #000;padding:10px;margin:10px}.filter-option{padding:5px;border-bottom:1px solid #000;display:flex;gap:5px}.filter-option-name{flex:auto;line-height:30px;font-size:20px}.input-list{max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:white;border-radius:4px;overflow-y:scroll;height:calc(100vH - 188px)}.input-item{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:white;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.input-item:last-child{border:none}.input-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () { return [{ type: FiltersApiClient }, { type: i1$4.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
 
 class BeheerSettingsOptionsComponent {
@@ -12216,7 +12722,7 @@ class BeheerSettingsOptionsComponent {
     }
 }
 BeheerSettingsOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSettingsOptionsComponent, deps: [{ token: ProjectSettingService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSettingsOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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.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: "15.0.0", 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: i8.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.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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"] }]
@@ -12232,7 +12738,7 @@ class BeheerSettingsStringComponent {
     }
 }
 BeheerSettingsStringComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSettingsStringComponent, deps: [{ token: ProjectSettingService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSettingsStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSettingsStringComponent, selector: "app-beheer-settings-string", 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      <input matInput [(ngModel)]=\"projectsetting.defaultValue\" [disabled]=\"!projectsetting.default\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div *ngIf=\"projectsetting.default\">\r\n    <button mat-raised-button (click)=\"projectsettingservice.Save(projectsetting)\">\r\n      Save\r\n    </button>\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\">\r\n          <mat-label>{{ pipeline.pipelineStep }}</mat-label>\r\n          <input matInput [(ngModel)]=\"pipeline.value\" [disabled]=\"!pipeline.default\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"pipeline.default\">\r\n        <button mat-raised-button (click)=\"projectsettingservice.SavePipelineStep(projectsetting, pipeline)\">\r\n          Save\r\n        </button>\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: "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"] }] });
+BeheerSettingsStringComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSettingsStringComponent, selector: "app-beheer-settings-string", 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      <input matInput [(ngModel)]=\"projectsetting.defaultValue\" [disabled]=\"!projectsetting.default\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div *ngIf=\"projectsetting.default\">\r\n    <button mat-raised-button (click)=\"projectsettingservice.Save(projectsetting)\">\r\n      Save\r\n    </button>\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\">\r\n          <mat-label>{{ pipeline.pipelineStep }}</mat-label>\r\n          <input matInput [(ngModel)]=\"pipeline.value\" [disabled]=\"!pipeline.default\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"pipeline.default\">\r\n        <button mat-raised-button (click)=\"projectsettingservice.SavePipelineStep(projectsetting, pipeline)\">\r\n          Save\r\n        </button>\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: "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: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSettingsStringComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-settings-string', 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      <input matInput [(ngModel)]=\"projectsetting.defaultValue\" [disabled]=\"!projectsetting.default\">\r\n    </mat-form-field>\r\n  </div>\r\n  <div *ngIf=\"projectsetting.default\">\r\n    <button mat-raised-button (click)=\"projectsettingservice.Save(projectsetting)\">\r\n      Save\r\n    </button>\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\">\r\n          <mat-label>{{ pipeline.pipelineStep }}</mat-label>\r\n          <input matInput [(ngModel)]=\"pipeline.value\" [disabled]=\"!pipeline.default\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"pipeline.default\">\r\n        <button mat-raised-button (click)=\"projectsettingservice.SavePipelineStep(projectsetting, pipeline)\">\r\n          Save\r\n        </button>\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"] }]
@@ -12266,7 +12772,7 @@ class BeheerSettingsBooleanComponent {
     }
 }
 BeheerSettingsBooleanComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSettingsBooleanComponent, deps: [{ token: ProjectSettingService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSettingsBooleanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSettingsBooleanComponent, selector: "app-beheer-settings-boolean", 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-checkbox [checked]=\"projectsetting.defaultValue == 'True'\" [disabled]=\"!projectsetting.default\" (change)=\"Save()\"></mat-checkbox>\r\n    Default\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-checkbox [checked]=\"pipeline.value == 'True'\" [disabled]=\"!pipeline.default\" (change)=\"SavePipeline(pipeline)\"></mat-checkbox>\r\n        {{ pipeline.pipelineStep }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex}.expand{line-height:36px;padding-left:10px}\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: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+BeheerSettingsBooleanComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerSettingsBooleanComponent, selector: "app-beheer-settings-boolean", 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-checkbox [checked]=\"projectsetting.defaultValue == 'True'\" [disabled]=\"!projectsetting.default\" (change)=\"Save()\"></mat-checkbox>\r\n    Default\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-checkbox [checked]=\"pipeline.value == 'True'\" [disabled]=\"!pipeline.default\" (change)=\"SavePipeline(pipeline)\"></mat-checkbox>\r\n        {{ pipeline.pipelineStep }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex}.expand{line-height:36px;padding-left:10px}\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: i8.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: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSettingsBooleanComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-settings-boolean', 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-checkbox [checked]=\"projectsetting.defaultValue == 'True'\" [disabled]=\"!projectsetting.default\" (change)=\"Save()\"></mat-checkbox>\r\n    Default\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-checkbox [checked]=\"pipeline.value == 'True'\" [disabled]=\"!pipeline.default\" (change)=\"SavePipeline(pipeline)\"></mat-checkbox>\r\n        {{ pipeline.pipelineStep }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex}.expand{line-height:36px;padding-left:10px}\n"] }]
@@ -12356,7 +12862,7 @@ class BeheerSearchproductsKoppelDialogComponent {
     }
 }
 BeheerSearchproductsKoppelDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSearchproductsKoppelDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: SearchProductsApiClient }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSearchproductsKoppelDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.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: "15.0.0", 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: i8.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.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: "15.0.0", 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"] }]
@@ -12647,7 +13153,7 @@ class BeheerSearchProductsComponent {
     }
 }
 BeheerSearchProductsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSearchProductsComponent, deps: [{ token: i1$4.MatDialog }, { token: SearchProductsApiClient }, { token: i3$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component });
-BeheerSearchProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i4$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 });
+BeheerSearchProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i4$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: "15.0.0", 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"] }]
@@ -12687,7 +13193,7 @@ class BeheerImportSetsDialogComponent {
     }
 }
 BeheerImportSetsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerImportSetsDialogComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ImportSetsService }, { token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ImportApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerImportSetsDialogComponent, selector: "app-beheer-import-sets-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-form-field appearance=\"fill\">\r\n    <mat-label>Naam</mat-label>\r\n    <input matInput [(ngModel)]=\"name\">\r\n  </mat-form-field>\r\n\r\n  <button mat-raised-button (click)=\"Opslaan()\">Opslaan</button>\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: FabLoaderComponent, selector: "app-fab-loader" }] });
+BeheerImportSetsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerImportSetsDialogComponent, selector: "app-beheer-import-sets-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-form-field appearance=\"fill\">\r\n    <mat-label>Naam</mat-label>\r\n    <input matInput [(ngModel)]=\"name\">\r\n  </mat-form-field>\r\n\r\n  <button mat-raised-button (click)=\"Opslaan()\">Opslaan</button>\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: i8.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: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerImportSetsDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-import-sets-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-form-field appearance=\"fill\">\r\n    <mat-label>Naam</mat-label>\r\n    <input matInput [(ngModel)]=\"name\">\r\n  </mat-form-field>\r\n\r\n  <button mat-raised-button (click)=\"Opslaan()\">Opslaan</button>\r\n</div>\r\n" }]
@@ -12853,7 +13359,7 @@ class BeheerImportSetsComponent {
     }
 }
 BeheerImportSetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerImportSetsComponent, deps: [{ token: i1$4.MatDialog }, { token: ProductsService }, { token: ImportSetsService }, { token: ImportApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerImportSetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9.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: "15.0.0", 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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i9.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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()\" 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"] }]
@@ -12992,7 +13498,7 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
     }
 }
 BeheerProductsKoppelFilteroptionDailogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsKoppelFilteroptionDailogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FiltersApiClient }, { token: ProductsApiClient }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsKoppelFilteroptionDailogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.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" }] });
+BeheerProductsKoppelFilteroptionDailogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.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.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: "15.0.0", 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"] }]
@@ -13041,6 +13547,40 @@ class FabFilterComponent {
         }
         return false;
     }
+    ShowDescription() {
+        var _a;
+        if (this._filter.description != null) {
+            if (this._filter.description.indexOf("#{Schuifgrendel met hangslot}") != -1) {
+                if (this._filter.options != null) {
+                    for (var i = 0; i < this._filter.options.length; i++) {
+                        if (((_a = this._filter.options[i].name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) == "schuifgrendel met hangslot") {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            }
+            if (this._filter.description.indexOf("#{GetAllOptionsExceptFirstAndLast}") != -1) {
+                if (this._filter.options != null) {
+                    if (this._filter.options.length < 2) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    GetDescription() {
+        var result = "";
+        if (this._filter.description != null) {
+            result = this._filter.description.replace("#{Schuifgrendel met hangslot}", "");
+            if (result.indexOf("#{GetAllOptionsExceptFirstAndLast}") != -1) {
+                result = this._filter.description.replace("#{GetAllOptionsExceptFirstAndLast}", this.GetAllOptionsExceptFirstAndLast());
+            }
+        }
+        return result;
+    }
     GetSelectedOption() {
         if (this._filter.options != null) {
             if (this._filter.options.length == 1) {
@@ -13056,12 +13596,26 @@ class FabFilterComponent {
         }
         return null;
     }
+    GetAllOptionsExceptFirstAndLast() {
+        var result = "";
+        if (this._filter.options != null) {
+            for (var i = 0; i < this._filter.options.length; i++) {
+                if (i != 0 && i != this._filter.options.length - 1) {
+                    if (result != "") {
+                        result += ",";
+                    }
+                    result += this._filter.options[i].name;
+                }
+            }
+        }
+        return result;
+    }
 }
 FabFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", 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) }}\r\n        <span *ngIf=\"filter.blocksProductSelect || filter.required\">*</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 *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [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}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.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: "15.0.0", 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) }}\r\n        <span *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <ng-container *ngFor=\"let option of filter.options\">\r\n          <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\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        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <p *ngIf=\"ShowDescription()\">{{ GetDescription() }}</p>\r\n  </div>\r\n  <div *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [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}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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) }}\r\n        <span *ngIf=\"filter.blocksProductSelect || filter.required\">*</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 *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [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}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.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"] }]
+            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) }}\r\n        <span *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <ng-container *ngFor=\"let option of filter.options\">\r\n          <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\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        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <p *ngIf=\"ShowDescription()\">{{ GetDescription() }}</p>\r\n  </div>\r\n  <div *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [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}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.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"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{
                 type: Input
             }], filterchanged: [{
@@ -13268,10 +13822,10 @@ class FabActionmenuComponent {
     }
 }
 FabActionmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabActionmenuComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: BestekService }, { token: TextureService }, { token: SVGService }, { token: WebGLService }, { token: ToebehorenService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabActionmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabActionmenuComponent, selector: "app-fab-actionmenu", ngImport: i0, template: "<div class=\"column\" *ngIf=\"FabrikantenService.Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\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: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i14.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i14.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: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
+FabActionmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabActionmenuComponent, selector: "app-fab-actionmenu", ngImport: i0, template: "<div class=\"column\" *ngIf=\"FabrikantenService.Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\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: i8.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i14.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i14.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: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabActionmenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-actionmenu', encapsulation: ViewEncapsulation.None, template: "<div class=\"column\" *ngIf=\"FabrikantenService.Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'app-fab-actionmenu', encapsulation: ViewEncapsulation.None, template: "<div class=\"column\" *ngIf=\"FabrikantenService.Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA(undefined)\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: BestekService }, { type: TextureService }, { type: SVGService }, { type: WebGLService }, { type: ToebehorenService }, { type: i0.ChangeDetectorRef }]; } });
 
 class FabSelectBcbproductComponent {
@@ -13388,7 +13942,7 @@ class FabRangeInputComponent {
     }
 }
 FabRangeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabRangeInputComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabRangeInputComponent, selector: "app-fab-range-input", inputs: { rangeinput: "rangeinput" }, ngImport: i0, template: "\r\n  <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n    <mat-label>\r\n      {{ TranslateService.GetActiveValueRangeInput(rangeinput.id) }}\r\n      <span *ngIf=\"rangeinput.required\">*</span>\r\n    </mat-label>\r\n    <input *ngIf=\"GetMin() == -1 && GetMax() == -1\" matInput type=\"number\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() != -1 && GetMax() != -1\" matInput type=\"number\" [min]=\"GetMin()\" [max]=\"GetMax()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() == -1 && GetMax() != -1\" matInput type=\"number\" [max]=\"GetMax()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() != -1 && GetMax() == -1\" matInput type=\"number\" [min]=\"GetMin()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <mat-error>{{ tooltip }}</mat-error>\r\n  </mat-form-field>\r\n\r\n", styles: [".fullwidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+FabRangeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabRangeInputComponent, selector: "app-fab-range-input", inputs: { rangeinput: "rangeinput" }, ngImport: i0, template: "\r\n  <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n    <mat-label>\r\n      {{ TranslateService.GetActiveValueRangeInput(rangeinput.id) }}\r\n      <span *ngIf=\"rangeinput.required\">*</span>\r\n    </mat-label>\r\n    <input *ngIf=\"GetMin() == -1 && GetMax() == -1\" matInput type=\"number\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() != -1 && GetMax() != -1\" matInput type=\"number\" [min]=\"GetMin()\" [max]=\"GetMax()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() == -1 && GetMax() != -1\" matInput type=\"number\" [max]=\"GetMax()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() != -1 && GetMax() == -1\" matInput type=\"number\" [min]=\"GetMin()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <mat-error>{{ tooltip }}</mat-error>\r\n  </mat-form-field>\r\n\r\n", styles: [".fullwidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.MatError, selector: "mat-error", inputs: ["id"] }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabRangeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-fab-range-input', template: "\r\n  <mat-form-field appearance=\"fill\" class=\"fullwidth\">\r\n    <mat-label>\r\n      {{ TranslateService.GetActiveValueRangeInput(rangeinput.id) }}\r\n      <span *ngIf=\"rangeinput.required\">*</span>\r\n    </mat-label>\r\n    <input *ngIf=\"GetMin() == -1 && GetMax() == -1\" matInput type=\"number\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() != -1 && GetMax() != -1\" matInput type=\"number\" [min]=\"GetMin()\" [max]=\"GetMax()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() == -1 && GetMax() != -1\" matInput type=\"number\" [max]=\"GetMax()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <input *ngIf=\"GetMin() != -1 && GetMax() == -1\" matInput type=\"number\" [min]=\"GetMin()\" matTooltip=\"{{ tooltip }}\" [(ngModel)]=\"value\" (change)=\"ProcessChange()\">\r\n    <mat-error>{{ tooltip }}</mat-error>\r\n  </mat-form-field>\r\n\r\n", styles: [".fullwidth{width:100%}\n"] }]
@@ -13475,7 +14029,7 @@ class FabFilterColourComponent {
     }
 }
 FabFilterColourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabFilterColourComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FabFilterColourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabFilterColourComponent, selector: "app-fab-filter-colour", inputs: { filter: "filter" }, ngImport: i0, template: "<button class=\"select-button\" mat-stroked-button (click)=\"OpenDialog()\">\r\n  {{ TranslateService.GetActiveValueFilter(filter.id) }}\r\n  <span *ngIf=\"filter.selectedColour != null\">\r\n    ({{ filter.selectedColour }})\r\n  </span>\r\n</button>\r\n", styles: [".select-button{width:100%;margin-bottom:20px}\n"], dependencies: [{ 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"] }] });
+FabFilterColourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabFilterColourComponent, selector: "app-fab-filter-colour", inputs: { filter: "filter" }, ngImport: i0, template: "<button class=\"select-button\" mat-stroked-button (click)=\"OpenDialog()\">\r\n  {{ TranslateService.GetActiveValueFilter(filter.id) }}\r\n  <span *ngIf=\"filter.selectedColour != null\">\r\n    ({{ filter.selectedColour }})\r\n  </span>\r\n</button>\r\n", styles: [".select-button{width:100%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabFilterColourComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-fab-filter-colour', template: "<button class=\"select-button\" mat-stroked-button (click)=\"OpenDialog()\">\r\n  {{ TranslateService.GetActiveValueFilter(filter.id) }}\r\n  <span *ngIf=\"filter.selectedColour != null\">\r\n    ({{ filter.selectedColour }})\r\n  </span>\r\n</button>\r\n", styles: [".select-button{width:100%;margin-bottom:20px}\n"] }]
@@ -13483,6 +14037,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 type: Input
             }] } });
 
+class FabMultiselectComponent {
+    constructor(FabrikantenService, TranslateService, ChangeDetectorRef) {
+        this.FabrikantenService = FabrikantenService;
+        this.TranslateService = TranslateService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
+        this.filterchanged = new EventEmitter();
+    }
+    get filter() {
+        return this._filter;
+    }
+    set filter(value) {
+        this._filter = value;
+    }
+    SelectOption(id) {
+        this.FabrikantenService.SelectOption(this.filter.id, id, this.ChangeDetectorRef);
+    }
+    IsChecked(id) {
+        if (this._filter.selectedOptions != null) {
+            for (var i = 0; i < this._filter.selectedOptions.length; i++) {
+                if (this._filter.selectedOptions[i] == id) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+}
+FabMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabMultiselectComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FabMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabMultiselectComponent, selector: "app-fab-multiselect", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged" }, ngImport: i0, template: "<div>\n  {{ TranslateService.GetActiveValueFilter(filter.id) }}\n  <span *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\n</div>\n<ng-container *ngFor=\"let option of filter.options\">\n  <div *ngIf=\"!option.hidden\" class=\"disableoverflow\">\n    <mat-checkbox [checked]=\"IsChecked(option.id)\" (change)=\"SelectOption(option.id)\">{{ TranslateService.GetActiveValueFilterOption(option.id) }}</mat-checkbox>\n  </div>\n</ng-container>\n", styles: [".disableoverflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\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$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabMultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-fab-multiselect', template: "<div>\n  {{ TranslateService.GetActiveValueFilter(filter.id) }}\n  <span *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\n</div>\n<ng-container *ngFor=\"let option of filter.options\">\n  <div *ngIf=\"!option.hidden\" class=\"disableoverflow\">\n    <mat-checkbox [checked]=\"IsChecked(option.id)\" (change)=\"SelectOption(option.id)\">{{ TranslateService.GetActiveValueFilterOption(option.id) }}</mat-checkbox>\n  </div>\n</ng-container>\n", styles: [".disableoverflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{
+                type: Input
+            }], filterchanged: [{
+                type: Output
+            }] } });
+
 class FabInputComponent {
     get input() {
         return this._input;
@@ -13492,10 +14084,10 @@ class FabInputComponent {
     }
 }
 FabInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FabInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabInputComponent, selector: "app-fab-input", inputs: { input: "input" }, ngImport: i0, template: "<ng-container *ngIf=\"input.filter\">\r\n  <ng-container *ngIf=\"!input.filter.hidden\">\r\n    <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n      <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n      <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range\">\r\n  <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabFilterComponent, selector: "app-fab-filter", inputs: ["filter"], outputs: ["filterchanged"] }, { kind: "component", type: FabRangeInputComponent, selector: "app-fab-range-input", inputs: ["rangeinput"] }, { kind: "component", type: FabFilterColourComponent, selector: "app-fab-filter-colour", inputs: ["filter"] }] });
+FabInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabInputComponent, selector: "app-fab-input", inputs: { input: "input" }, ngImport: i0, template: "<ng-container *ngIf=\"input.filter && !input.filter.hidden\">\r\n  <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n    <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n    <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 3\">\r\n    <app-fab-multiselect [filter]=\"input.filter\"></app-fab-multiselect>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range && !input.range.hidden\">\r\n  <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabFilterComponent, selector: "app-fab-filter", inputs: ["filter"], outputs: ["filterchanged"] }, { kind: "component", type: FabRangeInputComponent, selector: "app-fab-range-input", inputs: ["rangeinput"] }, { kind: "component", type: FabFilterColourComponent, selector: "app-fab-filter-colour", inputs: ["filter"] }, { kind: "component", type: FabMultiselectComponent, selector: "app-fab-multiselect", inputs: ["filter"], outputs: ["filterchanged"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-input', template: "<ng-container *ngIf=\"input.filter\">\r\n  <ng-container *ngIf=\"!input.filter.hidden\">\r\n    <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n      <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n      <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range\">\r\n  <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'app-fab-input', template: "<ng-container *ngIf=\"input.filter && !input.filter.hidden\">\r\n  <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n    <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n    <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 3\">\r\n    <app-fab-multiselect [filter]=\"input.filter\"></app-fab-multiselect>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range && !input.range.hidden\">\r\n  <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n</ng-container>\r\n" }]
         }], propDecorators: { input: [{
                 type: Input
             }] } });
@@ -13588,7 +14180,7 @@ class FabBreadcrumbComponent {
     }
 }
 FabBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabBreadcrumbComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: { showfiltermenubutton: "showfiltermenubutton" }, ngImport: i0, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step center\" (click)=\"Back()\">\r\n    {{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: ["app-fab-breadcrumb .header{display:flex;padding:4px}app-fab-breadcrumb .center{text-align:center}app-fab-breadcrumb .tinybutton{padding:1px!important}app-fab-breadcrumb .tinybutton .header-title{font-size:12px!important;line-height:26px!important}app-fab-breadcrumb .tinybutton .mat-stroked-button{padding:0 8px!important}app-fab-breadcrumb .buttonsize{height:40px;line-height:25px}app-fab-breadcrumb .flexauto{flex:auto}app-fab-breadcrumb .fullwidth{width:100%}app-fab-breadcrumb .paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+FabBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: { showfiltermenubutton: "showfiltermenubutton" }, ngImport: i0, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step center\" (click)=\"Back()\">\r\n    {{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: ["app-fab-breadcrumb .header{display:flex;padding:4px}app-fab-breadcrumb .center{text-align:center}app-fab-breadcrumb .tinybutton{padding:1px!important}app-fab-breadcrumb .tinybutton .header-title{font-size:12px!important;line-height:26px!important}app-fab-breadcrumb .tinybutton .mat-stroked-button{padding:0 8px!important}app-fab-breadcrumb .buttonsize{height:40px;line-height:25px}app-fab-breadcrumb .flexauto{flex:auto}app-fab-breadcrumb .fullwidth{width:100%}app-fab-breadcrumb .paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\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: i8.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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-fab-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step center\" (click)=\"Back()\">\r\n    {{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: ["app-fab-breadcrumb .header{display:flex;padding:4px}app-fab-breadcrumb .center{text-align:center}app-fab-breadcrumb .tinybutton{padding:1px!important}app-fab-breadcrumb .tinybutton .header-title{font-size:12px!important;line-height:26px!important}app-fab-breadcrumb .tinybutton .mat-stroked-button{padding:0 8px!important}app-fab-breadcrumb .buttonsize{height:40px;line-height:25px}app-fab-breadcrumb .flexauto{flex:auto}app-fab-breadcrumb .fullwidth{width:100%}app-fab-breadcrumb .paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\n"] }]
@@ -13669,10 +14261,10 @@ class FabHeaderComponent {
     }
 }
 FabHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabHeaderComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabHeaderComponent, selector: "app-fab-header", inputs: { showfiltermenubutton: "showfiltermenubutton" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n\r\n\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabLanguageSelectComponent, selector: "app-fab-language-select" }] });
+FabHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabHeaderComponent, selector: "app-fab-header", inputs: { showfiltermenubutton: "showfiltermenubutton" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n<ng-container *ngIf=\"FabrikantenService.GetDynamicDisplayValues().length > 0\">\r\n  <div class=\"display-values-box\">\r\n    <div class=\"display-value-item\" *ngFor=\"let displayvalue of FabrikantenService.GetDynamicDisplayValues()\">\r\n      <span class=\"display-value-name\">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}.display-values-box{display:flex}.display-value-name{text-transform:capitalize}.display-value-item{padding:4px}\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: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabLanguageSelectComponent, selector: "app-fab-language-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-header', template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n\r\n\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}\n"] }]
+            args: [{ selector: 'app-fab-header', template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n<ng-container *ngIf=\"FabrikantenService.GetDynamicDisplayValues().length > 0\">\r\n  <div class=\"display-values-box\">\r\n    <div class=\"display-value-item\" *ngFor=\"let displayvalue of FabrikantenService.GetDynamicDisplayValues()\">\r\n      <span class=\"display-value-name\">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}.display-values-box{display:flex}.display-value-name{text-transform:capitalize}.display-value-item{padding:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showfiltermenubutton: [{
                 type: Input
             }], onResize: [{
@@ -13986,7 +14578,7 @@ class FabProductComponent {
     }
 }
 FabProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", 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.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\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 mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu></app-fab-actionmenu>\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    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(\"Common\", \"Not all required filled\") }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"Toebehoren\") }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\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 .required-div{padding:40px}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 .actionwrapper{width:250px;padding:20px}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}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.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" }, { kind: "component", type: FabTextureComponent, selector: "app-fab-texture" }, { kind: "component", type: FabToebehorenComponent, selector: "app-fab-toebehoren" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }], encapsulation: i0.ViewEncapsulation.None });
+FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\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 mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu></app-fab-actionmenu>\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    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(\"Common\", \"Not all required filled\") }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"Toebehoren\") }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\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 .required-div{padding:40px}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 .actionwrapper{width:250px;padding:20px}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}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$1.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: i1$2.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" }, { kind: "component", type: FabTextureComponent, selector: "app-fab-texture" }, { kind: "component", type: FabToebehorenComponent, selector: "app-fab-toebehoren" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\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 mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu></app-fab-actionmenu>\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    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(\"Common\", \"Not all required filled\") }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"Toebehoren\") }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\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 .required-div{padding:40px}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 .actionwrapper{width:250px;padding:20px}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}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"] }]
@@ -14022,11 +14614,16 @@ class FabProductTileComponent {
     }
     GetPhoto() {
         var _a;
-        var array = this.PhotoService.GetPhotoArrayProduct(this.product);
-        if (array.length > 0) {
-            return ((_a = this.FabrikantenService.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.bcbWebserviceURLBase) + array[0].url;
+        if (this.product.imagePath != null && this.product.imagePath != "") {
+            return this.product.imagePath;
+        }
+        else {
+            var array = this.PhotoService.GetPhotoArrayProduct(this.product);
+            if (array.length > 0) {
+                return ((_a = this.FabrikantenService.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.bcbWebserviceURLBase) + array[0].url;
+            }
+            return "";
         }
-        return "";
     }
     getSafeUrl() {
         return this.sanitization.bypassSecurityTrustStyle('url(\'' + this.GetPhoto() + '\')');
@@ -14144,7 +14741,7 @@ class BeheerConnectCategoryDialogComponent {
     }
 }
 BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.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" }] });
+BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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: i8.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.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: "15.0.0", 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" }]
@@ -14260,7 +14857,7 @@ class BeheerEboKoppelComponent {
     }
 }
 BeheerEboKoppelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerEboKoppelComponent, deps: [{ token: EBOKoppelApiClient }, { token: ImportSetsService }, { token: i1$4.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerEboKoppelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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()\" class=\"main-content\">\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  <br />\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 }}\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let naam of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ naam.doNaam }} ({{ naam.ebOs.length }})\r\n              </div>\r\n              <div class=\"button-row\">\r\n                <button mat-raised-button (click)=\"Connect(naam.ebOs[0].id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(naam.ebOs[0].id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(naam.ebOs[0].id)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let ebo of naam.ebOs\" class=\"row eborow\">\r\n              <div class=\"text-div\">\r\n                {{ ebo.eboNaam }}\r\n              </div>\r\n              <div>\r\n                <div *ngFor=\"let filteroption of ebo.filterOptions\">\r\n                  {{ filteroption.filterName }}: {{ filteroption.filterOptionName }}\r\n                </div>\r\n\r\n                <div *ngFor=\"let category of ebo.categories\">\r\n                  Category: {{ category.categoryName }}\r\n                </div>\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}.eborow{padding:3px;border-bottom:1px solid #000}.main-content{padding:5px}.icon-div{width:24px;height:24px}.text-div{flex:auto}.button-row{display:flex;gap: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: "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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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()\" class=\"main-content\">\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  <br />\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 }}\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let naam of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ naam.doNaam }} ({{ naam.ebOs.length }})\r\n              </div>\r\n              <div class=\"button-row\">\r\n                <button mat-raised-button (click)=\"Connect(naam.ebOs[0].id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(naam.ebOs[0].id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(naam.ebOs[0].id)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let ebo of naam.ebOs\" class=\"row eborow\">\r\n              <div class=\"text-div\">\r\n                {{ ebo.eboNaam }}\r\n              </div>\r\n              <div>\r\n                <div *ngFor=\"let filteroption of ebo.filterOptions\">\r\n                  {{ filteroption.filterName }}: {{ filteroption.filterOptionName }}\r\n                </div>\r\n\r\n                <div *ngFor=\"let category of ebo.categories\">\r\n                  Category: {{ category.categoryName }}\r\n                </div>\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}.eborow{padding:3px;border-bottom:1px solid #000}.main-content{padding:5px}.icon-div{width:24px;height:24px}.text-div{flex:auto}.button-row{display:flex;gap: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: i8.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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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()\" class=\"main-content\">\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  <br />\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 }}\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div>\r\n        <mat-card *ngFor=\"let naam of type.namen\" class=\"card\">\r\n          <mat-card-content>\r\n            <div class=\"row\">\r\n              <div class=\"text-div\">\r\n                {{ naam.doNaam }} ({{ naam.ebOs.length }})\r\n              </div>\r\n              <div class=\"button-row\">\r\n                <button mat-raised-button (click)=\"Connect(naam.ebOs[0].id)\">\r\n                  FilterOption\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectMany(naam.ebOs[0].id)\">\r\n                  FilterOptionMany\r\n                </button>\r\n                <button mat-raised-button (click)=\"ConnectCategory(naam.ebOs[0].id)\">\r\n                  Category\r\n                </button>\r\n              </div>\r\n            </div>\r\n            <div *ngFor=\"let ebo of naam.ebOs\" class=\"row eborow\">\r\n              <div class=\"text-div\">\r\n                {{ ebo.eboNaam }}\r\n              </div>\r\n              <div>\r\n                <div *ngFor=\"let filteroption of ebo.filterOptions\">\r\n                  {{ filteroption.filterName }}: {{ filteroption.filterOptionName }}\r\n                </div>\r\n\r\n                <div *ngFor=\"let category of ebo.categories\">\r\n                  Category: {{ category.categoryName }}\r\n                </div>\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}.eborow{padding:3px;border-bottom:1px solid #000}.main-content{padding:5px}.icon-div{width:24px;height:24px}.text-div{flex:auto}.button-row{display:flex;gap:5px}\n"] }]
@@ -14307,7 +14904,7 @@ class BeheerCategoriesComponent {
     }
 }
 BeheerCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerCategoriesComponent, deps: [{ token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerCategoriesComponent, selector: "app-beheer-categories", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{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: 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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+BeheerCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerCategoriesComponent, selector: "app-beheer-categories", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerCategoriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-categories', template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"] }]
@@ -14518,7 +15115,7 @@ class BeheerTranslateComponent {
     }
 }
 BeheerTranslateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", 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: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.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: "15.0.0", 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: i8.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.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", 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"] }]
@@ -14567,7 +15164,7 @@ class FabIframeComponent {
     }
 }
 FabIframeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabIframeComponent, deps: [{ token: i4$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-FabIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabIframeComponent, selector: "app-fab-iframe", ngImport: i0, template: "<div class=\"main-content\">\r\n  <div class=\"row\">\r\n    <div class=\"flexauto\">\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>URL</mat-label>\r\n        <input matInput [(ngModel)]=\"URL\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div>\r\n      <button mat-raised-button (click)=\"Open()\">Open</button>\r\n    </div>\r\n  </div>\r\n\r\n  <iframe [src]=\"GetSafeURL()\" style=\"width: 100%; height: calc(100vH - 100px);\"></iframe>\r\n</div>\r\n", styles: [".main-content{padding:10px}.full-width{width:100%}.row{display:flex}.flexauto{flex:auto}\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"] }] });
+FabIframeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabIframeComponent, selector: "app-fab-iframe", ngImport: i0, template: "<div class=\"main-content\">\r\n  <div class=\"row\">\r\n    <div class=\"flexauto\">\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>URL</mat-label>\r\n        <input matInput [(ngModel)]=\"URL\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div>\r\n      <button mat-raised-button (click)=\"Open()\">Open</button>\r\n    </div>\r\n  </div>\r\n\r\n  <iframe [src]=\"GetSafeURL()\" style=\"width: 100%; height: calc(100vH - 100px);\"></iframe>\r\n</div>\r\n", styles: [".main-content{padding:10px}.full-width{width:100%}.row{display:flex}.flexauto{flex:auto}\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: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabIframeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-fab-iframe', template: "<div class=\"main-content\">\r\n  <div class=\"row\">\r\n    <div class=\"flexauto\">\r\n      <mat-form-field class=\"full-width\">\r\n        <mat-label>URL</mat-label>\r\n        <input matInput [(ngModel)]=\"URL\">\r\n      </mat-form-field>\r\n    </div>\r\n    <div>\r\n      <button mat-raised-button (click)=\"Open()\">Open</button>\r\n    </div>\r\n  </div>\r\n\r\n  <iframe [src]=\"GetSafeURL()\" style=\"width: 100%; height: calc(100vH - 100px);\"></iframe>\r\n</div>\r\n", styles: [".main-content{padding:10px}.full-width{width:100%}.row{display:flex}.flexauto{flex:auto}\n"] }]
@@ -14753,7 +15350,8 @@ FabrikantenCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         FabActionmenuComponent,
         FabSelectBcbproductComponent,
         FabInputComponent,
-        BeheerSelectFilteroptionDialogComponent], imports: [CommonModule,
+        BeheerSelectFilteroptionDialogComponent,
+        FabMultiselectComponent], imports: [CommonModule,
         HttpClientModule,
         MatInputModule,
         FormsModule,
@@ -14931,7 +15529,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                         FabActionmenuComponent,
                         FabSelectBcbproductComponent,
                         FabInputComponent,
-                        BeheerSelectFilteroptionDialogComponent
+                        BeheerSelectFilteroptionDialogComponent,
+                        FabMultiselectComponent
                     ],
                     providers: [
                         NavigateService,
@@ -14972,5 +15571,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOFilterOptionViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapToebehorenViewModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabCategoryNavigatorComponent, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenInputViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionRequiredViewModel, FilterOptionViewModel, FilterRequiredViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, InputViewModel, InputsViewModel, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, MoveFilterOptionRequest, MoveFilterRequest, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryBCBEigenschapToebehorenViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
+export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOFilterOptionViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapToebehorenViewModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, DynamicDisplayValueViewModel, DynamicFilterViewModel, DynamicFiltersViewModel, DynamicRangeInputViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabCategoryNavigatorComponent, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenInputViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionRequiredViewModel, FilterOptionViewModel, FilterRequiredViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, InputViewModel, InputsViewModel, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, MoveFilterOptionRequest, MoveFilterRequest, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, RangeInputFilterOptionRequiredViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryBCBEigenschapToebehorenViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
 //# sourceMappingURL=fabrikantencore.mjs.map