fabrikantencore 2.39.13 → 2.39.15

package/fesm2022/fabrikantencore.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Inject, Optional, Injectable, ViewEncapsulation, Component, Input, signal, Pipe, ViewChild, EventEmitter, Output, ViewContainerRef, HostListener, ApplicationRef, EnvironmentInjector, createComponent, NgModule } from '@angular/core';
+import { InjectionToken, Inject, Optional, Injectable, signal, ViewEncapsulation, Component, Input, Pipe, ViewChild, EventEmitter, Output, ViewContainerRef, HostListener, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/router';
@@ -10,10 +10,8 @@ import * as i6$1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i8 from 'ngx-cookie-service';
 import { CookieService } from 'ngx-cookie-service';
-import * as i7$2 from 'ngx-three-engine';
-import { ActorComponent, PlayerController, InjectorService, SettingsPanelComponent, SettingsService, VIEWER_GRAPHICS_PRESET_LOCALSTORAGE_KEY, Actor, GraphicsScalabilityConfigsManager, GameModeBase, GameStateBase, OrbitPawn, World, ThreejsEngineComponent } from 'ngx-three-engine';
 import { mergeMap, catchError } from 'rxjs/operators';
-import { throwError, of, Observable, BehaviorSubject, Subject } from 'rxjs';
+import { throwError, of, Observable, BehaviorSubject } from 'rxjs';
 import * as i7 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5 from '@angular/material/input';
@@ -45,7 +43,7 @@ import * as i16 from '@angular/material/slide-toggle';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import * as i10$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i9$2 from '@angular/material/sidenav';
+import * as i9$3 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTreeModule } from '@angular/material/tree';
 import * as i8$1 from '@angular/material/icon';
@@ -53,7 +51,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i15 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i8$2 from '@angular/material/stepper';
+import * as i9$2 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import * as i9$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -62,12 +60,6 @@ import { MatRadioModule } from '@angular/material/radio';
 import * as i11 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { Matrix4, Group, Box3, TextureLoader, RepeatWrapping, LinearMipMapLinearFilter, LinearFilter, Mesh, BufferGeometry, BufferAttribute, MeshStandardMaterial, SRGBColorSpace, Vector3, PerspectiveCamera, MathUtils, MeshPhysicalMaterial, DirectionalLight, AmbientLight, Color } from 'three';
-import { Inspector } from 'three/addons/inspector/Inspector.js';
-import { InspectorBase, PMREMGenerator } from 'three/webgpu';
-import Stats from 'three/examples/jsm/libs/stats.module.js';
-import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
-import { HDRLoader } from 'three/examples/jsm/loaders/HDRLoader.js';
 import * as i6$4 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 
