fabrikantencore 2.0.6 → 2.0.8

package/fesm2020/fabrikantencore.mjs

@@ -2337,10 +2337,10 @@ class ProductsApiClient {
         }
         return of(null);
     }
-    connectBCBEigenschapOptieCategory(pConnectBCBEigenschapOptieCategoryRequest) {
-        let url_ = this.baseUrl + "/api/products/connectbcbeigenschapoptiecategory";
+    connectBCBEigenschapCategory(pConnectBCBEigenschapRequest) {
+        let url_ = this.baseUrl + "/api/products/connectbcbeigenschapcategory";
         url_ = url_.replace(/[?&]$/, "");
-        const content_ = JSON.stringify(pConnectBCBEigenschapOptieCategoryRequest);
+        const content_ = JSON.stringify(pConnectBCBEigenschapRequest);
         let options_ = {
             body: content_,
             observe: "response",
@@ -2350,11 +2350,11 @@ class ProductsApiClient {
             })
         };
         return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
-            return this.processConnectBCBEigenschapOptieCategory(response_);
+            return this.processConnectBCBEigenschapCategory(response_);
         })).pipe(catchError((response_) => {
             if (response_ instanceof HttpResponseBase) {
                 try {
-                    return this.processConnectBCBEigenschapOptieCategory(response_);
+                    return this.processConnectBCBEigenschapCategory(response_);
                 }
                 catch (e) {
                     return throwError(e);
@@ -2364,7 +2364,56 @@ class ProductsApiClient {
                 return throwError(response_);
         }));
     }
-    processConnectBCBEigenschapOptieCategory(response) {
+    processConnectBCBEigenschapCategory(response) {
+        const status = response.status;
+        const responseBlob = response instanceof HttpResponse ? response.body :
+            response.error instanceof Blob ? response.error : undefined;
+        let _headers = {};
+        if (response.headers) {
+            for (let key of response.headers.keys()) {
+                _headers[key] = response.headers.get(key);
+            }
+        }
+        if (status === 200) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return of(null);
+            }));
+        }
+        else if (status !== 200 && status !== 204) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            }));
+        }
+        return of(null);
+    }
+    connectBCBEigenschapFilter(pConnectBCBEigenschapRequest) {
+        let url_ = this.baseUrl + "/api/products/connectbcbeigenschapfilter";
+        url_ = url_.replace(/[?&]$/, "");
+        const content_ = JSON.stringify(pConnectBCBEigenschapRequest);
+        let options_ = {
+            body: content_,
+            observe: "response",
+            responseType: "blob",
+            headers: new HttpHeaders({
+                "Content-Type": "application/json",
+            })
+        };
+        return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
+            return this.processConnectBCBEigenschapFilter(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processConnectBCBEigenschapFilter(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processConnectBCBEigenschapFilter(response) {
         const status = response.status;
         const responseBlob = response instanceof HttpResponse ? response.body :
             response.error instanceof Blob ? response.error : undefined;
@@ -6523,7 +6572,7 @@ class RemoveOpbouwOptieRequest {
         return data;
     }
 }
-class ConnectBCBEigenschapOptieCategoryRequest {
+class ConnectBCBEigenschapRequest {
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -6534,20 +6583,22 @@ class ConnectBCBEigenschapOptieCategoryRequest {
     }
     init(_data) {
         if (_data) {
-            this.bcbProductEigenschapOptieId = _data["bcbProductEigenschapOptieId"];
-            this.categoryId = _data["categoryId"];
+            this.bcbEigenschapId = _data["bcbEigenschapId"];
+            this.bcbImportSetId = _data["bcbImportSetId"];
+            this.location = _data["location"];
         }
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new ConnectBCBEigenschapOptieCategoryRequest();
+        let result = new ConnectBCBEigenschapRequest();
         result.init(data);
         return result;
     }
     toJSON(data) {
         data = typeof data === 'object' ? data : {};
-        data["bcbProductEigenschapOptieId"] = this.bcbProductEigenschapOptieId;
-        data["categoryId"] = this.categoryId;
+        data["bcbEigenschapId"] = this.bcbEigenschapId;
+        data["bcbImportSetId"] = this.bcbImportSetId;
+        data["location"] = this.location;
         return data;
     }
 }
@@ -10401,9 +10452,10 @@ class ProductsService {
             });
         }
     }
-    LoadProduct() {
+    LoadProduct(changeDetectorRef) {
         if (this.ProductViewModel != null) {
             this.LoadingProducts = true;
+            changeDetectorRef.detectChanges();
             var request = new GetProductRequest();
             request.id = this.ProductViewModel.id;
             this.ProductsApiClient.getProductViewModel(request).subscribe((model) => {
@@ -10425,6 +10477,7 @@ class ProductsService {
                     }
                 }
                 this.LoadingProducts = false;
+                changeDetectorRef.detectChanges();
             }, (error) => {
                 if (error.status == 400)
                     console.log(error.json());
@@ -10433,6 +10486,7 @@ class ProductsService {
                     console.log(error);
                 }
                 this.LoadingProducts = false;
+                changeDetectorRef.detectChanges();
             });
         }
     }
@@ -10544,13 +10598,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
             }] } });
 
 class BeheerProductsConnectManynameDialogComponent {
-    constructor(dialogRef, data, ProductsApiClient, ProductsService, ImportSetsService, FiltersApiClient) {
+    constructor(dialogRef, data, ProductsApiClient, ProductsService, ImportSetsService, FiltersApiClient, ChangeDetectorRef) {
         this.dialogRef = dialogRef;
         this.data = data;
         this.ProductsApiClient = ProductsApiClient;
         this.ProductsService = ProductsService;
         this.ImportSetsService = ImportSetsService;
         this.FiltersApiClient = FiltersApiClient;
+        this.ChangeDetectorRef = ChangeDetectorRef;
         this.LoadingPreview = true;
         this.LoadingFilters = true;
         this.LevelsDeep = 0;
@@ -10570,7 +10625,7 @@ class BeheerProductsConnectManynameDialogComponent {
             model.filterId = this.FilterSelected;
             this.LoadingPreview = true;
             this.ProductsApiClient.connectManyName(model).subscribe((model) => {
-                this.ProductsService.LoadProduct();
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                 this.LoadingPreview = false;
                 this.dialogRef.close();
             }, (error) => {
@@ -10594,7 +10649,7 @@ class BeheerProductsConnectManynameDialogComponent {
             model.filterId = this.FilterSelected;
             this.LoadingPreview = true;
             this.ProductsApiClient.connectManyEBO(model).subscribe(() => {
-                this.ProductsService.LoadProduct();
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                 this.LoadingPreview = false;
                 this.dialogRef.close();
             }, (error) => {
@@ -10617,7 +10672,7 @@ class BeheerProductsConnectManynameDialogComponent {
             model.filterId = this.FilterSelected;
             this.LoadingPreview = true;
             this.ProductsApiClient.connectManyEBODO(model).subscribe(() => {
-                this.ProductsService.LoadProduct();
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                 this.LoadingPreview = false;
                 this.dialogRef.close();
             }, (error) => {
@@ -10736,7 +10791,7 @@ class BeheerProductsConnectManynameDialogComponent {
         });
     }
 }
-BeheerProductsConnectManynameDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectManynameDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: ProductsService }, { token: ImportSetsService }, { token: FiltersApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsConnectManynameDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectManynameDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: ProductsService }, { token: ImportSetsService }, { token: FiltersApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 BeheerProductsConnectManynameDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsConnectManynameDialogComponent, selector: "app-beheer-products-connect-manyname-dialog", ngImport: i0, template: "<div>\r\n  <div *ngIf=\"Loading()\">\r\n    <app-fab-loader></app-fab-loader>\r\n  </div>\r\n  <div *ngIf=\"!Loading()\">\r\n    <div class=\"displayflex\" *ngIf=\"bcbebodoid == null\">\r\n      <mat-form-field appearance=\"fill\" (change)=\"Refresh()\">\r\n        <mat-label>Levels</mat-label>\r\n        <input matInput type=\"number\" [(ngModel)]=\"LevelsDeep\">\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div *ngFor=\"let result of ConnectManyPreviewResponse.containers\">\r\n        <div class=\"container-name\">{{ result.name }}</div>\r\n        <div class=\"opties optie\" >\r\n          <div *ngFor=\"let ebo of result.ebOs\" class=\"displayflex\">\r\n            <div >\r\n              {{ ebo.count }}x\r\n            </div>\r\n            <app-beheer-display-ebo [ebo]=\"ebo.ebo\"></app-beheer-display-ebo>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"displayflex\">\r\n      <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n        <mat-label>Filter</mat-label>\r\n        <mat-select [(ngModel)]=\"FilterSelected\">\r\n          <mat-option *ngFor=\"let filter of FiltersViewModel.filterViewModels\" [value]=\"filter.id\">\r\n            {{filter.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n\r\n      <div *ngIf=\"bcbproducteigenschapoptieid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"Connect()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbebodoid != null\">\r\n        <button class=\"button\" mat-raised-button (click)=\"ConnectEBODO()\">\r\n          Connect\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"bcbproductopbouwoptieid != null\" class=\"displayflex\">\r\n        <div *ngFor=\"let type of GetConnects()\">\r\n          <button class=\"button\" mat-raised-button (click)=\"ConnectType(type)\">\r\n            {{ type }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".displayflex{display:flex}.button{height:38px;width:100px}.main-content{padding:10px}.opties{padding-left:10px;max-height:600px;overflow:auto}.container-name{padding:3px;border-bottom:2px solid #000;font-weight:700}.optie{padding:2px;border-bottom:1px solid #000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerDisplayEboComponent, selector: "app-beheer-display-ebo", inputs: ["ebo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectManynameDialogComponent, decorators: [{
             type: Component,
@@ -10744,7 +10799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: ProductsApiClient }, { type: ProductsService }, { type: ImportSetsService }, { type: FiltersApiClient }]; } });
+                }] }, { type: ProductsApiClient }, { type: ProductsService }, { type: ImportSetsService }, { type: FiltersApiClient }, { type: i0.ChangeDetectorRef }]; } });
 
 class BeheerProductsKoppelFilteroptionDailogComponent {
     constructor(dialogRef, data, FiltersApiClient, ProductsApiClient, ProductsService) {
@@ -10887,76 +10942,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: FiltersApiClient }, { type: ProductsApiClient }, { type: ProductsService }]; } });
 
