fabrikantencore 2.0.2 → 2.0.4

package/fesm2015/fabrikantencore.mjs

@@ -2151,6 +2151,55 @@ class ProductsApiClient {
         }
         return of(null);
     }
+    ignoreBCBEigenschapOptieFilterOption(pConnectEigenschapOptieRequest) {
+        let url_ = this.baseUrl + "/api/products/ignorebcbeigenschapoptiefilteroption";
+        url_ = url_.replace(/[?&]$/, "");
+        const content_ = JSON.stringify(pConnectEigenschapOptieRequest);
+        let options_ = {
+            body: content_,
+            observe: "response",
+            responseType: "blob",
+            headers: new HttpHeaders({
+                "Content-Type": "application/json",
+            })
+        };
+        return this.http.request("post", url_, options_).pipe(mergeMap((response_) => {
+            return this.processIgnoreBCBEigenschapOptieFilterOption(response_);
+        })).pipe(catchError((response_) => {
+            if (response_ instanceof HttpResponseBase) {
+                try {
+                    return this.processIgnoreBCBEigenschapOptieFilterOption(response_);
+                }
+                catch (e) {
+                    return throwError(e);
+                }
+            }
+            else
+                return throwError(response_);
+        }));
+    }
+    processIgnoreBCBEigenschapOptieFilterOption(response) {
+        const status = response.status;
+        const responseBlob = response instanceof HttpResponse ? response.body :
+            response.error instanceof Blob ? response.error : undefined;
+        let _headers = {};
+        if (response.headers) {
+            for (let key of response.headers.keys()) {
+                _headers[key] = response.headers.get(key);
+            }
+        }
+        if (status === 200) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return of(null);
+            }));
+        }
+        else if (status !== 200 && status !== 204) {
+            return blobToText(responseBlob).pipe(mergeMap((_responseText) => {
+                return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            }));
+        }
+        return of(null);
+    }
     connectBCBOpbouwOptieFilterOption(pConnectOpbouwOptieRequest) {
         let url_ = this.baseUrl + "/api/products/connectbcbopbouwoptiefilteroption";
         url_ = url_.replace(/[?&]$/, "");
@@ -3945,6 +3994,7 @@ class BCBEigenschapOptieViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            this.ignore = _data["ignore"];
             this.connected = _data["connected"];
             if (Array.isArray(_data["bcbEigenschapOptieFilterOptionViewModels"])) {
                 this.bcbEigenschapOptieFilterOptionViewModels = [];
@@ -3968,6 +4018,7 @@ class BCBEigenschapOptieViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        data["ignore"] = this.ignore;
         data["connected"] = this.connected;
         if (Array.isArray(this.bcbEigenschapOptieFilterOptionViewModels)) {
             data["bcbEigenschapOptieFilterOptionViewModels"] = [];
@@ -8406,6 +8457,18 @@ class TranslateService {
         }
         return false;
     }
+    Show() {
+        var _a;
+        if (this.Loading) {
+            return false;
+        }
+        if (((_a = this.LanguagesViewModel) === null || _a === void 0 ? void 0 : _a.languages) != null) {
+            if (this.LanguagesViewModel.languages.length < 2) {
+                return false;
+            }
+        }
+        return true;
+    }
     GetActiveValue(category, key) {
         if (this.ActiveLanguage != null) {
             return this.GetValue(this.ActiveLanguage, category, key);
@@ -9182,6 +9245,30 @@ class FabrikantenService {
             }
         }
     }
+    // Breadcrumb
+    GetSteps() {
+        var _a;
+        var returnarray = new Array();
+        var array = (_a = this.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.categoryLayers;
+        if (array != null) {
+            for (var i = 0; i < array.length; i++) {
+                if (array[i].selectedOption != 0) {
+                    var options = array[i].categories;
+                    if (options != null) {
+                        for (var j = 0; j < options.length; j++) {
+                            if (options[j].id === array[i].selectedOption) {
+                                returnarray.push(options[j]);
+                            }
+                        }
+                    }
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        return returnarray;
+    }
 }
 FabrikantenService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabrikantenService, deps: [{ token: FabrikantenApiClient }, { token: BestekService }, { token: TranslateService }, { token: WebGLService }, { token: SVGService }, { token: NavigateService }], target: i0.ɵɵFactoryTarget.Injectable });
 FabrikantenService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabrikantenService, providedIn: 'root' });
@@ -9556,7 +9643,7 @@ class FabBreadcrumbComponent {
             this.FabrikantenService.RemoveProductSelection(this.ChangeDetectorRef);
         }
         else {
-            var array = this.GetSteps();
+            var array = this.FabrikantenService.GetSteps();
             if (array.length > 0) {
                 this.UndoStep(array[array.length - 1]);
             }
@@ -9577,35 +9664,12 @@ class FabBreadcrumbComponent {
         }
         return true;
     }
-    GetSteps() {
-        var _a;
-        var returnarray = new Array();
-        var array = (_a = this.FabrikantenService.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.categoryLayers;
-        if (array != null) {
-            for (var i = 0; i < array.length; i++) {
-                if (array[i].selectedOption != 0) {
-                    var options = array[i].categories;
-                    if (options != null) {
-                        for (var j = 0; j < options.length; j++) {
-                            if (options[j].id === array[i].selectedOption) {
-                                returnarray.push(options[j]);
-                            }
-                        }
-                    }
-                }
-                else {
-                    break;
-                }
-            }
-        }
-        return returnarray;
-    }
 }
 FabBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", 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: "14.2.2", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: { showfiltermenubutton: "showfiltermenubutton" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"header\" *ngIf=\"ShowBack()\">\n  <div>\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">arrow_back</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\n        </div>\n      </div>\n    </button>\n  </div>\n  <ng-container *ngIf=\"!MobileService.MobileInterface\">\n    <ng-container *ngFor=\"let step of GetSteps()\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"UndoStep(step)\">\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"Back()\">\n        <span *ngIf=\"GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">menu</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          Filtermenu\n        </div>\n      </div>\n    </button>\n  </ng-container>\n</div>\n", styles: [".header{display:flex;padding:4px}.buttonsize{height:40px;line-height:25px}.header-back{cursor:pointer}.product-conf{padding-left:5px}.open-filters-button{margin-left:5px}.title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}.icon{position:relative;top:2px}.header-title{font-size:16px;position:relative;top:1px;margin-left:3px}.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}.step:first-letter{text-transform:capitalize}.step:hover{text-decoration:underline}.stepicon{padding-top:7px}\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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+FabBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: { showfiltermenubutton: "showfiltermenubutton" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"header\" *ngIf=\"ShowBack()\">\n  <div>\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">arrow_back</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\n        </div>\n      </div>\n    </button>\n  </div>\n  <ng-container *ngIf=\"!MobileService.MobileInterface\">\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"UndoStep(step)\">\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"Back()\">\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">menu</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          Filtermenu\n        </div>\n      </div>\n    </button>\n  </ng-container>\n</div>\n", styles: [".header{display:flex;padding:4px}.buttonsize{height:40px;line-height:25px}.header-back{cursor:pointer}.product-conf{padding-left:5px}.open-filters-button{margin-left:5px}.title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}.icon{position:relative;top:2px}.header-title{font-size:16px;position:relative;top:1px;margin-left:3px}.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}.step:first-letter{text-transform:capitalize}.step:hover{text-decoration:underline}.stepicon{padding-top:7px}\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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-breadcrumb', template: "<div class=\"header\" *ngIf=\"ShowBack()\">\n  <div>\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">arrow_back</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\n        </div>\n      </div>\n    </button>\n  </div>\n  <ng-container *ngIf=\"!MobileService.MobileInterface\">\n    <ng-container *ngFor=\"let step of GetSteps()\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"UndoStep(step)\">\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"Back()\">\n        <span *ngIf=\"GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">menu</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          Filtermenu\n        </div>\n      </div>\n    </button>\n  </ng-container>\n</div>\n", styles: [".header{display:flex;padding:4px}.buttonsize{height:40px;line-height:25px}.header-back{cursor:pointer}.product-conf{padding-left:5px}.open-filters-button{margin-left:5px}.title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}.icon{position:relative;top:2px}.header-title{font-size:16px;position:relative;top:1px;margin-left:3px}.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}.step:first-letter{text-transform:capitalize}.step:hover{text-decoration:underline}.stepicon{padding-top:7px}\n"] }]