@@ -10196,6 +10188,7 @@ class FabrikantenFilterViewModel {
     required;
     affectsOnlyBestek;
     selectedOption;
+    defaultOption;
     selectedOptions;
     selectedColour;
     selectedColourValue;
@@ -10226,6 +10219,7 @@ class FabrikantenFilterViewModel {
             this.required = _data["required"];
             this.affectsOnlyBestek = _data["affectsOnlyBestek"];
             this.selectedOption = _data["selectedOption"];
+            this.defaultOption = _data["defaultOption"];
             if (Array.isArray(_data["selectedOptions"])) {
                 this.selectedOptions = [];
                 for (let item of _data["selectedOptions"])
@@ -10268,6 +10262,7 @@ class FabrikantenFilterViewModel {
         data["required"] = this.required;
         data["affectsOnlyBestek"] = this.affectsOnlyBestek;
         data["selectedOption"] = this.selectedOption;
+        data["defaultOption"] = this.defaultOption;
         if (Array.isArray(this.selectedOptions)) {
             data["selectedOptions"] = [];
             for (let item of this.selectedOptions)
@@ -10880,6 +10875,8 @@ class FabrikantenSettingsViewModel {
     osfNew;
     onlyShowBestekWhenFilled;
     rekenenParameters;
+    filtersSelectDefault;
+    stepperFoldable;
     downloadForm;
     selectProductForm;
     downloadCategories;
@@ -10945,6 +10942,8 @@ class FabrikantenSettingsViewModel {
             this.osfNew = _data["osfNew"];
             this.onlyShowBestekWhenFilled = _data["onlyShowBestekWhenFilled"];
             this.rekenenParameters = _data["rekenenParameters"];
+            this.filtersSelectDefault = _data["filtersSelectDefault"];
+            this.stepperFoldable = _data["stepperFoldable"];
             this.downloadForm = _data["downloadForm"] ? FabrikantenFormViewModel.fromJS(_data["downloadForm"]) : undefined;
             this.selectProductForm = _data["selectProductForm"] ? FabrikantenFormViewModel.fromJS(_data["selectProductForm"]) : undefined;
             if (Array.isArray(_data["downloadCategories"])) {
@@ -11018,6 +11017,8 @@ class FabrikantenSettingsViewModel {
         data["osfNew"] = this.osfNew;
         data["onlyShowBestekWhenFilled"] = this.onlyShowBestekWhenFilled;
         data["rekenenParameters"] = this.rekenenParameters;
+        data["filtersSelectDefault"] = this.filtersSelectDefault;
+        data["stepperFoldable"] = this.stepperFoldable;
         data["downloadForm"] = this.downloadForm ? this.downloadForm.toJSON() : undefined;
         data["selectProductForm"] = this.selectProductForm ? this.selectProductForm.toJSON() : undefined;
         if (Array.isArray(this.downloadCategories)) {
@@ -17843,7 +17844,7 @@ class BeheerNavComponent {
     authenticationService;
     router;
     FabrikantenApiClient;
-    ResetCacheTitle = "Reset Cache";
+    ResettingCache = signal(false, ...(ngDevMode ? [{ debugName: "ResettingCache" }] : /* istanbul ignore next */ []));
     FabrikantenSettingsViewModel;
     UploadsResponseModel = null;
     constructor(authenticationService, router, FabrikantenApiClient) {
@@ -17855,6 +17856,14 @@ class BeheerNavComponent {
         this.LoadSettings();
         this.LoadUploads();
     }
+    GetResetCacheTitle() {
+        if (this.ResettingCache()) {
+            return "...";
+        }
+        else {
+            return "Reset Cache";
+        }
+    }
     HangfireEnabled() {
         return this.FabrikantenSettingsViewModel?.hangfireEnabled == true;
     }
@@ -17881,9 +17890,9 @@ class BeheerNavComponent {
         return window.location.href.toLowerCase().indexOf(name.toLowerCase()) != -1;
     }
     ResetCache() {
-        this.ResetCacheTitle = "...";
+        this.ResettingCache.set(true);
         this.FabrikantenApiClient.resetCache().subscribe(() => {
-            this.ResetCacheTitle = "Reset Cache";
+            this.ResettingCache.set(false);
             alert('cache reset success');
         }, (error) => {
             alert('An unexpected error occured');
@@ -17917,11 +17926,11 @@ class BeheerNavComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BeheerNavComponent, deps: [{ token: AuthenticationService }, { token: i3.Router }, { token: FabrikantenApiClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: BeheerNavComponent, isStandalone: false, selector: "app-beheer-nav", ngImport: i0, template: "<div class=\"main-block\">\r\n  <div class=\"row\">\r\n    <div class=\"cell left-block\" *ngIf=\"authenticationService.DeTweeSnoekenRights()\">\r\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\r\n        Zoeken\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\r\n        Import\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\r\n        Products\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\r\n        Filters\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\r\n        EBO Koppel\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\r\n        Categories\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\r\n        Deeplink\r\n      </button>\r\n    </div>\r\n    <div class=\"cell right-block\">\r\n      <button mat-raised-button (click)=\"Home()\" class=\"link\">\r\n        Home\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"ResetCache()\" class=\"link\">\r\n        {{ ResetCacheTitle }}\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights()\" mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\r\n        Settings\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && DocumentsEnabled()\" mat-raised-button (click)=\"NavigateTo('documents')\" class=\"link\" [disabled]=\"IsActive('/documents')\">\r\n        Documents\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\r\n        Translate\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && ShowUploads()\" mat-raised-button (click)=\"NavigateTo('uploads')\" class=\"link\" [disabled]=\"IsActive('/uploads')\">\r\n        Files\r\n      </button>\r\n      <button *ngIf=\"authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('configurator')\" class=\"link\" [disabled]=\"IsActive('/configurator')\">\r\n        Configurator\r\n      </button>\r\n      <button *ngIf=\"authenticationService.AdministratorRights()\" mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\r\n        Users\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights() && HangfireEnabled()\" mat-raised-button (click)=\"NavigateTo('hangfire')\" class=\"link\" [disabled]=\"IsActive('/hangfire')\">\r\n        Hangfire\r\n      </button>\r\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\r\n        Uitloggen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: BeheerNavComponent, isStandalone: false, selector: "app-beheer-nav", ngImport: i0, template: "<div class=\"main-block\">\r\n  <div class=\"row\">\r\n    <div class=\"cell left-block\" *ngIf=\"authenticationService.DeTweeSnoekenRights()\">\r\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\r\n        Zoeken\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\r\n        Import\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\r\n        Products\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\r\n        Filters\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\r\n        EBO Koppel\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\r\n        Categories\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\r\n        Deeplink\r\n      </button>\r\n    </div>\r\n    <div class=\"cell right-block\">\r\n      <button mat-raised-button (click)=\"Home()\" class=\"link\">\r\n        Home\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"ResetCache()\" class=\"link\">\r\n        {{ GetResetCacheTitle() }}\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights()\" mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\r\n        Settings\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && DocumentsEnabled()\" mat-raised-button (click)=\"NavigateTo('documents')\" class=\"link\" [disabled]=\"IsActive('/documents')\">\r\n        Documents\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\r\n        Translate\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && ShowUploads()\" mat-raised-button (click)=\"NavigateTo('uploads')\" class=\"link\" [disabled]=\"IsActive('/uploads')\">\r\n        Files\r\n      </button>\r\n      <button *ngIf=\"authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('configurator')\" class=\"link\" [disabled]=\"IsActive('/configurator')\">\r\n        Configurator\r\n      </button>\r\n      <button *ngIf=\"authenticationService.AdministratorRights()\" mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\r\n        Users\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights() && HangfireEnabled()\" mat-raised-button (click)=\"NavigateTo('hangfire')\" class=\"link\" [disabled]=\"IsActive('/hangfire')\">\r\n        Hangfire\r\n      </button>\r\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\r\n        Uitloggen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BeheerNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-beheer-nav', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"main-block\">\r\n  <div class=\"row\">\r\n    <div class=\"cell left-block\" *ngIf=\"authenticationService.DeTweeSnoekenRights()\">\r\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\r\n        Zoeken\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\r\n        Import\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\r\n        Products\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\r\n        Filters\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\r\n        EBO Koppel\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\r\n        Categories\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\r\n        Deeplink\r\n      </button>\r\n    </div>\r\n    <div class=\"cell right-block\">\r\n      <button mat-raised-button (click)=\"Home()\" class=\"link\">\r\n        Home\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"ResetCache()\" class=\"link\">\r\n        {{ ResetCacheTitle }}\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights()\" mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\r\n        Settings\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && DocumentsEnabled()\" mat-raised-button (click)=\"NavigateTo('documents')\" class=\"link\" [disabled]=\"IsActive('/documents')\">\r\n        Documents\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\r\n        Translate\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && ShowUploads()\" mat-raised-button (click)=\"NavigateTo('uploads')\" class=\"link\" [disabled]=\"IsActive('/uploads')\">\r\n        Files\r\n      </button>\r\n      <button *ngIf=\"authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('configurator')\" class=\"link\" [disabled]=\"IsActive('/configurator')\">\r\n        Configurator\r\n      </button>\r\n      <button *ngIf=\"authenticationService.AdministratorRights()\" mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\r\n        Users\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights() && HangfireEnabled()\" mat-raised-button (click)=\"NavigateTo('hangfire')\" class=\"link\" [disabled]=\"IsActive('/hangfire')\">\r\n        Hangfire\r\n      </button>\r\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\r\n        Uitloggen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"] }]
+            args: [{ selector: 'app-beheer-nav', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"main-block\">\r\n  <div class=\"row\">\r\n    <div class=\"cell left-block\" *ngIf=\"authenticationService.DeTweeSnoekenRights()\">\r\n      <button mat-raised-button (click)=\"NavigateTo('searchproducts')\" class=\"link\" [disabled]=\"IsActive('/searchproducts')\">\r\n        Zoeken\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('importsets')\" class=\"link\" [disabled]=\"IsActive('/importsets')\">\r\n        Import\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('products')\" class=\"link\" [disabled]=\"IsActive('/products')\">\r\n        Products\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('filters')\" class=\"link\" [disabled]=\"IsActive('/filters')\">\r\n        Filters\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('ebokoppel')\" class=\"link\" [disabled]=\"IsActive('/ebokoppel')\">\r\n        EBO Koppel\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('categories')\" class=\"link\" [disabled]=\"IsActive('/categories')\">\r\n        Categories\r\n      </button>\r\n      <button mat-raised-button (click)=\"NavigateTo('deeplink')\" class=\"link\" [disabled]=\"IsActive('/deeplink')\">\r\n        Deeplink\r\n      </button>\r\n    </div>\r\n    <div class=\"cell right-block\">\r\n      <button mat-raised-button (click)=\"Home()\" class=\"link\">\r\n        Home\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"ResetCache()\" class=\"link\">\r\n        {{ GetResetCacheTitle() }}\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights()\" mat-raised-button (click)=\"NavigateTo('settings')\" class=\"link\" [disabled]=\"IsActive('/settings')\">\r\n        Settings\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && DocumentsEnabled()\" mat-raised-button (click)=\"NavigateTo('documents')\" class=\"link\" [disabled]=\"IsActive('/documents')\">\r\n        Documents\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('translate')\" class=\"link\" [disabled]=\"IsActive('/translate')\">\r\n        Translate\r\n      </button>\r\n      <button *ngIf=\"!authenticationService.ConfiguratorRights() && ShowUploads()\" mat-raised-button (click)=\"NavigateTo('uploads')\" class=\"link\" [disabled]=\"IsActive('/uploads')\">\r\n        Files\r\n      </button>\r\n      <button *ngIf=\"authenticationService.ConfiguratorRights()\" mat-raised-button (click)=\"NavigateTo('configurator')\" class=\"link\" [disabled]=\"IsActive('/configurator')\">\r\n        Configurator\r\n      </button>\r\n      <button *ngIf=\"authenticationService.AdministratorRights()\" mat-raised-button (click)=\"NavigateTo('users')\" class=\"link\" [disabled]=\"IsActive('/users')\">\r\n        Users\r\n      </button>\r\n      <button *ngIf=\"authenticationService.DeTweeSnoekenRights() && HangfireEnabled()\" mat-raised-button (click)=\"NavigateTo('hangfire')\" class=\"link\" [disabled]=\"IsActive('/hangfire')\">\r\n        Hangfire\r\n      </button>\r\n      <button mat-raised-button (click)=\"LogOff()\" class=\"link\">\r\n        Uitloggen\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["app-beheer-nav .main-block{width:100%;display:table}app-beheer-nav .main-block .left-block{text-align:left}app-beheer-nav .main-block .right-block{text-align:right}app-beheer-nav .main-block .row{display:table-row}app-beheer-nav .main-block .cell{display:table-cell}app-beheer-nav .main-block .link{margin:5px}body{background:url(/assets/bouwconnect-achtergrond.png) fixed}.full-width{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: AuthenticationService }, { type: i3.Router }, { type: FabrikantenApiClient }] });
 
 class BeheerMainComponent {
@@ -23803,6 +23812,20 @@ class FabFilterComponent {
                 this.SelectedOptionId = options[0].id;
             }
         }
+        if (this.SelectedOptionId == 0 && this._filter.defaultOption != undefined) {
+            var set = false;
+            if (this._filter.options != null) {
+                for (var i = 0; i < this._filter.options.length; i++) {
+                    if (this._filter.options[i].id == this._filter.defaultOption) {
+                        set = true;
+                        break;
+                    }
+                }
+            }
+            if (set) {
+                this.SelectedOptionId = this._filter.defaultOption;
+            }
+        }
     }
     filterchanged = new EventEmitter();
     selectoption = new EventEmitter();
@@ -23825,6 +23848,7 @@ class FabFilterComponent {
             filterid: this.filter.id,
             filteroptionid: this.SelectedOptionId
         });
+        //alert(this.SelectedOptionId);
         //this.FabrikantenService.SelectOption(this.filter.id, this.SelectedOptionId, this.ChangeDetectorRef, this.ActivatedRoute);
     }
     ResetSelection() {
@@ -23916,11 +23940,11 @@ class FabFilterComponent {
         return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabFilterComponent, deps: [{ token: FabrikantenService }, { token: TranslateService }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabFilterComponent, isStandalone: false, selector: "app-fab-filter", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged", selectoption: "selectoption" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\" (click)=\"Click()\" [ngClass]=\"{'selectoption': filter.selectedOption != 0 }\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label filter-name\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        <ng-container *ngIf=\"filter.blocksProductSelect || FabrikantenService.IsAProductSelected()\">\r\n          <span *ngIf=\"filter.blocksProductSelect || filter.required\">*&nbsp;</span>\r\n          <span *ngIf=\"filter.affectsOnlyBestek\"><sup>1</sup></span>\r\n        </ng-container>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <ng-container *ngFor=\"let option of filter.options\">\r\n          <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\r\n            <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n              <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                &nbsp;\r\n                &nbsp;\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ GetImagePath(option) }}\" class=\"filter-option-image\" />\r\n              </div>\r\n            </ng-container>\r\n            <span class=\"name-span\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}\r\n            </span>\r\n            <span *ngIf=\"filter.unit != null\" class=\"name-span unit-span\">\r\n              &nbsp;{{ filter.unit }}\r\n            </span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <p *ngIf=\"ShowDescription()\" class=\"description-block\">{{ GetDescription() }}</p>\r\n  </div>\r\n  <div *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n<div *ngFor=\"let description of filter.descriptions\" class=\"description-block\">\r\n  {{ description.description }}\r\n</div>\r\n", styles: ["app-fab-filter .description-block{padding-bottom:15px;font-size:12px}app-fab-filter .selectoption{cursor:pointer!important}app-fab-filter .mat-select-value{cursor:pointer!important}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.mat-select-min-line:first-letter{text-transform:capitalize}.filter-name:first-letter{text-transform:capitalize}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabFilterComponent, isStandalone: false, selector: "app-fab-filter", inputs: { filter: "filter" }, outputs: { filterchanged: "filterchanged", selectoption: "selectoption" }, ngImport: i0, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\" (click)=\"Click()\" [ngClass]=\"{'selectoption': filter.selectedOption != 0 }\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label filter-name\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        <ng-container *ngIf=\"filter.blocksProductSelect || FabrikantenService.IsAProductSelected()\">\r\n          <span *ngIf=\"filter.blocksProductSelect || filter.required\">*&nbsp;</span>\r\n          <span *ngIf=\"filter.affectsOnlyBestek\"><sup>1</sup></span>\r\n        </ng-container>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" [disabled]=\"IsDisabled()\">\r\n        <ng-container *ngFor=\"let option of filter.options\">\r\n          <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\" (click)=\"SelectOption()\">\r\n            <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n              <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                &nbsp;\r\n                &nbsp;\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ GetImagePath(option) }}\" class=\"filter-option-image\" />\r\n              </div>\r\n            </ng-container>\r\n            <span class=\"name-span\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}\r\n            </span>\r\n            <span *ngIf=\"filter.unit != null\" class=\"name-span unit-span\">\r\n              &nbsp;{{ filter.unit }}\r\n            </span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <p *ngIf=\"ShowDescription()\" class=\"description-block\">{{ GetDescription() }}</p>\r\n  </div>\r\n  <div *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n<div *ngFor=\"let description of filter.descriptions\" class=\"description-block\">\r\n  {{ description.description }}\r\n</div>\r\n", styles: ["app-fab-filter .description-block{padding-bottom:15px;font-size:12px}app-fab-filter .selectoption{cursor:pointer!important}app-fab-filter .mat-select-value{cursor:pointer!important}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.mat-select-min-line:first-letter{text-transform:capitalize}.filter-name:first-letter{text-transform:capitalize}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-filter', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\" (click)=\"Click()\" [ngClass]=\"{'selectoption': filter.selectedOption != 0 }\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label filter-name\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        <ng-container *ngIf=\"filter.blocksProductSelect || FabrikantenService.IsAProductSelected()\">\r\n          <span *ngIf=\"filter.blocksProductSelect || filter.required\">*&nbsp;</span>\r\n          <span *ngIf=\"filter.affectsOnlyBestek\"><sup>1</sup></span>\r\n        </ng-container>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" (selectionChange)=\"SelectOption()\" [disabled]=\"IsDisabled()\">\r\n        <ng-container *ngFor=\"let option of filter.options\">\r\n          <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\">\r\n            <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n              <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                &nbsp;\r\n                &nbsp;\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ GetImagePath(option) }}\" class=\"filter-option-image\" />\r\n              </div>\r\n            </ng-container>\r\n            <span class=\"name-span\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}\r\n            </span>\r\n            <span *ngIf=\"filter.unit != null\" class=\"name-span unit-span\">\r\n              &nbsp;{{ filter.unit }}\r\n            </span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <p *ngIf=\"ShowDescription()\" class=\"description-block\">{{ GetDescription() }}</p>\r\n  </div>\r\n  <div *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n<div *ngFor=\"let description of filter.descriptions\" class=\"description-block\">\r\n  {{ description.description }}\r\n</div>\r\n", styles: ["app-fab-filter .description-block{padding-bottom:15px;font-size:12px}app-fab-filter .selectoption{cursor:pointer!important}app-fab-filter .mat-select-value{cursor:pointer!important}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.mat-select-min-line:first-letter{text-transform:capitalize}.filter-name:first-letter{text-transform:capitalize}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"] }]
+            args: [{ selector: 'app-fab-filter', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"row\" *ngIf=\"!filter.hidden\">\r\n  <div class=\"select\" (click)=\"Click()\" [ngClass]=\"{'selectoption': filter.selectedOption != 0 }\">\r\n    <mat-form-field appearance=\"fill\" class=\"full-width\">\r\n      <mat-label class=\"select-mat-label filter-name\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Filter, TranslationSubCategory.Name, filter.id) }}\r\n        <ng-container *ngIf=\"filter.blocksProductSelect || FabrikantenService.IsAProductSelected()\">\r\n          <span *ngIf=\"filter.blocksProductSelect || filter.required\">*&nbsp;</span>\r\n          <span *ngIf=\"filter.affectsOnlyBestek\"><sup>1</sup></span>\r\n        </ng-container>\r\n      </mat-label>\r\n      <mat-select [(ngModel)]=\"SelectedOptionId\" [disabled]=\"IsDisabled()\">\r\n        <ng-container *ngFor=\"let option of filter.options\">\r\n          <mat-option [value]=\"option.id\" class=\"select-mat-option\" *ngIf=\"!option.hidden\" (click)=\"SelectOption()\">\r\n            <ng-container *ngIf=\"option.colour != null && option.colour != ''\">\r\n              <span [ngStyle]=\"{'background-color': option.colour}\" class=\"colour-preview\">\r\n                &nbsp;\r\n                &nbsp;\r\n              </span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"option.imagePath != null && option.imagePath != ''\">\r\n              <div class=\"filter-option-image-div\">\r\n                <img src=\"{{ GetImagePath(option) }}\" class=\"filter-option-image\" />\r\n              </div>\r\n            </ng-container>\r\n            <span class=\"name-span\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.FilterOption, TranslationSubCategory.Name, option.id) }}\r\n            </span>\r\n            <span *ngIf=\"filter.unit != null\" class=\"name-span unit-span\">\r\n              &nbsp;{{ filter.unit }}\r\n            </span>\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <p *ngIf=\"ShowDescription()\" class=\"description-block\">{{ GetDescription() }}</p>\r\n  </div>\r\n  <div *ngIf=\"GetSelectedOption() != null && GetSelectedOption().colour != null && GetSelectedOption().colour != ''\">\r\n    <div [ngStyle]=\"{'background-color': GetSelectedOption().colour}\" class=\"colour-preview-selected\">\r\n      &nbsp;\r\n      &nbsp;\r\n    </div>\r\n  </div>\r\n  <div class=\"reset\" *ngIf=\"filter.selectedOption != 0\" (click)=\"ResetSelection()\">\r\n    <mat-icon class=\"icon-position clear\" [inline]=\"true\">clear</mat-icon>\r\n  </div>\r\n</div>\r\n<div *ngFor=\"let description of filter.descriptions\" class=\"description-block\">\r\n  {{ description.description }}\r\n</div>\r\n", styles: ["app-fab-filter .description-block{padding-bottom:15px;font-size:12px}app-fab-filter .selectoption{cursor:pointer!important}app-fab-filter .mat-select-value{cursor:pointer!important}app-fab-filter .row{display:flex}app-fab-filter .full-width{width:100%}app-fab-filter .icon-position{margin-top:14px}app-fab-filter .select{flex:auto}app-fab-filter .reset{cursor:pointer;font-size:26px}app-fab-filter .colour-preview-selected{padding:5px;margin-left:5px;margin-top:8px;border:1px solid #000}.mat-select-min-line:first-letter{text-transform:capitalize}.filter-name:first-letter{text-transform:capitalize}.colour-preview{padding:5px;border:1px solid #000;line-height:20px;margin:10px}.name-span{line-height:52px}.select-mat-option .mat-option-text:first-letter{text-transform:capitalize}.select-mat-option .mat-option-text{display:flex}.mat-select-disabled .mat-select-arrow{display:none}.mat-select-panel-wrap{top:15px;position:relative}.mat-select-panel{max-width:100%!important}.filter-option-image{max-width:40px;max-height:40px}.filter-option-image-div{max-height:40px;padding-right:4px}\n"] }]
         }], ctorParameters: () => [{ type: FabrikantenService }, { type: TranslateService }, { type: i3.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { filter: [{
                 type: Input
             }], filterchanged: [{
@@ -24109,11 +24133,11 @@ class FabFormComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabFormComponent, deps: [{ token: i6$1.FormBuilder }, { token: FabrikantenApiClient }, { token: FabrikantenService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabFormComponent, isStandalone: false, selector: "app-fab-form", inputs: { form: "form", instanceid: "instanceid" }, outputs: { completed: "completed" }, ngImport: i0, template: "<form [formGroup]=\"FormGroup\">\n  <ng-container *ngFor=\"let cat of form.formCategories\">\n    <div class=\"form-cat-name\" [ngClass]=\"'cat-' + cat.id\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Category, cat.id) }}\n    </div>\n    <ng-container *ngFor=\"let row of cat.rows\">\n      <div class=\"form-cat-inputs displayflex\">\n        <div class=\"form-cat-input\" *ngFor=\"let input of row.inputs\">\n          <ng-container *ngIf=\"input.formInputType == 1 || input.formInputType == 6\">\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-input\">\n              <mat-label>\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\n              </mat-label>\n              <input matInput type=\"text\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\n              <mat-error></mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 2\">\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-select\">\n              <mat-label class=\"select-mat-label filter-name\">\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\n              </mat-label>\n              <mat-select formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\n                <ng-container *ngFor=\"let option of input.options\">\n                  <mat-option [value]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id)\" class=\"select-mat-option\">\n                    <span class=\"name-span\">\n                      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id) }}\n                    </span>\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 3 || input.formInputType == 7\">\n            <mat-checkbox class=\"form-cat-input-checkbox\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.checked\">\n              <span [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\n            </mat-checkbox>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 8\">\n            <span class=\"form-input-text\" [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 5\">\n            <mat-form-field class=\"full-width form-cat-input-textarea\">\n              <mat-label>\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\n              </mat-label>\n              <textarea matInput formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\" style=\"height: 100px;\"></textarea>\n            </mat-form-field>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"form-button-row\">\n    <div class=\"mandatory-text\" *ngIf=\"ShowMandatoryText()\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.RequiredField) }}\n    </div>\n    <button mat-raised-button (click)=\"Close()\" class=\"form-cat-close form-button-row-button\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Close) }}\n    </button>\n    <ng-container *ngIf=\"AllowSkip()\">\n      <button mat-raised-button (click)=\"Skip()\" class=\"form-cat-close form-button-row-button\">\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Skip) }}\n      </button>\n    </ng-container>\n    <button mat-raised-button (click)=\"OnSubmit()\" class=\"form-cat-submit form-button-row-button\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Send) }}\n    </button>\n  </div>\n</form>\n", styles: ["app-fab-form .mat-form-field-wrapper{padding-bottom:0}app-fab-form .mat-form-field-underline{bottom:0}app-fab-form .displayflex{display:flex}app-fab-form .form-cat-name{border-bottom:1px solid #000;font-size:20px;padding:5px}app-fab-form .form-cat-input{padding:3px;width:100%}app-fab-form .form-button-row{text-align:right}app-fab-form .form-button-row-button{margin:5px}app-fab-form .full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabFormComponent, isStandalone: false, selector: "app-fab-form", inputs: { form: "form", instanceid: "instanceid" }, outputs: { completed: "completed" }, ngImport: i0, template: "<form [formGroup]=\"FormGroup\">\r\n  <ng-container *ngFor=\"let cat of form.formCategories\">\r\n    <div class=\"form-cat-name\" [ngClass]=\"'cat-' + cat.id\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Category, cat.id) }}\r\n    </div>\r\n    <ng-container *ngFor=\"let row of cat.rows\">\r\n      <div class=\"form-cat-inputs displayflex\">\r\n        <div class=\"form-cat-input\" *ngFor=\"let input of row.inputs\">\r\n          <ng-container *ngIf=\"input.formInputType == 1 || input.formInputType == 6\">\r\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-input\">\r\n              <mat-label>\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\r\n              </mat-label>\r\n              <input matInput type=\"text\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\r\n              <mat-error></mat-error>\r\n            </mat-form-field>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 2\">\r\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-select\">\r\n              <mat-label class=\"select-mat-label filter-name\">\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\r\n              </mat-label>\r\n              <mat-select formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\r\n                <ng-container *ngFor=\"let option of input.options\">\r\n                  <mat-option [value]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id)\" class=\"select-mat-option\">\r\n                    <span class=\"name-span\">\r\n                      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id) }}\r\n                    </span>\r\n                  </mat-option>\r\n                </ng-container>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 3 || input.formInputType == 7\">\r\n            <mat-checkbox class=\"form-cat-input-checkbox\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.checked\">\r\n              <span [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\r\n            </mat-checkbox>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 8\">\r\n            <span class=\"form-input-text\" [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 5\">\r\n            <mat-form-field class=\"full-width form-cat-input-textarea\">\r\n              <mat-label>\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\r\n              </mat-label>\r\n              <textarea matInput formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\" style=\"height: 100px;\"></textarea>\r\n            </mat-form-field>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"form-button-row\">\r\n    <div class=\"mandatory-text\" *ngIf=\"ShowMandatoryText()\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.RequiredField) }}\r\n    </div>\r\n    <button mat-raised-button (click)=\"Close()\" class=\"form-cat-close form-button-row-button\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Close) }}\r\n    </button>\r\n    <ng-container *ngIf=\"AllowSkip()\">\r\n      <button mat-raised-button (click)=\"Skip()\" class=\"form-cat-close form-button-row-button\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Skip) }}\r\n      </button>\r\n    </ng-container>\r\n    <button mat-raised-button (click)=\"OnSubmit()\" class=\"form-cat-submit form-button-row-button\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Send) }}\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: ["app-fab-form .mat-form-field-wrapper{padding-bottom:0}app-fab-form .mat-form-field-underline{bottom:0}app-fab-form .displayflex{display:flex}app-fab-form .form-cat-name{border-bottom:1px solid #000;font-size:20px;padding:5px}app-fab-form .form-cat-input{padding:3px;width:100%}app-fab-form .form-button-row{text-align:right}app-fab-form .form-button-row-button{margin:5px}app-fab-form .full-width{width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-form', standalone: false, encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"FormGroup\">\n  <ng-container *ngFor=\"let cat of form.formCategories\">\n    <div class=\"form-cat-name\" [ngClass]=\"'cat-' + cat.id\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Category, cat.id) }}\n    </div>\n    <ng-container *ngFor=\"let row of cat.rows\">\n      <div class=\"form-cat-inputs displayflex\">\n        <div class=\"form-cat-input\" *ngFor=\"let input of row.inputs\">\n          <ng-container *ngIf=\"input.formInputType == 1 || input.formInputType == 6\">\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-input\">\n              <mat-label>\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\n              </mat-label>\n              <input matInput type=\"text\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\n              <mat-error></mat-error>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 2\">\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-select\">\n              <mat-label class=\"select-mat-label filter-name\">\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\n              </mat-label>\n              <mat-select formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\n                <ng-container *ngFor=\"let option of input.options\">\n                  <mat-option [value]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id)\" class=\"select-mat-option\">\n                    <span class=\"name-span\">\n                      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id) }}\n                    </span>\n                  </mat-option>\n                </ng-container>\n              </mat-select>\n            </mat-form-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 3 || input.formInputType == 7\">\n            <mat-checkbox class=\"form-cat-input-checkbox\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.checked\">\n              <span [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\n            </mat-checkbox>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 8\">\n            <span class=\"form-input-text\" [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\n          </ng-container>\n\n          <ng-container *ngIf=\"input.formInputType == 5\">\n            <mat-form-field class=\"full-width form-cat-input-textarea\">\n              <mat-label>\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\n              </mat-label>\n              <textarea matInput formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\" style=\"height: 100px;\"></textarea>\n            </mat-form-field>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <div class=\"form-button-row\">\n    <div class=\"mandatory-text\" *ngIf=\"ShowMandatoryText()\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.RequiredField) }}\n    </div>\n    <button mat-raised-button (click)=\"Close()\" class=\"form-cat-close form-button-row-button\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Close) }}\n    </button>\n    <ng-container *ngIf=\"AllowSkip()\">\n      <button mat-raised-button (click)=\"Skip()\" class=\"form-cat-close form-button-row-button\">\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Skip) }}\n      </button>\n    </ng-container>\n    <button mat-raised-button (click)=\"OnSubmit()\" class=\"form-cat-submit form-button-row-button\">\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Send) }}\n    </button>\n  </div>\n</form>\n", styles: ["app-fab-form .mat-form-field-wrapper{padding-bottom:0}app-fab-form .mat-form-field-underline{bottom:0}app-fab-form .displayflex{display:flex}app-fab-form .form-cat-name{border-bottom:1px solid #000;font-size:20px;padding:5px}app-fab-form .form-cat-input{padding:3px;width:100%}app-fab-form .form-button-row{text-align:right}app-fab-form .form-button-row-button{margin:5px}app-fab-form .full-width{width:100%}\n"] }]
+            args: [{ selector: 'app-fab-form', standalone: false, encapsulation: ViewEncapsulation.None, template: "<form [formGroup]=\"FormGroup\">\r\n  <ng-container *ngFor=\"let cat of form.formCategories\">\r\n    <div class=\"form-cat-name\" [ngClass]=\"'cat-' + cat.id\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Category, cat.id) }}\r\n    </div>\r\n    <ng-container *ngFor=\"let row of cat.rows\">\r\n      <div class=\"form-cat-inputs displayflex\">\r\n        <div class=\"form-cat-input\" *ngFor=\"let input of row.inputs\">\r\n          <ng-container *ngIf=\"input.formInputType == 1 || input.formInputType == 6\">\r\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-input\">\r\n              <mat-label>\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\r\n              </mat-label>\r\n              <input matInput type=\"text\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\r\n              <mat-error></mat-error>\r\n            </mat-form-field>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 2\">\r\n            <mat-form-field appearance=\"fill\" class=\"full-width form-cat-input-select\">\r\n              <mat-label class=\"select-mat-label filter-name\">\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\r\n              </mat-label>\r\n              <mat-select formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\">\r\n                <ng-container *ngFor=\"let option of input.options\">\r\n                  <mat-option [value]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id)\" class=\"select-mat-option\">\r\n                    <span class=\"name-span\">\r\n                      {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Option, option.id) }}\r\n                    </span>\r\n                  </mat-option>\r\n                </ng-container>\r\n              </mat-select>\r\n            </mat-form-field>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 3 || input.formInputType == 7\">\r\n            <mat-checkbox class=\"form-cat-input-checkbox\" formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.checked\">\r\n              <span [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\r\n            </mat-checkbox>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 8\">\r\n            <span class=\"form-input-text\" [innerHTML]=\"TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id)\"></span>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"input.formInputType == 5\">\r\n            <mat-form-field class=\"full-width form-cat-input-textarea\">\r\n              <mat-label>\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.Forms, TranslationSubCategory.Input, input.id) }}\r\n              </mat-label>\r\n              <textarea matInput formControlName=\"{{ input.name }}\" [(ngModel)]=\"input.value\" style=\"height: 100px;\"></textarea>\r\n            </mat-form-field>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"form-button-row\">\r\n    <div class=\"mandatory-text\" *ngIf=\"ShowMandatoryText()\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.RequiredField) }}\r\n    </div>\r\n    <button mat-raised-button (click)=\"Close()\" class=\"form-cat-close form-button-row-button\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Close) }}\r\n    </button>\r\n    <ng-container *ngIf=\"AllowSkip()\">\r\n      <button mat-raised-button (click)=\"Skip()\" class=\"form-cat-close form-button-row-button\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Skip) }}\r\n      </button>\r\n    </ng-container>\r\n    <button mat-raised-button (click)=\"OnSubmit()\" class=\"form-cat-submit form-button-row-button\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Send) }}\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: ["app-fab-form .mat-form-field-wrapper{padding-bottom:0}app-fab-form .mat-form-field-underline{bottom:0}app-fab-form .displayflex{display:flex}app-fab-form .form-cat-name{border-bottom:1px solid #000;font-size:20px;padding:5px}app-fab-form .form-cat-input{padding:3px;width:100%}app-fab-form .form-button-row{text-align:right}app-fab-form .form-button-row-button{margin:5px}app-fab-form .full-width{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i6$1.FormBuilder }, { type: FabrikantenApiClient }, { type: FabrikantenService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                 type: Input
             }], instanceid: [{
@@ -28783,6 +28807,9 @@ class FabFiltersInputComponent {
         }
         return false;
     }
+    ShowAccordion() {
+        return this.FabrikantenService.FabrikantenSettingsViewModel?.stepperFoldable == true;
+    }
     ShowAffectsOnlyBestek() {
         if (this.FabrikantenService.FabrikantenViewModel?.selectedProduct != null) {
             if (this.FabrikantenService.FabrikantenViewModel?.inputs != null) {
@@ -28829,11 +28856,11 @@ class FabFiltersInputComponent {
         return "disabled_af";
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabFiltersInputComponent, deps: [{ token: i3.Router }, { token: FabrikantenService }, { token: TranslateService }, { token: FabrikantenApiClient }, { token: ConfiguratorApiClient }, { token: AuthenticationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabFiltersInputComponent, isStandalone: false, selector: "fab-filters-input", inputs: { displayExtra: "displayExtra" }, ngImport: i0, template: "<div class=\"filter-view-margin\">\r\n  <div class=\"filter-view-header\">\r\n    <ng-container *ngIf=\"ShowInputCode()\">\r\n      <div>\r\n        <div class=\"filter-view-header-h1\">\r\n          <h1 class=\"h1-auto\">{{ GetHeaderName() }}</h1>\r\n          <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <app-fab-input-code></app-fab-input-code>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!ShowInputCode()\">\r\n      <div class=\"filter-view-header-h1\">\r\n        <h1>{{ GetHeaderName() }}</h1>\r\n      </div>\r\n      <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!ShowCategories()\">\r\n    <div class=\"inputs-container\" [ngClass]=\"{'two-columns': ShowTwoColumns() }\">\r\n      <ng-container *ngFor=\"let inputviewmodel of FabrikantenService.FabrikantenViewModel.inputs; index as i\">\r\n        <ng-container *ngIf=\"!inputviewmodel.extra || displayExtra\">\r\n          <app-fab-input [input]=\"inputviewmodel\" [ngClass]=\"{'col1': i % 2 == 0, 'col2': i % 2 == 1 }\"></app-fab-input>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowAffectsOnlyBestek()\">\r\n      <div class=\"affects-only-bestek\">\r\n        <span><sup>1</sup></span>\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.AffectsOnlyBestek) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"ShowCategories()\">\r\n    <mat-stepper orientation=\"vertical\" [linear]=\"true\" #stepper>\r\n      <ng-template matStepperIcon=\"edit\" let-index=\"index\">\r\n        {{ index + 1 }}\r\n      </ng-template>\r\n\r\n      <mat-step *ngFor=\"let cat of FabrikantenService.FabrikantenViewModel.filterCategories\" state=\"{{ cat.id }}\" [completed]=\"cat.completed\" [aria-labelledby]=\"GetHeaderAriaLabel(cat)\" [class.completed-step]=\"cat.completed\">\r\n        <ng-template matStepLabel>\r\n          <div class=\"step-name-div\">\r\n            <div class=\"step-name-completed\" *ngIf=\"cat.completed\">\r\n              <mat-icon class=\"step-name-completed-icon\">done</mat-icon>\r\n            </div>\r\n            <div class=\"step-name-name\">\r\n              {{ TranslateService.GetActiveValue(TranslationCategory.FilterCategory, TranslationSubCategory.Name, cat.id) }}\r\n            </div>\r\n            <div class=\"step-name-icon\" *ngIf=\"cat.icon != null\">\r\n              <span class=\"helper\"></span>\r\n              <img [src]=\"cat.icon\" class=\"filter-category-icon\" />\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-container *ngFor=\"let inputviewmodel of cat.inputs\">\r\n          <app-fab-input [input]=\"inputviewmodel\"></app-fab-input>\r\n        </ng-container>\r\n      </mat-step>\r\n    </mat-stepper>\r\n  </div>\r\n</div>\r\n", styles: ["fab-filters-input .mat-step-header{cursor:pointer!important}fab-filters-input .filter-view-header-h1{display:flex}fab-filters-input .h1-auto{flex:auto}fab-filters-input .two-columns{display:flex;flex-wrap:wrap}fab-filters-input .mat-step-header[aria-labelledby=disabled_af]{cursor:not-allowed!important;opacity:.6}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon{background-color:#000}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon-selected{background-color:#3f51b5}fab-filters-input .filter-view-header{display:flex}fab-filters-input .filter-view-header-h1{flex:auto;text-transform:capitalize}fab-filters-input .step-name-icon{height:54px;white-space:nowrap;text-align:center;margin:auto 0}fab-filters-input .step-name-completed{height:54px;display:flex;align-items:center}fab-filters-input .step-name-div{width:100%}fab-filters-input .filter-category-icon{height:48px;vertical-align:middle}fab-filters-input .mat-step-text-label{width:100%}fab-filters-input .mat-step-label{width:100%}fab-filters-input .step-name-name{line-height:56px}fab-filters-input .helper{display:inline-block;height:100%;vertical-align:middle}fab-filters-input .filter-view-margin{padding:10px}fab-filters-input .filter-view-header-reset{cursor:pointer}fab-filters-input .mat-vertical-content-container{padding-top:10px}fab-filters-input .mat-vertical-content{padding:0}fab-filters-input .step-name-div{display:flex}fab-filters-input .step-name-name{flex:auto}fab-filters-input .save-conf-div{padding:15px}fab-filters-input .save-conf-div mat-spinner{margin:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i8$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i8$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i8$2.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "component", type: FabInputCodeComponent, selector: "app-fab-input-code" }, { kind: "component", type: FabInputComponent, selector: "app-fab-input", inputs: ["input"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: FabFiltersInputComponent, isStandalone: false, selector: "fab-filters-input", inputs: { displayExtra: "displayExtra" }, ngImport: i0, template: "<div class=\"filter-view-margin\">\r\n  <div class=\"filter-view-header\">\r\n    <ng-container *ngIf=\"ShowInputCode()\">\r\n      <div>\r\n        <div class=\"filter-view-header-h1\">\r\n          <h1 class=\"h1-auto\">{{ GetHeaderName() }}</h1>\r\n          <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <app-fab-input-code></app-fab-input-code>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!ShowInputCode()\">\r\n      <div class=\"filter-view-header-h1\">\r\n        <h1>{{ GetHeaderName() }}</h1>\r\n      </div>\r\n      <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!ShowCategories()\">\r\n    <div class=\"inputs-container\" [ngClass]=\"{'two-columns': ShowTwoColumns() }\">\r\n      <ng-container *ngFor=\"let inputviewmodel of FabrikantenService.FabrikantenViewModel.inputs; index as i\">\r\n        <ng-container *ngIf=\"!inputviewmodel.extra || displayExtra\">\r\n          <app-fab-input [input]=\"inputviewmodel\" [ngClass]=\"{'col1': i % 2 == 0, 'col2': i % 2 == 1 }\"></app-fab-input>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowAffectsOnlyBestek()\">\r\n      <div class=\"affects-only-bestek\">\r\n        <span><sup>1</sup></span>\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.AffectsOnlyBestek) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"ShowCategories()\">\r\n    @if (ShowAccordion()) {\r\n    <mat-accordion [multi]=\"false\">\r\n      <mat-expansion-panel *ngFor=\"let cat of FabrikantenService.FabrikantenViewModel.filterCategories; let index = index\"\r\n                           [expanded]=\"index === 0\"\r\n                           [class.completed-step]=\"cat.completed\">\r\n        <mat-expansion-panel-header [attr.aria-label]=\"GetHeaderAriaLabel(cat)\">\r\n          <mat-panel-title>\r\n            <div class=\"step-name-div\">\r\n              <div class=\"accordion-step-number\">\r\n                {{ index + 1 }}\r\n              </div>\r\n\r\n              <div class=\"step-name-name\">\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.FilterCategory, TranslationSubCategory.Name, cat.id) }}\r\n              </div>\r\n\r\n              <div class=\"step-name-icon\"\r\n                   *ngIf=\"cat.icon != null\">\r\n                <span class=\"helper\"></span>\r\n\r\n                <img [src]=\"cat.icon\"\r\n                     class=\"filter-category-icon\"\r\n                     alt=\"\" />\r\n              </div>\r\n            </div>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n\r\n        <ng-container *ngFor=\"let inputviewmodel of cat.inputs\">\r\n          <app-fab-input [input]=\"inputviewmodel\"></app-fab-input>\r\n        </ng-container>\r\n      </mat-expansion-panel>\r\n    </mat-accordion>\r\n    } @else {\r\n    <mat-stepper orientation=\"vertical\" [linear]=\"true\" #stepper>\r\n      <ng-template matStepperIcon=\"edit\" let-index=\"index\">\r\n        {{ index + 1 }}\r\n      </ng-template>\r\n\r\n      <mat-step *ngFor=\"let cat of FabrikantenService.FabrikantenViewModel.filterCategories\" state=\"{{ cat.id }}\" [completed]=\"cat.completed\" [aria-labelledby]=\"GetHeaderAriaLabel(cat)\" [class.completed-step]=\"cat.completed\">\r\n        <ng-template matStepLabel>\r\n          <div class=\"step-name-div\">\r\n            <div class=\"step-name-completed\" *ngIf=\"cat.completed\">\r\n              <mat-icon class=\"step-name-completed-icon\">done</mat-icon>\r\n            </div>\r\n            <div class=\"step-name-name\">\r\n              {{ TranslateService.GetActiveValue(TranslationCategory.FilterCategory, TranslationSubCategory.Name, cat.id) }}\r\n            </div>\r\n            <div class=\"step-name-icon\" *ngIf=\"cat.icon != null\">\r\n              <span class=\"helper\"></span>\r\n              <img [src]=\"cat.icon\" class=\"filter-category-icon\" />\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-container *ngFor=\"let inputviewmodel of cat.inputs\">\r\n          <app-fab-input [input]=\"inputviewmodel\"></app-fab-input>\r\n        </ng-container>\r\n      </mat-step>\r\n    </mat-stepper>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["fab-filters-input .mat-step-header{cursor:pointer!important}fab-filters-input .filter-view-header-h1{display:flex}fab-filters-input .h1-auto{flex:auto}fab-filters-input .two-columns{display:flex;flex-wrap:wrap}fab-filters-input .mat-step-header[aria-labelledby=disabled_af]{cursor:not-allowed!important;opacity:.6}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon{background-color:#000}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon-selected{background-color:#3f51b5}fab-filters-input .filter-view-header{display:flex}fab-filters-input .filter-view-header-h1{flex:auto;text-transform:capitalize}fab-filters-input .step-name-icon{height:54px;white-space:nowrap;text-align:center;margin:auto 0}fab-filters-input .step-name-completed{height:54px;display:flex;align-items:center}fab-filters-input .step-name-div{width:100%}fab-filters-input .filter-category-icon{height:48px;vertical-align:middle}fab-filters-input .mat-step-text-label{width:100%}fab-filters-input .mat-step-label{width:100%}fab-filters-input .step-name-name{line-height:56px}fab-filters-input .helper{display:inline-block;height:100%;vertical-align:middle}fab-filters-input .filter-view-margin{padding:10px}fab-filters-input .filter-view-header-reset{cursor:pointer}fab-filters-input .mat-vertical-content-container{padding-top:10px}fab-filters-input .mat-vertical-content{padding:0}fab-filters-input .step-name-div{display:flex}fab-filters-input .step-name-name{flex:auto}fab-filters-input .save-conf-div{padding:15px}fab-filters-input .save-conf-div mat-spinner{margin:auto}fab-filters-input .accordion-step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-weight:500;line-height:56px;height:56px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i9$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i9$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i9$2.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "component", type: FabInputCodeComponent, selector: "app-fab-input-code" }, { kind: "component", type: FabInputComponent, selector: "app-fab-input", inputs: ["input"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabFiltersInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fab-filters-input', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"filter-view-margin\">\r\n  <div class=\"filter-view-header\">\r\n    <ng-container *ngIf=\"ShowInputCode()\">\r\n      <div>\r\n        <div class=\"filter-view-header-h1\">\r\n          <h1 class=\"h1-auto\">{{ GetHeaderName() }}</h1>\r\n          <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <app-fab-input-code></app-fab-input-code>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!ShowInputCode()\">\r\n      <div class=\"filter-view-header-h1\">\r\n        <h1>{{ GetHeaderName() }}</h1>\r\n      </div>\r\n      <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!ShowCategories()\">\r\n    <div class=\"inputs-container\" [ngClass]=\"{'two-columns': ShowTwoColumns() }\">\r\n      <ng-container *ngFor=\"let inputviewmodel of FabrikantenService.FabrikantenViewModel.inputs; index as i\">\r\n        <ng-container *ngIf=\"!inputviewmodel.extra || displayExtra\">\r\n          <app-fab-input [input]=\"inputviewmodel\" [ngClass]=\"{'col1': i % 2 == 0, 'col2': i % 2 == 1 }\"></app-fab-input>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowAffectsOnlyBestek()\">\r\n      <div class=\"affects-only-bestek\">\r\n        <span><sup>1</sup></span>\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.AffectsOnlyBestek) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"ShowCategories()\">\r\n    <mat-stepper orientation=\"vertical\" [linear]=\"true\" #stepper>\r\n      <ng-template matStepperIcon=\"edit\" let-index=\"index\">\r\n        {{ index + 1 }}\r\n      </ng-template>\r\n\r\n      <mat-step *ngFor=\"let cat of FabrikantenService.FabrikantenViewModel.filterCategories\" state=\"{{ cat.id }}\" [completed]=\"cat.completed\" [aria-labelledby]=\"GetHeaderAriaLabel(cat)\" [class.completed-step]=\"cat.completed\">\r\n        <ng-template matStepLabel>\r\n          <div class=\"step-name-div\">\r\n            <div class=\"step-name-completed\" *ngIf=\"cat.completed\">\r\n              <mat-icon class=\"step-name-completed-icon\">done</mat-icon>\r\n            </div>\r\n            <div class=\"step-name-name\">\r\n              {{ TranslateService.GetActiveValue(TranslationCategory.FilterCategory, TranslationSubCategory.Name, cat.id) }}\r\n            </div>\r\n            <div class=\"step-name-icon\" *ngIf=\"cat.icon != null\">\r\n              <span class=\"helper\"></span>\r\n              <img [src]=\"cat.icon\" class=\"filter-category-icon\" />\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-container *ngFor=\"let inputviewmodel of cat.inputs\">\r\n          <app-fab-input [input]=\"inputviewmodel\"></app-fab-input>\r\n        </ng-container>\r\n      </mat-step>\r\n    </mat-stepper>\r\n  </div>\r\n</div>\r\n", styles: ["fab-filters-input .mat-step-header{cursor:pointer!important}fab-filters-input .filter-view-header-h1{display:flex}fab-filters-input .h1-auto{flex:auto}fab-filters-input .two-columns{display:flex;flex-wrap:wrap}fab-filters-input .mat-step-header[aria-labelledby=disabled_af]{cursor:not-allowed!important;opacity:.6}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon{background-color:#000}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon-selected{background-color:#3f51b5}fab-filters-input .filter-view-header{display:flex}fab-filters-input .filter-view-header-h1{flex:auto;text-transform:capitalize}fab-filters-input .step-name-icon{height:54px;white-space:nowrap;text-align:center;margin:auto 0}fab-filters-input .step-name-completed{height:54px;display:flex;align-items:center}fab-filters-input .step-name-div{width:100%}fab-filters-input .filter-category-icon{height:48px;vertical-align:middle}fab-filters-input .mat-step-text-label{width:100%}fab-filters-input .mat-step-label{width:100%}fab-filters-input .step-name-name{line-height:56px}fab-filters-input .helper{display:inline-block;height:100%;vertical-align:middle}fab-filters-input .filter-view-margin{padding:10px}fab-filters-input .filter-view-header-reset{cursor:pointer}fab-filters-input .mat-vertical-content-container{padding-top:10px}fab-filters-input .mat-vertical-content{padding:0}fab-filters-input .step-name-div{display:flex}fab-filters-input .step-name-name{flex:auto}fab-filters-input .save-conf-div{padding:15px}fab-filters-input .save-conf-div mat-spinner{margin:auto}\n"] }]
+            args: [{ selector: 'fab-filters-input', standalone: false, encapsulation: ViewEncapsulation.None, template: "<div class=\"filter-view-margin\">\r\n  <div class=\"filter-view-header\">\r\n    <ng-container *ngIf=\"ShowInputCode()\">\r\n      <div>\r\n        <div class=\"filter-view-header-h1\">\r\n          <h1 class=\"h1-auto\">{{ GetHeaderName() }}</h1>\r\n          <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n            {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <app-fab-input-code></app-fab-input-code>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!ShowInputCode()\">\r\n      <div class=\"filter-view-header-h1\">\r\n        <h1>{{ GetHeaderName() }}</h1>\r\n      </div>\r\n      <div class=\"filter-view-header-reset\" (click)=\"ResetAllFilters()\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ResetFilters) }}\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!ShowCategories()\">\r\n    <div class=\"inputs-container\" [ngClass]=\"{'two-columns': ShowTwoColumns() }\">\r\n      <ng-container *ngFor=\"let inputviewmodel of FabrikantenService.FabrikantenViewModel.inputs; index as i\">\r\n        <ng-container *ngIf=\"!inputviewmodel.extra || displayExtra\">\r\n          <app-fab-input [input]=\"inputviewmodel\" [ngClass]=\"{'col1': i % 2 == 0, 'col2': i % 2 == 1 }\"></app-fab-input>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"ShowAffectsOnlyBestek()\">\r\n      <div class=\"affects-only-bestek\">\r\n        <span><sup>1</sup></span>\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.AffectsOnlyBestek) }}\r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <div *ngIf=\"ShowCategories()\">\r\n    @if (ShowAccordion()) {\r\n    <mat-accordion [multi]=\"false\">\r\n      <mat-expansion-panel *ngFor=\"let cat of FabrikantenService.FabrikantenViewModel.filterCategories; let index = index\"\r\n                           [expanded]=\"index === 0\"\r\n                           [class.completed-step]=\"cat.completed\">\r\n        <mat-expansion-panel-header [attr.aria-label]=\"GetHeaderAriaLabel(cat)\">\r\n          <mat-panel-title>\r\n            <div class=\"step-name-div\">\r\n              <div class=\"accordion-step-number\">\r\n                {{ index + 1 }}\r\n              </div>\r\n\r\n              <div class=\"step-name-name\">\r\n                {{ TranslateService.GetActiveValue(TranslationCategory.FilterCategory, TranslationSubCategory.Name, cat.id) }}\r\n              </div>\r\n\r\n              <div class=\"step-name-icon\"\r\n                   *ngIf=\"cat.icon != null\">\r\n                <span class=\"helper\"></span>\r\n\r\n                <img [src]=\"cat.icon\"\r\n                     class=\"filter-category-icon\"\r\n                     alt=\"\" />\r\n              </div>\r\n            </div>\r\n          </mat-panel-title>\r\n        </mat-expansion-panel-header>\r\n\r\n        <ng-container *ngFor=\"let inputviewmodel of cat.inputs\">\r\n          <app-fab-input [input]=\"inputviewmodel\"></app-fab-input>\r\n        </ng-container>\r\n      </mat-expansion-panel>\r\n    </mat-accordion>\r\n    } @else {\r\n    <mat-stepper orientation=\"vertical\" [linear]=\"true\" #stepper>\r\n      <ng-template matStepperIcon=\"edit\" let-index=\"index\">\r\n        {{ index + 1 }}\r\n      </ng-template>\r\n\r\n      <mat-step *ngFor=\"let cat of FabrikantenService.FabrikantenViewModel.filterCategories\" state=\"{{ cat.id }}\" [completed]=\"cat.completed\" [aria-labelledby]=\"GetHeaderAriaLabel(cat)\" [class.completed-step]=\"cat.completed\">\r\n        <ng-template matStepLabel>\r\n          <div class=\"step-name-div\">\r\n            <div class=\"step-name-completed\" *ngIf=\"cat.completed\">\r\n              <mat-icon class=\"step-name-completed-icon\">done</mat-icon>\r\n            </div>\r\n            <div class=\"step-name-name\">\r\n              {{ TranslateService.GetActiveValue(TranslationCategory.FilterCategory, TranslationSubCategory.Name, cat.id) }}\r\n            </div>\r\n            <div class=\"step-name-icon\" *ngIf=\"cat.icon != null\">\r\n              <span class=\"helper\"></span>\r\n              <img [src]=\"cat.icon\" class=\"filter-category-icon\" />\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-container *ngFor=\"let inputviewmodel of cat.inputs\">\r\n          <app-fab-input [input]=\"inputviewmodel\"></app-fab-input>\r\n        </ng-container>\r\n      </mat-step>\r\n    </mat-stepper>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: ["fab-filters-input .mat-step-header{cursor:pointer!important}fab-filters-input .filter-view-header-h1{display:flex}fab-filters-input .h1-auto{flex:auto}fab-filters-input .two-columns{display:flex;flex-wrap:wrap}fab-filters-input .mat-step-header[aria-labelledby=disabled_af]{cursor:not-allowed!important;opacity:.6}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon{background-color:#000}fab-filters-input .mat-step-header[aria-labelledby=enabled] .mat-step-icon-selected{background-color:#3f51b5}fab-filters-input .filter-view-header{display:flex}fab-filters-input .filter-view-header-h1{flex:auto;text-transform:capitalize}fab-filters-input .step-name-icon{height:54px;white-space:nowrap;text-align:center;margin:auto 0}fab-filters-input .step-name-completed{height:54px;display:flex;align-items:center}fab-filters-input .step-name-div{width:100%}fab-filters-input .filter-category-icon{height:48px;vertical-align:middle}fab-filters-input .mat-step-text-label{width:100%}fab-filters-input .mat-step-label{width:100%}fab-filters-input .step-name-name{line-height:56px}fab-filters-input .helper{display:inline-block;height:100%;vertical-align:middle}fab-filters-input .filter-view-margin{padding:10px}fab-filters-input .filter-view-header-reset{cursor:pointer}fab-filters-input .mat-vertical-content-container{padding-top:10px}fab-filters-input .mat-vertical-content{padding:0}fab-filters-input .step-name-div{display:flex}fab-filters-input .step-name-name{flex:auto}fab-filters-input .save-conf-div{padding:15px}fab-filters-input .save-conf-div mat-spinner{margin:auto}fab-filters-input .accordion-step-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-weight:500;line-height:56px;height:56px}\n"] }]
         }], ctorParameters: () => [{ type: i3.Router }, { type: FabrikantenService }, { type: TranslateService }, { type: FabrikantenApiClient }, { type: ConfiguratorApiClient }, { type: AuthenticationService }, { type: i0.ChangeDetectorRef }], propDecorators: { displayExtra: [{
                 type: Input
             }] } });
@@ -29490,965 +29517,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 args: ['viewercontainertoebehoren']
             }] } });
 
-/**
- * three.js renderer inspector (scene graph / render debugging), toggled from the
- * settings panel. Adapted from the digihuis threejs-viewer InspectorComponent.
- */
-class InspectorComponent extends ActorComponent {
-    enabled = false;
-    inspector;
-    constructor(owner, autoActivate = true) {
-        super(owner, autoActivate);
-    }
-    toggle() {
-        const renderer = this.getWorld().getRenderer();
-        if (this.enabled) {
-            this.inspector.domElement.remove();
-            renderer.inspector = new InspectorBase();
-            this.inspector = undefined;
-            this.enabled = false;
-        }
-        else {
-            this.inspector = new Inspector();
-            renderer.inspector = this.inspector;
-            this.inspector.init();
-            this.enabled = true;
-        }
-    }
-    destroyComponent() {
-        if (this.enabled) {
-            this.toggle();
-        }
-        super.destroyComponent();
-    }
-}
-
-/**
- * Performance stats overlay (FPS panel), toggled from the settings panel.
- * Adapted from the digihuis threejs-viewer StatsComponent.
- */
-class StatsComponent extends ActorComponent {
-    stats;
-    visible = false;
-    onPreRenderSubscription;
-    onPostRenderSubscription;
-    f2Handler;
-    constructor(owner, autoActivate = true, useF2Toggle = false) {
-        super(owner, autoActivate);
-        this.createStatsComponent();
-        this.onPreRenderSubscription = this.getWorld().onPreRenderObservable.subscribe(() => {
-            this.stats.begin();
-        });
-        this.onPostRenderSubscription = this.getWorld().onPostRenderObservable.subscribe(() => {
-            this.stats.end();
-        });
-        if (useF2Toggle) {
-            this.f2Handler = (e) => {
-                if (e.code === 'F2') {
-                    e.preventDefault();
-                    this.toggleVisiblity();
-                }
-            };
-            window.addEventListener('keydown', this.f2Handler);
-        }
-    }
-    toggleVisiblity() {
-        this.visible = !this.visible;
-        this.stats.dom.style.display = this.visible ? 'block' : 'none';
-    }
-    createStatsComponent() {
-        this.stats = new Stats();
-        this.stats.showPanel(0); // 0 = fps, 1 = ms, 2 = memory
-        this.stats.dom.style.position = 'absolute';
-        this.stats.dom.style.top = '10px';
-        this.stats.dom.style.left = '10px';
-        this.stats.dom.style.zIndex = '1000';
-        this.stats.dom.style.display = 'none';
-        this.getWorld().getEngineWrapper().appendChild(this.stats.dom);
-    }
-    destroyComponent() {
-        this.stats.dom.parentElement?.removeChild(this.stats.dom);
-        this.onPreRenderSubscription?.unsubscribe();
-        this.onPostRenderSubscription?.unsubscribe();
-        if (this.f2Handler) {
-            window.removeEventListener('keydown', this.f2Handler);
-            this.f2Handler = undefined;
-        }
-        super.destroyComponent();
-    }
-}
-
-/**
- * Player controller for the Fabrikanten 3D product viewer.
- *
- * Adds the engine's settings panel (top-right) with: graphics quality presets,
- * a performance stats toggle and a renderer inspector toggle. Adapted from the
- * digihuis ViewerController, without storeys dropdown, XR toolbar and input actions.
- */
-class FabThreeViewerController extends PlayerController {
-    settingsPanelComponentRef;
-    constructor() {
-        super();
-        this.name = 'Fab Viewer Controller';
-    }
-    start() {
-        super.start();
-        this.addSettingsPanel();
-        this.addGraphicPresetsSetting();
-        this.addStatsSetting();
-        this.addInspectorSetting();
-    }
-    addSettingsPanel() {
-        const appRef = InjectorService.get(ApplicationRef);
-        const environmentInjector = InjectorService.get(EnvironmentInjector);
-        const compRef = createComponent(SettingsPanelComponent, {
-            environmentInjector: appRef.injector,
-            elementInjector: environmentInjector,
-            bindings: []
-        });
-        this.settingsPanelComponentRef = compRef;
-        const host = compRef.location.nativeElement;
-        host.style.position = 'absolute';
-        host.style.top = '10px';
-        host.style.right = '10px';
-        this.getWorld().getEngineWrapper().appendChild(host);
-        appRef.attachView(compRef.hostView);
-        compRef.changeDetectorRef.detectChanges();
-    }
-    addGraphicPresetsSetting() {
-        const settingsService = InjectorService.get(SettingsService);
-        const graphicPresetsSetting = {
-            displayName: 'Grafische kwaliteit',
-            category: undefined,
-            settingType: {
-                selectedOptionValue: localStorage.getItem(VIEWER_GRAPHICS_PRESET_LOCALSTORAGE_KEY),
-                optionChanged: (option) => {
-                    localStorage.setItem(VIEWER_GRAPHICS_PRESET_LOCALSTORAGE_KEY, option.value);
-                    void this.getWorld().restart();
-                },
-                options: [
-                    {
-                        displayName: 'Laag',
-                        value: 'low'
-                    },
-                    {
-                        displayName: 'Middel',
-                        value: 'mid'
-                    },
-                    {
-                        displayName: 'Hoog',
-                        value: 'high'
-                    }
-                ]
-            }
-        };
-        settingsService.addSetting(graphicPresetsSetting);
-    }
-    addStatsSetting() {
-        const statsComponent = new StatsComponent(this, true, false);
-        const settingsService = InjectorService.get(SettingsService);
-        const fpsSetting = {
-            displayName: 'Toon prestatiespaneel',
-            category: undefined,
-            settingType: {
-                checked: false,
-                checkedChanged: (checked) => {
-                    fpsSetting.settingType.checked = checked;
-                    statsComponent.toggleVisiblity();
-                }
-            }
-        };
-        settingsService.addSetting(fpsSetting);
-    }
-    addInspectorSetting() {
-        const inspectorComponent = new InspectorComponent(this);
-        const settingsService = InjectorService.get(SettingsService);
-        const inspectorSetting = {
-            displayName: 'Toon inspector',
-            category: undefined,
-            settingType: {
-                checked: false,
-                checkedChanged: (checked) => {
-                    inspectorSetting.settingType.checked = checked;
-                    inspectorComponent.toggle();
-                }
-            }
-        };
-        settingsService.addSetting(inspectorSetting);
-    }
-    destroy() {
-        if (this.settingsPanelComponentRef) {
-            const host = this.settingsPanelComponentRef.location.nativeElement;
-            host.parentElement?.removeChild(host);
-            this.settingsPanelComponentRef.destroy();
-            this.settingsPanelComponentRef = undefined;
-        }
-        super.destroy();
-    }
-}
-
-/**
- * Type definitions for the legacy HDH WebGL JSON format, as produced by the server
- * in Fabrikanten3DViewModel.webGLJSON.
- *
- * Adapted from the digihuis/WoonConnect threejs-viewer module
- * (src/app/modules/threejs/include/LegacyFragment.ts).
- */
-/** Number of floats per vertex for each vertex data layout. */
-var LegacyVertexDataLayout;
-(function (LegacyVertexDataLayout) {
-    LegacyVertexDataLayout[LegacyVertexDataLayout["Position"] = 3] = "Position";
-    LegacyVertexDataLayout[LegacyVertexDataLayout["PositionUv"] = 5] = "PositionUv";
-    LegacyVertexDataLayout[LegacyVertexDataLayout["PositionNormal"] = 6] = "PositionNormal";
-    LegacyVertexDataLayout[LegacyVertexDataLayout["PositionNormalUv"] = 8] = "PositionNormalUv";
-    LegacyVertexDataLayout[LegacyVertexDataLayout["PositionNormalUvTangent"] = 11] = "PositionNormalUvTangent";
-})(LegacyVertexDataLayout || (LegacyVertexDataLayout = {}));
-
-/**
- * Converts the legacy HDH WebGL JSON (Fabrikanten3DViewModel.webGLJSON) into a three.js
- * scene graph. View-only: builds geometry, materials and textures; no selection logic.
- *
- * Conversion logic is adapted from the digihuis/WoonConnect HdhToThreejsConverter
- * (threejs-viewer/hdhToThree), with the server fragment-fetch pipeline removed:
- * FabrikantenCore already has the complete model as a single JSON string.
- */
-class FabWebglJsonConverter extends Actor {
-    /**
-     * HDH (Z-up) to three.js (Y-up) axis conversion (column-major):
-     * threeX = hdhX, threeY = hdhZ, threeZ = -hdhY.
-     */
-    hdhToThree = new Matrix4().fromArray([
-        1, 0, 0, 0, // column 0
-        0, 0, -1, 0, // column 1 (hdh Y -> -three Z)
-        0, 1, 0, 0, // column 2 (hdh Z -> three Y)
-        0, 0, 0, 1
-    ]);
-    /** Shared glass material, provided by the world (see FabThreeViewerWorld). */
-    glassMaterial = null;
-    modelRoot;
-    /** Texture cache, keyed by texture path. Kept across model rebuilds. */
-    textures = new Map();
-    /** Texture paths that failed to load; do not retry, fall back to flat colors. */
-    failedTextures = new Set();
-    /** Material cache for the currently loaded model. Disposed on rebuild. */
-    materialCache = new Map();
-    pendingJson;
-    inflightJson;
-    lastLoadedJson;
-    isActorStarted = false;
-    /** Incremented on every load; async loads abort when a newer one started. */
-    loadGeneration = 0;
-    onModelLoadedSubject = new Subject();
-    /** Emits the world-space bounding box of the model after each (re)build. */
-    onModelLoaded$ = this.onModelLoadedSubject.asObservable();
-    constructor() {
-        super();
-        this.name = 'Fab WebGL JSON converter';
-        this.matrixAutoUpdate = false;
-    }
-    start() {
-        super.start();
-        this.isActorStarted = true;
-        void this.processPending();
-    }
-    /** Sets the shared glass material used for transparent items. */
-    setGlassMaterial(material) {
-        this.glassMaterial = material;
-    }
-    /**
-     * Queues a webGLJSON model for loading. Safe to call repeatedly: identical JSON is
-     * ignored, and a newer call supersedes any load still in progress.
-     */
-    queueModel(webGLJSON) {
-        if (webGLJSON === this.lastLoadedJson && this.modelRoot !== undefined && this.pendingJson === undefined) {
-            return;
-        }
-        // The same model is already being built: don't restart the build.
-        if (webGLJSON === this.inflightJson) {
-            return;
-        }
-        this.pendingJson = webGLJSON;
-        void this.processPending();
-    }
-    async processPending() {
-        if (!this.isActorStarted || !this.hasWorld() || this.pendingJson === undefined) {
-            return;
-        }
-        const json = this.pendingJson;
-        this.pendingJson = undefined;
-        const generation = ++this.loadGeneration;
-        this.inflightJson = json;
-        try {
-            await this.buildModel(json, generation);
-        }
-        catch (error) {
-            console.error('FabWebglJsonConverter: failed to build model from webGLJSON.', error);
-        }
-        finally {
-            if (this.inflightJson === json) {
-                this.inflightJson = undefined;
-            }
-        }
-    }
-    async buildModel(json, generation) {
-        const parsed = JSON.parse(json);
-        // Defensive: accept both a single fragment object and an array of fragments.
-        const fragments = (Array.isArray(parsed) ? parsed : [parsed]);
-        // Load all referenced textures up front (cached across rebuilds).
-        const textureNames = new Set();
-        for (const fragment of fragments) {
-            fragment?.texNamen?.forEach((name) => textureNames.add(name));
-        }
-        await this.loadTextures([...textureNames]);
-        // A newer load superseded this one while textures were loading.
-        if (generation !== this.loadGeneration) {
-            return;
-        }
-        this.removeModel();
-        const root = new Group();
-        root.name = 'FabWebglModel';
-        root.matrixAutoUpdate = false;
-        for (const fragment of fragments) {
-            if (fragment == null || fragment.itemsOpaak == null) {
-                console.warn('FabWebglJsonConverter: skipping fragment without itemsOpaak.', fragment);
-                continue;
-            }
-            this.addLegacyFragment(root, fragment);
-        }
-        this.modelRoot = root;
-        this.add(root);
-        this.lastLoadedJson = json;
-        root.updateMatrixWorld(true);
-        const boundingBox = new Box3().setFromObject(root);
-        this.getWorld().onSceneChanged.next();
-        this.onModelLoadedSubject.next(boundingBox);
-    }
-    async loadTextures(textureNames) {
-        const loader = new TextureLoader();
-        const toLoad = textureNames.filter(name => !this.textures.has(name) && !this.failedTextures.has(name));
-        await Promise.all(toLoad.map(async (name) => {
-            try {
-                // The legacy viewer assigns the texture path directly to Image.src,
-                // so relative paths resolve against the document base. TextureLoader does the same.
-                const texture = await loader.loadAsync(name);
-                texture.wrapS = RepeatWrapping;
-                texture.wrapT = RepeatWrapping;
-                texture.minFilter = LinearMipMapLinearFilter;
-                texture.magFilter = LinearFilter;
-                texture.anisotropy = GraphicsScalabilityConfigsManager.activeGraphicsScalabilityConfig.textureAnisotropy;
-                this.textures.set(name, texture);
-            }
-            catch (error) {
-                this.failedTextures.add(name);
-                console.warn(`FabWebglJsonConverter: failed to load texture "${name}", falling back to flat color.`, error);
-            }
-        }));
-    }
-    addLegacyFragment(root, fragment) {
-        const instanceMatrices = this.fragmentTransformations(fragment);
-        const texturePaths = fragment.texNamen ?? [];
-        instanceMatrices.forEach((instanceMatrix) => {
-            const fragmentGroup = new Group();
-            fragmentGroup.name = `Fragment ${fragment.ID}`;
-            fragmentGroup.matrixAutoUpdate = false;
-            fragmentGroup.matrix.copy(instanceMatrix);
-            fragment.itemsOpaak?.forEach((item) => {
-                this.addLegacyFragmentItem(fragment, item, texturePaths, false, fragmentGroup);
-            });
-            fragment.itemsTransparant?.forEach((item) => {
-                this.addLegacyFragmentItem(fragment, item, texturePaths, true, fragmentGroup);
-            });
-            root.add(fragmentGroup);
-        });
-    }
-    /** Returns the instance matrices for a fragment, converted from HDH to three.js space. */
-    fragmentTransformations(fragment) {
-        const matrices = [];
-        if (fragment.transLijst && fragment.transLijst.aantal > 0 && fragment.transLijst.transMats?.length) {
-            for (const raw of fragment.transLijst.transMats) {
-                const parsed = this.parseHdhMatrix(raw);
-                matrices.push(new Matrix4().multiplyMatrices(this.hdhToThree, parsed));
-            }
-        }
-        else {
-            // No transformation list: apply only the axis conversion; geometry is scaled on the mesh.
-            matrices.push(new Matrix4().copy(this.hdhToThree));
-        }
-        return matrices;
-    }
-    /** Parses an HDH 4x4 matrix (detects row-major layout) and converts translation mm -> m. */
-    parseHdhMatrix(raw) {
-        const arr = raw.slice();
-        const looksRowMajor = (Math.abs(arr[3]) > 1e-6 || Math.abs(arr[7]) > 1e-6 || Math.abs(arr[11]) > 1e-6) &&
-            arr[12] === 0 && arr[13] === 0 && arr[14] === 0;
-        const matrix = new Matrix4().fromArray(arr);
-        if (looksRowMajor) {
-            matrix.transpose();
-        }
-        // mm -> m: only the translation; the geometry itself is scaled on the mesh.
-        matrix.elements[12] /= 1000;
-        matrix.elements[13] /= 1000;
-        matrix.elements[14] /= 1000;
-        return matrix;
-    }
-    itemLayout(item) {
-        if (item.type === 2) {
-            return (item.tableau != null || item.bumpmap != null)
-                ? LegacyVertexDataLayout.PositionUv
-                : LegacyVertexDataLayout.Position;
-        }
-        if (item.type === 3) {
-            if (item.bumpmap != null) {
-                return LegacyVertexDataLayout.PositionNormalUvTangent;
-            }
-            return (item.tableau != null)
-                ? LegacyVertexDataLayout.PositionNormalUv
-                : LegacyVertexDataLayout.PositionNormal;
-        }
-        return undefined;
-    }
-    addLegacyFragmentItem(fragment, item, texturePaths, isTransparent, parent) {
-        // Points (0) and lines (1) are not rendered in 3D.
-        if (item.type === 0 || item.type === 1) {
-            return;
-        }
-        const layout = this.itemLayout(item);
-        if (layout === undefined || item.vertexData == null || item.vertexData.length === 0) {
-            return;
-        }
-        const material = this.resolveMaterial(fragment, item, texturePaths, isTransparent);
-        if (material === null) {
-            // Opacity-0 "air" items (e.g. cavities) are present in the geometry but irrelevant for rendering.
-            return;
-        }
-        const geometry = this.buildGeometry(item, layout);
-        if (geometry === null) {
-            return;
-        }
-        const mesh = new Mesh(geometry, material);
-        if (material === this.glassMaterial) {
-            // Glass neither casts nor receives shadows.
-            mesh.castShadow = false;
-            mesh.receiveShadow = false;
-        }
-        else {
-            mesh.castShadow = GraphicsScalabilityConfigsManager.activeGraphicsScalabilityConfig.enableCastShadows;
-            mesh.receiveShadow = GraphicsScalabilityConfigsManager.activeGraphicsScalabilityConfig.enableReceiveShadows;
-        }
-        // Geometry coordinates are in mm; the instance matrix translation is already in m.
-        mesh.scale.multiplyScalar(0.001);
-        mesh.matrixAutoUpdate = false;
-        mesh.updateMatrix();
-        parent.add(mesh);
-    }
-    buildGeometry(item, layout) {
-        const vertexData = item.vertexData;
-        const stride = layout;
-        const sourceVertexCount = Math.floor(vertexData.length / stride);
-        if (sourceVertexCount === 0) {
-            return null;
-        }
-        // Layouts without per-vertex normals are single-sided planes: generate backfaces.
-        const createBackfaces = layout === LegacyVertexDataLayout.Position || layout === LegacyVertexDataLayout.PositionUv;
-        const vertexCount = createBackfaces ? sourceVertexCount * 2 : sourceVertexCount;
-        const positions = new Float32Array(vertexCount * 3);
-        const normals = new Float32Array(vertexCount * 3);
-        const uvs = new Float32Array(vertexCount * 2);
-        // Per-item plane normal for layouts without per-vertex normals.
-        const planeNormal = item.normaal ?? [0, 0, 1];
-        const hasIndices = item.vertexIndices != null && item.vertexIndices.length > 0;
-        let offset = 0;
-        let vertexIndex = 0;
-        while (offset + stride <= vertexData.length) {
-            positions[3 * vertexIndex + 0] = vertexData[offset + 0];
-            positions[3 * vertexIndex + 1] = vertexData[offset + 1];
-            positions[3 * vertexIndex + 2] = vertexData[offset + 2];
-            if (createBackfaces) {
-                // Backface vertex index: with indexed geometry vertices are duplicated 1:1 (winding is
-                // reversed in the index buffer); with triangle soup the order within each triangle is reversed.
-                const backfaceIndex = hasIndices
-                    ? vertexIndex + sourceVertexCount
-                    : vertexIndex + sourceVertexCount + 2 * (1 - (vertexIndex % 3));
-                positions[3 * backfaceIndex + 0] = vertexData[offset + 0];
-                positions[3 * backfaceIndex + 1] = vertexData[offset + 1];
-                positions[3 * backfaceIndex + 2] = vertexData[offset + 2];
-                normals[3 * vertexIndex + 0] = planeNormal[0];
-                normals[3 * vertexIndex + 1] = planeNormal[1];
-                normals[3 * vertexIndex + 2] = planeNormal[2];
-                normals[3 * backfaceIndex + 0] = -planeNormal[0];
-                normals[3 * backfaceIndex + 1] = -planeNormal[1];
-                normals[3 * backfaceIndex + 2] = -planeNormal[2];
-                if (layout === LegacyVertexDataLayout.PositionUv) {
-                    uvs[2 * vertexIndex + 0] = vertexData[offset + 3];
-                    uvs[2 * vertexIndex + 1] = vertexData[offset + 4];
-                    uvs[2 * backfaceIndex + 0] = vertexData[offset + 3];
-                    uvs[2 * backfaceIndex + 1] = vertexData[offset + 4];
-                }
-            }
-            else {
-                normals[3 * vertexIndex + 0] = vertexData[offset + 3];
-                normals[3 * vertexIndex + 1] = vertexData[offset + 4];
-                normals[3 * vertexIndex + 2] = vertexData[offset + 5];
-                if (layout !== LegacyVertexDataLayout.PositionNormal) {
-                    uvs[2 * vertexIndex + 0] = vertexData[offset + 6];
-                    uvs[2 * vertexIndex + 1] = vertexData[offset + 7];
-                }
-            }
-            vertexIndex++;
-            offset += stride;
-        }
-        const geometry = new BufferGeometry();
-        geometry.setAttribute('position', new BufferAttribute(positions, 3));
-        geometry.setAttribute('normal', new BufferAttribute(normals, 3));
-        geometry.setAttribute('uv', new BufferAttribute(uvs, 2));
-        if (hasIndices) {
-            const indices = item.vertexIndices;
-            if (createBackfaces) {
-                // Front faces keep the original indices; backfaces reference the duplicated
-                // vertices with reversed winding order.
-                const extended = new Array(indices.length * 2);
-                for (let i = 0; i < indices.length; i += 3) {
-                    extended[i + 0] = indices[i + 0];
-                    extended[i + 1] = indices[i + 1];
-                    extended[i + 2] = indices[i + 2];
-                    extended[indices.length + i + 0] = indices[i + 2] + sourceVertexCount;
-                    extended[indices.length + i + 1] = indices[i + 1] + sourceVertexCount;
-                    extended[indices.length + i + 2] = indices[i + 0] + sourceVertexCount;
-                }
-                geometry.setIndex(extended);
-            }
-            else {
-                geometry.setIndex(indices);
-            }
-        }
-        return geometry;
-    }
-    /**
-     * Resolves the material for an item. Returns null when the item should be skipped
-     * (fully transparent "air" geometry).
-     */
-    resolveMaterial(fragment, item, texturePaths, isTransparent) {
-        const color = fragment.kleurBronnen?.[item.kleur];
-        const opacity = color != null ? color[3] / 255 : 1;
-        if (isTransparent) {
-            if (opacity === 0) {
-                // Air / gas elements (e.g. the cavity in a cavity wall): skip entirely.
-                return null;
-            }
-            /* The only transparent elements with non-zero opacity in practice are glass.
-               A shared physical glass material (with env reflections) looks much better
-               than a plain transparent color material. */
-            if (this.glassMaterial !== null) {
-                return this.glassMaterial;
-            }
-        }
-        const albedoPath = item.tableau != null ? texturePaths[item.tableau] : undefined;
-        const bumpPath = item.bumpmap != null ? texturePaths[item.bumpmap] : undefined;
-        const cacheKey = `${fragment.ID}|k${item.kleur}|t${albedoPath ?? ''}|b${bumpPath ?? ''}` +
-            `|s${item.schitteringMat ?? ''}|m${item.metaalachtigheid ?? ''}|tr${isTransparent ? 1 : 0}`;
-        const cached = this.materialCache.get(cacheKey);
-        if (cached !== undefined) {
-            return cached;
-        }
-        const material = new MeshStandardMaterial();
-        const albedoTexture = albedoPath !== undefined ? this.textures.get(albedoPath) : undefined;
-        if (albedoTexture !== undefined) {
-            albedoTexture.colorSpace = SRGBColorSpace;
-            material.map = albedoTexture;
-            material.color.set(0xffffff);
-            // Legacy viewer convention: texture names containing "transparant" carry an alpha channel.
-            if (albedoPath.toLowerCase().includes('transparant')) {
-                material.transparent = true;
-            }
-            material.alphaTest = 0.5;
-        }
-        else if (color != null) {
-            material.color.setRGB(color[0] / 255, color[1] / 255, color[2] / 255, SRGBColorSpace);
-            material.opacity = opacity;
-            if (isTransparent && opacity < 1) {
-                // Fallback when no glass material is available (engine still booting).
-                material.transparent = true;
-            }
-        }
-        const bumpTexture = bumpPath !== undefined ? this.textures.get(bumpPath) : undefined;
-        if (bumpTexture !== undefined) {
-            // Files named "*bumpmap*" are grayscale height maps; everything else is a normal map.
-            if (bumpPath.toLowerCase().includes('bumpmap')) {
-                material.bumpMap = bumpTexture;
-            }
-            else {
-                material.normalMap = bumpTexture;
-            }
-        }
-        if (isTransparent) {
-            // As little blur as possible behind regular glass.
-            material.roughness = 0;
-        }
-        else if (item.schitteringMat !== undefined) {
-            /* Real-world materials are never perfectly smooth: a minimum roughness
-               avoids overly bright specular reflections. */
-            const minimumRoughness = 0.45;
-            material.roughness = Math.max(minimumRoughness, 1 - item.schitteringMat);
-        }
-        material.metalness = item.metaalachtigheid ?? 0;
-        this.materialCache.set(cacheKey, material);
-        return material;
-    }
-    /** Removes the current model and disposes its geometries and per-model materials. */
-    removeModel() {
-        if (this.modelRoot === undefined) {
-            return;
-        }
-        const root = this.modelRoot;
-        this.modelRoot = undefined;
-        this.lastLoadedJson = undefined;
-        root.traverse((object) => {
-            const mesh = object;
-            if (mesh.isMesh === true) {
-                mesh.geometry?.dispose();
-            }
-        });
-        // Cached materials are per-model; textures are kept (cached across rebuilds).
-        this.materialCache.forEach(material => material.dispose());
-        this.materialCache.clear();
-        this.remove(root);
-        root.clear();
-        if (this.hasWorld()) {
-            this.getWorld().onSceneChanged.next();
-        }
-    }
-    destroy() {
-        // Invalidate any in-flight load.
-        this.loadGeneration++;
-        this.pendingJson = undefined;
-        this.removeModel();
-        this.textures.forEach(texture => texture.dispose());
-        this.textures.clear();
-        this.failedTextures.clear();
-        this.onModelLoadedSubject.complete();
-        super.destroy();
-    }
-}
-
-/**
- * View-only game mode for the Fabrikanten 3D product viewer.
- *
- * OrbitPawn: orbit, pan and zoom only — no input actions, no selection. The
- * FabThreeViewerController adds the settings panel (graphics presets, stats,
- * inspector). Creates the JSON converter and frames the camera around the
- * model whenever it (re)loads.
- */
-class FabThreeViewerMode extends GameModeBase {
-    /**
-     * Default view direction towards the model, matching the legacy viewer's
-     * "kijkrichting" [0.500, 0.744, -0.442] (HDH Z-up), converted to three.js Y-up.
-     */
-    static CAMERA_OFFSET_DIRECTION = new Vector3(-0.5002, 0.4424, 0.7444).normalize();
-    converter;
-    modelLoadedSubscription;
-    constructor() {
-        super(GameStateBase, FabThreeViewerController, OrbitPawn);
-        this.name = 'Fab Viewer Mode';
-    }
-    init() {
-        super.init();
-        const world = this.getWorld();
-        // Sensible default pose until the model bounding box is known.
-        this.pawn.setCameraPositionAndLookAt(new Vector3(-3, 2.5, 4.5), new Vector3(0, 0, 0));
-        const converter = new FabWebglJsonConverter();
-        this.converter = converter;
-        world.addActor(converter);
-        this.modelLoadedSubscription?.unsubscribe();
-        this.modelLoadedSubscription = converter.onModelLoaded$.subscribe((box) => {
-            this.frameModel(box);
-        });
-        // Registers the glass material on the converter and re-queues the last model.
-        world.registerConverter(converter);
-    }
-    /**
-     * Positions the orbit camera so the whole model is in view (the equivalent of the
-     * legacy viewer's "zetZoomGeheel"), and adapts near/far planes and zoom limits
-     * to the model size.
-     */
-    frameModel(box) {
-        if (box.isEmpty()) {
-            return;
-        }
-        const pawn = this.pawn;
-        const camera = pawn.getCamera();
-        if (!(camera instanceof PerspectiveCamera)) {
-            return;
-        }
-        const center = box.getCenter(new Vector3());
-        const radius = Math.max(box.getSize(new Vector3()).length() / 2, 0.05);
-        // Fit the bounding sphere in both the vertical and horizontal field of view.
-        const verticalFov = MathUtils.degToRad(camera.fov);
-        const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * camera.aspect);
-        const fitFov = Math.min(verticalFov, horizontalFov);
-        const distance = (radius / Math.sin(fitFov / 2)) * 1.05;
-        const position = center.clone().addScaledVector(FabThreeViewerMode.CAMERA_OFFSET_DIRECTION, distance);
-        camera.near = Math.max(radius / 100, 0.001);
-        camera.far = Math.max(distance + radius * 20, 100);
-        camera.updateProjectionMatrix();
-        pawn.setCameraPositionAndLookAt(position, center);
-        const orbitControls = pawn.getOrbitControls();
-        if (orbitControls) {
-            orbitControls.minDistance = radius * 0.05;
-            orbitControls.maxDistance = radius * 20;
-            orbitControls.update();
-        }
-        this.getWorld().dispatchOnCameraMatrixChanged();
-    }
-    destroy() {
-        this.modelLoadedSubscription?.unsubscribe();
-        this.modelLoadedSubscription = undefined;
-        this.converter = undefined;
-        super.destroy();
-    }
-}
-
-/**
- * View-only world for the Fabrikanten 3D product viewer.
- *
- * Sets up sun + ambient lighting with shadows and a generated PBR room environment
- * (reflections for glass/metal). Lighting adapted from the digihuis ViewerWorld,
- * without skybox, day/night cycle, settings panel, selection and demo actors.
- */
-class FabThreeViewerWorld extends World {
-    /** Normalized sun direction (from the model towards the sun). */
-    static SUN_DIRECTION = new Vector3(-5, 20, 5).normalize();
-    /** Served from src/assets (see angular.json); relative so it respects the base href. */
-    static GLASS_HDRI_URL = 'assets/hdri/urban_courtyard_1k.hdr';
-    sun;
-    ambient;
-    environmentRenderTarget;
-    glassEnvironmentRenderTarget;
-    converter;
-    lastJson;
-    lastModelBox;
-    sceneChangedSubscription;
-    modelLoadedSubscription;
-    /** Shared glass material for transparent items (env map assigned once generated). */
-    glassMaterial = new MeshPhysicalMaterial({
-        color: 0xffffff,
-        metalness: 0.1,
-        roughness: 0,
-        transmission: 1.0,
-        transparent: true,
-        opacity: 1.0,
-        ior: 1,
-        thickness: 0,
-        specularIntensity: 0.02,
-        attenuationDistance: 0.0001,
-        attenuationColor: 0xffffff
-    });
-    init(engineWrapper, rendererCanvas, renderPipeline, renderer, onWindowResize, onPreRender, onPostRender, useWebGlFallback) {
-        super.init(engineWrapper, rendererCanvas, renderPipeline, renderer, onWindowResize, onPreRender, onPostRender, useWebGlFallback);
-        // View-only: no object selection.
-        this.objectSelector?.deactivate();
-        // Static scene: shadows are only re-rendered when the scene actually changes.
-        this.sceneChangedSubscription?.unsubscribe();
-        this.sceneChangedSubscription = this.onSceneChangedObservable.subscribe(() => {
-            if (this.sun) {
-                this.sun.shadow.needsUpdate = true;
-            }
-        });
-        this.setupLighting();
-        void this.setupEnvironment();
-    }
-    /** Shared glass material for transparent (glass) items. */
-    getGlassMaterial() {
-        return this.glassMaterial;
-    }
-    /**
-     * Registers the converter created by the game mode. Re-queues the last model so the
-     * scene survives engine restarts (the game mode is re-initialized on restart).
-     */
-    registerConverter(converter) {
-        this.converter = converter;
-        converter.setGlassMaterial(this.glassMaterial);
-        this.modelLoadedSubscription?.unsubscribe();
-        this.modelLoadedSubscription = converter.onModelLoaded$.subscribe((box) => {
-            this.lastModelBox = box;
-            this.fitLightingToBox(box);
-        });
-        if (this.lastJson !== undefined) {
-            converter.queueModel(this.lastJson);
-        }
-    }
-    /**
-     * Loads (or replaces) the product model from a webGLJSON string.
-     * Can be called before the engine has booted; the model is queued until ready.
-     */
-    loadModel(webGLJSON) {
-        this.lastJson = webGLJSON;
-        this.converter?.queueModel(webGLJSON);
-    }
-    setupLighting() {
-        this.teardownLighting();
-        const config = GraphicsScalabilityConfigsManager.activeGraphicsScalabilityConfig;
-        // Sunlight
-        const sun = new DirectionalLight(0xf7efe1, 2.0);
-        sun.position.copy(FabThreeViewerWorld.SUN_DIRECTION).multiplyScalar(20);
-        sun.castShadow = config.enableCastShadows;
-        sun.shadow.mapSize.width = config.sunShadowMapSize;
-        sun.shadow.mapSize.height = config.sunShadowMapSize;
-        sun.shadow.camera.left = -15;
-        sun.shadow.camera.right = 15;
-        sun.shadow.camera.top = 15;
-        sun.shadow.camera.bottom = -15;
-        sun.shadow.camera.near = 1;
-        sun.shadow.camera.far = config.shadowRenderDistance;
-        sun.shadow.bias = -0.0005;
-        sun.shadow.normalBias = 0.02;
-        sun.name = 'Sun';
-        sun.matrixAutoUpdate = false;
-        sun.updateMatrix();
-        // Static scene: prevent automatic shadow re-rendering every frame.
-        sun.shadow.autoUpdate = false;
-        this._scene.add(sun);
-        this._scene.add(sun.target);
-        this.sun = sun;
-        // Ambient light
-        const ambient = new AmbientLight(0xe9eff5, 1.25);
-        ambient.name = 'Ambient';
-        ambient.matrixAutoUpdate = false;
-        ambient.updateMatrix();
-        this._scene.add(ambient);
-        this.ambient = ambient;
-        // Neutral background, matching the legacy viewer's white canvas. The intensity
-        // compensates for ACES filmic tone mapping, which would otherwise render
-        // a 1.0 white as visibly gray.
-        this._scene.background = new Color(0xffffff);
-        this._scene.backgroundIntensity = 5;
-        // Re-fit when lighting is rebuilt after an engine restart.
-        if (this.lastModelBox) {
-            this.fitLightingToBox(this.lastModelBox);
-        }
-        this.onSceneChanged.next();
-    }
-    teardownLighting() {
-        if (this.sun) {
-            this.sun.shadow?.map?.dispose();
-            this.sun.target.removeFromParent();
-            this.sun.removeFromParent();
-            this.sun = undefined;
-        }
-        if (this.ambient) {
-            this.ambient.removeFromParent();
-            this.ambient = undefined;
-        }
-    }
-    /**
-     * Positions the sun relative to the model and fits the shadow camera around it,
-     * so shadows stay crisp regardless of model size and position.
-     */
-    fitLightingToBox(box) {
-        if (!this.sun || box.isEmpty()) {
-            return;
-        }
-        const center = box.getCenter(new Vector3());
-        const radius = Math.max(box.getSize(new Vector3()).length() / 2, 0.1);
-        const sun = this.sun;
-        sun.position.copy(center).addScaledVector(FabThreeViewerWorld.SUN_DIRECTION, radius * 3);
-        sun.target.position.copy(center);
-        sun.updateMatrix();
-        sun.target.updateMatrixWorld(true);
-        const extent = radius * 1.25;
-        sun.shadow.camera.left = -extent;
-        sun.shadow.camera.right = extent;
-        sun.shadow.camera.top = extent;
-        sun.shadow.camera.bottom = -extent;
-        sun.shadow.camera.near = radius * 0.5;
-        sun.shadow.camera.far = radius * 6;
-        sun.shadow.camera.updateProjectionMatrix();
-        sun.shadow.needsUpdate = true;
-    }
-    /**
-     * Sets up image-based lighting. Skipped on low graphics presets.
-     *
-     * - Scene-wide: a generated PBR room environment (subtle reflections on all materials).
-     * - Glass: the urban courtyard HDRI (same as the digihuis viewer), which gives glass
-     *   far more convincing reflections than the synthetic room.
-     */
-    async setupEnvironment() {
-        if (!GraphicsScalabilityConfigsManager.activeGraphicsScalabilityConfig.enableEnvReflections) {
-            return;
-        }
-        const renderer = this.getRenderer();
-        // The WebGPU backend initializes asynchronously; PMREM requires it to be ready.
-        await renderer.init();
-        try {
-            const pmremGenerator = new PMREMGenerator(renderer);
-            const roomEnvironment = new RoomEnvironment();
-            const renderTarget = pmremGenerator.fromScene(roomEnvironment, 0.04);
-            pmremGenerator.dispose();
-            roomEnvironment.dispose();
-            this.environmentRenderTarget?.dispose();
-            this.environmentRenderTarget = renderTarget;
-            const scene = this.getScene();
-            scene.environment = renderTarget.texture;
-            // Subtle image-based lighting: the sun + ambient remain the dominant lights.
-            scene.environmentIntensity = 0.4;
-            // Until the HDRI is loaded (or when it fails), glass falls back to the room environment.
-            this.setGlassEnvMap(renderTarget.texture);
-            this.onSceneChanged.next();
-        }
-        catch (error) {
-            console.warn('FabThreeViewerWorld: environment map generation failed; continuing without reflections.', error);
-        }
-        try {
-            const hdrTexture = await new HDRLoader().loadAsync(FabThreeViewerWorld.GLASS_HDRI_URL);
-            const pmremGenerator = new PMREMGenerator(renderer);
-            const renderTarget = pmremGenerator.fromEquirectangular(hdrTexture);
-            pmremGenerator.dispose();
-            hdrTexture.dispose();
-            this.glassEnvironmentRenderTarget?.dispose();
-            this.glassEnvironmentRenderTarget = renderTarget;
-            this.setGlassEnvMap(renderTarget.texture);
-            this.onSceneChanged.next();
-        }
-        catch (error) {
-            console.warn('FabThreeViewerWorld: failed to load glass HDRI; glass keeps the room environment.', error);
-        }
-    }
-    setGlassEnvMap(texture) {
-        this.glassMaterial.envMap = texture;
-        this.glassMaterial.envMapIntensity = 4;
-        this.glassMaterial.needsUpdate = true;
-    }
-    stop() {
-        this.sceneChangedSubscription?.unsubscribe();
-        this.sceneChangedSubscription = undefined;
-        this.modelLoadedSubscription?.unsubscribe();
-        this.modelLoadedSubscription = undefined;
-        this.converter = undefined;
-        this.teardownLighting();
-        this.environmentRenderTarget?.dispose();
-        this.environmentRenderTarget = undefined;
-        this.glassEnvironmentRenderTarget?.dispose();
-        this.glassEnvironmentRenderTarget = undefined;
-        super.stop();
-    }
-}
-
 class FabWebglViewerComponent {
     FabrikantenService;
     WebGLService;
     TranslateService;
     MobileService;
     ChangeDetectorRef;
-    /**
-     * The three-engine world rendered by <threejs-engine>. Created lazily once the
-     * 3D model data is available; reused (model reloaded in place) afterwards.
-     */
-    ViewerWorld = null;
+    Height = "calc(100% - 0px)";
     _viewercontainer;
     set viewercontainer(value) {
         this._viewercontainer = value;
         if (value) {
-            // The container just appeared (e.g. after variant selection): ensure the viewer is up to date.
             queueMicrotask(() => {
+                this.RefreshViewerSize();
                 this.RefreshViewer();
             });
         }
@@ -30470,10 +29551,17 @@ class FabWebglViewerComponent {
         this.ChangeDetectorRef = ChangeDetectorRef;
         this.WebGLService.FabWebglViewerComponent = this;
     }
+    ngOnInit() {
+        this.RefreshViewerSize();
+    }
     ngAfterViewInit() {
+        this.RefreshViewerSize();
         this.RefreshViewer();
         this.ChangeDetectorRef.detectChanges();
     }
+    ngDoCheck() {
+        this.RefreshViewerSize();
+    }
     ShowWebGL() {
         if (!this.FabrikantenService.ShowVariants()) {
             if (this.WebGLService.Fabrikanten3DViewModel != undefined) {
@@ -30482,30 +29570,103 @@ class FabWebglViewerComponent {
         }
         return false;
     }
-    /**
-     * Creates the three-engine world on first call and (re)loads the current
-     * webGLJSON model. Safe to call repeatedly: identical models are ignored.
-     */
     RefreshViewer() {
-        if (this.WebGLService.Loading || this.WebGLService.Fabrikanten3DViewModel == null) {
+        if (!this.WebGLService.Loading && this.WebGLService.Fabrikanten3DViewModel != null) {
+            var viewer = ModuleViewer3DLight.get("viewerCanvas");
+            if (viewer != null) {
+                //var belichting = viewer.belichting;
+                //belichting.toonSlagschaduw = true;
+                //belichting.slagschaduwVerzadiging = 0.5;
+                //belichting.lichtbronSterkte = 3;
+                //belichting.lichtSchittering = 0.333;
+                //belichting.omgevinglichtSterkte = 0.8;
+                //belichting.isCameraLicht = true;
+                //if (belichting.isCameraLicht == true) {
+                //  belichting.lichtval = [0, 1, 0];
+                //} else {
+                //  belichting.lichtval = [-1.0, 0.5, -1.2];
+                //}
+                //viewer.orthografischeProjectie = false;
+                //viewer.kijkrichting = [0.56777614549287847, 0.69328989820855813, -0.44382357491599833];
+                //belichting.lichtbronSterkte = 0.8;
+                //belichting.lichtSchittering = 0.333;
+                //belichting.omgevinglichtSterkte = 0.4;
+                //belichting.lichtval = [-1.0, 0.5, -1.2];
+                var lichtbronSterkte = 1;
+                var omgevinglichtSterkte = 0.6;
+                var lichtvalX = 1;
+                var lichtvalY = 2;
+                var lichtvalZ = -2;
+                var toonSlagshaduw = true;
+                try {
+                    if (this.FabrikantenService.FabrikantenSettingsViewModel.lichtbronSterkte != undefined) {
+                        lichtbronSterkte = parseFloat(this.FabrikantenService.FabrikantenSettingsViewModel.lichtbronSterkte);
+                    }
+                    if (this.FabrikantenService.FabrikantenSettingsViewModel.omgevinglichtSterkte != undefined) {
+                        omgevinglichtSterkte = parseFloat(this.FabrikantenService.FabrikantenSettingsViewModel.omgevinglichtSterkte);
+                    }
+                    if (this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalX != undefined) {
+                        lichtvalX = parseFloat(this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalX);
+                    }
+                    if (this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalY != undefined) {
+                        lichtvalY = parseFloat(this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalY);
+                    }
+                    if (this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalZ != undefined) {
+                        lichtvalZ = parseFloat(this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalZ);
+                    }
+                    if (this.FabrikantenService.FabrikantenSettingsViewModel.lichtvalZ != undefined) {
+                        toonSlagshaduw = this.FabrikantenService.FabrikantenSettingsViewModel.toonSlagshaduw;
+                    }
+                }
+                catch (ex) {
+                    lichtbronSterkte = 1;
+                    omgevinglichtSterkte = 0.6;
+                    lichtvalX = 1;
+                    lichtvalY = 2;
+                    lichtvalZ = -2;
+                    toonSlagshaduw = true;
+                }
+                var belichting = viewer.belichting;
+                belichting.toonSlagschaduw = toonSlagshaduw;
+                belichting.slagschaduwVerzadiging = 0.5;
+                belichting.lichtbronSterkte = lichtbronSterkte;
+                belichting.lichtSchittering = 0.333;
+                belichting.isCameraLicht = false;
+                belichting.omgevinglichtSterkte = omgevinglichtSterkte;
+                belichting.lichtval = [1, 2, -2];
+                viewer.orthografischeProjectie = false;
+                viewer.kijkrichting = [0.50023241910093, 0.7443600526604934, -0.4423749980318723];
+                viewer.clear();
+                viewer.add(this.WebGLService.Fabrikanten3DViewModel.webGLJSON, function () {
+                    viewer.zetZoomGeheel();
+                    viewer.toonModel();
+                });
+            }
+        }
+    }
+    RefreshViewerSize() {
+        if (!this.viewercontainer) {
             return;
         }
-        const webGLJSON = this.WebGLService.Fabrikanten3DViewModel.webGLJSON;
-        if (!webGLJSON) {
+        const nativeElement = this.viewercontainer.nativeElement;
+        const width = nativeElement.offsetWidth - 6;
+        const height = nativeElement.offsetHeight - 6;
+        if (width <= 0 || height <= 0) {
             return;
         }
-        if (this.ViewerWorld == null) {
-            this.ViewerWorld = new FabThreeViewerWorld(new FabThreeViewerMode());
+        if (this.WebGLService.ViewerWidth !== width || this.WebGLService.ViewerHeight !== height) {
+            this.WebGLService.ViewerWidth = width;
+            this.WebGLService.ViewerHeight = height;
             this.ChangeDetectorRef.detectChanges();
+            this.RefreshViewer();
         }
-        this.ViewerWorld.loadModel(webGLJSON);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabWebglViewerComponent, deps: [{ token: FabrikantenService }, { token: WebGLService }, { token: TranslateService }, { token: MobileService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabWebglViewerComponent, isStandalone: false, 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 [text]=\"TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductLoading)\"></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"webgl-viewer-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      <threejs-engine *ngIf=\"ViewerWorld\" [world]=\"ViewerWorld\"></threejs-engine>\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: [".webgl-viewer-main-window{height:calc(100vH - 124px)}.main-window{height:100%}.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{display:flex;overflow:hidden;height:100%;background-color:#fff;cursor:grab}.viewer-container:active{cursor:grabbing}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7$2.ThreejsEngineComponent, selector: "threejs-engine", inputs: ["world"] }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader", inputs: ["text"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabWebglViewerComponent, isStandalone: false, 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 [text]=\"TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductLoading)\"></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"webgl-viewer-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: [".webgl-viewer-main-window{height:calc(100vH - 124px)}.main-window{height:100%}.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}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabLoaderComponent, selector: "app-fab-loader", inputs: ["text"] }, { kind: "component", type: FabSelectBcbproductComponent, selector: "app-fab-select-bcbproduct" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabWebglViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-fab-webgl-viewer', standalone: false, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\r\n  <app-fab-loader [text]=\"TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductLoading)\"></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"webgl-viewer-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      <threejs-engine *ngIf=\"ViewerWorld\" [world]=\"ViewerWorld\"></threejs-engine>\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: [".webgl-viewer-main-window{height:calc(100vH - 124px)}.main-window{height:100%}.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{display:flex;overflow:hidden;height:100%;background-color:#fff;cursor:grab}.viewer-container:active{cursor:grabbing}.row-icon{align-items:center;display:flex}.row-title{flex:auto}.viewer-canvas{background-color:#fff;cursor:grab}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', standalone: false, template: "<div class=\"loader\" *ngIf=\"WebGLService.Loading\">\r\n  <app-fab-loader [text]=\"TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductLoading)\"></app-fab-loader>\r\n</div>\r\n\r\n<div class=\"webgl-viewer-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: [".webgl-viewer-main-window{height:calc(100vH - 124px)}.main-window{height:100%}.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}button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toolbar-button{margin-top:3px}.button{margin:5px;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: FabrikantenService }, { type: WebGLService }, { type: TranslateService }, { type: MobileService }, { type: i0.ChangeDetectorRef }], propDecorators: { viewercontainer: [{
                 type: ViewChild,
                 args: ['viewercontainer']
@@ -30649,7 +29810,7 @@ class FabProductComponent {
         return this.MobileService.NavMode;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabProductComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: WebGLService }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabProductComponent, isStandalone: false, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.IsLoadingSmall()\" [ngClass]=\"HasParameter() ? GetParameterClass() : ''\" 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\" *ngIf=\"!FabrikantenService.IsStartingDownload()\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" [ngClass]=\"HasParameter() ? GetParameterClass() : ''\" *ngIf=\"FabrikantenService.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"GetNavMode()\" [(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 *ngIf=\"ShowBreadcrumb()\">\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n\r\n      <ng-container *ngIf=\"ShowInformationBlock()\">\r\n        <app-fab-product-info></app-fab-product-info>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.NotAllRequiredFilled) }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowNoParameters() && !FabrikantenService.IsLoading()\">\r\n      <div class=\"no-parameters-div\">\r\n        No product request send to BCB due to invalid or missing parameters\r\n      </div>\r\n      <div class=\"required-div\">\r\n        <ng-container *ngIf=\"FabrikantenService.FabrikantenViewModel?.customInfoParameters != undefined\">\r\n          <ng-container *ngFor=\"let customparameter of FabrikantenService.FabrikantenViewModel.customInfoParameters\">\r\n            <div class=\"display-value-item\">\r\n              {{ customparameter.name }}: {{ customparameter.value }}\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired() && !FabrikantenService.ShowNoParameters()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabInformation) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-info></app-fab-product-info>\r\n          </mat-tab>\r\n          <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab3D) }}</span>\r\n            </ng-template>\r\n            <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab2D) }}</span>\r\n            </ng-template>\r\n            <app-fab-svg-viewer></app-fab-svg-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"Bestek\" *ngIf=\"ShowSpecification()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabSpecification) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-bestek *ngIf=\"TranslateService.ShowSpecification()\"></app-fab-product-bestek>\r\n            <app-fab-product-auto-specification *ngIf=\"TranslateService.ShowAutoSpecification()\"></app-fab-product-auto-specification>\r\n            <app-fab-product-lastenboek *ngIf=\"TranslateService.ShowLastenboek()\"></app-fab-product-lastenboek>\r\n          </mat-tab>\r\n          <mat-tab label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Texture) }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Toebehoren) }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .no-parameters-div{padding:5px}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;padding-top:20px;padding-bottom:10px}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:fixed;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "directive", type: i10$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input", inputs: ["displayExtra"] }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabProductAutoSpecificationComponent, selector: "app-fab-product-auto-specification" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductLastenboekComponent, selector: "app-fab-product-lastenboek" }, { 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: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabProductComponent, isStandalone: false, selector: "app-fab-product", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.IsLoadingSmall()\" [ngClass]=\"HasParameter() ? GetParameterClass() : ''\" 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\" *ngIf=\"!FabrikantenService.IsStartingDownload()\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" [ngClass]=\"HasParameter() ? GetParameterClass() : ''\" *ngIf=\"FabrikantenService.Loaded\">\r\n  <mat-drawer #drawer [mode]=\"GetNavMode()\" [(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 *ngIf=\"ShowBreadcrumb()\">\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n\r\n      <ng-container *ngIf=\"ShowInformationBlock()\">\r\n        <app-fab-product-info></app-fab-product-info>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowRequired()\">\r\n      <div class=\"required-div\">{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.NotAllRequiredFilled) }}</div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"FabrikantenService.ShowNoParameters() && !FabrikantenService.IsLoading()\">\r\n      <div class=\"no-parameters-div\">\r\n        No product request send to BCB due to invalid or missing parameters\r\n      </div>\r\n      <div class=\"required-div\">\r\n        <ng-container *ngIf=\"FabrikantenService.FabrikantenViewModel?.customInfoParameters != undefined\">\r\n          <ng-container *ngFor=\"let customparameter of FabrikantenService.FabrikantenViewModel.customInfoParameters\">\r\n            <div class=\"display-value-item\">\r\n              {{ customparameter.name }}: {{ customparameter.value }}\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!FabrikantenService.ShowRequired() && !FabrikantenService.ShowNoParameters()\">\r\n      <div [style.height]=\"Height\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n        <mat-tab-group class=\"view-container\" [selectedIndex]=\"FabrikantenService.SelectedTabIndex\" (selectedTabChange)=\"SelectedTabChange($event)\">\r\n          <mat-tab label=\"Informatie\" *ngIf=\"ShowInformation()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabInformation) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-info></app-fab-product-info>\r\n          </mat-tab>\r\n          <mat-tab label=\"3D\" *ngIf=\"Show3D()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab3D) }}</span>\r\n            </ng-template>\r\n            <app-fab-webgl-viewer></app-fab-webgl-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"2D\" *ngIf=\"Show2D()\" style=\"height: 100%;\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Tab2D) }}</span>\r\n            </ng-template>\r\n            <app-fab-svg-viewer></app-fab-svg-viewer>\r\n          </mat-tab>\r\n          <mat-tab label=\"Bestek\" *ngIf=\"ShowSpecification()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.TabSpecification) }}</span>\r\n            </ng-template>\r\n            <app-fab-product-bestek *ngIf=\"TranslateService.ShowSpecification()\"></app-fab-product-bestek>\r\n            <app-fab-product-auto-specification *ngIf=\"TranslateService.ShowAutoSpecification()\"></app-fab-product-auto-specification>\r\n            <app-fab-product-lastenboek *ngIf=\"TranslateService.ShowLastenboek()\"></app-fab-product-lastenboek>\r\n          </mat-tab>\r\n          <mat-tab label=\"Texture\" *ngIf=\"FabrikantenService.ShowTexture()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Texture) }}</span>\r\n            </ng-template>\r\n            <app-fab-texture></app-fab-texture>\r\n          </mat-tab>\r\n          <mat-tab label=\"Toebehoren\" *ngIf=\"FabrikantenService.ShowToebehoren()\">\r\n            <ng-template mat-tab-label>\r\n              <span>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.Toebehoren) }}</span>\r\n            </ng-template>\r\n            <app-fab-toebehoren></app-fab-toebehoren>\r\n          </mat-tab>\r\n        </mat-tab-group>\r\n      </div>\r\n    </ng-container>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product .tabs{height:100%}app-fab-product .no-parameters-div{padding:5px}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;padding-top:20px;padding-bottom:10px}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:fixed;display:flex;width:100%;height:100%;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product .filter-view{height:100%;width:300px;min-width:300px;background-color:#fafafa}app-fab-product .product-view{flex:auto}app-fab-product .mat-drawer-inner-container{overflow-y:scroll}.mat-tab-body-wrapper{height:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$3.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "directive", type: i10$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i10$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabActionmenuComponent, selector: "app-fab-actionmenu", inputs: ["display"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input", inputs: ["displayExtra"] }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabProductAutoSpecificationComponent, selector: "app-fab-product-auto-specification" }, { kind: "component", type: FabProductBestekComponent, selector: "app-fab-product-bestek" }, { kind: "component", type: FabProductInfoComponent, selector: "app-fab-product-info" }, { kind: "component", type: FabProductLastenboekComponent, selector: "app-fab-product-lastenboek" }, { 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: FabWebglViewerComponent, selector: "app-fab-webgl-viewer" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabProductComponent, decorators: [{
             type: Component,
@@ -30842,7 +30003,7 @@ class FabProductSelectComponent {
         return products;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabProductSelectComponent, deps: [{ token: MobileService }, { token: FabrikantenService }, { token: BestekService }, { token: TranslateService }, { token: i3.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabProductSelectComponent, isStandalone: false, selector: "app-fab-product-select", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.IsLoadingSmall()\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductSelection) }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductSelectionInfo) }}\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductSelectionBlocked) }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n      <ng-container *ngIf=\"IsGrouped()\">\r\n        <ng-container *ngFor=\"let group of GetGroups()\">\r\n          <div class=\"group-header\">\r\n            {{ group }}\r\n          </div>\r\n          <div class=\"main-window group-collection\">\r\n            <app-fab-product-tile *ngFor=\"let product of GetProducts(group)\" [product]=\"product\"></app-fab-product-tile>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!IsGrouped()\">\r\n        <div class=\"main-window\">\r\n          <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product-select .main-window{display:flex;flex-flow:row wrap;overflow:auto}app-fab-product-select .group-header{border-bottom:1px solid #000;margin:10px;font-size:16px}app-fab-product-select .group-collection{margin:10px}app-fab-product-select .subtitle{margin-bottom:10px}app-fab-product-select .subtitle:first-letter{text-transform:uppercase}app-fab-product-select .title:first-letter{text-transform:uppercase}app-fab-product-select .header{padding:4px}app-fab-product-select .row{display:flex}app-fab-product-select .loader-card{margin:auto;width:300px}app-fab-product-select .loader-subtitle{text-align:center;padding-top:20px;padding-bottom:10px}app-fab-product-select .loader-spinner{margin:auto}app-fab-product-select .view-container{height:100%}app-fab-product-select .view-content{background-color:#fff}app-fab-product-select .loader{position:fixed;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product-select .filter-view{width:300px;min-width:300px;background-color:#fafafa;height:100%}app-fab-product-select .product-view{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$2.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input", inputs: ["displayExtra"] }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabProductTileComponent, selector: "app-fab-product-tile", inputs: ["product"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: FabProductSelectComponent, isStandalone: false, selector: "app-fab-product-select", viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"FabrikantenService.IsLoadingSmall()\" class=\"loader\">\r\n  <mat-card class=\"loader-card\">\r\n    <mat-card-content>\r\n      <mat-spinner class=\"loader-spinner\" [diameter]=\"80\"></mat-spinner>\r\n    </mat-card-content>\r\n    <mat-card-subtitle class=\"loader-subtitle\">\r\n      {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductsLoading) }}\r\n    </mat-card-subtitle>\r\n  </mat-card>\r\n</div>\r\n\r\n<mat-drawer-container class=\"view-container\" *ngIf=\"FabrikantenService.FabrikantenViewModel != null\">\r\n  <mat-drawer #drawer [mode]=\"MobileService.NavMode\" [(opened)]=\"MobileService.NavOpened\">\r\n    <div class=\"filter-view\">\r\n      <fab-filters-input></fab-filters-input>\r\n    </div>\r\n  </mat-drawer>\r\n  <mat-drawer-content class=\"view-content\">\r\n    <div #header>\r\n      <app-fab-header [showfiltermenubutton]=\"true\"></app-fab-header>\r\n    </div>\r\n\r\n    <div #info class=\"header\">\r\n      <div class=\"title\">\r\n        <h1>{{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductSelection) }}</h1>\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductSelectionInfo) }}\r\n      </div>\r\n      <div class=\"subtitle\" *ngIf=\"FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n        {{ TranslateService.GetActiveValue(TranslationCategory.Common, TranslationSubCategory.ProductSelectionBlocked) }}\r\n      </div>\r\n    </div>\r\n\r\n    <div [style.height]=\"Height\" *ngIf=\"!FabrikantenService.FabrikantenViewModel.productSelectBlockedByFilters\">\r\n      <ng-container *ngIf=\"IsGrouped()\">\r\n        <ng-container *ngFor=\"let group of GetGroups()\">\r\n          <div class=\"group-header\">\r\n            {{ group }}\r\n          </div>\r\n          <div class=\"main-window group-collection\">\r\n            <app-fab-product-tile *ngFor=\"let product of GetProducts(group)\" [product]=\"product\"></app-fab-product-tile>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!IsGrouped()\">\r\n        <div class=\"main-window\">\r\n          <app-fab-product-tile *ngFor=\"let product of FabrikantenService.FabrikantenViewModel.products\" [product]=\"product\"></app-fab-product-tile>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </mat-drawer-content>\r\n</mat-drawer-container>\r\n\r\n\r\n", styles: ["app-fab-product-select .main-window{display:flex;flex-flow:row wrap;overflow:auto}app-fab-product-select .group-header{border-bottom:1px solid #000;margin:10px;font-size:16px}app-fab-product-select .group-collection{margin:10px}app-fab-product-select .subtitle{margin-bottom:10px}app-fab-product-select .subtitle:first-letter{text-transform:uppercase}app-fab-product-select .title:first-letter{text-transform:uppercase}app-fab-product-select .header{padding:4px}app-fab-product-select .row{display:flex}app-fab-product-select .loader-card{margin:auto;width:300px}app-fab-product-select .loader-subtitle{text-align:center;padding-top:20px;padding-bottom:10px}app-fab-product-select .loader-spinner{margin:auto}app-fab-product-select .view-container{height:100%}app-fab-product-select .view-content{background-color:#fff}app-fab-product-select .loader{position:fixed;width:100%;height:100%;display:flex;align-items:center;z-index:20;background-color:#ffffffb3;top:0;left:0}app-fab-product-select .filter-view{width:300px;min-width:300px;background-color:#fafafa;height:100%}app-fab-product-select .product-view{flex:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "component", type: i9$3.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i9$3.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9$3.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: FabFiltersInputComponent, selector: "fab-filters-input", inputs: ["displayExtra"] }, { kind: "component", type: FabHeaderComponent, selector: "app-fab-header", inputs: ["showfiltermenubutton"] }, { kind: "component", type: FabProductTileComponent, selector: "app-fab-product-tile", inputs: ["product"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FabProductSelectComponent, decorators: [{
             type: Component,
@@ -33430,8 +32591,7 @@ class FabrikantenCoreModule {
             MatFormFieldModule,
             MatSnackBarModule,
             ReactiveFormsModule,
-            SafehtmlPipe,
-            ThreejsEngineComponent, i3.RouterModule], exports: [FabActionmenuComponent,
+            SafehtmlPipe, i3.RouterModule], exports: [FabActionmenuComponent,
             FabCategoryNavigatorComponent,
             FabFilterColourDialogComponent,
             FabFilterComponent,
@@ -33512,7 +32672,6 @@ class FabrikantenCoreModule {
             MatFormFieldModule,
             MatSnackBarModule,
             ReactiveFormsModule,
-            ThreejsEngineComponent,
             RouterModule.forRoot(routes, {
                 scrollPositionRestoration: 'enabled',
                 anchorScrolling: 'enabled',
@@ -33554,7 +32713,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         MatSnackBarModule,
                         ReactiveFormsModule,
                         SafehtmlPipe,
-                        ThreejsEngineComponent,
                         RouterModule.forRoot(routes, {
                             scrollPositionRestoration: 'enabled',
                             anchorScrolling: 'enabled',