-class BeheerConnectCategoryDialogComponent {
-    constructor(dialogRef, data, CategoriesApiClient) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.CategoriesApiClient = CategoriesApiClient;
-        this.Loading = true;
-        this.DOType = "DOType";
-        this.DONaam = "DONaam";
-        this.CategoryName = "";
-        this.DOType = data.dotype;
-        this.DONaam = data.donaam;
-        this.CategoryName = data.donaam;
-    }
-    ngOnInit() {
-        this.LoadCategories();
-    }
-    Nieuw() {
-        this.Loading = true;
-        var requestcategory = new CreateCategoryRequest();
-        requestcategory.name = this.CategoryName;
-        this.CategoriesApiClient.createCategory(requestcategory).subscribe((model) => {
-            this.Loading = false;
-            this.dialogRef.close(model.id);
-        }, (error) => {
-            if (error.status == 400)
-                console.log(error.json());
-            else {
-                console.log('An unexpected error occured');
-                console.log(error);
-            }
-            this.Loading = false;
-        });
-    }
-    Bestaand() {
-        this.dialogRef.close(this.CategorySelected);
-    }
-    LoadCategories() {
-        this.Loading = true;
-        this.CategoriesApiClient.getCategoriesViewModel().subscribe((model) => {
-            this.CategoriesViewModel = model;
-            this.Loading = false;
-        }, (error) => {
-            if (error.status == 400)
-                console.log(error.json());
-            else {
-                console.log('An unexpected error occured');
-                console.log(error);
-            }
-            this.Loading = false;
-        });
-    }
-}
-BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerConnectCategoryDialogComponent, selector: "app-beheer-connect-category-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-beheer-connect-category-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: CategoriesApiClient }]; } });
-
 class BeheerProductsConnectRangeinputComponent {
-    constructor(dialogRef, data, ProductsApiClient, FiltersApiClient, ImportSetsService, ProductsService) {
+    constructor(dialogRef, data, ProductsApiClient, FiltersApiClient, ImportSetsService, ProductsService, ChangeDetectorRef) {
         this.dialogRef = dialogRef;
         this.data = data;
         this.ProductsApiClient = ProductsApiClient;
         this.FiltersApiClient = FiltersApiClient;
         this.ImportSetsService = ImportSetsService;
         this.ProductsService = ProductsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
         this.RangeInputNaamNieuw = "";
         this.LoadingRangeInputs = false;
         this.LoadingOptions = false;
@@ -10977,7 +10971,7 @@ class BeheerProductsConnectRangeinputComponent {
             request.location = this.location;
             this.ProductsApiClient.connectBCBEigenschapRangeInput(request).subscribe(() => {
                 this.dialogRef.close();
-                this.ProductsService.LoadProduct();
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
             }, (error) => {
                 alert(error);
             });
@@ -10993,7 +10987,7 @@ class BeheerProductsConnectRangeinputComponent {
             request.location = this.location;
             this.ProductsApiClient.connectBCBEigenschapRangeInput(request).subscribe(() => {
                 this.dialogRef.close();
-                this.ProductsService.LoadProduct();
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
             }, (error) => {
                 alert(error);
             });
@@ -11027,7 +11021,7 @@ class BeheerProductsConnectRangeinputComponent {
         return this.LoadingRangeInputs || this.LoadingOptions;
     }
 }
-BeheerProductsConnectRangeinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: FiltersApiClient }, { token: ImportSetsService }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsConnectRangeinputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ProductsApiClient }, { token: FiltersApiClient }, { token: ImportSetsService }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 BeheerProductsConnectRangeinputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsConnectRangeinputComponent, selector: "app-beheer-products-connect-rangeinput", ngImport: i0, template: "<div *ngIf=\"Loading()\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading()\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range input</mat-label>\r\n          <input matInput [(ngModel)]=\"RangeInputNaamNieuw\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"NieuwToevoegen()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Range Input</mat-label>\r\n          <mat-select [(ngModel)]=\"RangeInputSelected\">\r\n            <mat-option *ngFor=\"let range of RangeInputsViewModel.rangeInputs\" [value]=\"range.id\">\r\n              {{range.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Koppel</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n  <div class=\"options-container\">\r\n    <div *ngFor=\"let fullname of Options.eigenschappen\">\r\n      <b>{{ fullname.location }}</b>\r\n      <div *ngFor=\"let ebo of fullname.eigenschappen\">\r\n        {{ ebo }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".options-container{max-height:300px}.tool-bar{padding:2px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsConnectRangeinputComponent, decorators: [{
             type: Component,
@@ -11035,7 +11029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
         }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: ProductsApiClient }, { type: FiltersApiClient }, { type: ImportSetsService }, { type: ProductsService }]; } });