+            args: [{ selector: 'app-fab-breadcrumb', template: "<div class=\"header\" *ngIf=\"ShowBack()\">\n  <div>\n    <button class=\"buttonsize\" mat-stroked-button (click)=\"Back()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">arrow_back</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          {{ TranslateService.GetActiveValue(\"Common\", \"Back\") }}\n        </div>\n      </div>\n    </button>\n  </div>\n  <ng-container *ngIf=\"!MobileService.MobileInterface\">\n    <ng-container *ngFor=\"let step of FabrikantenService.GetSteps()\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"UndoStep(step)\">\n        {{ TranslateService.GetActiveValueCategory(step.id) }}\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null\">\n      <div class=\"stepicon\">\n        <mat-icon>chevron_right</mat-icon>\n      </div>\n      <div class=\"step\" (click)=\"Back()\">\n        <span *ngIf=\"FabrikantenService.GetSteps().length == 0\">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"MobileService.MobileInterface && showfiltermenubutton\">\n    <button class=\"open-filters-button buttonsize\" mat-stroked-button (click)=\"MobileService.OpenNav()\">\n      <div class=\"header\">\n        <div class=\"header-back\">\n          <mat-icon class=\"icon\">menu</mat-icon>\n        </div>\n        <div class=\"header-title\">\n          Filtermenu\n        </div>\n      </div>\n    </button>\n  </ng-container>\n</div>\n", styles: [".header{display:flex;padding:4px}.buttonsize{height:40px;line-height:25px}.header-back{cursor:pointer}.product-conf{padding-left:5px}.open-filters-button{margin-left:5px}.title{line-height:35px;font-size:30px;flex:auto;padding-left:5px}.icon{position:relative;top:2px}.header-title{font-size:16px;position:relative;top:1px;margin-left:3px}.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}.step:first-letter{text-transform:capitalize}.step:hover{text-decoration:underline}.stepicon{padding-top:7px}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showfiltermenubutton: [{
                 type: Input
             }], onResize: [{
@@ -9638,37 +9702,45 @@ class FabLanguageSelectComponent {
     SelectLanguage(language) {
         this.TranslateService.SelectLanguage(language, this.ChangeDetectorRef);
     }
-    Show() {
-        var _a;
-        if (this.TranslateService.Loading) {
-            return false;
-        }
-        if (((_a = this.TranslateService.LanguagesViewModel) === null || _a === void 0 ? void 0 : _a.languages) != null) {
-            if (this.TranslateService.LanguagesViewModel.languages.length < 2) {
-                return false;
-            }
-        }
-        return true;
-    }
 }
 FabLanguageSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabLanguageSelectComponent, deps: [{ token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabLanguageSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabLanguageSelectComponent, selector: "app-fab-language-select", ngImport: i0, template: "<div class=\"row\" *ngIf=\"Show()\">\n  <div class=\"item\" (click)=\"SelectLanguage(language)\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\n    <fab-flag [country]=\"language.flag\"></fab-flag>\n  </div>\n</div>\n", styles: [".row{display:flex}.item{padding:2px;cursor:pointer}\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: FabFlagComponent, selector: "fab-flag", inputs: ["country"] }] });
+FabLanguageSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabLanguageSelectComponent, selector: "app-fab-language-select", ngImport: i0, template: "<div class=\"row\" *ngIf=\"TranslateService.Show()\">\n  <div class=\"item\" (click)=\"SelectLanguage(language)\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\n    <fab-flag [country]=\"language.flag\"></fab-flag>\n  </div>\n</div>\n", styles: [".row{display:flex}.item{padding:2px;cursor:pointer}\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: FabFlagComponent, selector: "fab-flag", inputs: ["country"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabLanguageSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-language-select', template: "<div class=\"row\" *ngIf=\"Show()\">\n  <div class=\"item\" (click)=\"SelectLanguage(language)\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\n    <fab-flag [country]=\"language.flag\"></fab-flag>\n  </div>\n</div>\n", styles: [".row{display:flex}.item{padding:2px;cursor:pointer}\n"] }]
+            args: [{ selector: 'app-fab-language-select', template: "<div class=\"row\" *ngIf=\"TranslateService.Show()\">\n  <div class=\"item\" (click)=\"SelectLanguage(language)\" *ngFor=\"let language of TranslateService.LanguagesViewModel.languages\">\n    <fab-flag [country]=\"language.flag\"></fab-flag>\n  </div>\n</div>\n", styles: [".row{display:flex}.item{padding:2px;cursor:pointer}\n"] }]
         }], ctorParameters: function () { return [{ type: TranslateService }, { type: i0.ChangeDetectorRef }]; } });
 
 class FabHeaderComponent {
-    constructor() { }
+    constructor(FabrikantenService, TranslateService, ChangeDetectorRef) {
+        this.FabrikantenService = FabrikantenService;
+        this.TranslateService = TranslateService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
+    }
     ngOnInit() {
+        this.TranslateService.LoadTranslations(this.ChangeDetectorRef);
+    }
+    ShowHeader() {
+        return this.ShowBreadcrumb() || this.ShowLanguageSelect();
+    }
+    ShowBreadcrumb() {
+        var _a;
+        if (((_a = this.FabrikantenService.FabrikantenViewModel) === null || _a === void 0 ? void 0 : _a.selectedProduct) == null) {
+            if (this.FabrikantenService.GetSteps().length == 0) {
+                return false;
+            }
+        }
+        return true;
+    }
+    ShowLanguageSelect() {
+        return this.TranslateService.Show();
     }
 }
-FabHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FabHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabHeaderComponent, selector: "app-fab-header", inputs: { showfiltermenubutton: "showfiltermenubutton" }, ngImport: i0, template: "<div class=\"header-row\">\r\n  <app-fab-breadcrumb [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select></app-fab-language-select>\r\n</div>\r\n\r\n\r\n", styles: [".header-row{display:flex;height:48px}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:calc(100% - 50px)}\n"], dependencies: [{ kind: "component", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabLanguageSelectComponent, selector: "app-fab-language-select" }] });
+FabHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabHeaderComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FabHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabHeaderComponent, selector: "app-fab-header", inputs: { showfiltermenubutton: "showfiltermenubutton" }, ngImport: i0, template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n\r\n\r\n", styles: [".header-row{display:flex;height:48px}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:calc(100% - 50px)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabLanguageSelectComponent, selector: "app-fab-language-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-header', template: "<div class=\"header-row\">\r\n  <app-fab-breadcrumb [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select></app-fab-language-select>\r\n</div>\r\n\r\n\r\n", styles: [".header-row{display:flex;height:48px}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:calc(100% - 50px)}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showfiltermenubutton: [{
+            args: [{ selector: 'app-fab-header', template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n\r\n\r\n", styles: [".header-row{display:flex;height:48px}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:calc(100% - 50px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showfiltermenubutton: [{
                 type: Input
             }] } });
 
@@ -11084,6 +11156,20 @@ class BeheerProductsEigenschapComponent {
             }
         });
     }
