fabrikantencore 1.3.2 → 1.3.3

package/fesm2015/fabrikantencore.mjs

@@ -7798,6 +7798,7 @@ class FabWebglViewerComponent {
         this.TranslateService = TranslateService;
         this.MobileService = MobileService;
         this.ChangeDetectorRef = ChangeDetectorRef;
+        this.Height = "calc(100% - 0px)";
         this.viewerInitialised = false;
         this.WebGLService.FabWebglViewerComponent = this;
         this.RefreshViewerSize();
@@ -7807,9 +7808,11 @@ class FabWebglViewerComponent {
     }
     ngAfterViewInit() {
         this.RefreshViewerSize();
+        this.UpdateHeight();
         this.ChangeDetectorRef.detectChanges();
     }
     ngDoCheck() {
+        this.UpdateHeight();
         this.RefreshViewerSize();
     }
     OpenBCBLink() {
@@ -7846,15 +7849,19 @@ class FabWebglViewerComponent {
                     viewer.toonModel();
                 });
             }
-            console.log("refresh viewer");
+            //console.log("refresh viewer");
         }
     }
-    GetHeight() {
+    UpdateHeight() {
         var height = 0;
         if (this.header != undefined) {
             height += this.header.nativeElement.offsetHeight;
         }
-        return "calc(100% - " + height + "px)";
+        var temp = "calc(100% - " + height + "px)";
+        if (this.Height != temp) {
+            this.Height = temp;
+            this.RefreshViewer();
+        }
     }
     RefreshViewerSize() {
         this.MobileService.UpdateScreenSize(window.innerWidth, window.innerHeight);
@@ -7862,23 +7869,20 @@ class FabWebglViewerComponent {
             var width = this.viewercontainer.nativeElement.offsetWidth - 6;
             var height = this.viewercontainer.nativeElement.offsetHeight - 6;
             if (this.WebGLService.ViewerWidth != width || this.WebGLService.ViewerHeight != height) {
-                clearTimeout(this.timeoutId);
                 this.WebGLService.ViewerWidth = width;
                 this.WebGLService.ViewerHeight = height;
                 this.ChangeDetectorRef.detectChanges();
-                console.log("width:" + width + " height: " + height);
-                this.timeoutId = setTimeout(() => {
-                    this.RefreshViewer();
-                }, 300);
+                //console.log("width:" + width + " height: " + height);
+                this.RefreshViewer();
             }
         }
     }
 }
 FabWebglViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabWebglViewerComponent, deps: [{ token: FabrikantenService }, { token: WebGLService }, { token: TranslateService }, { token: MobileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabWebglViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "viewercontainer", first: true, predicate: ["viewercontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window\">\n    <div #header class=\"toolbar\">\n      <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n          </div>\n        </div>\n      </button>\n      <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n          </div>\n        </div>\n      </button>-->\n      <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">open_in_new</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n          </div>\n        </div>\n      </button>\n    </div>\n\n    <div #viewercontainer class=\"viewer-container\" [style.height]=\"GetHeight()\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.icon{margin-right:3px}.viewer-container{overflow:auto}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-right:5px;flex:auto;padding:0 3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
+FabWebglViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "viewercontainer", first: true, predicate: ["viewercontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window\">\n    <div #header class=\"toolbar\">\n      <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n          </div>\n        </div>\n      </button>\n      <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n          </div>\n        </div>\n      </button>-->\n      <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">open_in_new</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n          </div>\n        </div>\n      </button>\n    </div>\n\n    <div #viewercontainer class=\"viewer-container\" [style.height]=\"Height\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.icon{margin-right:3px}.viewer-container{overflow:auto}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-right:5px;flex:auto;padding:0 3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabWebglViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-webgl-viewer', template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window\">\n    <div #header class=\"toolbar\">\n      <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n          </div>\n        </div>\n      </button>\n      <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n          </div>\n        </div>\n      </button>-->\n      <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">open_in_new</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n          </div>\n        </div>\n      </button>\n    </div>\n\n    <div #viewercontainer class=\"viewer-container\" [style.height]=\"GetHeight()\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.icon{margin-right:3px}.viewer-container{overflow:auto}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-right:5px;flex:auto;padding:0 3px}.button{margin:5px;width:100%}\n"] }]
+            args: [{ selector: 'app-fab-webgl-viewer', template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\n  <app-fab-loader></app-fab-loader>\n</div>\n\n<div class=\"main-window\">\n  <div *ngIf=\"FabrikantenService.ShowVariants()\">\n    {{ TranslateService.GetActiveValue(\"Common\", \"Multiple variants\") }}\n    <div>\n      <ul>\n        <li class=\"button\" mat-stroked-button *ngFor=\"let bcbproduct of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels\">\n          {{ bcbproduct.name }}\n        </li>\n      </ul>\n    </div>\n  </div>\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window\">\n    <div #header class=\"toolbar\">\n      <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"FabrikantenService.DownloadRFA()\" *ngIf=\"WebGLService.HasNativeRFA()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\n          </div>\n        </div>\n      </button>\n      <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\n          </div>\n        </div>\n      </button>-->\n      <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">file_download</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\n            <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\n          </div>\n        </div>\n      </button>\n      <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink()\">\n        <div class=\"row\">\n          <div class=\"row-icon\">\n            <mat-icon class=\"icon\">open_in_new</mat-icon>\n          </div>\n          <div class=\"row-title\">\n            {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\n          </div>\n        </div>\n      </button>\n    </div>\n\n    <div #viewercontainer class=\"viewer-container\" [style.height]=\"Height\">\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\n    </div>\n  </div>\n</div>\n\n\n", styles: [".row{display:flex;line-height:37px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.icon{margin-right:3px}.viewer-container{overflow:auto}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar{display:flex;padding:3px}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-right:5px;flex:auto;padding:0 3px}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: WebGLService }, { type: TranslateService }, { type: MobileService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -7989,10 +7993,10 @@ class FabProductComponent {
     }
 }
 FabProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: i5.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductComponent, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\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 .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}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}app-fab-product .filter-view{width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i8$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }, { kind: "component", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer" }], encapsulation: i0.ViewEncapsulation.None });
+FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductComponent, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\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 .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}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{width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i8$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i8$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }, { kind: "component", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\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 .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}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}app-fab-product .filter-view{width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"] }]
+            args: [{ selector: 'app-fab-product', encapsulation: ViewEncapsulation.None, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\">\r\n      <mat-tab-group class=\"view-container\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n        <mat-tab label=\"Informatie\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Information\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-info></app-fab-product-info>\r\n        </mat-tab>\r\n        <mat-tab label=\"3D\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"3D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"2D\" style=\"height: 100%;\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"2D\") }}</span>\r\n          </ng-template>\r\n          <app-fab-svg-viewer></app-fab-svg-viewer>\r\n        </mat-tab>\r\n        <mat-tab label=\"Bestek\" *ngIf=\"TranslateService.ShowSpecification()\">\r\n          <ng-template mat-tab-label>\r\n            <span>{{ TranslateService.GetActiveValue(\"Common\", \"Specification\") }}</span>\r\n          </ng-template>\r\n          <app-fab-product-bestek></app-fab-product-bestek>\r\n        </mat-tab>\r\n      </mat-tab-group>\r\n    </div>\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 .row{display:flex}app-fab-product .loader-card{margin:auto;width:300px}app-fab-product .loader-subtitle{text-align:center}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{width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}.mat-tab-body-wrapper{height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: BestekService }, { type: TranslateService }, { type: i5.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -8072,10 +8076,10 @@ class FabProductSelectComponent {
     }
 }
 FabProductSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductSelectComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: i5.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductSelectComponent, selector: "app-fab-product-select", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-window\" [style.height]=\"Height\">\r\n      <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: [".main-window{display:flex;flex-flow:row wrap;overflow:auto}.subtitle{margin-bottom:10px;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header{padding:4px}.row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.view-container{height:100%}.view-content{background-color:#fff}.loader{position:absolute;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductTileComponent, selector: "app-fab-product-tile", inputs: ["product"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }] });
+FabProductSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabProductSelectComponent, selector: "app-fab-product-select", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-window\" [style.height]=\"Height\">\r\n      <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: [".main-window{display:flex;flex-flow:row wrap;overflow:auto}.subtitle{margin-bottom:10px;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header{padding:4px}.row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.view-container{height:100%}.view-content{background-color:#fff}.loader{position:absolute;width:100%;height:100%;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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabProductTileComponent, selector: "app-fab-product-tile", inputs: ["product"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabProductSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product-select', template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-window\" [style.height]=\"Height\">\r\n      <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: [".main-window{display:flex;flex-flow:row wrap;overflow:auto}.subtitle{margin-bottom:10px;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header{padding:4px}.row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.view-container{height:100%}.view-content{background-color:#fff}.loader{position:absolute;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"] }]
+            args: [{ selector: 'app-fab-product-select', template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Products loading\") }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(\"Common\", \"Product selection\") }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Product selection info\") }}\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"main-window\" [style.height]=\"Height\">\r\n      <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: [".main-window{display:flex;flex-flow:row wrap;overflow:auto}.subtitle{margin-bottom:10px;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header{padding:4px}.row{display:flex}.loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.view-container{height:100%}.view-content{background-color:#fff}.loader{position:absolute;width:100%;height:100%;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: i5.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { header: [{
                 type: ViewChild,
                 args: ['header']
@@ -8135,10 +8139,10 @@ class FabFiltersComponent {
     }
 }
 FabFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabFiltersComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: i5.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", 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(\"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}.filter-view{width:300px;min-width:300px;background-color:#fafafa}.product-view{flex:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabFiltersOverviewComponent, selector: "fab-filters-overview" }] });
+FabFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", 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(\"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"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i7$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i8$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input" }, { kind: "component", type: FabFiltersOverviewComponent, selector: "fab-filters-overview" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", 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(\"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}.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(\"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: i5.ActivatedRoute }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -9596,10 +9600,10 @@ class FabStartComponent {
     }
 }
 FabStartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabStartComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabStartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabStartComponent, selector: "app-fab-start", ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\n  <mat-card class=\"loader-card\">\n    <mat-card-content>\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [".loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.loader{position:absolute;display:flex;align-items:center;width:100%;height:100%;justify-content:center;z-index:20;background-color:#ffffffb3}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }] });
+FabStartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: FabStartComponent, selector: "app-fab-start", ngImport: i0, template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\n  <mat-card class=\"loader-card\">\n    <mat-card-content>\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [".loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.loader{position:absolute;display:flex;align-items:center;width:100%;height:100%;justify-content:center;z-index:20;background-color:#ffffffb3;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i7$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: FabStartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-start', template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\n  <mat-card class=\"loader-card\">\n    <mat-card-content>\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [".loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.loader{position:absolute;display:flex;align-items:center;width:100%;height:100%;justify-content:center;z-index:20;background-color:#ffffffb3}\n"] }]
+            args: [{ selector: 'app-fab-start', template: "<div *ngIf=\"FabrikantenService.Loading\" class=\"loader\">\n  <mat-card class=\"loader-card\">\n    <mat-card-content>\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\n    </mat-card-content>\n  </mat-card>\n</div>\n", styles: [".loader-card{margin:auto;width:300px}.loader-subtitle{text-align:center}.loader-spinner{margin:auto}.loader{position:absolute;display:flex;align-items:center;width:100%;height:100%;justify-content:center;z-index:20;background-color:#ffffffb3;top:0;left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }]; } });
 
 class FabCategoryTileComponent {