+                }] }, { type: ProductsApiClient }, { type: FiltersApiClient }, { type: ImportSetsService }, { type: ProductsService }, { type: i0.ChangeDetectorRef }]; } });
 
 class BeheerProductsEigenschapBereikComponent {
     constructor() { }
@@ -11052,10 +11046,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
             }] } });
 
 class BeheerProductsEigenschapComponent {
-    constructor(ProductsService, dialog, ProductsApiClient) {
+    constructor(ImportSetsService, ProductsService, dialog, ProductsApiClient, ChangeDetectorRef) {
+        this.ImportSetsService = ImportSetsService;
         this.ProductsService = ProductsService;
         this.dialog = dialog;
         this.ProductsApiClient = ProductsApiClient;
+        this.ChangeDetectorRef = ChangeDetectorRef;
     }
     ngOnInit() {
     }
@@ -11081,7 +11077,7 @@ class BeheerProductsEigenschapComponent {
                         request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
                         request.location = this.eigenschap.location;
                         this.ProductsApiClient.connectBCBEigenschapOptieFilterOption(request).subscribe(() => {
-                            this.ProductsService.LoadProduct();
+                            this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                         }, (error) => {
                             alert(error);
                         });
@@ -11092,7 +11088,7 @@ class BeheerProductsEigenschapComponent {
                     request2.bcbProductEigenschapOptieId = id;
                     request2.filterId = result.filter;
                     this.ProductsApiClient.connectManyName(request2).subscribe((model) => {
-                        this.ProductsService.LoadProduct();
+                        this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                     }, (error) => {
                         alert(error);
                     });
@@ -11101,11 +11097,16 @@ class BeheerProductsEigenschapComponent {
         });
     }
     ConnectMany(id) {
-        var dialogRef = this.dialog.open(BeheerProductsConnectManynameDialogComponent, {
-            data: {
-                bcbproducteigenschapoptieid: id
-            }
-        });
+        if (confirm("Weet je het zeker?")) {
+            var request = new ConnectBCBEigenschapRequest();
+            request.bcbEigenschapId = this.eigenschap.id;
+            request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
+            this.ProductsApiClient.connectBCBEigenschapFilter(request).subscribe(() => {
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+            }, (error) => {
+                alert(error);
+            });
+        }
     }
     Ignore(id) {
         if (this.ProductsService.BCBProductViewModel != null) {
@@ -11115,7 +11116,7 @@ class BeheerProductsEigenschapComponent {
             request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
             request.location = this.eigenschap.location;
             this.ProductsApiClient.ignoreBCBEigenschapOptieFilterOption(request).subscribe(() => {
-                this.ProductsService.LoadProduct();
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
             }, (error) => {
                 alert(error);
             });
@@ -11129,25 +11130,17 @@ class BeheerProductsEigenschapComponent {
             }
         });
     }
-    ConnectCategory(id, dotype, donaam) {
-        var dialogRef = this.dialog.open(BeheerConnectCategoryDialogComponent, {
-            data: {
-                dotype: dotype,
-                donaam: donaam
-            }
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result != null && result > 0) {
-                var request = new ConnectBCBEigenschapOptieCategoryRequest();
-                request.bcbProductEigenschapOptieId = id;
-                request.categoryId = result;
-                this.ProductsApiClient.connectBCBEigenschapOptieCategory(request).subscribe(() => {
-                    this.ProductsService.LoadProduct();
-                }, (error) => {
-                    alert(error);
-                });
-            }
-        });
+    ConnectCategory() {
+        if (confirm("Weet je het zeker?")) {
+            var request = new ConnectBCBEigenschapRequest();
+            request.bcbEigenschapId = this.eigenschap.id;
+            request.bcbImportSetId = this.ImportSetsService.BCBImportSetSelected;
+            this.ProductsApiClient.connectBCBEigenschapCategory(request).subscribe(() => {
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+            }, (error) => {
+                alert(error);
+            });
+        }
     }
     Show() {
         if (this.eigenschap?.opties?.length != null &&
@@ -11161,20 +11154,21 @@ class BeheerProductsEigenschapComponent {
         return false;
     }
 }
-BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: ProductsService }, { token: i1$3.MatDialog }, { token: ProductsApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"Ignore(optie.id)\">\r\n            Ignore\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n      FilterOptionMany\r\n    </button>\r\n    <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n      Category\r\n    </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *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}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
+BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: ImportSetsService }, { token: ProductsService }, { token: i1$3.MatDialog }, { token: ProductsApiClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\" class=\"button-row\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory()\">\r\n            Category\r\n          </button>\r\n          <button mat-raised-button (click)=\"Ignore(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}.eigenschapcel{flex:auto}.button-row{display:flex;gap:4px}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-eigenschap', template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"Ignore(optie.id)\">\r\n            Ignore\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n      FilterOptionMany\r\n    </button>\r\n    <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n      Category\r\n    </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *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}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
-        }], ctorParameters: function () { return [{ type: ProductsService }, { type: i1$3.MatDialog }, { type: ProductsApiClient }]; }, propDecorators: { eigenschap: [{
+            args: [{ selector: 'app-beheer-products-eigenschap', template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\" class=\"button-row\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory()\">\r\n            Category\r\n          </button>\r\n          <button mat-raised-button (click)=\"Ignore(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}.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$3.MatDialog }, { type: ProductsApiClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { eigenschap: [{
                 type: Input
             }] } });
 
 class BeheerProductsEboComponent {
-    constructor(dialog, ProductsApiClient, ProductsService) {
+    constructor(dialog, ProductsApiClient, ProductsService, ChangeDetectorRef) {
         this.dialog = dialog;
         this.ProductsApiClient = ProductsApiClient;
         this.ProductsService = ProductsService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
     }
     ngOnInit() {
     }
@@ -11207,7 +11201,7 @@ class BeheerProductsEboComponent {
                     //request.bcbProductOpbouwOptieId = this.optie.id;
                     request.filterOptionId = result.filteroption;
                     this.ProductsApiClient.connectBCBOpbouwOptieFilterOption(request).subscribe(() => {
-                        this.ProductsService.LoadProduct();
+                        this.ProductsService.LoadProduct(this.ChangeDetectorRef);
                     }, (error) => {
                         alert(error);
                     });
@@ -11229,7 +11223,7 @@ class BeheerProductsEboComponent {
         var request = new IgnoreOpbouwOptieRequest();
         // request.bcbProductOpbouwOptieId = this.optie.id;
         this.ProductsApiClient.ignoreBCBOpbouwOptieFilterOption(request).subscribe(() => {
-            this.ProductsService.LoadProduct();
+            this.ProductsService.LoadProduct(this.ChangeDetectorRef);
         }, (error) => {
             alert(error);
         });
@@ -11238,7 +11232,7 @@ class BeheerProductsEboComponent {
         var request = new RemoveOpbouwOptieRequest();
         //request.bcbProductOpbouwOptieId = this.optie.id;
         this.ProductsApiClient.removeBCBOpbouwOptieFilterOption(request).subscribe(() => {
-            this.ProductsService.LoadProduct();
+            this.ProductsService.LoadProduct(this.ChangeDetectorRef);
         }, (error) => {
             alert(error);
         });
@@ -11247,12 +11241,12 @@ class BeheerProductsEboComponent {
         this.ebo.open = !this.ebo.open;
     }
 }
-BeheerProductsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEboComponent, deps: [{ token: i1$3.MatDialog }, { token: ProductsApiClient }, { token: ProductsService }], target: i0.ɵɵFactoryTarget.Component });
+BeheerProductsEboComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEboComponent, deps: [{ token: i1$3.MatDialog }, { token: ProductsApiClient }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 BeheerProductsEboComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: { ebo: "ebo" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !ebo.connected, 'normal': ebo.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!ebo.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"ebo.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"name\" colspan=\"2\">\r\n      {{ ebo.name }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"ebo.open\" class=\"main-block\">\r\n    <!--<div class=\"displayflex\" *ngIf=\"!ebo.connected && ConnectAv()\">\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        FilterOptionMany\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        {{ GetConnect() }}\r\n      </div>\r\n      <button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>\r\n    </div>-->\r\n\r\n    <div *ngIf=\"ebo.bcbOpbouwViewModels?.length != 0\">\r\n      <div class=\"title\">Opbouw</div>\r\n      <app-beheer-products-opbouw *ngFor=\"let opbouw of ebo.bcbOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n    </div>\r\n    <div *ngIf=\"ebo.bcbEigenschapViewModels?.length != 0\">\r\n      <div class=\"title\">Eigenschap</div>\r\n      <app-beheer-products-eigenschap *ngFor=\"let eigenschap of ebo.bcbEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.text{padding:8px;font-size:17px}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.name{flex:auto}.icon-td{width:24px;height:24px}.warning{background-color:#f08080}.normal{background-color:#fff}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i4.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return i6$1.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerProductsEigenschapComponent; }), selector: "app-beheer-products-eigenschap", inputs: ["eigenschap"] }, { kind: "component", type: i0.forwardRef(function () { return BeheerProductsOpbouwComponent; }), selector: "app-beheer-products-opbouw", inputs: ["opbouw"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEboComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-beheer-products-ebo', template: "<div class=\"container\" [ngClass]=\"{'warning': !ebo.connected, 'normal': ebo.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!ebo.open\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"ebo.open\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"name\" colspan=\"2\">\r\n      {{ ebo.name }}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"ebo.open\" class=\"main-block\">\r\n    <!--<div class=\"displayflex\" *ngIf=\"!ebo.connected && ConnectAv()\">\r\n      <button mat-raised-button (click)=\"Ignore()\">\r\n        Ignore\r\n      </button>\r\n      <button mat-raised-button (click)=\"Connect()\">\r\n        FilterOption\r\n      </button>\r\n      <button mat-raised-button (click)=\"ConnectMany()\">\r\n        FilterOptionMany\r\n      </button>\r\n    </div>\r\n    <div class=\"displayflex\" *ngIf=\"!ConnectAv()\">\r\n      <div class=\"text\">\r\n        {{ GetConnect() }}\r\n      </div>\r\n      <button mat-raised-button (click)=\"Remove()\">\r\n        Remove\r\n      </button>\r\n    </div>-->\r\n\r\n    <div *ngIf=\"ebo.bcbOpbouwViewModels?.length != 0\">\r\n      <div class=\"title\">Opbouw</div>\r\n      <app-beheer-products-opbouw *ngFor=\"let opbouw of ebo.bcbOpbouwViewModels\" [opbouw]=\"opbouw\"></app-beheer-products-opbouw>\r\n    </div>\r\n    <div *ngIf=\"ebo.bcbEigenschapViewModels?.length != 0\">\r\n      <div class=\"title\">Eigenschap</div>\r\n      <app-beheer-products-eigenschap *ngFor=\"let eigenschap of ebo.bcbEigenschapViewModels\" [eigenschap]=\"eigenschap\"></app-beheer-products-eigenschap>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.text{padding:8px;font-size:17px}.main-block{padding-left:25px}.container{margin:5px;padding:5px;border:1px solid #000}.name{flex:auto}.icon-td{width:24px;height:24px}.warning{background-color:#f08080}.normal{background-color:#fff}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: ProductsApiClient }, { type: ProductsService }]; }, propDecorators: { ebo: [{
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: ProductsApiClient }, { type: ProductsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ebo: [{
                 type: Input
             }] } });
 class BeheerProductsOpbouwComponent {
@@ -12076,6 +12070,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
             args: [{ selector: 'app-fab-bcb-product', template: "<p>fab-bcb-product works!</p>\n" }]
         }], ctorParameters: function () { return []; } });
 