+    Ignore(id) {
+        if (this.ProductsService.BCBProductViewModel != null) {
+            var request = new ConnectEigenschapOptieRequest();
+            request.bcbEigenschapOptieId = id;
+            request.filterOptionId = -1;
+            request.bcbProductId = this.ProductsService.BCBProductViewModel.id;
+            request.location = this.eigenschap.location;
+            this.ProductsApiClient.ignoreBCBEigenschapOptieFilterOption(request).subscribe(() => {
+                this.ProductsService.LoadProduct();
+            }, (error) => {
+                alert(error);
+            });
+        }
+    }
     ConnectRange() {
         var dialogRef = this.dialog.open(BeheerProductsConnectRangeinputComponent, {
             data: {
@@ -11126,10 +11212,10 @@ class BeheerProductsEigenschapComponent {
     }
 }
 BeheerProductsEigenschapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, deps: [{ token: ProductsService }, { token: i1$3.MatDialog }, { token: ProductsApiClient }], target: i0.ɵɵFactoryTarget.Component });
-BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n            Category\r\n          </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
+BeheerProductsEigenschapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: BeheerProductsEigenschapComponent, selector: "app-beheer-products-eigenschap", inputs: { eigenschap: "eigenschap" }, ngImport: i0, template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"Ignore(optie.id)\">\r\n            Ignore\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n      FilterOptionMany\r\n    </button>\r\n    <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n      Category\r\n    </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"optie.ignore\">\r\n          <b>Ignore</b>&nbsp;\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BeheerProductsEigenschapBereikComponent, selector: "app-beheer-products-eigenschap-bereik", inputs: ["bereik"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: BeheerProductsEigenschapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-products-eigenschap', template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n            FilterOptionMany\r\n          </button>\r\n          <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n            Category\r\n          </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
+            args: [{ selector: 'app-beheer-products-eigenschap', template: "<div class=\"container\" [ngClass]=\"{'warning': !eigenschap.connected, 'normal': eigenschap.connected}\">\r\n  <div class=\"row\" (click)=\"Toggle()\">\r\n    <div class=\"icon-td\">\r\n      <mat-icon *ngIf=\"!eigenschap.open && Show()\">expand_more</mat-icon>\r\n      <mat-icon *ngIf=\"eigenschap.open && Show()\">expand_less</mat-icon>\r\n    </div>\r\n    <div class=\"eigenschapcel\" colspan=\"2\">\r\n      {{eigenschap?.name}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"eigenschap.open\">\r\n    <div *ngFor=\"let bereik of eigenschap.bereiken\" class=\"bereik\">\r\n      <app-beheer-products-eigenschap-bereik [bereik]=\"bereik\"></app-beheer-products-eigenschap-bereik>\r\n    </div>\r\n    <div *ngIf=\"eigenschap.bereiken.length > 0 && eigenschap.rangeInputs != null\">\r\n      <div *ngIf=\"eigenschap.rangeInputs.length == 0\">\r\n        <button mat-raised-button (click)=\"ConnectRange()\">\r\n          Range\r\n        </button>\r\n      </div>\r\n      <div *ngFor=\"let range of eigenschap.rangeInputs\">\r\n        {{ range.rangeInputModel.name }}\r\n\r\n        <button mat-raised-button>\r\n          Remove\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div *ngFor=\"let optie of eigenschap.opties\" [ngClass]=\"{'warning': !optie.connected}\">\r\n      <div class=\"text-div\">{{ optie.name }}</div>\r\n      <div>\r\n        <div *ngIf=\"!optie.connected\">\r\n          <button mat-raised-button (click)=\"Connect(optie.id, eigenschap.name, optie.name)\">\r\n            FilterOption\r\n          </button>\r\n          <button mat-raised-button (click)=\"Ignore(optie.id)\">\r\n            Ignore\r\n          </button>\r\n          <!--<button mat-raised-button (click)=\"ConnectMany(optie.id)\">\r\n      FilterOptionMany\r\n    </button>\r\n    <button mat-raised-button (click)=\"ConnectCategory(optie.id, eigenschap?.name, optie.name)\">\r\n      Category\r\n    </button>-->\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieFilterOptionViewModels\">\r\n          <b>{{ connect.filterOptionViewModel.filterName }}: {{ connect.filterOptionViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngFor=\"let connect of optie.bcbEigenschapOptieCategoryViewModels\">\r\n          <b>{{ connect.categoryViewModel.name }}</b>&nbsp;\r\n          <button mat-raised-button>\r\n            Remove\r\n          </button>\r\n        </div>\r\n        <div *ngIf=\"optie.ignore\">\r\n          <b>Ignore</b>&nbsp;\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{cursor:pointer;display:flex}.displayflex{display:flex}.eigenschapcel{flex:auto}.container{margin:5px;padding:5px;border:1px solid #000}.icon-td{width:24px;height:24px}.text-div{flex:auto}.warning{background-color:#f08080}.normal{background-color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductsService }, { type: i1$3.MatDialog }, { type: ProductsApiClient }]; }, propDecorators: { eigenschap: [{
                 type: Input
             }] } });