fabrikantencore 2.2.13 → 2.3.2

package/fesm2020/fabrikantencore.mjs

@@ -24,7 +24,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 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';
+import * as i10 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -35,7 +35,7 @@ import * as i4$1 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$1 from '@angular/material/tabs';
+import * as i9 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i9$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -51,7 +51,7 @@ import * as i6$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6$4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i10 from '@angular/material/core';
+import * as i11 from '@angular/material/core';
 import * as i4$3 from '@angular/platform-browser';
 
 //----------------------
@@ -5187,6 +5187,7 @@ class FabrikantenViewModel {
             this.bcbWebserviceURLBase = _data["bcbWebserviceURLBase"];
             this.hideBreadcrumbInIframe = _data["hideBreadcrumbInIframe"];
             this.hideInformationTab = _data["hideInformationTab"];
+            this.startTab = _data["startTab"];
             this.alwaysShowVariant = _data["alwaysShowVariant"];
             this.enableToebehoren = _data["enableToebehoren"];
             this.productSelectBlockedByFilters = _data["productSelectBlockedByFilters"];
@@ -5226,6 +5227,7 @@ class FabrikantenViewModel {
         data["bcbWebserviceURLBase"] = this.bcbWebserviceURLBase;
         data["hideBreadcrumbInIframe"] = this.hideBreadcrumbInIframe;
         data["hideInformationTab"] = this.hideInformationTab;
+        data["startTab"] = this.startTab;
         data["alwaysShowVariant"] = this.alwaysShowVariant;
         data["enableToebehoren"] = this.enableToebehoren;
         data["productSelectBlockedByFilters"] = this.productSelectBlockedByFilters;
@@ -6272,6 +6274,8 @@ class FabrikantenFileViewModel {
     init(_data) {
         if (_data) {
             this.file = _data["file"];
+            this.revitParametersNames = _data["revitParametersNames"];
+            this.revitParametersValues = _data["revitParametersValues"];
             this.customRFAZip = _data["customRFAZip"];
             this.rvtExtension = _data["rvtExtension"];
         }
@@ -6285,6 +6289,8 @@ class FabrikantenFileViewModel {
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
         data["file"] = this.file;
+        data["revitParametersNames"] = this.revitParametersNames;
+        data["revitParametersValues"] = this.revitParametersValues;
         data["customRFAZip"] = this.customRFAZip;
         data["rvtExtension"] = this.rvtExtension;
         return data;
@@ -6303,6 +6309,7 @@ class FabrikantenFileRequestModel {
         if (_data) {
             this.fileType = _data["fileType"];
             this.model3D = _data["model3D"];
+            this.webView2 = _data["webView2"];
             this.customBCBEBOId = _data["customBCBEBOId"];
             this.sessionId = _data["sessionId"];
         }
@@ -6317,6 +6324,7 @@ class FabrikantenFileRequestModel {
         data = typeof data === 'object' ? data : {};
         data["fileType"] = this.fileType;
         data["model3D"] = this.model3D;
+        data["webView2"] = this.webView2;
         data["customBCBEBOId"] = this.customBCBEBOId;
         data["sessionId"] = this.sessionId;
         return data;
@@ -8027,6 +8035,9 @@ class IgnoreOpbouwRequest {
         if (_data) {
             this.bcbOpbouwId = _data["bcbOpbouwId"];
             this.bcbeboId = _data["bcbeboId"];
+            this.many = _data["many"];
+            this.location = _data["location"];
+            this.bcbImportSetId = _data["bcbImportSetId"];
         }
     }
     static fromJS(data) {
@@ -8039,6 +8050,9 @@ class IgnoreOpbouwRequest {
         data = typeof data === 'object' ? data : {};
         data["bcbOpbouwId"] = this.bcbOpbouwId;
         data["bcbeboId"] = this.bcbeboId;
+        data["many"] = this.many;
+        data["location"] = this.location;
+        data["bcbImportSetId"] = this.bcbImportSetId;
         return data;
     }
 }
@@ -8059,6 +8073,12 @@ class ConnectOpbouwRequest {
             this.bcbOpbouwId = _data["bcbOpbouwId"];
             this.bcbImportSetId = _data["bcbImportSetId"];
             this.location = _data["location"];
+            this.bot = _data["bot"];
+            this.dO1 = _data["dO1"];
+            this.dO2 = _data["dO2"];
+            this.dO3 = _data["dO3"];
+            this.dO4 = _data["dO4"];
+            this.kenmerk = _data["kenmerk"];
         }
     }
     static fromJS(data) {
@@ -8075,6 +8095,12 @@ class ConnectOpbouwRequest {
         data["bcbOpbouwId"] = this.bcbOpbouwId;
         data["bcbImportSetId"] = this.bcbImportSetId;
         data["location"] = this.location;
+        data["bot"] = this.bot;
+        data["dO1"] = this.dO1;
+        data["dO2"] = this.dO2;
+        data["dO3"] = this.dO3;
+        data["dO4"] = this.dO4;
+        data["kenmerk"] = this.kenmerk;
         return data;
     }
 }
@@ -9767,42 +9793,54 @@ class StatisticsService {
     }
     PageView(name) {
         if (this.LastPageView != name) {
-            gtag('config', this.AnalyticsCode);
-            gtag('event', 'pageview', {
-                'name': name
-            });
-            this.LastPageView = name;
+            if (typeof gtag !== 'undefined') {
+                gtag('config', this.AnalyticsCode);
+                gtag('event', 'pageview', {
+                    'name': name
+                });
+                this.LastPageView = name;
+            }
         }
     }
     SelectCategory(name) {
-        gtag('config', this.AnalyticsCode);
-        gtag('event', "SelectCategory", {
-            category: name
-        });
+        if (typeof gtag !== 'undefined') {
+            gtag('config', this.AnalyticsCode);
+            gtag('event', "SelectCategory", {
+                category: name
+            });
+        }
     }
     SelectFilterOption(name) {
-        gtag('config', this.AnalyticsCode);
-        gtag('event', "SelectFilterOption", {
-            filteroption: name
-        });
+        if (typeof gtag !== 'undefined') {
+            gtag('config', this.AnalyticsCode);
+            gtag('event', "SelectFilterOption", {
+                filteroption: name
+            });
+        }
     }
     SelectRangeValue(name) {
-        gtag('config', this.AnalyticsCode);
-        gtag('event', "SelectRangeValue", {
-            range: name
-        });
+        if (typeof gtag !== 'undefined') {
+            gtag('config', this.AnalyticsCode);
+            gtag('event', "SelectRangeValue", {
+                range: name
+            });
+        }
     }
     SelectProduct(name) {
-        gtag('config', this.AnalyticsCode);
-        gtag('event', "SelectProduct", {
-            product: name
-        });
+        if (typeof gtag !== 'undefined') {
+            gtag('config', this.AnalyticsCode);
+            gtag('event', "SelectProduct", {
+                product: name
+            });
+        }
     }
     DownloadFile(filetype, productname) {
-        gtag('config', this.AnalyticsCode);
-        gtag('event', "Download " + filetype, {
-            product: productname
-        });
+        if (typeof gtag !== 'undefined') {
+            gtag('config', this.AnalyticsCode);
+            gtag('event', "Download " + filetype, {
+                product: productname
+            });
+        }
     }
     Init() {
         //if (this.analytics == null) {
@@ -10354,8 +10392,10 @@ class FabrikantenService {
         this.Download2DAutoCADDwgLoading = false;
         this.Download2DDxfLoading = false;
         this.DownloadRFALoading = false;
+        this.SelectedTabIndex = 0;
         this.SelectedPhoto = 0;
         this.SelectedToebehoren = null;
+        this.SelectedTabSet = false;
         this.SelectedTab = "Informatie";
         this.Loaded = false;
         this.NavigateService.FabrikantenService = this;
@@ -10804,12 +10844,40 @@ class FabrikantenService {
         return true;
     }
     ResetTabs() {
-        if (this.FabrikantenViewModel.hideInformationTab) {
+        if (this.FabrikantenViewModel.startTab != null) {
+            this.SelectedTab = this.FabrikantenViewModel.startTab;
+        }
+        else if (this.FabrikantenViewModel.hideInformationTab) {
             this.SelectedTab = "3D";
         }
         else {
             this.SelectedTab = "Informatie";
         }
+        if (this.FabrikantenViewModel.hideInformationTab) {
+            if (this.SelectedTab == "3D") {
+                this.SelectedTabIndex = 0;
+            }
+            if (this.SelectedTab == "2D") {
+                this.SelectedTabIndex = 1;
+            }
+            if (this.SelectedTab == "Bestek") {
+                this.SelectedTabIndex = 2;
+            }
+        }
+        else {
+            if (this.SelectedTab == "Informatie") {
+                this.SelectedTabIndex = 0;
+            }
+            if (this.SelectedTab == "3D") {
+                this.SelectedTabIndex = 1;
+            }
+            if (this.SelectedTab == "2D") {
+                this.SelectedTabIndex = 2;
+            }
+            if (this.SelectedTab == "Bestek") {
+                this.SelectedTabIndex = 3;
+            }
+        }
     }
     // Dynamic models
     GetDynamicDisplayValues() {
@@ -11084,12 +11152,13 @@ class FabrikantenService {
             }
         });
     }
-    DownloadRFA(custombcbeboid) {
+    DownloadRFA(custombcbeboid, webview2) {
         this.DownloadRFALoading = true;
         var request = new FabrikantenFileRequestModel();
         request.sessionId = this.FabrikantenViewModel.sessionId;
         request.fileType = "rfa";
         request.model3D = false;
+        request.webView2 = webview2;
         request.customBCBEBOId = custombcbeboid;
         if (this.StatisticsService.Active) {
             if (this.FabrikantenViewModel?.selectedProduct != null) {
@@ -11098,14 +11167,24 @@ class FabrikantenService {
         }
         this.FabrikantenApiClient.getFabrikantenFileViewModel(request).subscribe((model) => {
             if (model.customRFAZip) {
-                this.StartDownload(model.file + "", ".zip");
+                if (this.IsInWebViewBrowser()) {
+                    this.PostWebview2Message(model);
+                }
+                else {
+                    this.StartDownload(model.file + "", ".zip");
+                }
             }
             else {
                 if (model.rvtExtension) {
                     this.StartDownload(model.file + "", ".rvt");
                 }
                 else {
-                    this.StartDownload(model.file + "", ".rfa");
+                    if (this.IsInWebViewBrowser()) {
+                        this.PostWebview2Message(model);
+                    }
+                    else {
+                        this.StartDownload(model.file + "", ".rfa");
+                    }
                 }
             }
             this.DownloadRFALoading = false;
@@ -11118,6 +11197,24 @@ class FabrikantenService {
             }
         });
     }
+    PostWebview2Message(model) {
+        var action = "download";
+        var file = model.file + "";
+        var filename = this.CollectFileName();
+        var parametersnames = model.revitParametersNames;
+        var parametersvalues = model.revitParametersValues;
+        window.chrome.webview.postMessage({ action, file, filename, parametersnames, parametersvalues });
+    }
+    IsInWebViewBrowser() {
+        if (window != undefined) {
+            if (window.chrome != undefined) {
+                if (window.chrome.webview != undefined) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
     StartDownload(url, extension) {
         var filename = this.CollectFileName();
         if (filename != "") {
@@ -11856,11 +11953,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
             }] } });
 
 class BeheerSelectFilterDialogComponent {
-    constructor(FiltersApiClient, dialogRef) {
+    constructor(FiltersApiClient, data, dialogRef) {
         this.FiltersApiClient = FiltersApiClient;
+        this.data = data;
         this.dialogRef = dialogRef;
         this.LoadingFilters = false;
         this.FilterNaamNieuw = "";
+        this.EBOSelect = false;
+        this.BOT = false;
+        this.DO1 = false;
+        this.DO2 = false;
+        this.DO3 = false;
+        this.DO4 = false;
+        this.Kenmerk = true;
+        if (data?.EBOSelect == true) {
+            this.EBOSelect = data.EBOSelect;
+        }
     }
     ngOnInit() {
         this.LoadFilters();
@@ -11874,7 +11982,15 @@ class BeheerSelectFilterDialogComponent {
         requestfilter.name = this.FilterNaamNieuw;
         this.FiltersApiClient.createFilter(requestfilter).subscribe((model) => {
             this.LoadingFilters = false;
-            this.dialogRef.close({ filter: model.id });
+            this.dialogRef.close({
+                filter: model.id,
+                bot: this.BOT,
+                do1: this.DO1,
+                do2: this.DO2,
+                do3: this.DO3,
+                do4: this.DO4,
+                kenmerk: this.Kenmerk
+            });
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -11886,7 +12002,15 @@ class BeheerSelectFilterDialogComponent {
         });
     }
     BestaandToevoegen() {
-        this.dialogRef.close({ filter: this.FilterSelected });
+        this.dialogRef.close({
+            filter: this.FilterSelected,
+            bot: this.BOT,
+            do1: this.DO1,
+            do2: this.DO2,
+            do3: this.DO3,
+            do4: this.DO4,
+            kenmerk: this.Kenmerk
+        });
     }
     LoadFilters() {
         this.LoadingFilters = true;
@@ -11904,12 +12028,15 @@ 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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" }] });
+BeheerSelectFilterDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerSelectFilterDialogComponent, deps: [{ token: FiltersApiClient }, { token: MAT_DIALOG_DATA }, { 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  <div *ngIf=\"EBOSelect\" class=\"ebo-select\">\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"BOT\">BOT</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO1\">DO1</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO2\">DO2</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO3\">DO3</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO4\">DO4</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"Kenmerk\">Kenmerk</mat-checkbox>\r\n    </div>\r\n  </div>\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}.ebo-select{display:flex}.ebo-select-item{padding:5px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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 }]; } });
+            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  <div *ngIf=\"EBOSelect\" class=\"ebo-select\">\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"BOT\">BOT</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO1\">DO1</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO2\">DO2</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO3\">DO3</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"DO4\">DO4</mat-checkbox>\r\n    </div>\r\n    <div class=\"ebo-select-item\">\r\n      <mat-checkbox [(ngModel)]=\"Kenmerk\">Kenmerk</mat-checkbox>\r\n    </div>\r\n  </div>\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}.ebo-select{display:flex}.ebo-select-item{padding:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FiltersApiClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$4.MatDialogRef }]; } });
 
 class BeheerSelectFilteroptionDialogComponent {
     constructor(FiltersApiClient, dialogRef, ImportSetsService, ChangeDetectorRef) {
@@ -11966,7 +12093,7 @@ class BeheerSelectFilteroptionDialogComponent {
     }
 }
 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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" }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -12052,7 +12179,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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" }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -12264,10 +12391,10 @@ 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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"] }] });
+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.connected\">\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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"] }]
+            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.connected\">\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"] }]
         }], ctorParameters: function () { return [{ type: ImportSetsService }, { type: ProductsService }, { type: i1$4.MatDialog }, { type: ProductsApiClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { eigenschap: [{
                 type: Input
             }] } });
@@ -12324,7 +12451,7 @@ class BeheerProductsEboComponent {
     ConnectMany() {
         var dialogRef = this.dialog.open(BeheerSelectFilterDialogComponent, {
             data: {
-                name: this.ebo.location
+                EBOSelect: true
             }
         });
         dialogRef.afterClosed().subscribe((result) => {
@@ -12340,6 +12467,12 @@ class BeheerProductsEboComponent {
                             request.bcbOpbouwId = this.ebo.opbouwParentId;
                             request.location = this.ebo.location;
                             request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
+                            request.bot = result.bot;
+                            request.dO1 = result.do1;
+                            request.dO2 = result.do2;
+                            request.dO3 = result.do3;
+                            request.dO4 = result.do4;
+                            request.kenmerk = result.kenmerk;
                             this.ProductsApiClient.connectOpbouw(request).subscribe(() => {
                                 this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                             }, (error) => {
@@ -12356,6 +12489,7 @@ class BeheerProductsEboComponent {
             var request = new IgnoreOpbouwRequest();
             request.bcbeboId = this.ebo.id;
             request.bcbOpbouwId = this.ebo.opbouwParentId;
+            request.many = false;
             this.ProductsApiClient.ignoreBCBOpbouw(request).subscribe(() => {
                 this.ProductsService.LoadProduct(this.ChangeDetectorRef);
             }, (error) => {
@@ -12364,20 +12498,22 @@ class BeheerProductsEboComponent {
         }
     }
     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);
-        //    });
-        //  }
-        //}
+        if (confirm("Weet je het zeker?")) {
+            this.ProductsService.LoadingProducts = true;
+            if (this.ProductsService.BCBProductViewModel != null && this.ProductsService.ProductViewModel != null) {
+                var request = new IgnoreOpbouwRequest();
+                request.bcbeboId = this.ebo.id;
+                request.bcbOpbouwId = this.ebo.opbouwParentId;
+                request.many = true;
+                request.location = this.ebo.location;
+                request.bcbImportSetId = this.ProductsService.ProductViewModel.importSetId;
+                this.ProductsApiClient.ignoreBCBOpbouw(request).subscribe(() => {
+                    this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+                }, (error) => {
+                    alert(error);
+                });
+            }
+        }
     }
     RemoveIgnore() {
     }
@@ -12592,7 +12728,7 @@ 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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"] }] });
+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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsProductComponent, selector: "app-beheer-products-product", inputs: ["ProductViewModel"] }, { kind: "component", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: ["BCBProductViewModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -12712,7 +12848,6 @@ class BeheerFiltersComponent {
             if (result?.filteroption != null && this.InputViewModel?.filter) {
                 if (result.filteroption > 0) {
                     if (confirm("Weet je het zeker?")) {
-                        this.ChangeDetectorRef.detectChanges();
                         this.ChangeDetectorRef.detectChanges();
                         var request = new SetFilterOptionRequiredRequest();
                         request.filterId = this.InputViewModel.filter.id;
@@ -12859,10 +12994,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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\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}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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" }] });
+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                <span [ngClass]=\"{'selected': input.filter.id == InputViewModel?.filter.id }\">\r\n                  {{ input.filter.name }} (#{{ input.filter.id }})\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                {{ input.range.name }} (#{{ input.range.id }})\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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n               </div>\r\n               <div *ngFor=\"let filter of InputViewModel.filter.requiresFilters\" class=\"required-option\">\r\n                 {{ filter.requiredFilterName }}\r\n                 <button mat-raised-button>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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\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}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.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}.selected{font-weight:700}.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:5px 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\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}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.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"] }]
+            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                <span [ngClass]=\"{'selected': input.filter.id == InputViewModel?.filter.id }\">\r\n                  {{ input.filter.name }} (#{{ input.filter.id }})\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"input.range\">\r\n                {{ input.range.name }} (#{{ input.range.id }})\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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\r\n                 {{ option.requiredFilterName }}: {{ option.requiredFilterOptionName }}\r\n                 <button mat-raised-button (click)=\"RemoveRequireFilterOption(option)\">Remove</button>\r\n               </div>\r\n               <div *ngFor=\"let filter of InputViewModel.filter.requiresFilters\" class=\"required-option\">\r\n                 {{ filter.requiredFilterName }}\r\n                 <button mat-raised-button>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\" class=\"required-option\" [ngClass]=\"{ 'AND': option.filterOptionRequiredType == 0, 'OR': option.filterOptionRequiredType == 1 }\">\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}.required-option{border:1px solid #000;border-radius:2px;padding:2px;margin:2px}.AND{border-color:red}.OR{border-color:#0f0}.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}.selected{font-weight:700}.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:5px 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 {
@@ -12873,7 +13008,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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"] }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -13012,7 +13147,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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" }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -13501,7 +13636,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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"] }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerImportSetsOpbouwComponent, selector: "app-beheer-import-sets-opbouw", inputs: ["opbouw"] }, { kind: "component", type: BeheerImportSetsEigenschapComponent, selector: "app-beheer-import-sets-eigenschap", inputs: ["eigenschap"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -13639,7 +13774,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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" }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]
@@ -13749,10 +13884,10 @@ class FabFilterComponent {
     }
 }
 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        <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            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n              </div>\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}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n              </div>\r\n            </ng-container>\r\n            <span class=\"name-span\">{{ TranslateService.GetActiveValueFilterOption(option.id) }}</span>\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;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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        <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            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n              </div>\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}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\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            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n              </div>\r\n            </ng-container>\r\n            <span class=\"name-span\">{{ TranslateService.GetActiveValueFilterOption(option.id) }}</span>\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;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{
                 type: Input
             }], filterchanged: [{
@@ -13939,6 +14074,9 @@ class FabActionmenuComponent {
     OpenBCBLinkToebehoren() {
         this.FabrikantenService.OpenBCBLink(this.BestekService.FabrikantenBestekViewModel.wuid + "");
     }
+    DownloadRevit() {
+        this.FabrikantenService.DownloadRFA(undefined, this.FabrikantenService.IsInWebViewBrowser());
+    }
     RefreshSnede() {
         if (this.FabrikantenService?.FabrikantenViewModel?.sessionId != null) {
             this.SVGService.LoadFabrikantenSVGViewModel(this.FabrikantenService.FabrikantenViewModel.sessionId, this.ChangeDetectorRef);
@@ -13951,10 +14089,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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 });
+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)=\"DownloadRevit()\" *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)=\"DownloadRevit()\" *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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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)=\"DownloadRevit()\" *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)=\"DownloadRevit()\" *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 {
@@ -14836,10 +14974,10 @@ 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: i3.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 });
+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\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (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: i3.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: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.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"] }]
+            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\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (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"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: BestekService }, { type: TranslateService }, { type: WebGLService }, { type: i1$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -14998,7 +15136,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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" }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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" }]
@@ -15049,7 +15187,9 @@ class BeheerEboKoppelComponent {
     }
     ConnectMany(id) {
         var dialogRef = this.dialog.open(BeheerSelectFilterDialogComponent, {
-            data: {}
+            data: {
+                EBOSelect: true
+            }
         });
         dialogRef.afterClosed().subscribe((result) => {
             if (result?.filter != null) {
@@ -15113,7 +15253,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()\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div 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\" (click)=\"lastopened = type.type;\" [expanded]=\"lastopened === type.type\">\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}.loader{position:fixed;width:100%;z-index:100;background-color:#fffa;height:100%;top:0}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$1.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()\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div 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\" (click)=\"lastopened = type.type;\" [expanded]=\"lastopened === type.type\">\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}.loader{position:fixed;width:100%;z-index:100;background-color:#fffa;height:100%;top:0}.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$1.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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()\" class=\"loader\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div 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\" (click)=\"lastopened = type.type;\" [expanded]=\"lastopened === type.type\">\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}.loader{position:fixed;width:100%;z-index:100;background-color:#fffa;height:100%;top:0}.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"] }]
@@ -15363,7 +15503,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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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"] }] });
+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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabFlagComponent, selector: "fab-flag", inputs: ["country"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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"] }]