+class BeheerConnectCategoryDialogComponent {
+    constructor(dialogRef, data, CategoriesApiClient) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.CategoriesApiClient = CategoriesApiClient;
+        this.Loading = true;
+        this.DOType = "DOType";
+        this.DONaam = "DONaam";
+        this.CategoryName = "";
+        this.DOType = data.dotype;
+        this.DONaam = data.donaam;
+        this.CategoryName = data.donaam;
+    }
+    ngOnInit() {
+        this.LoadCategories();
+    }
+    Nieuw() {
+        this.Loading = true;
+        var requestcategory = new CreateCategoryRequest();
+        requestcategory.name = this.CategoryName;
+        this.CategoriesApiClient.createCategory(requestcategory).subscribe((model) => {
+            this.Loading = false;
+            this.dialogRef.close(model.id);
+        }, (error) => {
+            if (error.status == 400)
+                console.log(error.json());
+            else {
+                console.log('An unexpected error occured');
+                console.log(error);
+            }
+            this.Loading = false;
+        });
+    }
+    Bestaand() {
+        this.dialogRef.close(this.CategorySelected);
+    }
+    LoadCategories() {
+        this.Loading = true;
+        this.CategoriesApiClient.getCategoriesViewModel().subscribe((model) => {
+            this.CategoriesViewModel = model;
+            this.Loading = false;
+        }, (error) => {
+            if (error.status == 400)
+                console.log(error.json());
+            else {
+                console.log('An unexpected error occured');
+                console.log(error);
+            }
+            this.Loading = false;
+        });
+    }
+}
+BeheerConnectCategoryDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
+BeheerConnectCategoryDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerConnectCategoryDialogComponent, selector: "app-beheer-connect-category-dialog", ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerConnectCategoryDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-beheer-connect-category-dialog', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div *ngIf=\"!Loading\">\r\n  <mat-tab-group>\r\n    <mat-tab label=\"Nieuw\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"CategoryName\">\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Nieuw()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n    <mat-tab label=\"Bestaand\">\r\n      <div class=\"bar\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>{{ DOType }}</mat-label>\r\n          <input matInput [(ngModel)]=\"DONaam\" readonly>\r\n        </mat-form-field>\r\n\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Category</mat-label>\r\n          <mat-select [(ngModel)]=\"CategorySelected\">\r\n            <mat-option *ngFor=\"let category of CategoriesViewModel.categories\" [value]=\"category.id\">\r\n              {{category.name}}\r\n            </mat-option>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <div class=\"bar tool-bar\">\r\n        <button mat-raised-button (click)=\"Bestaand()\">Toevoegen</button>\r\n      </div>\r\n    </mat-tab>\r\n  </mat-tab-group>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: CategoriesApiClient }]; } });
+
 class BeheerEboKoppelComponent {
     constructor(EBOKoppelApiClient, ImportSetsService, dialog, ChangeDetectorRef) {
         this.EBOKoppelApiClient = EBOKoppelApiClient;
@@ -12657,5 +12713,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ConnectBCBEigenschapOptieCategoryRequest, ConnectBCBEigenschapOptieLocation, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectEigenschapOptieResponse, ConnectManyEBODORequest, ConnectManyEBORequest, ConnectManyNameRequest, ConnectManyNameResponse, ConnectManyPreviewContainerResponse, ConnectManyPreviewEBOResponse, ConnectManyPreviewRequest, ConnectManyPreviewResponse, ConnectOpbouwOptieRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenViewModel, FilterOptionViewModel, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreOpbouwOptieRequest, ImportApiClient, KoppelEBOOptieRequest, KoppelEBOOptieResponse, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveOpbouwOptieRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectCategoryRequest, SelectFilterOptionRequest, SelectProductRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
+export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ConnectBCBEigenschapOptieLocation, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectEigenschapOptieResponse, ConnectManyEBODORequest, ConnectManyEBORequest, ConnectManyNameRequest, ConnectManyNameResponse, ConnectManyPreviewContainerResponse, ConnectManyPreviewEBOResponse, ConnectManyPreviewRequest, ConnectManyPreviewResponse, ConnectOpbouwOptieRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenViewModel, FilterOptionViewModel, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreOpbouwOptieRequest, ImportApiClient, KoppelEBOOptieRequest, KoppelEBOOptieResponse, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveOpbouwOptieRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectCategoryRequest, SelectFilterOptionRequest, SelectProductRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
 //# sourceMappingURL=fabrikantencore.mjs.map