fabrikantencore 2.3.5 → 2.3.6

package/fesm2015/fabrikantencore.mjs

@@ -10750,21 +10750,6 @@ class FabrikantenService {
         }
         return null;
     }
-    Show3DButtons() {
-        return this.SelectedTab == "3D";
-    }
-    Show2DButtons() {
-        return this.SelectedTab == "2D";
-    }
-    ShowBestekButtons() {
-        return this.SelectedTab == "Bestek";
-    }
-    ShowTextureButtons() {
-        return this.SelectedTab == "Texture";
-    }
-    ShowToebehorenButtons() {
-        return this.SelectedTab == "Toebehoren";
-    }
     ShowCategories() {
         return this.GetFirstOpenCategoryLayer() != null;
     }
@@ -14162,6 +14147,21 @@ class FabActionmenuComponent {
         this.ToebehorenService = ToebehorenService;
         this.ChangeDetectorRef = ChangeDetectorRef;
     }
+    Show3DButtons() {
+        return this.display == "3D";
+    }
+    Show2DButtons() {
+        return this.display == "2D";
+    }
+    ShowBestekButtons() {
+        return this.display == "Bestek";
+    }
+    ShowTextureButtons() {
+        return this.display == "Texture";
+    }
+    ShowToebehorenButtons() {
+        return this.display == "Toebehoren";
+    }
     DownloadBestek() {
         if (this.BestekService.fabProductBestek != null) {
             this.FabrikantenService.DownloadBestek(this.BestekService.fabProductBestek.nativeElement.innerText);
@@ -14226,11 +14226,13 @@ class FabActionmenuComponent {
     }
 }
 FabActionmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabActionmenuComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: BestekService }, { token: TextureService }, { token: SVGService }, { token: WebGLService }, { token: ToebehorenService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabActionmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabActionmenuComponent, selector: "app-fab-actionmenu", ngImport: i0, template: "<div class=\"column\" *ngIf=\"FabrikantenService.Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\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: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, 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: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i14.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i14.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
+FabActionmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: { display: "display" }, ngImport: i0, template: "<div class=\"column\" *ngIf=\"Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\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: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, 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: i8.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i14.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i14.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatOption, selector: "mat-option", exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabActionmenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-actionmenu', encapsulation: ViewEncapsulation.None, template: "<div class=\"column\" *ngIf=\"FabrikantenService.Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"FabrikantenService.ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: BestekService }, { type: TextureService }, { type: SVGService }, { type: WebGLService }, { type: ToebehorenService }, { type: i0.ChangeDetectorRef }]; } });
+            args: [{ selector: 'app-fab-actionmenu', encapsulation: ViewEncapsulation.None, template: "<div class=\"column\" *ngIf=\"Show3DButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"WebGLService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" (click)=\"FabrikantenService.DownloadRevitPlugin(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" (click)=\"FabrikantenService.Download3DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-3d-button\" (click)=\"FabrikantenService.Download3DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink3D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"Show2DButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Snede\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Snede\" (selectionChange)=\"RefreshSnede()\">\r\n      <mat-option *ngFor=\"let snede of SVGService.Snedes\" [value]=\"snede\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", snede) }}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">{{ TranslateService.GetActiveValue(\"Common\", \"Schaal\") }}</mat-label>\r\n    <mat-select [(ngModel)]=\"SVGService.Schaal\" (selectionChange)=\"RefreshSchaal()\">\r\n      <mat-option [value]=\"'0'\">1:1</mat-option>\r\n      <mat-option [value]=\"'1'\">1:2</mat-option>\r\n      <mat-option [value]=\"'2'\">1:5</mat-option>\r\n      <mat-option [value]=\"'3'\">1:10</mat-option>\r\n      <mat-option [value]=\"'4'\">1:20</mat-option>\r\n      <mat-option [value]=\"'5'\">1:50</mat-option>\r\n      <mat-option [value]=\"'6'\">1:100</mat-option>\r\n      <mat-option [value]=\"'7'\">1:200</mat-option>\r\n      <mat-option [value]=\"'8'\">1:500</mat-option>\r\n      <mat-option [value]=\"'9'\">1:1000</mat-option>\r\n      <mat-option [value]=\"'10'\">1:2000</mat-option>\r\n      <mat-option [value]=\"'11'\">1:5000</mat-option>\r\n      <mat-option [value]=\"'12'\">1:10000</mat-option>\r\n      <mat-option [value]=\"'13'\">1:20000</mat-option>\r\n      <mat-option [value]=\"'14'\">1:50000</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <button mat-stroked-button class=\"toolbar-button rfa-button\" (click)=\"DownloadRevit()\" *ngIf=\"SVGService.HasNativeRFA()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRFALoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRFALoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" (click)=\"FabrikantenService.DownloadARKEYAdomi(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" (click)=\"FabrikantenService.DownloadIFC(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" (click)=\"FabrikantenService.Download2DAutoCADDwg(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" (click)=\"FabrikantenService.Download2DDxf(undefined)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLink2D()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"ShowBestekButtons()\">\r\n  <mat-button-toggle-group [value]=\"BestekService.TypeBestek\" (change)=\"BestekService.TypeBestek = $event.source.value\" appearance=\"legacy\">\r\n    <mat-button-toggle *ngIf=\"ShowSTABU()\" value=\"STABU\">{{ TranslateService.GetActiveValue(\"Common\", \"STABU\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowOSF()\" value=\"OSF\">{{ TranslateService.GetActiveValue(\"Common\", \"OSF\") }}</mat-button-toggle>\r\n    <mat-button-toggle *ngIf=\"ShowVrij()\" value=\"Vrij\">{{ TranslateService.GetActiveValue(\"Common\", \"Specification text\") }}</mat-button-toggle>\r\n  </mat-button-toggle-group>\r\n  <div>\r\n    &nbsp;\r\n  </div>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"CopyToClipBoard()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon content_copy\">content_copy</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Clipboard\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"DownloadBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Download\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkBestek()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"ShowTextureButtons()\">\r\n  <button mat-stroked-button class=\"toolbar-button\" (click)=\"OpenBCBLinkTexture()\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon open_in_new\">open_in_new</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"BCB\") }}\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<div class=\"column\" *ngIf=\"ShowToebehorenButtons()\">\r\n  <mat-form-field appearance=\"fill\">\r\n    <mat-label class=\"select-mat-label\">Toebehoren</mat-label>\r\n    <mat-select [(ngModel)]=\"FabrikantenService.SelectedToebehoren\" (selectionChange)=\"ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)\">\r\n      <ng-container *ngFor=\"let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren\">\r\n        <mat-option *ngIf=\"!item.bcbProduct\" [value]=\"item\">\r\n          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}\r\n        </mat-option>\r\n        <mat-option *ngIf=\"item.bcbProduct\" [value]=\"item\">\r\n          {{ item.name }}\r\n        </mat-option>\r\n      </ng-container>\r\n    </mat-select>\r\n  </mat-form-field>\r\n\r\n  <button mat-stroked-button class=\"toolbar-button arkey-adomi-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadARKEYAdomiLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadARKEYAdomiLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"ARKEY Adomi\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button ifc-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadIFCLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadIFCLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"IFC\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <!--<button mat-stroked-button class=\"toolbar-button revit-plugin-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.DownloadRevitPluginLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.DownloadRevitPluginLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"Revit (plugin)\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>-->\r\n  <button mat-stroked-button class=\"toolbar-button autocad-3d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download3DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download3DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"3D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button autocad-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DAutoCADDwgLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DAutoCADDwgLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D AutoCAD Dwg\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n  <button mat-stroked-button class=\"toolbar-button dxf-2d-button\" *ngIf=\"FabrikantenService.GetSelectedToebehoren() != null\" (click)=\"FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)\">\r\n    <div class=\"row\">\r\n      <div class=\"row-icon\">\r\n        <mat-icon class=\"icon file_download\">file_download</mat-icon>\r\n      </div>\r\n      <div class=\"row-title\">\r\n        <span *ngIf=\"FabrikantenService.Download2DDxfLoading\">...</span>\r\n        <span *ngIf=\"!FabrikantenService.Download2DDxfLoading\">{{ TranslateService.GetActiveValue(\"Common\", \"2D Dxf\") }}</span>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n", styles: ["app-fab-actionmenu .mat-stroked-button{white-space:unset!important}app-fab-actionmenu .icon{margin-right:3px}app-fab-actionmenu .toolbar-button{margin-top:3px;width:100%}app-fab-actionmenu .row{display:flex;line-height:37px}app-fab-actionmenu .row-icon{align-items:center;display:flex}app-fab-actionmenu .column{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: BestekService }, { type: TextureService }, { type: SVGService }, { type: WebGLService }, { type: ToebehorenService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { display: [{
+                type: Input
+            }] } });
 
 class FabSelectBcbproductComponent {
     constructor(TranslateService, FabrikantenService, ChangeDetectorRef) {
@@ -14272,10 +14274,10 @@ class FabProductBestekComponent {
     }
 }
 FabProductBestekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabProductBestekComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: TranslateService }, { token: BestekService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabProductBestekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabProductBestekComponent, selector: "app-fab-product-bestek", viewQueries: [{ propertyName: "fabProductBestek", first: true, predicate: ["fabProductBestek"], descendants: true }], ngImport: i0, template: "<div class=\"main-window\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct> \r\n  </div>\r\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\r\n  <div *ngIf=\"ShowBestek()\">\r\n    <div *ngIf=\"!BestekService.Loading\">\r\n\r\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\r\n      </div>\r\n\r\n      <div class=\"bestek-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <app-fab-actionmenu></app-fab-actionmenu>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-product-bestek .multiplevariants{padding:10px}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .tinybutton{font-size:9px}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }], encapsulation: i0.ViewEncapsulation.None });
+FabProductBestekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabProductBestekComponent, selector: "app-fab-product-bestek", viewQueries: [{ propertyName: "fabProductBestek", first: true, predicate: ["fabProductBestek"], descendants: true }], ngImport: i0, template: "<div class=\"main-window\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct> \r\n  </div>\r\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\r\n  <div *ngIf=\"ShowBestek()\">\r\n    <div *ngIf=\"!BestekService.Loading\">\r\n\r\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\r\n      </div>\r\n\r\n      <div class=\"bestek-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <app-fab-actionmenu [display]=\"'Bestek'\"></app-fab-actionmenu>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-product-bestek .multiplevariants{padding:10px}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .tinybutton{font-size:9px}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabProductBestekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-product-bestek', encapsulation: ViewEncapsulation.None, template: "<div class=\"main-window\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct> \r\n  </div>\r\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\r\n  <div *ngIf=\"ShowBestek()\">\r\n    <div *ngIf=\"!BestekService.Loading\">\r\n\r\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\r\n      </div>\r\n\r\n      <div class=\"bestek-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <app-fab-actionmenu></app-fab-actionmenu>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-product-bestek .multiplevariants{padding:10px}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .tinybutton{font-size:9px}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"] }]
+            args: [{ selector: 'app-fab-product-bestek', encapsulation: ViewEncapsulation.None, template: "<div class=\"main-window\" [ngClass]=\"{'tinybutton': this.MobileService.MobileInterfaceTiny}\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct> \r\n  </div>\r\n  <app-fab-loader *ngIf=\"BestekService.Loading\"></app-fab-loader>\r\n  <div *ngIf=\"ShowBestek()\">\r\n    <div *ngIf=\"!BestekService.Loading\">\r\n\r\n      <div class=\"bestek-viewer\" #fabProductBestek [innerHTML]=\"BestekService.GetBestekTekst()\">\r\n      </div>\r\n\r\n      <div class=\"bestek-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n        <mat-card>\r\n          <mat-card-content>\r\n            <app-fab-actionmenu [display]=\"'Bestek'\"></app-fab-actionmenu>\r\n          </mat-card-content>\r\n        </mat-card>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-fab-product-bestek .multiplevariants{padding:10px}app-fab-product-bestek .bestek-settings{position:absolute;top:10px;right:10px;display:flex}app-fab-product-bestek .tinybutton{font-size:9px}app-fab-product-bestek .row-title{flex:auto}app-fab-product-bestek .main-window{margin:10px}app-fab-product-bestek .bestek-type-select{text-align:right}app-fab-product-bestek .bestek-type-select-mobile{padding-top:10px}app-fab-product-bestek .button{margin:5px;width:100%}app-fab-product-bestek .bestek-style2{width:80px}app-fab-product-bestek .bestek-style3{width:50px}app-fab-product-bestek .bestek-style4{width:20px}app-fab-product-bestek .bestek-style5{color:red}app-fab-product-bestek .bestek-style6{color:gray}app-fab-product-bestek .bestek-style7{color:#000}app-fab-product-bestek .bestek-style8{width:25px}\n"] }]
         }], ctorParameters: function () { return [{ type: MobileService }, { type: FabrikantenService }, { type: TranslateService }, { type: BestekService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fabProductBestek: [{
                 type: ViewChild,
                 args: ['fabProductBestek']
@@ -15128,10 +15130,10 @@ class FabWebglViewerComponent {
     }
 }
 FabWebglViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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: "15.0.0", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer", viewQueries: [{ propertyName: "viewercontainer", first: true, predicate: ["viewercontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\r\n    <div #viewercontainer class=\"viewer-container\">\r\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"webgl-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
+FabWebglViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabWebglViewerComponent, selector: "app-fab-webgl-viewer", viewQueries: [{ propertyName: "viewercontainer", first: true, predicate: ["viewercontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\r\n    <div #viewercontainer class=\"viewer-container\">\r\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"webgl-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'3D'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabWebglViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-webgl-viewer', template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\r\n    <div #viewercontainer class=\"viewer-container\">\r\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"webgl-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
+            args: [{ selector: 'app-fab-webgl-viewer', template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowWebGL()\" class=\"main-window flex-col\">\r\n    <div #viewercontainer class=\"viewer-container\">\r\n      <canvas id=\"viewerCanvas\" class=\"viewer-canvas\" [attr.width]=\"WebGLService.ViewerWidth\" [attr.height]=\"WebGLService.ViewerHeight\"></canvas>\r\n    </div>\r\n\r\n    <div class=\"webgl-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'3D'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.webgl-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.viewer-container{overflow:auto;height:100%}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: WebGLService }, { type: TranslateService }, { type: MobileService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewercontainer: [{
                 type: ViewChild,
                 args: ['viewercontainer']
@@ -15185,10 +15187,10 @@ class FabSvgViewerComponent {
     }
 }
 FabSvgViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabSvgViewerComponent, deps: [{ token: FabrikantenService }, { token: SVGService }, { token: TranslateService }, { token: i4$3.DomSanitizer }, { token: MobileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabSvgViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer", viewQueries: [{ propertyName: "svgcontainer", first: true, predicate: ["svgcontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  \r\n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\r\n    <div #svgcontainer class=\"svg-container\">\r\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\r\n    </div>\r\n\r\n    <div class=\"svg-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
+FabSvgViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabSvgViewerComponent, selector: "app-fab-svg-viewer", viewQueries: [{ propertyName: "svgcontainer", first: true, predicate: ["svgcontainer"], descendants: true }], ngImport: i0, template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  \r\n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\r\n    <div #svgcontainer class=\"svg-container\">\r\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\r\n    </div>\r\n\r\n    <div class=\"svg-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'2D'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabSvgViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-svg-viewer', template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  \r\n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\r\n    <div #svgcontainer class=\"svg-container\">\r\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\r\n    </div>\r\n\r\n    <div class=\"svg-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
+            args: [{ selector: 'app-fab-svg-viewer', template: "<div class=\"loader\" *ngIf=\"SVGService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  \r\n  <div class=\"main-window flex-col\" *ngIf=\"ShowSVG()\">\r\n    <div #svgcontainer class=\"svg-container\">\r\n      <object class=\"svg-object\" *ngIf=\"ShowSVG()\" type=\"image/svg+xml\" [attr.data]=\"GetSafeURL()\"></object>\r\n    </div>\r\n\r\n    <div class=\"svg-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'2D'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.row-icon{align-items:center;display:flex}.flex-auto{flex:auto}.column{display:flex;flex-direction:column}.svg-settings{position:absolute;top:10px;right:10px;display:flex}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-title{flex:auto}.flex-col{display:flex;flex-direction:column}.loader{position:absolute;width:100%;height:100%;justify-content:center}.main-window{height:100%;overflow:hidden}.toolbar{display:flex;padding:3px}.toolbar-mobile{padding-bottom:5px}.svg-container{overflow:auto;background-color:#f1eeeb;height:100%}.toolbar-actions{flex:auto}.svg-object{cursor:grab}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: SVGService }, { type: TranslateService }, { type: i4$3.DomSanitizer }, { type: MobileService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { svgcontainer: [{
                 type: ViewChild,
                 args: ['svgcontainer']
@@ -15212,10 +15214,10 @@ class FabTextureComponent {
     }
 }
 FabTextureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabTextureComponent, deps: [{ token: FabrikantenService }, { token: TextureService }, { token: TranslateService }, { token: MobileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FabTextureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabTextureComponent, selector: "app-fab-texture", ngImport: i0, template: "<div class=\"loader\" *ngIf=\"TextureService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div>\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowTexture()\" class=\"main-window flex-col\">\r\n    <div class=\"image-row\">\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" />\r\n        </a>\r\n      </div>\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Bumpmap\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" />\r\n        </a>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"texture-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.image-row{display:flex;gap:30px;padding:30px;align-items:center;justify-content:center}.image-header{text-align:center;font-style:italic}.image{max-width:400px;max-height:calc(100vH - 190px)}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.texture-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.row-icon{align-items:center;display:flex}.row-title{flex:auto}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
+FabTextureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabTextureComponent, selector: "app-fab-texture", ngImport: i0, template: "<div class=\"loader\" *ngIf=\"TextureService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div>\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowTexture()\" class=\"main-window flex-col\">\r\n    <div class=\"image-row\">\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" />\r\n        </a>\r\n      </div>\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Bumpmap\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" />\r\n        </a>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"texture-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'Texture'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.image-row{display:flex;gap:30px;padding:30px;align-items:center;justify-content:center}.image-header{text-align:center;font-style:italic}.image{max-width:400px;max-height:calc(100vH - 190px)}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.texture-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.row-icon{align-items:center;display:flex}.row-title{flex:auto}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabTextureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-texture', template: "<div class=\"loader\" *ngIf=\"TextureService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div>\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowTexture()\" class=\"main-window flex-col\">\r\n    <div class=\"image-row\">\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" />\r\n        </a>\r\n      </div>\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Bumpmap\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" />\r\n        </a>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"texture-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.image-row{display:flex;gap:30px;padding:30px;align-items:center;justify-content:center}.image-header{text-align:center;font-style:italic}.image{max-width:400px;max-height:calc(100vH - 190px)}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.texture-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.row-icon{align-items:center;display:flex}.row-title{flex:auto}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button{margin:5px;width:100%}\n"] }]
+            args: [{ selector: 'app-fab-texture', template: "<div class=\"loader\" *ngIf=\"TextureService.Loading\">\r\n  <app-fab-loader></app-fab-loader>\r\n</div>\r\n\r\n<div>\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div *ngIf=\"ShowTexture()\" class=\"main-window flex-col\">\r\n    <div class=\"image-row\">\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Texture\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.patroonURL }}\" />\r\n        </a>\r\n      </div>\r\n      <div>\r\n        <div class=\"image-header\">{{ TranslateService.GetActiveValue(\"Common\", \"Bumpmap\") }}</div>\r\n        <a href=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" target=\"_blank\">\r\n          <img class=\"image\" src=\"{{ TextureService.FabrikantenTextureViewModel.bumpURL }}\" />\r\n        </a>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"texture-settings\" *ngIf=\"MobileService.ShowActionMenu()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'Texture'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.flex-col{display:flex;flex-direction:column}.image-row{display:flex;gap:30px;padding:30px;align-items:center;justify-content:center}.image-header{text-align:center;font-style:italic}.image{max-width:400px;max-height:calc(100vH - 190px)}.multiplevariants{padding:20px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.column{display:flex;flex-direction:column}.texture-settings{position:absolute;top:10px;right:10px;display:flex}.icon{margin-right:3px}.row-icon{align-items:center;display:flex}.row-title{flex:auto}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TextureService }, { type: TranslateService }, { type: MobileService }, { type: i0.ChangeDetectorRef }]; } });
 
 class FabToebehorenComponent {
@@ -15285,10 +15287,10 @@ class FabToebehorenComponent {
     }
 }
 FabToebehorenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabToebehorenComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: MobileService }, { token: i0.ChangeDetectorRef }, { token: ToebehorenService }], target: i0.ɵɵFactoryTarget.Component });
-FabToebehorenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabToebehorenComponent, selector: "app-fab-toebehoren", viewQueries: [{ propertyName: "viewercontainer", first: true, predicate: ["viewercontainertoebehoren"], descendants: true }], ngImport: i0, template: "<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div class=\"main-window\" *ngIf=\"!FabrikantenService.ShowVariants() && HasModel()\">\r\n    <div *ngIf=\"!FabrikantenService.HasToebehoren()\" class=\"message\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Geen toebehoren\") }}\r\n    </div>\r\n    <div class=\"main-window\" *ngIf=\"FabrikantenService.HasToebehoren()\">\r\n      <div *ngIf=\"(!ToebehorenService.Init && !ToebehorenService.Loading) || FabrikantenService.GetSelectedToebehoren() == null\" class=\"message\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Selecteer toebehoren\") }}\r\n      </div>\r\n      <div class=\"flexauto\" *ngIf=\"ToebehorenService.Loading\">\r\n        <app-fab-loader></app-fab-loader>\r\n      </div>\r\n      <div class=\"main-window\" *ngIf=\"!ToebehorenService.Loading && ToebehorenService.Init && FabrikantenService.GetSelectedToebehoren() != null\">\r\n        <div #viewercontainertoebehoren class=\"viewer-container\">\r\n          <canvas id=\"viewerCanvasToebehoren\" class=\"viewer-canvas\" [attr.width]=\"ViewerWidth\" [attr.height]=\"ViewerHeight\"></canvas>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"settings\" *ngIf=\"MobileService.ShowActionMenu() && FabrikantenService.HasToebehoren()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.flexauto{flex:auto}.row-icon{align-items:center;display:flex}.viewer-container{overflow:auto;height:100%}.message{padding:40px}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar-button{margin-top:3px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.settings{position:absolute;top:10px;right:10px;display:flex}.column{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
+FabToebehorenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: FabToebehorenComponent, selector: "app-fab-toebehoren", viewQueries: [{ propertyName: "viewercontainer", first: true, predicate: ["viewercontainertoebehoren"], descendants: true }], ngImport: i0, template: "<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div class=\"main-window\" *ngIf=\"!FabrikantenService.ShowVariants() && HasModel()\">\r\n    <div *ngIf=\"!FabrikantenService.HasToebehoren()\" class=\"message\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Geen toebehoren\") }}\r\n    </div>\r\n    <div class=\"main-window\" *ngIf=\"FabrikantenService.HasToebehoren()\">\r\n      <div *ngIf=\"(!ToebehorenService.Init && !ToebehorenService.Loading) || FabrikantenService.GetSelectedToebehoren() == null\" class=\"message\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Selecteer toebehoren\") }}\r\n      </div>\r\n      <div class=\"flexauto\" *ngIf=\"ToebehorenService.Loading\">\r\n        <app-fab-loader></app-fab-loader>\r\n      </div>\r\n      <div class=\"main-window\" *ngIf=\"!ToebehorenService.Loading && ToebehorenService.Init && FabrikantenService.GetSelectedToebehoren() != null\">\r\n        <div #viewercontainertoebehoren class=\"viewer-container\">\r\n          <canvas id=\"viewerCanvasToebehoren\" class=\"viewer-canvas\" [attr.width]=\"ViewerWidth\" [attr.height]=\"ViewerHeight\"></canvas>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"settings\" *ngIf=\"MobileService.ShowActionMenu() && FabrikantenService.HasToebehoren()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'Toebehoren'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.flexauto{flex:auto}.row-icon{align-items:center;display:flex}.viewer-container{overflow:auto;height:100%}.message{padding:40px}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar-button{margin-top:3px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.settings{position:absolute;top:10px;right:10px;display:flex}.column{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabToebehorenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-toebehoren', template: "<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div class=\"main-window\" *ngIf=\"!FabrikantenService.ShowVariants() && HasModel()\">\r\n    <div *ngIf=\"!FabrikantenService.HasToebehoren()\" class=\"message\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Geen toebehoren\") }}\r\n    </div>\r\n    <div class=\"main-window\" *ngIf=\"FabrikantenService.HasToebehoren()\">\r\n      <div *ngIf=\"(!ToebehorenService.Init && !ToebehorenService.Loading) || FabrikantenService.GetSelectedToebehoren() == null\" class=\"message\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Selecteer toebehoren\") }}\r\n      </div>\r\n      <div class=\"flexauto\" *ngIf=\"ToebehorenService.Loading\">\r\n        <app-fab-loader></app-fab-loader>\r\n      </div>\r\n      <div class=\"main-window\" *ngIf=\"!ToebehorenService.Loading && ToebehorenService.Init && FabrikantenService.GetSelectedToebehoren() != null\">\r\n        <div #viewercontainertoebehoren class=\"viewer-container\">\r\n          <canvas id=\"viewerCanvasToebehoren\" class=\"viewer-canvas\" [attr.width]=\"ViewerWidth\" [attr.height]=\"ViewerHeight\"></canvas>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"settings\" *ngIf=\"MobileService.ShowActionMenu() && FabrikantenService.HasToebehoren()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.flexauto{flex:auto}.row-icon{align-items:center;display:flex}.viewer-container{overflow:auto;height:100%}.message{padding:40px}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar-button{margin-top:3px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.settings{position:absolute;top:10px;right:10px;display:flex}.column{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'app-fab-toebehoren', template: "<div class=\"main-window\">\r\n  <div *ngIf=\"FabrikantenService.ShowVariants()\" class=\"multiplevariants\">\r\n    <app-fab-select-bcbproduct></app-fab-select-bcbproduct>\r\n  </div>\r\n  <div class=\"main-window\" *ngIf=\"!FabrikantenService.ShowVariants() && HasModel()\">\r\n    <div *ngIf=\"!FabrikantenService.HasToebehoren()\" class=\"message\">\r\n      {{ TranslateService.GetActiveValue(\"Common\", \"Geen toebehoren\") }}\r\n    </div>\r\n    <div class=\"main-window\" *ngIf=\"FabrikantenService.HasToebehoren()\">\r\n      <div *ngIf=\"(!ToebehorenService.Init && !ToebehorenService.Loading) || FabrikantenService.GetSelectedToebehoren() == null\" class=\"message\">\r\n        {{ TranslateService.GetActiveValue(\"Common\", \"Selecteer toebehoren\") }}\r\n      </div>\r\n      <div class=\"flexauto\" *ngIf=\"ToebehorenService.Loading\">\r\n        <app-fab-loader></app-fab-loader>\r\n      </div>\r\n      <div class=\"main-window\" *ngIf=\"!ToebehorenService.Loading && ToebehorenService.Init && FabrikantenService.GetSelectedToebehoren() != null\">\r\n        <div #viewercontainertoebehoren class=\"viewer-container\">\r\n          <canvas id=\"viewerCanvasToebehoren\" class=\"viewer-canvas\" [attr.width]=\"ViewerWidth\" [attr.height]=\"ViewerHeight\"></canvas>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"settings\" *ngIf=\"MobileService.ShowActionMenu() && FabrikantenService.HasToebehoren()\">\r\n      <mat-card>\r\n        <mat-card-content>\r\n          <app-fab-actionmenu [display]=\"'Toebehoren'\"></app-fab-actionmenu>\r\n        </mat-card-content>\r\n      </mat-card>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n", styles: [".row{display:flex;line-height:37px}.icon{margin-right:3px}.multiplevariants{padding:20px}.flexauto{flex:auto}.row-icon{align-items:center;display:flex}.viewer-container{overflow:auto;height:100%}.message{padding:40px}.viewer-canvas{background-color:#fff;cursor:grab}.main-window{height:100%}.toolbar-button{margin-top:3px}.loader{position:absolute;width:100%;height:100%;justify-content:center}.settings{position:absolute;top:10px;right:10px;display:flex}.column{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: FabrikantenService }, { type: TranslateService }, { type: MobileService }, { type: i0.ChangeDetectorRef }, { type: ToebehorenService }]; }, propDecorators: { viewercontainer: [{
                 type: ViewChild,
                 args: ['viewercontainertoebehoren']
@@ -15365,10 +15367,10 @@ class FabProductComponent {
     }
 }
 FabProductComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", 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 });
-FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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.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></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(\"Common\", \"Not all required filled\") }}</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(\"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\" *ngIf=\"Show3D()\">\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\" *ngIf=\"Show2D()\" 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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"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(\"Common\", \"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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.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" }, { kind: "component", type: FabTextureComponent, selector: "app-fab-texture" }, { kind: "component", type: FabToebehorenComponent, selector: "app-fab-toebehoren" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu" }], encapsulation: i0.ViewEncapsulation.None });
+FabProductComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", 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.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(\"Common\", \"Not all required filled\") }}</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(\"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\" *ngIf=\"Show3D()\">\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\" *ngIf=\"Show2D()\" 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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"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(\"Common\", \"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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$2.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" }, { 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: "15.0.0", 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.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></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(\"Common\", \"Not all required filled\") }}</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(\"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\" *ngIf=\"Show3D()\">\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\" *ngIf=\"Show2D()\" 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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"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(\"Common\", \"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"] }]
+            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.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(\"Common\", \"Not all required filled\") }}</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(\"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\" *ngIf=\"Show3D()\">\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\" *ngIf=\"Show2D()\" 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 label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(\"Common\", \"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(\"Common\", \"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']
@@ -16169,7 +16171,10 @@ FabrikantenCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         MatProgressSpinnerModule,
         MatSelectModule,
         MatSnackBarModule, i1$1.RouterModule], exports: [FabFiltersComponent,
-        FabCategoryNavigatorComponent] });
+        FabCategoryNavigatorComponent,
+        FabActionmenuComponent,
+        FabFiltersInputComponent,
+        FabProductBestekComponent] });
 FabrikantenCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FabrikantenCoreModule, providers: [
         NavigateService,
         AuthenticationService,
@@ -16363,7 +16368,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                     ],
                     exports: [
                         FabFiltersComponent,
-                        FabCategoryNavigatorComponent
+                        FabCategoryNavigatorComponent,
+                        FabActionmenuComponent,
+                        FabFiltersInputComponent,
+                        FabProductBestekComponent,
                     ]
                 }]
         }] });
@@ -16372,5 +16380,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOFilterOptionViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapToebehorenViewModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, DynamicDisplayValueViewModel, DynamicFilterViewModel, DynamicFiltersViewModel, DynamicRangeInputViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabCategoryNavigatorComponent, FabFiltersComponent, FabFiltersInputComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterDescriptionViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenInputViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionRequiredType, FilterOptionRequiredViewModel, FilterOptionViewModel, FilterRequiredViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, InputViewModel, InputsViewModel, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, MoveFilterOptionRequest, MoveFilterRequest, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, RangeInputFilterOptionRequiredViewModel, RangeInputType, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryBCBEigenschapToebehorenViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
+export { API_BASE_URL, ApiException, BCBEBODOViewModel, BCBEBOFilterOptionViewModel, BCBEBOViewModel, BCBEigenschapBereikViewModel, BCBEigenschapLocation, BCBEigenschapOptieCategoryViewModel, BCBEigenschapOptieFilterOptionViewModel, BCBEigenschapOptieViewModel, BCBEigenschapRangeInputModel, BCBEigenschapToebehorenViewModel, BCBEigenschapViewModel, BCBImportEigenschap, BCBImportOpbouw, BCBImportOpenRequest, BCBImportOpenResponse, BCBImportOpenTempDORequest, BCBImportOpenTempRequest, BCBImportProductRequest, BCBImportProductResponse, BCBImportSetValueViewModel, BCBImportSetViewModel, BCBImportSetsViewModel, BCBLinkRequestModel, BCBLinkResponseModel, BCBOpbouwViewModel, BCBProductViewModel, CategoriesApiClient, CategoriesOverviewCategorieViewModel, CategoriesOverviewViewModel, CategoriesViewModel, CategoryViewModel, ChangeImportSetRequest, CleanUpResponseModel, ClearCategoryRequest, ConnectBCBEBODORequest, ConnectBCBEigenschapRangeInputRequest, ConnectBCBEigenschapRangeInputResponse, ConnectBCBEigenschapRequest, ConnectEBODOCategoryRequest, ConnectEBODOCategoryResponse, ConnectEigenschapOptieRequest, ConnectOpbouwRequest, CreateCategoryRequest, CreateCategoryResponse, CreateExportRequest, CreateExportResponse, CreateFilterOptionRequest, CreateFilterOptionResponse, CreateFilterRequest, CreateFilterResponse, CreateLanguageRequest, DeeplinkProductViewModel, DeeplinkRequest, DeeplinkViewModel, DynamicDisplayValueViewModel, DynamicFilterViewModel, DynamicFiltersViewModel, DynamicRangeInputViewModel, EBOConnectRequestModel, EBOKoppelApiClient, EBOKoppelEBOCategoryViewModel, EBOKoppelEBOFilterOptionViewModel, EBOKoppelEBOViewModel, EBOKoppelNaamViewModel, EBOKoppelTypeViewModel, EBOKoppelViewModel, FabActionmenuComponent, FabCategoryNavigatorComponent, FabFiltersComponent, FabFiltersInputComponent, FabProductBestekComponent, Fabrikanten3DRequestModel, Fabrikanten3DViewModel, FabrikantenApiClient, FabrikantenBCBProductAfbeeldingViewModel, FabrikantenBCBProductToebehorenViewModel, FabrikantenBCBProductViewModel, FabrikantenBestekRequestModel, FabrikantenBestekViewModel, FabrikantenCategoryLayerViewModel, FabrikantenCategoryViewModel, FabrikantenCoreModule, FabrikantenFileRequestModel, FabrikantenFileViewModel, FabrikantenFilterCategoryViewModel, FabrikantenFilterDescriptionViewModel, FabrikantenFilterOptionViewModel, FabrikantenFilterViewModel, FabrikantenInputViewModel, FabrikantenProductViewModel, FabrikantenRangeInputViewModel, FabrikantenRequestModel, FabrikantenSVGRequestModel, FabrikantenSVGViewModel, FabrikantenTextureBaseViewModel, FabrikantenTextureRequestModel, FabrikantenTextureViewModel, FabrikantenViewModel, FilterOptionRequiredType, FilterOptionRequiredViewModel, FilterOptionViewModel, FilterRequiredViewModel, FilterType, FilterViewModel, FiltersApiClient, FiltersViewModel, GetProductRequest, GetProductsViewModel, IgnoreBCBEigenschapRequest, IgnoreOpbouwRequest, ImportApiClient, InputViewModel, InputsViewModel, KoppelProductsRequestModel, LanguageViewModel, LanguagesViewModel, LoginIPResponseModel, LoginRequestModel, LoginResponseModel, MoveFilterOptionRequest, MoveFilterRequest, NewProductRequestModel, NewProductResponseModel, ProductViewModel, ProductViewModel2, ProductsApiClient, ProductsViewModel, ProductsViewModelRequest, ProjectSettingApiClient, ProjectSettingPipelineStepViewModel, ProjectSettingType, ProjectSettingViewModel, ProjectSettingsCategoryViewModel, ProjectSettingsViewModel, RangeInputFilterOptionRequiredViewModel, RangeInputType, RangeInputViewModel, RangeInputsViewModel, ReadExportRequest, RemoveProductSelectionRequest, ResetAllCategoriesRequest, ResetAllFiltersRequest, ResetCategoryLayerRequest, ResetFilterRequest, ResetImportRequestModel, SaveImportSetRequest, SaveProductViewModel, SearchProductsApiClient, SearchProductsRequestModel, SearchProductsResponseModel, SecurityApiClient, SelectBCBProductRequest, SelectCategoryRequest, SelectColourRequest, SelectFilterOptionRequest, SelectProductRequest, SetFilterOptionRequiredRequest, SetFilterRequiredRequest, SetProjectSettingRequestModel, SetProjectSettingResponseModel, SetRangeInputRequest, TranslateApiClient, TranslateEntryAfbeeldingViewModel, TranslateEntryBCBEigenschapToebehorenViewModel, TranslateEntryCategoryViewModel, TranslateEntryDescriptionViewModel, TranslateEntryFilterOptionViewModel, TranslateEntryFilterViewModel, TranslateEntryProductViewModel, TranslateEntryRangeInputViewModel, TranslateEntryViewModel, TranslateKeyCategoryViewModel, TranslateKeyViewModel, WizardEBODOViewModel, WizardEBOViewModel };
 //# sourceMappingURL=fabrikantencore.mjs.map