fabrikantencore 2.6.13 → 2.7.1

package/fesm2022/fabrikantencore.mjs

@@ -6248,6 +6248,7 @@ class FabrikantenCategoryViewModel {
 class FabrikantenFilterCategoryViewModel {
     id;
     name;
+    position;
     inputs;
     constructor(data) {
         if (data) {
@@ -6261,6 +6262,7 @@ class FabrikantenFilterCategoryViewModel {
         if (_data) {
             this.id = _data["id"];
             this.name = _data["name"];
+            this.position = _data["position"];
             if (Array.isArray(_data["inputs"])) {
                 this.inputs = [];
                 for (let item of _data["inputs"])
@@ -6278,6 +6280,7 @@ class FabrikantenFilterCategoryViewModel {
         data = typeof data === 'object' ? data : {};
         data["id"] = this.id;
         data["name"] = this.name;
+        data["position"] = this.position;
         if (Array.isArray(this.inputs)) {
             data["inputs"] = [];
             for (let item of this.inputs)
@@ -6433,6 +6436,8 @@ var FilterType;
     FilterType[FilterType["MultiSelectFold"] = 5] = "MultiSelectFold";
     FilterType[FilterType["DropdownLabel"] = 6] = "DropdownLabel";
     FilterType[FilterType["ColourSelectorLabel"] = 7] = "ColourSelectorLabel";
+    FilterType[FilterType["DisplayValue"] = 8] = "DisplayValue";
+    FilterType[FilterType["CustomFilter1"] = 9] = "CustomFilter1";
 })(FilterType || (FilterType = {}));
 class FabrikantenFilterOptionViewModel {
     id;
@@ -6961,6 +6966,7 @@ class FabrikantenBestekViewModel {
 class DynamicDisplayValueViewModel {
     name;
     value;
+    hidden;
     constructor(data) {
         if (data) {
             for (var property in data) {
@@ -6973,6 +6979,7 @@ class DynamicDisplayValueViewModel {
         if (_data) {
             this.name = _data["name"];
             this.value = _data["value"];
+            this.hidden = _data["hidden"];
         }
     }
     static fromJS(data) {
@@ -6985,6 +6992,7 @@ class DynamicDisplayValueViewModel {
         data = typeof data === 'object' ? data : {};
         data["name"] = this.name;
         data["value"] = this.value;
+        data["hidden"] = this.hidden;
         return data;
     }
 }
@@ -10112,7 +10120,7 @@ class RESTRequestModel {
             if (Array.isArray(_data["parameters"])) {
                 this.parameters = [];
                 for (let item of _data["parameters"])
-                    this.parameters.push(RESTParameter.fromJS(item));
+                    this.parameters.push(RESTParameterViewModel.fromJS(item));
             }
         }
     }
@@ -10133,7 +10141,7 @@ class RESTRequestModel {
         return data;
     }
 }
-class RESTParameter {
+class RESTParameterViewModel {
     name;
     value;
     constructor(data) {
@@ -10152,7 +10160,7 @@ class RESTParameter {
     }
     static fromJS(data) {
         data = typeof data === 'object' ? data : {};
-        let result = new RESTParameter();
+        let result = new RESTParameterViewModel();
         result.init(data);
         return result;
     }
@@ -11823,6 +11831,7 @@ class BestekService {
     fabProductBestek = null;
     FabrikantenService = null;
     FabrikantenBestekViewModel;
+    ShouldTriggerReload = false;
     constructor(clipboard, FabrikantenApiClient) {
         this.clipboard = clipboard;
         this.FabrikantenApiClient = FabrikantenApiClient;
@@ -11843,53 +11852,64 @@ class BestekService {
         this.clipboard.copy(str);
     }
     LoadFabrikantenBestekViewModel(sessionid, ChangeDetectorRef) {
-        this.Loading = true;
-        var request = new FabrikantenBestekRequestModel();
-        request.sessionId = sessionid;
-        this.FabrikantenApiClient.getFabrikantenBestekViewModel(request).subscribe((model) => {
-            this.FabrikantenBestekViewModel = model;
-            if (this.TypeBestek == "STABU") {
-                if (model.stabu == undefined || model.stabu == '') {
-                    this.TypeBestek = "";
-                }
-            }
-            if (this.TypeBestek == "OSF") {
-                if (model.osfhtml == undefined || model.osfhtml == '') {
-                    this.TypeBestek = "";
+        if (!this.Loading) {
+            this.Loading = true;
+            var request = new FabrikantenBestekRequestModel();
+            request.sessionId = sessionid;
+            this.FabrikantenApiClient.getFabrikantenBestekViewModel(request).subscribe((model) => {
+                this.FabrikantenBestekViewModel = model;
+                if (this.TypeBestek == "STABU") {
+                    if (model.stabu == undefined || model.stabu == '') {
+                        this.TypeBestek = "";
+                    }
                 }
-            }
-            //if (this.TypeBestek == "SUF") {
-            //  if (model.suf == undefined || model.suf == '') {
-            //    this.TypeBestek = "";
-            //  }
-            //}
-            if (this.TypeBestek == "Vrij") {
-                if (model.vrijBestekHTML == undefined || model.vrijBestekHTML == '') {
-                    this.TypeBestek = "";
+                if (this.TypeBestek == "OSF") {
+                    if (model.osfhtml == undefined || model.osfhtml == '') {
+                        this.TypeBestek = "";
+                    }
                 }
-            }
-            if (this.TypeBestek == "") {
-                if (model.stabu != undefined && model.stabu != '') {
-                    this.TypeBestek = "STABU";
+                //if (this.TypeBestek == "SUF") {
+                //  if (model.suf == undefined || model.suf == '') {
+                //    this.TypeBestek = "";
+                //  }
+                //}
+                if (this.TypeBestek == "Vrij") {
+                    if (model.vrijBestekHTML == undefined || model.vrijBestekHTML == '') {
+                        this.TypeBestek = "";
+                    }
                 }
-                if (model.osfhtml != undefined && model.osfhtml != '') {
-                    this.TypeBestek = "OSF";
+                if (this.TypeBestek == "") {
+                    if (model.stabu != undefined && model.stabu != '') {
+                        this.TypeBestek = "STABU";
+                    }
+                    if (model.osfhtml != undefined && model.osfhtml != '') {
+                        this.TypeBestek = "OSF";
+                    }
+                    //if (model.suf != undefined && model.suf != '') {
+                    //  this.TypeBestek = "SUF";
+                    //}
+                    if (model.vrijBestekHTML != undefined && model.vrijBestekHTML != '') {
+                        this.TypeBestek = "Vrij";
+                    }
                 }
-                //if (model.suf != undefined && model.suf != '') {
-                //  this.TypeBestek = "SUF";
-                //}
-                if (model.vrijBestekHTML != undefined && model.vrijBestekHTML != '') {
-                    this.TypeBestek = "Vrij";
+                this.Loading = false;
+                if (this.FabrikantenService != null) {
+                    if (this.ShouldTriggerReload) {
+                        this.ShouldTriggerReload = false;
+                        this.FabrikantenService.TriggerReloads(ChangeDetectorRef);
+                    }
+                    else {
+                        this.FabrikantenService.ProcessDynamicModels();
+                    }
                 }
-            }
-            this.Loading = false;
-            if (this.FabrikantenService != null) {
-                this.FabrikantenService.ProcessDynamicModels();
-            }
-        }, (error) => {
-            alert('An unexpected error occured');
-            this.Loading = false;
-        });
+            }, (error) => {
+                alert('An unexpected error occured');
+                this.Loading = false;
+            });
+        }
+        else {
+            this.ShouldTriggerReload = true;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BestekService, deps: [{ token: i1$3.Clipboard }, { token: FabrikantenApiClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BestekService, providedIn: 'root' });
@@ -12154,28 +12174,41 @@ class WebGLService {
     FabrikantenService = null;
     FabWebglViewerComponent = null;
     FirstCheck = false;
+    ShouldTriggerReload = false;
     constructor(FabrikantenApiClient) {
         this.FabrikantenApiClient = FabrikantenApiClient;
     }
     LoadFabrikanten3DViewModel(sessionid, ChangeDetectorRef) {
-        this.Loading = true;
-        ChangeDetectorRef.detectChanges();
-        var request = new Fabrikanten3DRequestModel();
-        request.sessionId = sessionid;
-        this.FabrikantenApiClient.getFabrikanten3DViewModel(request).subscribe((model) => {
-            this.Fabrikanten3DViewModel = model;
-            this.Loading = false;
+        if (!this.Loading) {
+            this.Loading = true;
             ChangeDetectorRef.detectChanges();
-            this.DoFirstCheck();
-            if (this.FabWebglViewerComponent != null) {
-                this.FabWebglViewerComponent.RefreshViewer();
-            }
-            if (this.FabrikantenService != null) {
-                this.FabrikantenService.ProcessDynamicModels();
-            }
-        }, (error) => {
-            alert('An unexpected error occured');
-        });
+            var request = new Fabrikanten3DRequestModel();
+            request.sessionId = sessionid;
+            this.FabrikantenApiClient.getFabrikanten3DViewModel(request).subscribe((model) => {
+                this.Fabrikanten3DViewModel = model;
+                this.Loading = false;
+                ChangeDetectorRef.detectChanges();
+                this.DoFirstCheck();
+                if (this.FabWebglViewerComponent != null) {
+                    this.FabWebglViewerComponent.RefreshViewer();
+                }
+                if (this.FabrikantenService != null) {
+                    if (this.ShouldTriggerReload) {
+                        this.ShouldTriggerReload = false;
+                        this.FabrikantenService.TriggerReloads(ChangeDetectorRef);
+                    }
+                    else {
+                        this.FabrikantenService.ProcessDynamicModels();
+                    }
+                }
+            }, (error) => {
+                alert('An unexpected error occured');
+                this.Loading = false;
+            });
+        }
+        else {
+            this.ShouldTriggerReload = true;
+        }
     }
     DoFirstCheck() {
         if (!this.FirstCheck) {
@@ -12218,33 +12251,46 @@ class SVGService {
     Snede = "";
     Snedes = new Array();
     MinDif = 100;
+    ShouldTriggerReload = false;
     constructor(FabrikantenApiClient, sanitization) {
         this.FabrikantenApiClient = FabrikantenApiClient;
         this.sanitization = sanitization;
     }
     LoadFabrikantenSVGViewModel(sessionid, ChangeDetectorRef) {
-        this.Loading = true;
-        ChangeDetectorRef.detectChanges();
-        var request = new FabrikantenSVGRequestModel();
-        request.sessionId = sessionid;
-        request.width = this.ViewerWidth;
-        request.height = this.ViewerHeight;
-        request.schaal = this.Schaal;
-        request.snede = this.Snede;
-        console.log('get width:' + request.width + " height: " + request.height);
-        this.FabrikantenApiClient.getFabrikantenSVGViewModel(request).subscribe((model) => {
-            this.FabrikantenSVGViewModel = model;
-            this.SafeURL = this.sanitization.bypassSecurityTrustResourceUrl(this.FabrikantenSVGViewModel.svg + "");
-            this.SafeURLLoaded = true;
-            this.CollectSnedes();
-            this.Loading = false;
+        if (!this.Loading) {
+            this.Loading = true;
             ChangeDetectorRef.detectChanges();
-            if (this.FabrikantenService != null) {
-                this.FabrikantenService.ProcessDynamicModels();
-            }
-        }, (error) => {
-            alert('An unexpected error occured');
-        });
+            var request = new FabrikantenSVGRequestModel();
+            request.sessionId = sessionid;
+            request.width = this.ViewerWidth;
+            request.height = this.ViewerHeight;
+            request.schaal = this.Schaal;
+            request.snede = this.Snede;
+            console.log('get width:' + request.width + " height: " + request.height);
+            this.FabrikantenApiClient.getFabrikantenSVGViewModel(request).subscribe((model) => {
+                this.FabrikantenSVGViewModel = model;
+                this.SafeURL = this.sanitization.bypassSecurityTrustResourceUrl(this.FabrikantenSVGViewModel.svg + "");
+                this.SafeURLLoaded = true;
+                this.CollectSnedes();
+                this.Loading = false;
+                ChangeDetectorRef.detectChanges();
+                if (this.FabrikantenService != null) {
+                    if (this.ShouldTriggerReload) {
+                        this.ShouldTriggerReload = false;
+                        this.FabrikantenService.TriggerReloads(ChangeDetectorRef);
+                    }
+                    else {
+                        this.FabrikantenService.ProcessDynamicModels();
+                    }
+                }
+            }, (error) => {
+                alert('An unexpected error occured');
+                this.Loading = false;
+            });
+        }
+        else {
+            this.ShouldTriggerReload = true;
+        }
     }
     UpdateViewerSize(width, height, ChangeDetectorRef) {
         if (((Math.abs(this.ViewerWidth - width) > this.MinDif) || (Math.abs(this.ViewerHeight - height) > this.MinDif)) && (width > 0) && (height > 0)) {
@@ -12899,6 +12945,9 @@ class FabrikantenService {
                 if (this.WebGLService.Fabrikanten3DViewModel.dynamicRangeInputs != null) {
                     this.ProcessDynamicRangeInputs(this.WebGLService.Fabrikanten3DViewModel.dynamicRangeInputs);
                 }
+                if (this.WebGLService.Fabrikanten3DViewModel.dynamicDisplayValues != null) {
+                    this.ProcessDynamicDisplayValues(this.WebGLService.Fabrikanten3DViewModel.dynamicDisplayValues);
+                }
             }
             else if (this.SVGService.FabrikantenSVGViewModel != null && this.SVGService.FabrikantenSVGViewModel.checksum == this.FabrikantenViewModel.checksum) {
                 if (this.SVGService.FabrikantenSVGViewModel.dynamicFilters != null) {
@@ -12907,6 +12956,9 @@ class FabrikantenService {
                 if (this.SVGService.FabrikantenSVGViewModel.dynamicRangeInputs != null) {
                     this.ProcessDynamicRangeInputs(this.SVGService.FabrikantenSVGViewModel.dynamicRangeInputs);
                 }
+                if (this.SVGService.FabrikantenSVGViewModel.dynamicDisplayValues != null) {
+                    this.ProcessDynamicDisplayValues(this.SVGService.FabrikantenSVGViewModel.dynamicDisplayValues);
+                }
             }
             else if (this.BestekService.FabrikantenBestekViewModel != null && this.BestekService.FabrikantenBestekViewModel.checksum == this.FabrikantenViewModel.checksum) {
                 if (this.BestekService.FabrikantenBestekViewModel.dynamicFilters != null) {
@@ -12915,6 +12967,35 @@ class FabrikantenService {
                 if (this.BestekService.FabrikantenBestekViewModel.dynamicRangeInputs != null) {
                     this.ProcessDynamicRangeInputs(this.BestekService.FabrikantenBestekViewModel.dynamicRangeInputs);
                 }
+                if (this.BestekService.FabrikantenBestekViewModel.dynamicDisplayValues != null) {
+                    this.ProcessDynamicDisplayValues(this.BestekService.FabrikantenBestekViewModel.dynamicDisplayValues);
+                }
+            }
+        }
+    }
+    ProcessDynamicDisplayValues(values) {
+        for (var i = 0; i < values.length; i++) {
+            if (this.FabrikantenViewModel.inputs != null) {
+                this.ProcessDynamicDisplayValueInputs(values[i], this.FabrikantenViewModel.inputs);
+            }
+            if (this.FabrikantenViewModel.filterCategories != null) {
+                for (var j = 0; j < this.FabrikantenViewModel.filterCategories.length; j++) {
+                    var inputs = this.FabrikantenViewModel.filterCategories[j].inputs;
+                    if (inputs != null) {
+                        this.ProcessDynamicDisplayValueInputs(values[i], inputs);
+                    }
+                }
+            }
+        }
+    }
+    ProcessDynamicDisplayValueInputs(value, inputs) {
+        for (var i = 0; i < inputs.length; i++) {
+            var options = inputs[i].filter?.options;
+            if (options != null && options.length > 0) {
+                if (options[0].name == value.name) {
+                    options[0].id = -2;
+                    options[0].name = value.value;
+                }
             }
         }
     }
@@ -13210,24 +13291,29 @@ class FabrikantenService {
             if (array != null && (array.length == 1 || this.FabrikantenSettingsViewModel.alwaysShowVariant)) {
                 if (this.SelectedTab == "Bestek" || this.ForceUpdateBestek) {
                     if (this.FabrikantenViewModel.checksum != this.BestekService.FabrikantenBestekViewModel?.checksum) {
-                        console.log("LoadFabrikantenBestekViewModel");
                         this.BestekService.LoadFabrikantenBestekViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
                     }
+                    else {
+                        this.ProcessDynamicModels();
+                    }
                 }
                 if (this.SelectedTab == "3D" || this.ForceUpdate3D) {
                     if (this.FabrikantenViewModel.checksum != this.WebGLService.Fabrikanten3DViewModel?.checksum) {
-                        console.log("LoadFabrikanten3DViewModel");
                         this.WebGLService.LoadFabrikanten3DViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
                     }
+                    else {
+                        this.ProcessDynamicModels();
+                    }
                 }
                 if (this.SelectedTab == "2D" || this.ForceUpdate2D) {
                     if (this.FabrikantenViewModel.checksum != this.SVGService.FabrikantenSVGViewModel?.checksum) {
-                        console.log("LoadFabrikantenSVGViewModel");
                         this.SVGService.LoadFabrikantenSVGViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
                     }
+                    else {
+                        this.ProcessDynamicModels();
+                    }
                 }
                 if (this.SelectedTab == "Texture" || this.ForceUpdateTexture) {
-                    console.log("LoadFabrikantenTextureViewModel");
                     this.TextureService.LoadFabrikantenTextureViewModel(this.FabrikantenViewModel.sessionId, ChangeDetectorRef);
                 }
             }
@@ -13308,11 +13394,11 @@ class FabFiltersComponent {
         return this.FabrikantenService.Loading || this.TranslateService.Loading;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFiltersComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabFiltersComponent, selector: "fab-filters", host: { listeners: { "window:resize": "onResize($event)" } }, 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(TranslationCategory.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 class=\"product-view\">\r\n      <fab-filters-overview></fab-filters-overview>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>-->\r\n", styles: [".row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-transform:capitalize;text-align:center}.loader-spinner{margin:auto}.view-content{background-color:#fff}.loader{position:absolute;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabFiltersComponent, selector: "fab-filters", host: { listeners: { "window:resize": "onResize($event)" } }, 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(TranslationCategory.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 class=\"product-view\">\r\n      <fab-filters-overview></fab-filters-overview>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>-->\r\n", styles: [".row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.view-content{background-color:#fff}.loader{position:absolute;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fab-filters', 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(TranslationCategory.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 class=\"product-view\">\r\n      <fab-filters-overview></fab-filters-overview>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>-->\r\n", styles: [".row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-transform:capitalize;text-align:center}.loader-spinner{margin:auto}.view-content{background-color:#fff}.loader{position:absolute;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"] }]
+            args: [{ selector: 'fab-filters', 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(TranslationCategory.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 class=\"product-view\">\r\n      <fab-filters-overview></fab-filters-overview>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>-->\r\n", styles: [".row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.view-content{background-color:#fff}.loader{position:absolute;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: BestekService }, { type: TranslateService }, { type: i1$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -14298,6 +14384,7 @@ class BeheerProductsKoppelFilteroptionDailogComponent {
     NieuwFilterToevoegen() {
         this.LoadingFilters = true;
         var requestfilter = new CreateFilterRequest();
+        requestfilter.loginResponseModel = new LoginResponseModel(this.authenticationService.currentUserValue);
         requestfilter.name = this.FilterNaamNieuw;
         this.FiltersApiClient.createFilter(requestfilter).subscribe((model) => {
             this.LoadingFilters = false;
@@ -17161,11 +17248,11 @@ class FabFilterLabelComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFilterLabelComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabFilterLabelComponent, selector: "app-fab-filter-label", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-label\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        <span class=\"filter-label-standard\" *ngIf=\"filter.standard != null && filter.standard != ''\"> ({{ filter.standard }})</span>\r\n        <span class=\"filter-label-asterix\" *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\r\n      </div>\r\n      <div *ngIf=\"!IsDisabled()\" class=\"filter-options\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label class=\"select-mat-label\">\r\n          </mat-label>\r\n          <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n            <ng-container *ngFor=\"let option of filter.options\">\r\n              <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\r\n                <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                  <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                    &nbsp;\r\n                    &nbsp;\r\n                  </span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                  <div class=\"filter-option-image-div\">\r\n                    <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                  </div>\r\n                </ng-container>\r\n                <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n                <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"IsDisabled()\" class=\"filter-option-selected\">\r\n          <ng-container *ngFor=\"let option of filter.options\">\r\n            <ng-container *ngIf=\"!option.hidden\">\r\n              <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                  &nbsp;\r\n                  &nbsp;\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                <div class=\"filter-option-image-div\">\r\n                  <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                </div>\r\n              </ng-container>\r\n              <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n              <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n            </ng-container>\r\n          </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter-label .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter-label .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter-label .description-block{padding-bottom:15px;font-size:12px}app-fab-filter-label .row{display:flex;width:100%}app-fab-filter-label .full-width{width:100%}app-fab-filter-label .icon-position{margin-top:14px}app-fab-filter-label .select{flex:auto;width:100%}app-fab-filter-label .reset{cursor:pointer;font-size:26px}app-fab-filter-label .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.filter-label,.filter-options,.filter-option-selected{width:50%}.displayflex{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabFilterLabelComponent, selector: "app-fab-filter-label", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-label\">\r\n        <span class=\"filter-label-name\">\r\n          {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        </span>\r\n        <span class=\"filter-label-standard\" *ngIf=\"filter.standard != null && filter.standard != ''\"> ({{ filter.standard }})</span>\r\n        <span class=\"filter-label-asterix\" *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\r\n      </div>\r\n      <div *ngIf=\"!IsDisabled()\" class=\"filter-options\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label class=\"select-mat-label\">\r\n          </mat-label>\r\n          <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n            <ng-container *ngFor=\"let option of filter.options\">\r\n              <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\r\n                <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                  <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                    &nbsp;\r\n                    &nbsp;\r\n                  </span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                  <div class=\"filter-option-image-div\">\r\n                    <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                  </div>\r\n                </ng-container>\r\n                <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n                <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"IsDisabled()\" class=\"filter-option-selected\">\r\n          <ng-container *ngFor=\"let option of filter.options\">\r\n            <ng-container *ngIf=\"!option.hidden\">\r\n              <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                  &nbsp;\r\n                  &nbsp;\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                <div class=\"filter-option-image-div\">\r\n                  <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                </div>\r\n              </ng-container>\r\n              <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n              <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n            </ng-container>\r\n          </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter-label .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter-label .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter-label .description-block{padding-bottom:15px;font-size:12px}app-fab-filter-label .row{display:flex;width:100%}app-fab-filter-label .full-width{width:100%}app-fab-filter-label .icon-position{margin-top:14px}app-fab-filter-label .select{flex:auto;width:100%}app-fab-filter-label .reset{cursor:pointer;font-size:26px}app-fab-filter-label .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.filter-label{width:50%}.filter-label-name{line-height:52px}.filter-options{width:50%}.filter-option-selected{width:50%;text-align:right}mat-option .filteroption-label-unit{line-height:52px;padding-left:5px}.displayflex{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatLegacySelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatLegacyOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFilterLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-filter-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-label\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        <span class=\"filter-label-standard\" *ngIf=\"filter.standard != null && filter.standard != ''\"> ({{ filter.standard }})</span>\r\n        <span class=\"filter-label-asterix\" *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\r\n      </div>\r\n      <div *ngIf=\"!IsDisabled()\" class=\"filter-options\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label class=\"select-mat-label\">\r\n          </mat-label>\r\n          <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n            <ng-container *ngFor=\"let option of filter.options\">\r\n              <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\r\n                <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                  <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                    &nbsp;\r\n                    &nbsp;\r\n                  </span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                  <div class=\"filter-option-image-div\">\r\n                    <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                  </div>\r\n                </ng-container>\r\n                <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n                <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"IsDisabled()\" class=\"filter-option-selected\">\r\n          <ng-container *ngFor=\"let option of filter.options\">\r\n            <ng-container *ngIf=\"!option.hidden\">\r\n              <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                  &nbsp;\r\n                  &nbsp;\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                <div class=\"filter-option-image-div\">\r\n                  <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                </div>\r\n              </ng-container>\r\n              <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n              <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n            </ng-container>\r\n          </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter-label .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter-label .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter-label .description-block{padding-bottom:15px;font-size:12px}app-fab-filter-label .row{display:flex;width:100%}app-fab-filter-label .full-width{width:100%}app-fab-filter-label .icon-position{margin-top:14px}app-fab-filter-label .select{flex:auto;width:100%}app-fab-filter-label .reset{cursor:pointer;font-size:26px}app-fab-filter-label .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.filter-label,.filter-options,.filter-option-selected{width:50%}.displayflex{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"] }]
+            args: [{ selector: 'app-fab-filter-label', encapsulation: ViewEncapsulation.None, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\">\r\n    <div class=\"displayflex\">\r\n      <div class=\"filter-label\">\r\n        <span class=\"filter-label-name\">\r\n          {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        </span>\r\n        <span class=\"filter-label-standard\" *ngIf=\"filter.standard != null && filter.standard != ''\"> ({{ filter.standard }})</span>\r\n        <span class=\"filter-label-asterix\" *ngIf=\"filter.blocksProductSelect || filter.required\">*</span>\r\n      </div>\r\n      <div *ngIf=\"!IsDisabled()\" class=\"filter-options\">\r\n        <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n          <mat-label class=\"select-mat-label\">\r\n          </mat-label>\r\n          <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n            <ng-container *ngFor=\"let option of filter.options\">\r\n              <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\r\n                <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                  <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                    &nbsp;\r\n                    &nbsp;\r\n                  </span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                  <div class=\"filter-option-image-div\">\r\n                    <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                  </div>\r\n                </ng-container>\r\n                <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n                <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n              </mat-option>\r\n            </ng-container>\r\n          </mat-select>\r\n        </mat-form-field>\r\n      </div>\r\n      <div *ngIf=\"IsDisabled()\" class=\"filter-option-selected\">\r\n          <ng-container *ngFor=\"let option of filter.options\">\r\n            <ng-container *ngIf=\"!option.hidden\">\r\n              <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n                <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                  &nbsp;\r\n                  &nbsp;\r\n                </span>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n                <div class=\"filter-option-image-div\">\r\n                  <img src=\"{{ option.imagePath }}\" class=\"filter-option-image\" />\r\n                </div>\r\n              </ng-container>\r\n              <span class=\"name-span\">{{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}</span>\r\n              <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\r\n            </ng-container>\r\n          </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-filter-label .select-mat-label:first-letter{text-transform:capitalize}app-fab-filter-label .mat-select-min-line:first-letter{text-transform:capitalize}app-fab-filter-label .description-block{padding-bottom:15px;font-size:12px}app-fab-filter-label .row{display:flex;width:100%}app-fab-filter-label .full-width{width:100%}app-fab-filter-label .icon-position{margin-top:14px}app-fab-filter-label .select{flex:auto;width:100%}app-fab-filter-label .reset{cursor:pointer;font-size:26px}app-fab-filter-label .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.filter-label{width:50%}.filter-label-name{line-height:52px}.filter-options{width:50%}.filter-option-selected{width:50%;text-align:right}mat-option .filteroption-label-unit{line-height:52px;padding-left:5px}.displayflex{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{
                 type: Input
             }], filterchanged: [{
@@ -17226,6 +17313,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }] } });
 
+class FabFilterDisplayValueComponent {
+    FabrikantenService;
+    TranslateService;
+    ChangeDetectorRef;
+    _filter;
+    get filter() {
+        return this._filter;
+    }
+    set filter(value) {
+        this._filter = value;
+    }
+    get TranslationCategory() {
+        return TranslationCategory;
+    }
+    get TranslationSubCategory() {
+        return TranslationSubCategory;
+    }
+    constructor(FabrikantenService, TranslateService, ChangeDetectorRef) {
+        this.FabrikantenService = FabrikantenService;
+        this.TranslateService = TranslateService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
+    }
+    IsLoaded() {
+        var options = this.filter.options;
+        if (options != null && options.length > 0) {
+            if (options[0].id != -1) {
+                return true;
+            }
+        }
+        return false;
+    }
+    GetText() {
+        var options = this.filter.options;
+        if (options != null && options.length > 0) {
+            return options[0].name + "";
+        }
+        return "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFilterDisplayValueComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabFilterDisplayValueComponent, selector: "app-fab-filter-display-value", inputs: { filter: "filter" }, ngImport: i0, template: "<div class=\"filter-display-div\">\n  <div class=\"filter-display-name\">\n    {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\n  </div>\n  <div *ngIf=\"!IsLoaded()\">\n    <mat-spinner [diameter]=\"20\"></mat-spinner>\n  </div>\n  <div *ngIf=\"IsLoaded()\" class=\"filter-display-value\">\n    {{ GetText() }}\n    <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\n  </div>\n</div>\n", styles: [".filter-display-div{display:flex}.filter-display-name{flex:auto}.filter-display-value{flex:auto;text-align:right}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFilterDisplayValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-fab-filter-display-value', template: "<div class=\"filter-display-div\">\n  <div class=\"filter-display-name\">\n    {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\n  </div>\n  <div *ngIf=\"!IsLoaded()\">\n    <mat-spinner [diameter]=\"20\"></mat-spinner>\n  </div>\n  <div *ngIf=\"IsLoaded()\" class=\"filter-display-value\">\n    {{ GetText() }}\n    <span class=\"filteroption-label-unit\" *ngIf=\"filter.unit != null && filter.unit != ''\"> {{ filter.unit }}</span>\n  </div>\n</div>\n", styles: [".filter-display-div{display:flex}.filter-display-name{flex:auto}.filter-display-value{flex:auto;text-align:right}\n"] }]
+        }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{
+                type: Input
+            }] } });
+
+class TemplateComponentService {
+    HTMLInstances = new Array();
+    constructor() { }
+    SetHTML(key, html) {
+        for (var i = 0; i < this.HTMLInstances.length; i++) {
+            if (this.HTMLInstances[i].Key == key) {
+                this.HTMLInstances[i].HTML = html;
+                return;
+            }
+        }
+        var htmlinstance = new HTMLInstance();
+        htmlinstance.Key = key;
+        htmlinstance.HTML = html;
+        this.HTMLInstances.push(htmlinstance);
+    }
+    GetHTML(key) {
+        for (var i = 0; i < this.HTMLInstances.length; i++) {
+            if (this.HTMLInstances[i].Key == key) {
+                return this.HTMLInstances[i].HTML;
+            }
+        }
+        return "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: TemplateComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: TemplateComponentService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: TemplateComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+class HTMLInstance {
+    Key;
+    HTML;
+}
+
+class FabFilterCustomComponent {
+    FabrikantenService;
+    TranslateService;
+    TemplateComponentService;
+    ChangeDetectorRef;
+    _filter;
+    get filter() {
+        return this._filter;
+    }
+    set filter(value) {
+        this._filter = value;
+    }
+    get TranslationCategory() {
+        return TranslationCategory;
+    }
+    get TranslationSubCategory() {
+        return TranslationSubCategory;
+    }
+    constructor(FabrikantenService, TranslateService, TemplateComponentService, ChangeDetectorRef) {
+        this.FabrikantenService = FabrikantenService;
+        this.TranslateService = TranslateService;
+        this.TemplateComponentService = TemplateComponentService;
+        this.ChangeDetectorRef = ChangeDetectorRef;
+    }
+    GetHTML() {
+        if (this.filter) {
+            return this.TemplateComponentService.GetHTML("FabFilterCustomComponent-" + this.filter.id);
+        }
+        else {
+            return "";
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFilterCustomComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: TemplateComponentService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabFilterCustomComponent, selector: "app-fab-filter-custom", inputs: { filter: "filter" }, ngImport: i0, template: "<div *ngIf=\"GetHTML() == ''\">\n  No custom filter found...\n</div>\n\n<ng-container *ngIf=\"GetHTML() != ''\">\n  <div [innerHTML]=\"GetHTML()\">\n\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabFilterCustomComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-fab-filter-custom', template: "<div *ngIf=\"GetHTML() == ''\">\n  No custom filter found...\n</div>\n\n<ng-container *ngIf=\"GetHTML() != ''\">\n  <div [innerHTML]=\"GetHTML()\">\n\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: TemplateComponentService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filter: [{
+                type: Input
+            }] } });
+
 class FabInputComponent {
     _input;
     get input() {
@@ -17235,11 +17449,11 @@ class FabInputComponent {
         this._input = value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabInputComponent, selector: "app-fab-input", inputs: { input: "input" }, ngImport: i0, template: "<ng-container *ngIf=\"input.filter && !input.filter.hidden\">\r\n  <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n    <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 4\">\r\n    <app-fab-filter-fold [filter]=\"input.filter\"></app-fab-filter-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n    <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 3\">\r\n    <app-fab-multiselect [filter]=\"input.filter\"></app-fab-multiselect>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 5\">\r\n    <app-fab-multiselect-fold [filter]=\"input.filter\"></app-fab-multiselect-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 6\">\r\n    <app-fab-filter-label [filter]=\"input.filter\"></app-fab-filter-label>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 7\">\r\n    <app-fab-filter-colour-label [filter]=\"input.filter\"></app-fab-filter-colour-label>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range && !input.range.hidden\">\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 0\">\r\n    <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 1\">\r\n    <app-fab-range-input-fold [rangeinput]=\"input.range\"></app-fab-range-input-fold>\r\n  </ng-container>  \r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabFilterComponent, selector: "app-fab-filter", inputs: ["filter"], outputs: ["filterchanged"] }, { kind: "component", type: FabRangeInputComponent, selector: "app-fab-range-input", inputs: ["rangeinput"] }, { kind: "component", type: FabFilterColourComponent, selector: "app-fab-filter-colour", inputs: ["filter"] }, { kind: "component", type: FabMultiselectComponent, selector: "app-fab-multiselect", inputs: ["filter"] }, { kind: "component", type: FabFilterFoldComponent, selector: "app-fab-filter-fold", inputs: ["filter"] }, { kind: "component", type: FabMultiselectFoldComponent, selector: "app-fab-multiselect-fold", inputs: ["filter"] }, { kind: "component", type: FabRangeInputFoldComponent, selector: "app-fab-range-input-fold", inputs: ["rangeinput"] }, { kind: "component", type: FabFilterLabelComponent, selector: "app-fab-filter-label", inputs: ["filter"], outputs: ["filterchanged"] }, { kind: "component", type: FabFilterColourLabelComponent, selector: "app-fab-filter-colour-label", inputs: ["filter"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabInputComponent, selector: "app-fab-input", inputs: { input: "input" }, ngImport: i0, template: "<ng-container *ngIf=\"input.filter && !input.filter.hidden\">\r\n  <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n    <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 4\">\r\n    <app-fab-filter-fold [filter]=\"input.filter\"></app-fab-filter-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n    <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 3\">\r\n    <app-fab-multiselect [filter]=\"input.filter\"></app-fab-multiselect>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 5\">\r\n    <app-fab-multiselect-fold [filter]=\"input.filter\"></app-fab-multiselect-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 6\">\r\n    <app-fab-filter-label [filter]=\"input.filter\"></app-fab-filter-label>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 7\">\r\n    <app-fab-filter-colour-label [filter]=\"input.filter\"></app-fab-filter-colour-label>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 8\">\r\n    <app-fab-filter-display-value [filter]=\"input.filter\"></app-fab-filter-display-value>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 9\">\r\n    <app-fab-filter-custom [filter]=\"input.filter\"></app-fab-filter-custom>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range && !input.range.hidden\">\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 0\">\r\n    <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 1\">\r\n    <app-fab-range-input-fold [rangeinput]=\"input.range\"></app-fab-range-input-fold>\r\n  </ng-container>  \r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabFilterComponent, selector: "app-fab-filter", inputs: ["filter"], outputs: ["filterchanged"] }, { kind: "component", type: FabRangeInputComponent, selector: "app-fab-range-input", inputs: ["rangeinput"] }, { kind: "component", type: FabFilterColourComponent, selector: "app-fab-filter-colour", inputs: ["filter"] }, { kind: "component", type: FabMultiselectComponent, selector: "app-fab-multiselect", inputs: ["filter"] }, { kind: "component", type: FabFilterFoldComponent, selector: "app-fab-filter-fold", inputs: ["filter"] }, { kind: "component", type: FabMultiselectFoldComponent, selector: "app-fab-multiselect-fold", inputs: ["filter"] }, { kind: "component", type: FabRangeInputFoldComponent, selector: "app-fab-range-input-fold", inputs: ["rangeinput"] }, { kind: "component", type: FabFilterLabelComponent, selector: "app-fab-filter-label", inputs: ["filter"], outputs: ["filterchanged"] }, { kind: "component", type: FabFilterColourLabelComponent, selector: "app-fab-filter-colour-label", inputs: ["filter"] }, { kind: "component", type: FabFilterDisplayValueComponent, selector: "app-fab-filter-display-value", inputs: ["filter"] }, { kind: "component", type: FabFilterCustomComponent, selector: "app-fab-filter-custom", inputs: ["filter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-input', template: "<ng-container *ngIf=\"input.filter && !input.filter.hidden\">\r\n  <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n    <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 4\">\r\n    <app-fab-filter-fold [filter]=\"input.filter\"></app-fab-filter-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n    <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 3\">\r\n    <app-fab-multiselect [filter]=\"input.filter\"></app-fab-multiselect>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 5\">\r\n    <app-fab-multiselect-fold [filter]=\"input.filter\"></app-fab-multiselect-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 6\">\r\n    <app-fab-filter-label [filter]=\"input.filter\"></app-fab-filter-label>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 7\">\r\n    <app-fab-filter-colour-label [filter]=\"input.filter\"></app-fab-filter-colour-label>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range && !input.range.hidden\">\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 0\">\r\n    <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 1\">\r\n    <app-fab-range-input-fold [rangeinput]=\"input.range\"></app-fab-range-input-fold>\r\n  </ng-container>  \r\n</ng-container>\r\n" }]
+            args: [{ selector: 'app-fab-input', template: "<ng-container *ngIf=\"input.filter && !input.filter.hidden\">\r\n  <ng-container *ngIf=\"input.filter.filterType == 1\">\r\n    <app-fab-filter [filter]=\"input.filter\"></app-fab-filter>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 4\">\r\n    <app-fab-filter-fold [filter]=\"input.filter\"></app-fab-filter-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 2\">\r\n    <app-fab-filter-colour [filter]=\"input.filter\"></app-fab-filter-colour>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 3\">\r\n    <app-fab-multiselect [filter]=\"input.filter\"></app-fab-multiselect>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 5\">\r\n    <app-fab-multiselect-fold [filter]=\"input.filter\"></app-fab-multiselect-fold>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 6\">\r\n    <app-fab-filter-label [filter]=\"input.filter\"></app-fab-filter-label>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 7\">\r\n    <app-fab-filter-colour-label [filter]=\"input.filter\"></app-fab-filter-colour-label>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 8\">\r\n    <app-fab-filter-display-value [filter]=\"input.filter\"></app-fab-filter-display-value>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.filter.filterType == 9\">\r\n    <app-fab-filter-custom [filter]=\"input.filter\"></app-fab-filter-custom>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"input.range && !input.range.hidden\">\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 0\">\r\n    <app-fab-range-input [rangeinput]=\"input.range\"></app-fab-range-input>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"input.range.rangeInputType == 1\">\r\n    <app-fab-range-input-fold [rangeinput]=\"input.range\"></app-fab-range-input-fold>\r\n  </ng-container>  \r\n</ng-container>\r\n" }]
         }], propDecorators: { input: [{
                 type: Input
             }] } });
@@ -17446,12 +17660,21 @@ class FabHeaderComponent {
         }
         return this.TranslateService.Show();
     }
+    ShowDisplayValues() {
+        var displayvalues = this.FabrikantenService.GetDynamicDisplayValues();
+        for (var i = 0; i < displayvalues.length; i++) {
+            if (!displayvalues[i].hidden) {
+                return true;
+            }
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabHeaderComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabHeaderComponent, selector: "app-fab-header", inputs: { showfiltermenubutton: "showfiltermenubutton" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n<ng-container *ngIf=\"FabrikantenService.GetDynamicDisplayValues().length > 0\">\r\n  <div class=\"display-values-box\">\r\n    <div class=\"display-value-item\" *ngFor=\"let displayvalue of FabrikantenService.GetDynamicDisplayValues()\">\r\n      <span class=\"display-value-name\">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}.display-values-box{display:flex}.display-value-name{text-transform:capitalize}.display-value-item{padding:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabLanguageSelectComponent, selector: "app-fab-language-select" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabHeaderComponent, selector: "app-fab-header", inputs: { showfiltermenubutton: "showfiltermenubutton" }, host: { listeners: { "window:resize": "onResize($event)" } }, ngImport: i0, template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n<ng-container *ngIf=\"ShowDisplayValues()\">\r\n  <div class=\"display-values-box\">\r\n    <ng-container *ngFor=\"let displayvalue of FabrikantenService.GetDynamicDisplayValues()\">\r\n      <div class=\"display-value-item\" *ngIf=\"!displayvalue.hidden\">\r\n        <span class=\"display-value-name\">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}.display-values-box{display:flex}.display-value-name{text-transform:capitalize}.display-value-item{padding:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FabBreadcrumbComponent, selector: "app-fab-breadcrumb", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabLanguageSelectComponent, selector: "app-fab-language-select" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-header', template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n<ng-container *ngIf=\"FabrikantenService.GetDynamicDisplayValues().length > 0\">\r\n  <div class=\"display-values-box\">\r\n    <div class=\"display-value-item\" *ngFor=\"let displayvalue of FabrikantenService.GetDynamicDisplayValues()\">\r\n      <span class=\"display-value-name\">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}.display-values-box{display:flex}.display-value-name{text-transform:capitalize}.display-value-item{padding:4px}\n"] }]
+            args: [{ selector: 'app-fab-header', template: "<div class=\"header-row\" *ngIf=\"ShowHeader()\">\r\n  <app-fab-breadcrumb *ngIf=\"ShowBreadcrumb()\" [showfiltermenubutton]=\"showfiltermenubutton\"></app-fab-breadcrumb>\r\n  <app-fab-language-select *ngIf=\"ShowLanguageSelect()\"></app-fab-language-select>\r\n</div>\r\n<ng-container *ngIf=\"ShowDisplayValues()\">\r\n  <div class=\"display-values-box\">\r\n    <ng-container *ngFor=\"let displayvalue of FabrikantenService.GetDynamicDisplayValues()\">\r\n      <div class=\"display-value-item\" *ngIf=\"!displayvalue.hidden\">\r\n        <span class=\"display-value-name\">{{ displayvalue.name }}</span>: {{ displayvalue.value }}mm\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-container>\r\n", styles: [".header-row{display:flex}app-fab-language-select{margin:auto 5px auto auto}app-fab-breadcrumb{width:100%}.display-values-box{display:flex}.display-value-name{text-transform:capitalize}.display-value-item{padding:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showfiltermenubutton: [{
                 type: Input
             }], onResize: [{
@@ -17808,11 +18031,11 @@ class FabProductComponent {
         return "calc(100% - " + height + "px)";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabProductComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: WebGLService }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabProductComponent, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu [display]=\"FabrikantenService.SelectedTab\"></app-fab-actionmenu>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.NotAllRequiredFilled) }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabInformation) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-info></app-fab-product-info>\r\n          </mat-tab>\r\n          <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab3D) }}</span>\r\n            </ng-template>\r\n            <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab2D) }}</span>\r\n            </ng-template>\r\n            <app-fab-svg-viewer></app-fab-svg-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabSpecification) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-bestek></app-fab-product-bestek>\r\n          </mat-tab>\r\n          <mat-tab label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Texture) }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Toebehoren) }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .required-div{padding:40px}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-transform:capitalize;text-align:center}app-fab-product .actionwrapper{width:250px;padding:20px}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatLegacyCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i10$1.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i10$1.MatLegacyTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i10$1.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }, { kind: "component", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer" }, { kind: "component", type: FabTextureComponent, selector: "app-fab-texture" }, { kind: "component", type: FabToebehorenComponent, selector: "app-fab-toebehoren" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FabProductComponent, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu [display]=\"FabrikantenService.SelectedTab\"></app-fab-actionmenu>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.NotAllRequiredFilled) }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabInformation) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-info></app-fab-product-info>\r\n          </mat-tab>\r\n          <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab3D) }}</span>\r\n            </ng-template>\r\n            <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab2D) }}</span>\r\n            </ng-template>\r\n            <app-fab-svg-viewer></app-fab-svg-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabSpecification) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-bestek></app-fab-product-bestek>\r\n          </mat-tab>\r\n          <mat-tab label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Texture) }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Toebehoren) }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .required-div{padding:40px}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}app-fab-product .actionwrapper{width:250px;padding:20px}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatLegacyCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i10$1.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i10$1.MatLegacyTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i10$1.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.MatLegacyProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }, { kind: "component", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer" }, { kind: "component", type: FabTextureComponent, selector: "app-fab-texture" }, { kind: "component", type: FabToebehorenComponent, selector: "app-fab-toebehoren" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FabProductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu [display]=\"FabrikantenService.SelectedTab\"></app-fab-actionmenu>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.NotAllRequiredFilled) }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabInformation) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-info></app-fab-product-info>\r\n          </mat-tab>\r\n          <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab3D) }}</span>\r\n            </ng-template>\r\n            <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab2D) }}</span>\r\n            </ng-template>\r\n            <app-fab-svg-viewer></app-fab-svg-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabSpecification) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-bestek></app-fab-product-bestek>\r\n          </mat-tab>\r\n          <mat-tab label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Texture) }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Toebehoren) }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .required-div{padding:40px}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-transform:capitalize;text-align:center}app-fab-product .actionwrapper{width:250px;padding:20px}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"] }]
+            args: [{ selector: 'app-fab-product', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer mode=\"over\" position=\"end\" [(opened)]=\"MobileService.ActionOpened\">\r\n    <div class=\"actionwrapper\">\r\n      <app-fab-actionmenu [display]=\"FabrikantenService.SelectedTab\"></app-fab-actionmenu>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.NotAllRequiredFilled) }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabInformation) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-info></app-fab-product-info>\r\n          </mat-tab>\r\n          <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab3D) }}</span>\r\n            </ng-template>\r\n            <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab2D) }}</span>\r\n            </ng-template>\r\n            <app-fab-svg-viewer></app-fab-svg-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabSpecification) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-bestek></app-fab-product-bestek>\r\n          </mat-tab>\r\n          <mat-tab label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Texture) }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Toebehoren) }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .required-div{padding:40px}app-fab-product .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}app-fab-product .actionwrapper{width:250px;padding:20px}app-fab-product .loader-spinner{margin:auto}app-fab-product .view-container{height:100%}app-fab-product .view-content{background-color:#fff}app-fab-product .loader{position:absolute;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: BestekService }, { type: TranslateService }, { type: WebGLService }, { type: i1$1.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -18808,7 +19031,9 @@ class FabrikantenCoreModule {
             FabFilterLabelComponent,
             FabFilterColourLabelComponent,
             BeheerFilterComponent,
-            BeheerRangeinputComponent], imports: [CommonModule,
+            BeheerRangeinputComponent,
+            FabFilterDisplayValueComponent,
+            FabFilterCustomComponent], imports: [CommonModule,
             HttpClientModule,
             AngularEditorModule,
             MatLegacyInputModule,
@@ -18864,6 +19089,7 @@ class FabrikantenCoreModule {
             EBOKoppelApiClient,
             SecurityApiClient,
             SearchProductsApiClient,
+            TemplateComponentService,
             ImportApiClient,
             ProductsApiClient,
             ProjectSettingApiClient,
@@ -19010,7 +19236,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                         FabFilterLabelComponent,
                         FabFilterColourLabelComponent,
                         BeheerFilterComponent,
-                        BeheerRangeinputComponent
+                        BeheerRangeinputComponent,
+                        FabFilterDisplayValueComponent,
+                        FabFilterCustomComponent
                     ],
                     providers: [
                         NavigateService,
@@ -19035,6 +19263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                         EBOKoppelApiClient,
                         SecurityApiClient,
                         SearchProductsApiClient,
+                        TemplateComponentService,
                         ImportApiClient,
                         ProductsApiClient,
                         ProjectSettingApiClient,
@@ -19057,5 +19286,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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, BeheerLanguageViewModel, BeheerLanguagesCategoryViewModel, BeheerLanguagesEntryViewModel, BeheerLanguagesFilterViewModel, BeheerLanguagesKeyViewModel, BeheerLanguagesSubCategoryViewModel, BeheerLanguagesViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, ChangeOrderInputsRequest, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, CreateUserModel, DeeplinkFilterViewModel, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, DeleteUserModel, DynamicDisplayValueViewModel, DynamicFilterViewModel, DynamicFiltersViewModel, DynamicRangeInputViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, EditUserModel, FabActionmenuComponent, FabCategoryNavigatorComponent, FabFiltersComponent, FabFiltersInputComponent, FabLoaderComponent, FabProductBestekComponent, FabSelectBcbproductComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterDescriptionViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenInputViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenService, FabrikantenSettingsViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionFilterOptionRequiredViewModel, FilterOptionRequiredType, FilterOptionRequiredViewModel, FilterOptionViewModel, FilterRequiredViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, InputViewModel, InputsViewModel, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, REST3DViewModel, RESTApiClient, RESTBestekViewModel, RESTFileRequestModel, RESTFileViewModel, RESTParameter, RESTRequestModel, RESTSVGRequestModel, RESTSVGViewModel, RangeInputFilterOptionRequiredViewModel, RangeInputType, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveFilterOptionRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SVGService, SaveFilterOptionRequest, SaveFilterRequest, SaveImportSetRequest, SaveProductViewModel, SaveRangeInputRequest, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, SortFilterRequest, TranslateApiClient, TranslateKeyCategoryViewModel, TranslateKeySubCategoryViewModel, TranslateKeyViewModel, TranslateService, TranslationCategory, TranslationSubCategory, UserResponseModel, UserRole, UserViewModel, UsersViewModel, 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, BeheerLanguageViewModel, BeheerLanguagesCategoryViewModel, BeheerLanguagesEntryViewModel, BeheerLanguagesFilterViewModel, BeheerLanguagesKeyViewModel, BeheerLanguagesSubCategoryViewModel, BeheerLanguagesViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, ChangeOrderInputsRequest, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, CreateUserModel, DeeplinkFilterViewModel, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, DeleteUserModel, DynamicDisplayValueViewModel, DynamicFilterViewModel, DynamicFiltersViewModel, DynamicRangeInputViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, EditUserModel, FabActionmenuComponent, FabCategoryNavigatorComponent, FabFiltersComponent, FabFiltersInputComponent, FabLoaderComponent, FabProductBestekComponent, FabSelectBcbproductComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterDescriptionViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenInputViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenService, FabrikantenSettingsViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionFilterOptionRequiredViewModel, FilterOptionRequiredType, FilterOptionRequiredViewModel, FilterOptionViewModel, FilterRequiredViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, InputViewModel, InputsViewModel, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, REST3DViewModel, RESTApiClient, RESTBestekViewModel, RESTFileRequestModel, RESTFileViewModel, RESTParameterViewModel, RESTRequestModel, RESTSVGRequestModel, RESTSVGViewModel, RangeInputFilterOptionRequiredViewModel, RangeInputType, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveFilterOptionRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SVGService, SaveFilterOptionRequest, SaveFilterRequest, SaveImportSetRequest, SaveProductViewModel, SaveRangeInputRequest, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, SortFilterRequest, TemplateComponentService, TranslateApiClient, TranslateKeyCategoryViewModel, TranslateKeySubCategoryViewModel, TranslateKeyViewModel, TranslateService, TranslationCategory, TranslationSubCategory, UserResponseModel, UserRole, UserViewModel, UsersViewModel, WizardEBODOViewModel, WizardEBOViewModel };
 //# sourceMappingURL=fabrikantencore.mjs.map