fabrikantencore 2.1.13 → 2.1.15

package/fesm2020/fabrikantencore.mjs

@@ -211,6 +211,55 @@ class CategoriesApiClient {
         }
         return of(null);
     }
+    clearCategory(pClearCategoryRequest) {
+        let url_ = this.baseUrl + "/api/categories/clearcategory";
+        url_ = url_.replace(/[?&]$/, "");
+        const content_ = JSON.stringify(pClearCategoryRequest);
+        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.processClearCategory(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processClearCategory(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processClearCategory(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);
+    }
 }
 CategoriesApiClient.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: CategoriesApiClient, deps: [{ token: HttpClient }, { token: API_BASE_URL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 CategoriesApiClient.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: CategoriesApiClient });
@@ -2437,6 +2486,55 @@ class ProductsApiClient {
         }
         return of(null);
     }
+    ignoreBCBEigenschap(pIgnoreBCBEigenschapRequest) {
+        let url_ = this.baseUrl + "/api/products/ignorebcbeigenschap";
+        url_ = url_.replace(/[?&]$/, "");
+        const content_ = JSON.stringify(pIgnoreBCBEigenschapRequest);
+        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.processIgnoreBCBEigenschap(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processIgnoreBCBEigenschap(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processIgnoreBCBEigenschap(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);
+    }
     ignoreBCBOpbouw(pConnectOpbouwRequest) {
         let url_ = this.baseUrl + "/api/products/ignorebcbopbouw";
         url_ = url_.replace(/[?&]$/, "");
@@ -4324,6 +4422,32 @@ class CreateCategoryRequest {
         return data;
     }
 }
+class ClearCategoryRequest {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            this.categoryId = _data["categoryId"];
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new ClearCategoryRequest();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["categoryId"] = this.categoryId;
+        return data;
+    }
+}
 class EBOKoppelViewModel {
     constructor(data) {
         if (data) {
@@ -6939,6 +7063,38 @@ class ConnectEigenschapOptieRequest {
         return data;
     }
 }
+class IgnoreBCBEigenschapRequest {
+    constructor(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    init(_data) {
+        if (_data) {
+            this.location = _data["location"];
+            this.bcbEigenschapId = _data["bcbEigenschapId"];
+            this.bcbProductId = _data["bcbProductId"];
+            this.many = _data["many"];
+        }
+    }
+    static fromJS(data) {
+        data = typeof data === 'object' ? data : {};
+        let result = new IgnoreBCBEigenschapRequest();
+        result.init(data);
+        return result;
+    }
+    toJSON(data) {
+        data = typeof data === 'object' ? data : {};
+        data["location"] = this.location;
+        data["bcbEigenschapId"] = this.bcbEigenschapId;
+        data["bcbProductId"] = this.bcbProductId;
+        data["many"] = this.many;
+        return data;
+    }
+}
 class IgnoreOpbouwRequest {
     constructor(data) {
         if (data) {
@@ -10643,7 +10799,7 @@ class BeheerProductsEigenschapComponent {
             }
         });
     }
-    Ignore(id) {
+    IgnoreId(id) {
         if (this.ProductsService.BCBProductViewModel != null) {
             var request = new ConnectEigenschapOptieRequest();
             request.bcbEigenschapOptieId = id;
@@ -10657,6 +10813,31 @@ class BeheerProductsEigenschapComponent {
             });
         }
     }
+    Ignore() {
+        if (this.ProductsService.BCBProductViewModel != null) {
+            var request = new IgnoreBCBEigenschapRequest();
+            request.bcbEigenschapId = this.eigenschap.id;
+            this.ProductsApiClient.ignoreBCBEigenschap(request).subscribe(() => {
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
+    IgnoreMany() {
+        if (this.ProductsService.BCBProductViewModel != null) {
+            var request = new IgnoreBCBEigenschapRequest();
+            request.bcbEigenschapId = this.eigenschap.id;
+            request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
+            request.location = this.eigenschap.location;
+            request.many = true;
+            this.ProductsApiClient.ignoreBCBEigenschap(request).subscribe(() => {
+                this.ProductsService.LoadProduct(this.ChangeDetectorRef);
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
     ConnectRange() {
         var dialogRef = this.dialog.open(BeheerProductsConnectRangeinputComponent, {
             data: {
@@ -10695,10 +10876,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      </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, 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}.line-height{line-height:36px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.eigenschapcel{flex:auto}.button-row{display:flex;gap:4px}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
+BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngFor=\"let toebehoren of eigenschap.toebehoren\">\r\n      {{ toebehoren.name }}\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n        <button mat-raised-button (click)=\"Ignore()\">\r\n          Ignore\r\n        </button>\r\n        <button mat-raised-button (click)=\"IgnoreMany()\">\r\n          IgnoreMany\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"displayflex\">\r\n        <ng-container *ngIf=\"optie.colour != null && optie.colour != ''\">\r\n          <span [ngStyle]=\"{'background-color': optie.colour}\" class=\"colour-preview\">\r\n            &nbsp;\r\n            &nbsp;\r\n          </span>\r\n        </ng-container>\r\n        <div class=\"text-div line-height\">{{ optie.name }}</div>\r\n      </div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\" class=\"button-row\">\r\n          <!--<button mat-raised-button (click)=\"Connect(optie.id, 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)=\"IgnoreId(optie.id)\">\r\n            Ignore\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"optie.ignore\">\r\n          <b>Ignore</b>&nbsp;\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.line-height{line-height:36px}.colour-preview{padding:5px;margin:2px;border:1px solid #000}.eigenschapcel{flex:auto}.button-row{display:flex;gap:4px}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
 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      </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, 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}.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.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, 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)=\"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
             }] } });
@@ -10833,12 +11014,14 @@ class BeheerProductsBcbproductComponent {
         var request = new BCBImportProductRequest();
         request.bcbProductId = this.BCBProductViewModel.id;
         this.Loading = true;
+        this.ChangeDetectorRef.detectChanges();
         this.ImportApiClient.importBCBProduct(request).subscribe((model) => {
             if (!model.success) {
                 alert(model.message);
             }
             this.Loading = false;
-            this.ProductsService.Reload(this.ChangeDetectorRef);
+            this.ChangeDetectorRef.detectChanges();
+            this.ProductsService.LoadProduct(this.ChangeDetectorRef);
         }, (error) => {
             if (error.status == 400)
                 console.log(error.json());
@@ -10850,10 +11033,10 @@ class BeheerProductsBcbproductComponent {
     }
 }
 BeheerProductsBcbproductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsBcbproductComponent, deps: [{ token: ImportApiClient }, { token: ProductsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: { BCBProductViewModel: "BCBProductViewModel" }, ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <app-beheer-products-ebo [ebo]=\"BCBProductViewModel.bcbeboViewModel\"></app-beheer-products-ebo>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: ["ebo"] }] });
+BeheerProductsBcbproductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: { BCBProductViewModel: "BCBProductViewModel" }, ngImport: i0, template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card *ngIf=\"BCBProductViewModel?.bcbeboViewModel\">\r\n    <mat-card-content>\r\n      <app-beheer-products-ebo [ebo]=\"BCBProductViewModel.bcbeboViewModel\"></app-beheer-products-ebo>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsEboComponent, selector: "app-beheer-products-ebo", inputs: ["ebo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerProductsBcbproductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-bcbproduct', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <app-beheer-products-ebo [ebo]=\"BCBProductViewModel.bcbeboViewModel\"></app-beheer-products-ebo>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
+            args: [{ selector: 'app-beheer-products-bcbproduct', template: "<div *ngIf=\"Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!Loading\">\r\n  <mat-card>\r\n    <div class=\"product-bar\">\r\n      <div class=\"product-first block\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label>Naam</mat-label>\r\n          <input matInput [(ngModel)]=\"BCBProductViewModel.name\">\r\n        </mat-form-field>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"Import()\">\r\n          Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button (click)=\"ResetImport()\">\r\n          Reset Import\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Opslaan\r\n        </button>\r\n      </div>\r\n      <div class=\"block\">\r\n        <button mat-raised-button [disabled]=\"true\">\r\n          Verwijderen\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </mat-card>\r\n  <br />\r\n  <mat-card *ngIf=\"BCBProductViewModel?.bcbeboViewModel\">\r\n    <mat-card-content>\r\n      <app-beheer-products-ebo [ebo]=\"BCBProductViewModel.bcbeboViewModel\"></app-beheer-products-ebo>\r\n    </mat-card-content>\r\n  </mat-card>\r\n</div>\r\n\r\n", styles: [".product-bar{display:flex}.product-first{flex:auto}.full-width{width:100%}.card{margin:3px}.block{padding:3px}.row{display:flex;align-items:center;cursor:pointer}.icon-div{width:24px;height:24px}.text-div{flex:auto}.title{border-bottom:2px solid #000;font-size:20px;margin-top:5px;margin-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: ImportApiClient }, { type: ProductsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { BCBProductViewModel: [{
                 type: Input
             }] } });
@@ -10988,10 +11171,10 @@ 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 (click)=\"SelectProduct(product)\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td>{{ product.id }}</td>\r\n                  <td>{{ product.name }}</td>\r\n                  <td>{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.gap{gap:3px}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 179px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px);overflow:auto}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsProductComponent, selector: "app-beheer-products-product", inputs: ["ProductViewModel"] }, { kind: "component", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: ["BCBProductViewModel"] }] });
+BeheerProductsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerProductsComponent, selector: "app-beheer-products", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"ProductsService.Loading() || ImportSetsService.LoadingImportSets\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!ProductsService.Loading() && !ImportSetsService.LoadingImportSets\" class=\"main-block\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"displayflex gap\">\r\n        <div class=\"displayflex flex-auto gap\">\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Import set</mat-label>\r\n            <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n              <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n                {{importset.name}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n\r\n          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"displayflex gap\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"Status()\">\r\n            Status\r\n          </button>\r\n          <button mat-raised-button (click)=\"ResetImport()\">\r\n            Reset Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"Import()\">\r\n            Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"CleanUp()\">\r\n            CleanUp\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div class=\"displayflex\" *ngIf=\"this.ProductsService.ProductsViewModel != undefined\">\r\n    <div class=\"tree-block\">\r\n      <div class=\"limiter\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <table class=\"full-width\">\r\n              <tr class=\"table-head\">\r\n                <td></td>\r\n                <td>Id</td>\r\n                <td>Naam</td>\r\n                <td>Variants</td>\r\n                <td>Importset</td>\r\n              </tr>\r\n              <ng-container *ngFor=\"let product of this.ProductsService.ProductsViewModel.productViewModels\">\r\n                <tr [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\"><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.id }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.name }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.gap{gap:3px}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 179px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px);overflow:auto}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: BeheerProductsProductComponent, selector: "app-beheer-products-product", inputs: ["ProductViewModel"] }, { kind: "component", type: BeheerProductsBcbproductComponent, selector: "app-beheer-products-bcbproduct", inputs: ["BCBProductViewModel"] }] });
 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 (click)=\"SelectProduct(product)\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td>{{ product.id }}</td>\r\n                  <td>{{ product.name }}</td>\r\n                  <td>{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.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"] }]
+            args: [{ selector: 'app-beheer-products', template: "<app-beheer-nav></app-beheer-nav>\r\n\r\n<div *ngIf=\"ProductsService.Loading() || ImportSetsService.LoadingImportSets\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n<div *ngIf=\"!ProductsService.Loading() && !ImportSetsService.LoadingImportSets\" class=\"main-block\">\r\n  <mat-card>\r\n    <mat-card-content>\r\n      <div class=\"displayflex gap\">\r\n        <div class=\"displayflex flex-auto gap\">\r\n          <mat-form-field appearance=\"fill\">\r\n            <mat-label>Import set</mat-label>\r\n            <mat-select [(ngModel)]=\"ImportSetsService.BCBImportSetSelected\">\r\n              <mat-option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">\r\n                {{importset.name}}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n\r\n          <button mat-raised-button (click)=\"ProductsService.Reload(this.ChangeDetectorRef)\">\r\n            Refresh\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"displayflex gap\" style=\"text-align: right;\">\r\n          <button mat-raised-button (click)=\"Status()\">\r\n            Status\r\n          </button>\r\n          <button mat-raised-button (click)=\"ResetImport()\">\r\n            Reset Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"Import()\">\r\n            Import\r\n          </button>\r\n          <button mat-raised-button (click)=\"CleanUp()\">\r\n            CleanUp\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </mat-card-content>\r\n  </mat-card>\r\n\r\n  <div class=\"displayflex\" *ngIf=\"this.ProductsService.ProductsViewModel != undefined\">\r\n    <div class=\"tree-block\">\r\n      <div class=\"limiter\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <table class=\"full-width\">\r\n              <tr class=\"table-head\">\r\n                <td></td>\r\n                <td>Id</td>\r\n                <td>Naam</td>\r\n                <td>Variants</td>\r\n                <td>Importset</td>\r\n              </tr>\r\n              <ng-container *ngFor=\"let product of this.ProductsService.ProductsViewModel.productViewModels\">\r\n                <tr [ngClass]=\"{'selected' : ProductsService.ProductViewModel == product, 'warning': !product.imported || !product.connected}\">\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\"><span class=\"importspan\">{{ GetImportStatus(product) }}</span></td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.id }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.name }}</td>\r\n                  <td (click)=\"SelectProduct(product)\" class=\"table-row\">{{ product.bcbProductViewModels.length }}</td>\r\n                  <td>\r\n                    <select [(ngModel)]=\"product.importSetId\" (change)=\"SaveProduct(product)\" class=\"full-width\">\r\n                      <option *ngFor=\"let importset of ImportSetsService.BCBImportSetsViewModel.bcbImportSetViewModels\" [value]=\"importset.id\">{{importset.name}}</option>\r\n                    </select>\r\n                  </td>\r\n                </tr>\r\n                <ng-container *ngIf=\"ShowBCBProducts(product)\">\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                  <tr *ngFor=\"let bcbproduct of ProductsService.ProductViewModel.bcbProductViewModels\" class=\"table-row\" [ngClass]=\"{'selected' : ProductsService.BCBProductViewModel == bcbproduct, 'warning': !bcbproduct.imported || !bcbproduct.connected}\" (click)=\"SelectBCBProduct(bcbproduct)\">\r\n                    <td><span class=\"importspan\">{{ bcbproduct.importStatus }}</span></td>\r\n                    <td>{{ bcbproduct.id }}</td>\r\n                    <td colspan=\"3\">{{ bcbproduct.name }}</td>\r\n                  </tr>\r\n                  <tr>\r\n                    <td>&nbsp;</td>\r\n                  </tr>\r\n                </ng-container>\r\n              </ng-container>\r\n            </table>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-content\">\r\n      <div class=\"limiter\">\r\n        <app-beheer-products-product *ngIf=\"ProductsService.ProductViewModel != undefined && ProductsService.BCBProductViewModel == undefined\" [ProductViewModel]=\"ProductsService.ProductViewModel\"></app-beheer-products-product>\r\n        <app-beheer-products-bcbproduct *ngIf=\"ProductsService.BCBProductViewModel != undefined\" [BCBProductViewModel]=\"ProductsService.BCBProductViewModel\"></app-beheer-products-bcbproduct>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".full-width{width:100%}.full-height{height:100%}.gap{gap:3px}.table-head td{font-weight:700;border-bottom:2px solid #000}.table-row td{border-bottom:1px solid #000;cursor:pointer}.warning{background-color:#f08080}.table-row:hover{background-color:#d3d3d3}.limiter{max-height:calc(100vh - 179px);overflow:auto}.selected{background-color:#add8e6!important}.importspan{margin-left:5px;font-weight:700}.main-block{padding:10px;height:calc(100vh - 66px);overflow:auto}.main-content{padding:5px;flex:auto;width:50%}.tree-block{padding:5px;flex:auto;width:50%;max-height:calc(100vh - 66px)}.example-tree-invisible{display:none}.example-tree ul,.example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}.example-tree div[role=group]>.mat-tree-node{padding-left:40px}.displayflex{display:flex}.flex-auto{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductsService }, { type: ImportSetsService }, { type: ImportApiClient }, { type: i0.ChangeDetectorRef }]; } });
 
 class BeheerFiltersComponent {
@@ -12478,10 +12661,10 @@ class FabBreadcrumbComponent {
     }
 }
 FabBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabBreadcrumbComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: { showfiltermenubutton: "showfiltermenubutton" }, ngImport: i0, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step\" (click)=\"Back()\">\r\n    <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: [".header{display:flex;padding:4px}.tinybutton{padding:1px!important}.tinybutton .header-title{font-size:12px!important;line-height:26px!important}.tinybutton .mat-stroked-button{padding:0 8px!important}.buttonsize{height:40px;line-height:25px}.flexauto{flex:auto}.fullwidth{width:100%}.paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+FabBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: { showfiltermenubutton: "showfiltermenubutton" }, ngImport: i0, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step center\" (click)=\"Back()\">\r\n    {{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: ["app-fab-breadcrumb .header{display:flex;padding:4px}app-fab-breadcrumb .center{text-align:center}app-fab-breadcrumb .tinybutton{padding:1px!important}app-fab-breadcrumb .tinybutton .header-title{font-size:12px!important;line-height:26px!important}app-fab-breadcrumb .tinybutton .mat-stroked-button{padding:0 8px!important}app-fab-breadcrumb .buttonsize{height:40px;line-height:25px}app-fab-breadcrumb .flexauto{flex:auto}app-fab-breadcrumb .fullwidth{width:100%}app-fab-breadcrumb .paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step\" (click)=\"Back()\">\r\n    <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: [".header{display:flex;padding:4px}.tinybutton{padding:1px!important}.tinybutton .header-title{font-size:12px!important;line-height:26px!important}.tinybutton .mat-stroked-button{padding:0 8px!important}.buttonsize{height:40px;line-height:25px}.flexauto{flex:auto}.fullwidth{width:100%}.paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\n"] }]
+            args: [{ selector: 'app-fab-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<div class=\"header\" *ngIf=\"ShowHeader()\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"ShowBack() && !HideBreadcrumb()\">\r\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\r\n      <div class=\"header\" >\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon arrow_back\">arrow_back</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </div>\r\n  <ng-container *ngIf=\"!MobileService.MobileInterface && !HideBreadcrumb()\">\r\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"UndoStep(step)\">\r\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\r\n      <div class=\"stepicon\">\r\n        <mat-icon class=\"chevron_right\">chevron_right</mat-icon>\r\n      </div>\r\n      <div class=\"step\" (click)=\"Back()\">\r\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\r\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Filtermenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"flexauto\">\r\n\r\n    </div>\r\n    <button class=\"open-filters-button buttonsize\" *ngIf=\"FabrikantenService.ShowActionMenu()\" mat-stroked-button (click)=\"MobileService.OpenAction()\">\r\n      <div class=\"header\">\r\n        <div class=\"header-back\">\r\n          <mat-icon class=\"icon menu\">menu</mat-icon>\r\n        </div>\r\n        <div class=\"header-title\">\r\n          {{ TranslateService.GetActiveValue(\"Common\", \"Actionmenu\") }}\r\n        </div>\r\n      </div>\r\n    </button>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()\">\r\n  <div class=\"paddingleft step center\" (click)=\"Back()\">\r\n    {{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\r\n  </div>\r\n</ng-container>\r\n", styles: ["app-fab-breadcrumb .header{display:flex;padding:4px}app-fab-breadcrumb .center{text-align:center}app-fab-breadcrumb .tinybutton{padding:1px!important}app-fab-breadcrumb .tinybutton .header-title{font-size:12px!important;line-height:26px!important}app-fab-breadcrumb .tinybutton .mat-stroked-button{padding:0 8px!important}app-fab-breadcrumb .buttonsize{height:40px;line-height:25px}app-fab-breadcrumb .flexauto{flex:auto}app-fab-breadcrumb .fullwidth{width:100%}app-fab-breadcrumb .paddingleft{padding-left:5px}app-fab-breadcrumb .displayflex{display:flex}app-fab-breadcrumb .header-back{cursor:pointer}app-fab-breadcrumb .product-conf{padding-left:5px}app-fab-breadcrumb .open-filters-button{margin-left:5px}app-fab-breadcrumb .title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}app-fab-breadcrumb .icon{position:relative;top:2px}app-fab-breadcrumb .header-title{font-size:16px;position:relative;top:1px;margin-left:3px}app-fab-breadcrumb .step{font-size:16px;vertical-align:middle;line-height:39px;font-family:Roboto;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}app-fab-breadcrumb .step:first-letter{text-transform:capitalize}app-fab-breadcrumb .step:hover{text-decoration:underline}app-fab-breadcrumb .stepicon{padding-top:7px}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showfiltermenubutton: [{
                 type: Input
             }] } });
@@ -12964,10 +13147,10 @@ class FabProductSelectComponent {
     }
 }
 FabProductSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabProductSelectComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabProductSelectComponent, selector: "app-fab-product-select", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection blocked\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n      <div class=\"main-window\">\r\n        <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n      </div>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product-select .main-window{display:flex;flex-flow:row wrap;overflow:auto}app-fab-product-select .subtitle{margin-bottom:10px}app-fab-product-select .header{padding:4px}app-fab-product-select .row{display:flex}app-fab-product-select .loader-card{margin:auto;width:300px}app-fab-product-select .loader-subtitle{text-align:center}app-fab-product-select .loader-spinner{margin:auto}app-fab-product-select .view-container{height:100%}app-fab-product-select .view-content{background-color:#fff}app-fab-product-select .loader{position:absolute;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product-select .filter-view{width:300px;min-width:300px;background-color:#fafafa;height:100%}app-fab-product-select .product-view{flex:auto}app-fab-product-select .mat-drawer-inner-container{overflow-y:scroll}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.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: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductTileComponent, selector: "app-fab-product-tile", inputs: ["product"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }], encapsulation: i0.ViewEncapsulation.None });
+FabProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabProductSelectComponent, selector: "app-fab-product-select", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection blocked\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n      <div class=\"main-window\">\r\n        <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n      </div>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product-select .main-window{display:flex;flex-flow:row wrap;overflow:auto}app-fab-product-select .subtitle{margin-bottom:10px}app-fab-product-select .header{padding:4px}app-fab-product-select .row{display:flex}app-fab-product-select .loader-card{margin:auto;width:300px}app-fab-product-select .loader-subtitle{text-align:center}app-fab-product-select .loader-spinner{margin:auto}app-fab-product-select .view-container{height:100%}app-fab-product-select .view-content{background-color:#fff}app-fab-product-select .loader{position:absolute;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product-select .filter-view{width:300px;min-width:300px;background-color:#fafafa;height:100%}app-fab-product-select .product-view{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: i1$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductTileComponent, selector: "app-fab-product-tile", inputs: ["product"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabProductSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product-select', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection blocked\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n      <div class=\"main-window\">\r\n        <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n      </div>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product-select .main-window{display:flex;flex-flow:row wrap;overflow:auto}app-fab-product-select .subtitle{margin-bottom:10px}app-fab-product-select .header{padding:4px}app-fab-product-select .row{display:flex}app-fab-product-select .loader-card{margin:auto;width:300px}app-fab-product-select .loader-subtitle{text-align:center}app-fab-product-select .loader-spinner{margin:auto}app-fab-product-select .view-container{height:100%}app-fab-product-select .view-content{background-color:#fff}app-fab-product-select .loader{position:absolute;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product-select .filter-view{width:300px;min-width:300px;background-color:#fafafa;height:100%}app-fab-product-select .product-view{flex:auto}app-fab-product-select .mat-drawer-inner-container{overflow-y:scroll}\n"] }]
+            args: [{ selector: 'app-fab-product-select', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection blocked\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n      <div class=\"main-window\">\r\n        <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n      </div>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product-select .main-window{display:flex;flex-flow:row wrap;overflow:auto}app-fab-product-select .subtitle{margin-bottom:10px}app-fab-product-select .header{padding:4px}app-fab-product-select .row{display:flex}app-fab-product-select .loader-card{margin:auto;width:300px}app-fab-product-select .loader-subtitle{text-align:center}app-fab-product-select .loader-spinner{margin:auto}app-fab-product-select .view-container{height:100%}app-fab-product-select .view-content{background-color:#fff}app-fab-product-select .loader{position:absolute;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product-select .filter-view{width:300px;min-width:300px;background-color:#fafafa;height:100%}app-fab-product-select .product-view{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: BestekService }, { type: TranslateService }, { type: i1$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -13157,6 +13340,22 @@ class BeheerCategoriesComponent {
     ngOnInit() {
         this.LoadCategories();
     }
+    Clear(category) {
+        this.Loading = true;
+        var model = new ClearCategoryRequest();
+        model.categoryId = category.id;
+        this.CategoriesApiClient.clearCategory(model).subscribe(() => {
+            this.LoadCategories();
+        }, (error) => {
+            if (error.status == 400)
+                console.log(error.json());
+            else {
+                console.log('An unexpected error occured');
+                console.log(error);
+            }
+            this.Loading = false;
+        });
+    }
     LoadCategories() {
         this.Loading = true;
         this.CategoriesApiClient.getCategoriesOverview().subscribe((model) => {
@@ -13174,10 +13373,10 @@ class BeheerCategoriesComponent {
     }
 }
 BeheerCategoriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerCategoriesComponent, deps: [{ token: CategoriesApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerCategoriesComponent, selector: "app-beheer-categories", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">{{ categorie.name }}</td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+BeheerCategoriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: BeheerCategoriesComponent, selector: "app-beheer-categories", ngImport: i0, template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: BeheerNavComponent, selector: "app-beheer-nav" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: BeheerCategoriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-categories', template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">{{ categorie.name }}</td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"] }]
+            args: [{ selector: 'app-beheer-categories', template: "<app-beheer-nav></app-beheer-nav>\n\n<div *ngIf=\"Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div *ngIf=\"!Loading\">\n  <mat-card>\n    <mat-card-content>\n      <table class=\"fullwidth\">\n        <ng-container *ngFor=\"let categorie of CategoriesOverviewViewModel.categories\">\n          <tr class=\"header\">\n            <td colspan=\"3\">\n              <div style=\"display: flex;\">\n                {{ categorie.name }}\n                <div style=\"flex: auto;\"></div>\n                <button mat-raised-button (click)=\"Clear(categorie)\">\n                  Clear\n                </button>\n              </div>\n            </td>\n          </tr>\n          <ng-container *ngFor=\"let subcategorie of categorie.subCategories\">\n            <tr class=\"header2\">\n              <td>&nbsp;</td>\n              <td colspan=\"2\">{{ subcategorie.name }}</td>\n            </tr>\n            <tr *ngFor=\"let product of subcategorie.products\">\n              <td>&nbsp;</td>\n              <td>&nbsp;</td>\n              <td>{{ product.name }}</td>\n            </tr>\n            <tr>\n              <td>&nbsp;</td>\n            </tr>\n          </ng-container>\n          <tr *ngFor=\"let product of categorie.products\">\n            <td></td>\n            <td colspan=\"2\">{{ product.name }}</td>\n          </tr>\n          <tr>\n            <td>&nbsp;</td>\n          </tr>\n        </ng-container>\n        <tr *ngFor=\"let product of CategoriesOverviewViewModel.products\">\n          <td colspan=\"3\">{{ product.name }}</td>\n        </tr>\n      </table>\n    </mat-card-content>\n  </mat-card>\n  \n</div>\n", styles: [".fullwidth{width:100%}.header td{border-bottom:2px solid #000}.header2 td{border-bottom:1px solid #000}\n"] }]
         }], ctorParameters: function () { return [{ type: CategoriesApiClient }]; } });
 
 class FabStartComponent {
@@ -13466,18 +13665,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
 const routes = [
     {
         path: 'beheer', children: [
-            { path: 'inloggen', component: BeheerInlogComponent },
-            { path: 'overview', component: BeheerMainComponent, canActivate: [AuthGuard] },
-            { path: 'products', component: BeheerProductsComponent, canActivate: [AuthGuard] },
-            { path: 'importsets', component: BeheerImportSetsComponent, canActivate: [AuthGuard] },
-            { path: 'filters', component: BeheerFiltersComponent, canActivate: [AuthGuard] },
-            { path: 'users', component: BeheerUsersComponent, canActivate: [AuthGuard] },
-            { path: 'settings', component: BeheerSettingsComponent, canActivate: [AuthGuard] },
-            { path: 'searchproducts', component: BeheerSearchProductsComponent, canActivate: [AuthGuard] },
-            { path: 'ebokoppel', component: BeheerEboKoppelComponent, canActivate: [AuthGuard] },
-            { path: 'categories', component: BeheerCategoriesComponent, canActivate: [AuthGuard] },
-            { path: 'translate', component: BeheerTranslateComponent, canActivate: [AuthGuard] },
-            { path: 'deeplink', component: BeheerDeeplinkComponent, canActivate: [AuthGuard] },
+            { path: 'inloggen', component: BeheerInlogComponent, data: { title: 'Inloggen' } },
+            { path: 'overview', component: BeheerMainComponent, data: { title: 'Overview' }, canActivate: [AuthGuard] },
+            { path: 'products', component: BeheerProductsComponent, data: { title: 'Products' }, canActivate: [AuthGuard] },
+            { path: 'importsets', component: BeheerImportSetsComponent, data: { title: 'Importset' }, canActivate: [AuthGuard] },
+            { path: 'filters', component: BeheerFiltersComponent, data: { title: 'Filters' }, canActivate: [AuthGuard] },
+            { path: 'users', component: BeheerUsersComponent, data: { title: 'Users' }, canActivate: [AuthGuard] },
+            { path: 'settings', component: BeheerSettingsComponent, data: { title: 'Settings' }, canActivate: [AuthGuard] },
+            { path: 'searchproducts', component: BeheerSearchProductsComponent, data: { title: 'Search' }, canActivate: [AuthGuard] },
+            { path: 'ebokoppel', component: BeheerEboKoppelComponent, data: { title: 'EBO koppel' }, canActivate: [AuthGuard] },
+            { path: 'categories', component: BeheerCategoriesComponent, data: { title: 'Categories' }, canActivate: [AuthGuard] },
+            { path: 'translate', component: BeheerTranslateComponent, data: { title: 'Translate' }, canActivate: [AuthGuard] },
+            { path: 'deeplink', component: BeheerDeeplinkComponent, data: { title: 'Deeplink' }, canActivate: [AuthGuard] },
             { path: '', component: BeheerMainComponent, pathMatch: 'full', canActivate: [AuthGuard] }
         ]
     },
@@ -13763,5 +13962,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOFilterOptionViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapToebehorenViewModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreOpbouwRequest, ImportApiClient, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, MoveFilterOptionRequest, MoveFilterRequest, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryBCBEigenschapToebehorenViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
+export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOFilterOptionViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapToebehorenViewModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabFiltersComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, MoveFilterOptionRequest, MoveFilterRequest, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryBCBEigenschapToebehorenViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
 //# sourceMappingURL=fabrikantencore.mjs.map