fabrikantencore 2.4.3 → 2.4.4

package/src/app/modules/fabrikantencore/components/fab-actionmenu/fab-actionmenu.component.html

@@ -0,0 +1,343 @@
+<div class="column" *ngIf="Show3DButtons()">
+  <button mat-stroked-button class="toolbar-button rfa-button" (click)="DownloadRevit()" *ngIf="WebGLService.HasNativeRFA()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadRFALoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadRFALoading">{{ TranslateService.GetActiveValue("Common", "Revit") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button arkey-adomi-button" (click)="FabrikantenService.DownloadARKEYAdomi(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadARKEYAdomiLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadARKEYAdomiLoading">{{ TranslateService.GetActiveValue("Common", "ARKEY Adomi") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button ifc-button" (click)="FabrikantenService.DownloadIFC(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadIFCLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadIFCLoading">{{ TranslateService.GetActiveValue("Common", "IFC") }}</span>
+      </div>
+    </div>
+  </button>
+  <!--<button mat-stroked-button class="toolbar-button revit-plugin-button" (click)="FabrikantenService.DownloadRevitPlugin(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadRevitPluginLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadRevitPluginLoading">{{ TranslateService.GetActiveValue("Common", "Revit (plugin)") }}</span>
+      </div>
+    </div>
+  </button>-->
+  <button mat-stroked-button class="toolbar-button autocad-3d-button" (click)="FabrikantenService.Download3DAutoCADDwg(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download3DAutoCADDwgLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download3DAutoCADDwgLoading">{{ TranslateService.GetActiveValue("Common", "3D AutoCAD Dwg") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button dxf-3d-button" (click)="FabrikantenService.Download3DDxf(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download3DDxfLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download3DDxfLoading">{{ TranslateService.GetActiveValue("Common", "3D Dxf") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="OpenBCBLink3D()" *ngIf="ShowBCBButton()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon open_in_new">open_in_new</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "BCB") }}
+      </div>
+    </div>
+  </button>
+</div>
+
+<div class="column" *ngIf="Show2DButtons()">
+  <mat-form-field appearance="fill">
+    <mat-label class="select-mat-label">{{ TranslateService.GetActiveValue("Common", "Snede") }}</mat-label>
+    <mat-select [(ngModel)]="SVGService.Snede" (selectionChange)="RefreshSnede()">
+      <mat-option *ngFor="let snede of SVGService.Snedes" [value]="snede">
+        {{ TranslateService.GetActiveValue("Common", snede) }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field appearance="fill">
+    <mat-label class="select-mat-label">{{ TranslateService.GetActiveValue("Common", "Schaal") }}</mat-label>
+    <mat-select [(ngModel)]="SVGService.Schaal" (selectionChange)="RefreshSchaal()">
+      <mat-option [value]="'0'">1:1</mat-option>
+      <mat-option [value]="'1'">1:2</mat-option>
+      <mat-option [value]="'2'">1:5</mat-option>
+      <mat-option [value]="'3'">1:10</mat-option>
+      <mat-option [value]="'4'">1:20</mat-option>
+      <mat-option [value]="'5'">1:50</mat-option>
+      <mat-option [value]="'6'">1:100</mat-option>
+      <mat-option [value]="'7'">1:200</mat-option>
+      <mat-option [value]="'8'">1:500</mat-option>
+      <mat-option [value]="'9'">1:1000</mat-option>
+      <mat-option [value]="'10'">1:2000</mat-option>
+      <mat-option [value]="'11'">1:5000</mat-option>
+      <mat-option [value]="'12'">1:10000</mat-option>
+      <mat-option [value]="'13'">1:20000</mat-option>
+      <mat-option [value]="'14'">1:50000</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <button mat-stroked-button class="toolbar-button rfa-button" (click)="DownloadRevit()" *ngIf="SVGService.HasNativeRFA()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadRFALoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadRFALoading">{{ TranslateService.GetActiveValue("Common", "Revit") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button arkey-adomi-button" (click)="FabrikantenService.DownloadARKEYAdomi(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadARKEYAdomiLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadARKEYAdomiLoading">{{ TranslateService.GetActiveValue("Common", "ARKEY Adomi") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button ifc-button" (click)="FabrikantenService.DownloadIFC(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadIFCLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadIFCLoading">{{ TranslateService.GetActiveValue("Common", "IFC") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button autocad-2d-button" (click)="FabrikantenService.Download2DAutoCADDwg(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download2DAutoCADDwgLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download2DAutoCADDwgLoading">{{ TranslateService.GetActiveValue("Common", "2D AutoCAD Dwg") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button dxf-2d-button" (click)="FabrikantenService.Download2DDxf(undefined)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download2DDxfLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download2DDxfLoading">{{ TranslateService.GetActiveValue("Common", "2D Dxf") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="OpenBCBLink2D()" *ngIf="ShowBCBButton()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon open_in_new">open_in_new</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "BCB") }}
+      </div>
+    </div>
+  </button>
+</div>
+
+<div class="column" *ngIf="ShowBestekButtons()">
+  <ng-container *ngIf="ShowBestekSelect()">
+    <mat-button-toggle-group [value]="BestekService.TypeBestek" (change)="BestekService.TypeBestek = $event.source.value" appearance="legacy">
+      <mat-button-toggle *ngIf="ShowSTABU()" value="STABU">{{ TranslateService.GetActiveValue("Common", "STABU") }}</mat-button-toggle>
+      <mat-button-toggle *ngIf="ShowOSF()" value="OSF">{{ TranslateService.GetActiveValue("Common", "OSF") }}</mat-button-toggle>
+      <mat-button-toggle *ngIf="ShowVrij()" value="Vrij">{{ TranslateService.GetActiveValue("Common", "Specification text") }}</mat-button-toggle>
+    </mat-button-toggle-group>
+    <div>
+      &nbsp;
+    </div>
+  </ng-container>
+  <button mat-stroked-button class="toolbar-button" (click)="CopyToClipBoard()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon content_copy">content_copy</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "Clipboard") }}
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="CopyToClipBoardSUF()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon content_copy">content_copy</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "ClipboardSUF") }}
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="DownloadBestek()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "Download") }}
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="OpenBCBLinkBestek()" *ngIf="ShowBCBButton()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon open_in_new">open_in_new</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "BCB") }}
+      </div>
+    </div>
+  </button>
+</div>
+
+<div class="column" *ngIf="ShowTextureButtons()">
+  <button mat-stroked-button class="toolbar-button" (click)="OpenLink(TextureService.FabrikantenTextureViewModel.patroonURL)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon open_in_new">open_in_new</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "Texture") }}
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="OpenLink(TextureService.FabrikantenTextureViewModel.bumpURL)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon open_in_new">open_in_new</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "Bumpmap") }}
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button" (click)="OpenBCBLinkTexture()" *ngIf="ShowBCBButton()">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon open_in_new">open_in_new</mat-icon>
+      </div>
+      <div class="row-title">
+        {{ TranslateService.GetActiveValue("Common", "BCB") }}
+      </div>
+    </div>
+  </button>
+</div>
+
+<div class="column" *ngIf="ShowToebehorenButtons()">
+  <mat-form-field appearance="fill">
+    <mat-label class="select-mat-label">Toebehoren</mat-label>
+    <mat-select [(ngModel)]="FabrikantenService.SelectedToebehoren" (selectionChange)="ToebehorenService.OpenToebehoren(this.ChangeDetectorRef)">
+      <ng-container *ngFor="let item of FabrikantenService.FabrikantenViewModel.selectedProduct.fabrikantenBCBProductViewModels[0].bcbProductToebehoren">
+        <mat-option *ngIf="!item.bcbProduct" [value]="item">
+          {{ TranslateService.GetActiveValueBCBEigenschapToebehoren(item.id) }}
+        </mat-option>
+        <mat-option *ngIf="item.bcbProduct" [value]="item">
+          {{ item.name }}
+        </mat-option>
+      </ng-container>
+    </mat-select>
+  </mat-form-field>
+
+  <button mat-stroked-button class="toolbar-button arkey-adomi-button" *ngIf="FabrikantenService.GetSelectedToebehoren() != null" (click)="FabrikantenService.DownloadARKEYAdomi(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadARKEYAdomiLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadARKEYAdomiLoading">{{ TranslateService.GetActiveValue("Common", "ARKEY Adomi") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button ifc-button" *ngIf="FabrikantenService.GetSelectedToebehoren() != null" (click)="FabrikantenService.DownloadIFC(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadIFCLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadIFCLoading">{{ TranslateService.GetActiveValue("Common", "IFC") }}</span>
+      </div>
+    </div>
+  </button>
+  <!--<button mat-stroked-button class="toolbar-button revit-plugin-button" *ngIf="FabrikantenService.GetSelectedToebehoren() != null" (click)="FabrikantenService.DownloadRevitPlugin(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.DownloadRevitPluginLoading">...</span>
+        <span *ngIf="!FabrikantenService.DownloadRevitPluginLoading">{{ TranslateService.GetActiveValue("Common", "Revit (plugin)") }}</span>
+      </div>
+    </div>
+  </button>-->
+  <button mat-stroked-button class="toolbar-button autocad-3d-button" *ngIf="FabrikantenService.GetSelectedToebehoren() != null" (click)="FabrikantenService.Download3DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download3DAutoCADDwgLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download3DAutoCADDwgLoading">{{ TranslateService.GetActiveValue("Common", "3D AutoCAD Dwg") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button autocad-2d-button" *ngIf="FabrikantenService.GetSelectedToebehoren() != null" (click)="FabrikantenService.Download2DAutoCADDwg(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download2DAutoCADDwgLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download2DAutoCADDwgLoading">{{ TranslateService.GetActiveValue("Common", "2D AutoCAD Dwg") }}</span>
+      </div>
+    </div>
+  </button>
+  <button mat-stroked-button class="toolbar-button dxf-2d-button" *ngIf="FabrikantenService.GetSelectedToebehoren() != null" (click)="FabrikantenService.Download2DDxf(FabrikantenService.GetSelectedToebehoren()?.bcbeboId)">
+    <div class="row">
+      <div class="row-icon">
+        <mat-icon class="icon file_download">file_download</mat-icon>
+      </div>
+      <div class="row-title">
+        <span *ngIf="FabrikantenService.Download2DDxfLoading">...</span>
+        <span *ngIf="!FabrikantenService.Download2DDxfLoading">{{ TranslateService.GetActiveValue("Common", "2D Dxf") }}</span>
+      </div>
+    </div>
+  </button>
+</div>

package/src/app/modules/fabrikantencore/components/fab-actionmenu/fab-actionmenu.component.scss

@@ -0,0 +1,29 @@
+app-fab-actionmenu {
+  .mat-stroked-button {
+    white-space: unset !important;
+  }
+
+  .icon {
+    margin-right: 3px;
+  }
+
+  .toolbar-button {
+    margin-top: 3px;
+    width: 100%;
+  }
+
+  .row {
+    display: flex;
+    line-height: 37px;
+  }
+
+  .row-icon {
+    align-items: center;
+    display: flex;
+  }
+
+  .column {
+    display: flex;
+    flex-direction: column;
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-actionmenu/fab-actionmenu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabActionmenuComponent } from './fab-actionmenu.component';
+
+describe('FabActionmenuComponent', () => {
+  let component: FabActionmenuComponent;
+  let fixture: ComponentFixture<FabActionmenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabActionmenuComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabActionmenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-actionmenu/fab-actionmenu.component.ts

@@ -0,0 +1,154 @@
+import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+import { BestekService } from '../../services/bestek.service';
+import { FabrikantenService } from '../../services/fabrikanten.service';
+import { MobileService } from '../../services/mobile.service';
+import { SVGService } from '../../services/svg.service';
+import { TextureService } from '../../services/texture.service';
+import { ToebehorenService } from '../../services/toebehoren.service';
+import { TranslateService } from '../../services/translate.service';
+import { WebGLService } from '../../services/webgl.service';
+
+@Component({
+  selector: 'app-fab-actionmenu',
+  templateUrl: './fab-actionmenu.component.html',
+  styleUrls: ['./fab-actionmenu.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class FabActionmenuComponent {
+
+  @Input() display: string;
+
+  constructor(public MobileService: MobileService,
+    public FabrikantenService: FabrikantenService,
+    public TranslateService: TranslateService,
+    public BestekService: BestekService,
+    public TextureService: TextureService,
+    public SVGService: SVGService,
+    public WebGLService: WebGLService,
+    public ToebehorenService: ToebehorenService,
+    public ChangeDetectorRef: ChangeDetectorRef) {
+  }
+
+  public OpenLink(url: string): void {
+    window.open(url, "_blank");
+  }
+
+  public Show3DButtons(): boolean {
+    return this.display == "3D";
+  }
+
+  public Show2DButtons(): boolean {
+    return this.display == "2D";
+  }
+
+  public ShowBestekButtons(): boolean {
+    return this.display == "Bestek";
+  }
+
+  public ShowTextureButtons(): boolean {
+    return this.display == "Texture";
+  }
+
+  public ShowToebehorenButtons(): boolean {
+    return this.display == "Toebehoren";
+  }
+
+  public ShowBCBButton(): boolean {
+    if (this.FabrikantenService.FabrikantenSettingsViewModel?.showBCBButton == true) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public DownloadBestek(): void {
+    if (this.BestekService.FabrikantenBestekViewModel.suf != null) {
+      this.FabrikantenService.DownloadBestek(this.BestekService.FabrikantenBestekViewModel.suf);
+    }
+    else {
+      alert("Error: unabled to download specifications");
+    }
+  }
+
+  public CopyToClipBoard(): void {
+    if (this.BestekService.fabProductBestek != null) {
+      this.BestekService.CopyToClipboard(this.BestekService.fabProductBestek.nativeElement.innerText);
+    }
+    else {
+      alert("Error: unabled to copy specifications");
+    }
+  }
+
+  public CopyToClipBoardSUF(): void {
+    if (this.BestekService.FabrikantenBestekViewModel.suf != null) {
+      this.BestekService.CopyToClipboard(this.BestekService.FabrikantenBestekViewModel.suf);
+    }
+    else {
+      alert("Error: unabled to copy specifications");
+    }
+  }
+
+  public ShowBestekSelect(): boolean {
+    if (this.ShowVrij()) {
+      return true;
+    }
+
+    return false;
+  }
+
+  public ShowSTABU(): boolean {
+    return this.BestekService.FabrikantenBestekViewModel?.stabu != '' && this.BestekService.FabrikantenBestekViewModel?.stabu != undefined;
+  }
+
+  public ShowSUF(): boolean {
+    return this.BestekService.FabrikantenBestekViewModel?.suf != '' && this.BestekService.FabrikantenBestekViewModel?.suf != undefined;
+  }
+
+  public ShowOSF(): boolean {
+    return this.BestekService.FabrikantenBestekViewModel?.osfhtml != '' && this.BestekService.FabrikantenBestekViewModel?.osfhtml != undefined;
+  }
+
+  public ShowVrij(): boolean {
+    if (this.FabrikantenService.FabrikantenSettingsViewModel?.enableVrijeBestekTekst == false) {
+      return false;
+    }
+
+    return this.BestekService.FabrikantenBestekViewModel?.vrijBestekHTML != '' && this.BestekService.FabrikantenBestekViewModel?.vrijBestekHTML != undefined;
+  }
+
+  public OpenBCBLink3D(): void {
+    this.FabrikantenService.OpenBCBLink(this.WebGLService.Fabrikanten3DViewModel.wuid + "");
+  }
+
+  public OpenBCBLink2D(): void {
+    this.FabrikantenService.OpenBCBLink(this.SVGService.FabrikantenSVGViewModel.wuid + "");
+  }
+
+  public OpenBCBLinkBestek(): void {
+    this.FabrikantenService.OpenBCBLink(this.BestekService.FabrikantenBestekViewModel.wuid + "");
+  }
+
+  public OpenBCBLinkTexture(): void {
+    this.FabrikantenService.OpenBCBLink(this.TextureService.FabrikantenTextureViewModel.wuid + "");
+  }
+
+  public OpenBCBLinkToebehoren(): void {
+    this.FabrikantenService.OpenBCBLink(this.BestekService.FabrikantenBestekViewModel.wuid + "");
+  }
+
+  public DownloadRevit(): void {
+    this.FabrikantenService.DownloadRFA(undefined, this.FabrikantenService.IsInWebViewBrowser());
+  }
+
+  public RefreshSnede(): void {
+    if (this.FabrikantenService?.FabrikantenViewModel?.sessionId != null) {
+      this.SVGService.LoadFabrikantenSVGViewModel(this.FabrikantenService.FabrikantenViewModel.sessionId, this.ChangeDetectorRef);
+    }
+  }
+
+  public RefreshSchaal(): void {
+    if (this.FabrikantenService?.FabrikantenViewModel?.sessionId != null) {
+      this.SVGService.LoadFabrikantenSVGViewModel(this.FabrikantenService.FabrikantenViewModel.sessionId, this.ChangeDetectorRef);
+    }
+  }
+}

package/src/app/modules/fabrikantencore/components/fab-bcb-product/fab-bcb-product.component.html

@@ -0,0 +1 @@
+<p>fab-bcb-product works!</p>

package/src/app/modules/fabrikantencore/components/fab-bcb-product/fab-bcb-product.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FabBcbProductComponent } from './fab-bcb-product.component';
+
+describe('FabBcbProductComponent', () => {
+  let component: FabBcbProductComponent;
+  let fixture: ComponentFixture<FabBcbProductComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FabBcbProductComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FabBcbProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/modules/fabrikantencore/components/fab-bcb-product/fab-bcb-product.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-fab-bcb-product',
+  templateUrl: './fab-bcb-product.component.html',
+  styleUrls: ['./fab-bcb-product.component.scss']
+})
+export class FabBcbProductComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/modules/fabrikantencore/components/fab-breadcrumb/fab-breadcrumb.component.html

@@ -0,0 +1,64 @@
+<div class="header" *ngIf="ShowHeader()" [ngClass]="{'tinybutton': this.MobileService.MobileInterfaceTiny}">
+  <div *ngIf="ShowBack() && !HideBreadcrumb()">
+    <button class="buttonsize" mat-stroked-button (click)="Back()">
+      <div class="header" >
+        <div class="header-back">
+          <mat-icon class="icon arrow_back">arrow_back</mat-icon>
+        </div>
+        <div class="header-title">
+          {{ TranslateService.GetActiveValue("Common", "Back") }}
+        </div>
+      </div>
+    </button>
+  </div>
+  <ng-container *ngIf="!MobileService.MobileInterface && !HideBreadcrumb()">
+    <ng-container *ngFor="let step of FabrikantenService.GetSteps()">
+      <div class="stepicon">
+        <mat-icon class="chevron_right">chevron_right</mat-icon>
+      </div>
+      <div class="step" (click)="UndoStep(step)">
+        {{ TranslateService.GetActiveValueCategory(step.id) }}
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null">
+      <div class="stepicon">
+        <mat-icon class="chevron_right">chevron_right</mat-icon>
+      </div>
+      <div class="step" (click)="Back()">
+        <span *ngIf="FabrikantenService.GetSteps().length == 0">Productconfiguratie: </span>{{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}
+      </div>
+    </ng-container>
+  </ng-container>
+  <ng-container *ngIf="MobileService.MobileInterface && showfiltermenubutton">
+    <button class="open-filters-button buttonsize" mat-stroked-button (click)="MobileService.OpenNav()">
+      <div class="header">
+        <div class="header-back">
+          <mat-icon class="icon menu">menu</mat-icon>
+        </div>
+        <div class="header-title">
+          {{ TranslateService.GetActiveValue("Common", "Filtermenu") }}
+        </div>
+      </div>
+    </button>
+    <div class="flexauto">
+
+    </div>
+    <button class="open-filters-button buttonsize" *ngIf="FabrikantenService.ShowActionMenu()" mat-stroked-button (click)="MobileService.OpenAction()">
+      <div class="header">
+        <div class="header-back">
+          <mat-icon class="icon menu">menu</mat-icon>
+        </div>
+        <div class="header-title">
+          {{ TranslateService.GetActiveValue("Common", "Actionmenu") }}
+        </div>
+      </div>
+    </button>
+  </ng-container>
+</div>
+
+<ng-container *ngIf="MobileService.MobileInterface && showfiltermenubutton && this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null && !HideBreadcrumb()">
+  <div class="paddingleft step center" (click)="Back()">
+    {{ TranslateService.GetActiveValueProduct(FabrikantenService.FabrikantenViewModel?.selectedProduct?.id) }}
+  </div>
+</ng-container>