@colijnit/configurator 262.1.1 → 262.1.3

package/fesm2022/colijnit-configurator.mjs

@@ -65,6 +65,8 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 import * as i4 from '@colijnit/corecomponents_v12';
 import { LoaderModule, IconModule, CardModule, InputTextModule, ButtonModule, PriceDisplayPipeModule, ImageModule, TooltipDirectiveModule } from '@colijnit/corecomponents_v12';
 import { ConfigurationDisplayOption } from '@colijnit/configuratorapi/build/enum/refcode/configuration-display-option.enum';
+import * as i7 from '@angular/cdk/clipboard';
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import * as i6$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
@@ -148,6 +150,9 @@ class SettingOptions {
     useExternalOpenSave = false;
     floorFadeStart = 2.0;
     floorFadeEnd = 6.0;
+    maxVisibleTiles = 10;
+    maxVisibleSmallTiles = 24;
+    groupedShowAllBtn = false;
 }
 
 class RenderParameters {
@@ -196,6 +201,9 @@ class ConfiguratorSettings {
     jwtEnabled;
     gtm;
     dracoPath = 'https?://cdn1.colijn-it.nl/draco/';
+    mainUrl;
+    mainSchema;
+    mainVersion;
     options = new SettingOptions();
     catalogParameters;
     renderParameters = new RenderParameters();
@@ -509,6 +517,7 @@ class AppEventService {
     articleInfoReceived = new Subject(); // TODO check; _onAnswerInfoReceived has a todo from 17-06-2024
     onObjectSelected = new Subject();
     onObjectUnSelected = new Subject();
+    changeConfigurationPresetDialogMode = new Subject();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AppEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AppEventService, providedIn: 'root' });
 }
@@ -823,12 +832,12 @@ class ConfiguratorService {
         this._mainApi = null;
         this._articleApi = null;
     }
-    async initConnector(options, forceReload) {
+    async initConnector(options, forceReload, mainUrl, mainSchema, mainVersion) {
         let createdConnection = false;
         const renewConnector = (this._configuratorApi ? this._configuratorApi.url !== options.url : false) || forceReload;
         if (!this._configuratorApi || renewConnector) {
             this._configuratorApi = new Configurator(options);
-            this.loginResponse = await this._configuratorApi.connect();
+            this.loginResponse = await this._configuratorApi.connect(mainUrl, mainSchema, mainVersion);
             this._configuratorApi.showLoader.subscribe(value => this.showLoader.next(value));
             this._configuratorApi.connectionResetInactivity.subscribe(value => this.connectionReset.next());
         }
@@ -951,14 +960,13 @@ class ConfiguratorService {
         return this._configuratorApi.copyInstance(instanceId, shouldSaveCurrentInstanceId, showLoader);
     }
     async saveConfigurations(showLoader = true) {
-        try {
-            await this._configuratorApi.saveConfigurations(showLoader).catch((e) => {
-                return false;
-            });
-        }
-        catch (e) {
-        }
-        return true;
+        return await this._configuratorApi.saveConfigurations(showLoader);
+    }
+    async storePreset(instanceId, showLoader = true) {
+        return await this._configuratorApi.storePreset(instanceId, showLoader);
+    }
+    async initForPreset(presetId, goodId, showLoader = true) {
+        return await this._configuratorApi.initForPreset(presetId, goodId, showLoader);
     }
     async googleTranslateEnabled() {
         // this should always be fetched from the mainapi from the client
@@ -1115,7 +1123,7 @@ class ConfiguratorConnectorService {
         this._imageCache.clear();
         this._subs.forEach(sub => sub.unsubscribe());
     }
-    async initConnection(forceReload, standAlone = false) {
+    async initConnection(forceReload, mainUrl, mainSchema, mainVersion) {
         if ((this._initialized || this._initializing) && !forceReload) {
             return;
         }
@@ -1127,7 +1135,7 @@ class ConfiguratorConnectorService {
             }
             this._connectorOptions = Object.assign(new Options(), settings);
             this._subs.push(this._configuratorService.showLoader.subscribe(showLoader => this.onShowLoaderChange(showLoader)), this._configuratorService.connectionReset.subscribe(() => this.onConnectionReset()));
-            await this._configuratorService.initConnector(this._connectorOptions, forceReload);
+            await this._configuratorService.initConnector(this._connectorOptions, forceReload, mainUrl, mainSchema, mainVersion);
             await this._settingsService.checkAdditionalParameters();
             this.controllerInitialized.next(true);
             this._initialized = true;
@@ -1399,6 +1407,12 @@ class ConfiguratorConnectorService {
             console.error('error saving configurations');
         }
     }
+    async storePreset(instanceId, showLoader = true) {
+        return this._configuratorService.storePreset(instanceId, showLoader);
+    }
+    async initForPreset(presetId, goodId, showLoader = true) {
+        return this._configuratorService.initForPreset(presetId, goodId, showLoader);
+    }
     async getDefaultLanguage(upId) {
         return await this._configuratorService.getDefaultLanguage(upId);
     }
@@ -1806,7 +1820,7 @@ class AppInitializerService {
     }
     async initializeApp(settings) {
         await this._settingsService.initializeSettings(settings);
-        await this._configuratorConnectorService.initConnection(true);
+        await this._configuratorConnectorService.initConnection(true, settings.mainUrl, settings.mainSchema, settings.mainVersion);
         this.appInitialized.next(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AppInitializerService, deps: [{ token: SettingsService }, { token: ConfiguratorConnectorService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -10181,11 +10195,6 @@ class LoadFurnitureService extends LoadFurnitureBaseService {
                 if (!this.needs3DModel(result.placement)) {
                     result.resultType = ResultType.No3DModel;
                 }
-                if (!result.assetUrl && result.resultType !== ResultType.No3DModel || result.resultType === ResultType.ArticleNotFound) {
-                    result.errorMessages.push(new ConfiguratorErrorMessage('ARTICLE_NOT_FOUND', 'ARTICLE_NOT_FOUND_DESC'));
-                    DebugUtils.log('Article not found');
-                    return Promise.reject(result);
-                }
             });
             if (this.article) {
                 // Add the data to the result
@@ -12243,6 +12252,7 @@ var IconEnum;
     IconEnum["ArrowTurnRight"] = "arrow_turn_right";
     IconEnum["ArrowTurnRightRegular"] = "arrow_turn_right_regular";
     IconEnum["ArCircle"] = "ar_circle";
+    IconEnum["BarsLightFull"] = "bars_light_full";
     IconEnum["Brush"] = "brush";
     IconEnum["CameraSolid"] = "camera_solid";
     IconEnum["CameraTopdown"] = "camera_topdown";
@@ -12267,6 +12277,7 @@ var IconEnum;
     IconEnum["ConfFrame"] = "conf_frame";
     IconEnum["ConfPlane"] = "conf_plane";
     IconEnum["CopyLight"] = "copy_light";
+    IconEnum["CopyRegularFull"] = "copy_regular_full";
     IconEnum["Couch"] = "couch";
     IconEnum["Cross"] = "cross";
     IconEnum["CubeOutline"] = "cube-outline";
@@ -12279,7 +12290,9 @@ var IconEnum;
     IconEnum["EditButton"] = "edit-button";
     IconEnum["Expand"] = "expand";
     IconEnum["FillDripLight"] = "fill_drip_light";
+    IconEnum["FloppyDiskLightFull"] = "floppy_disk_light_full";
     IconEnum["Flower"] = "flower";
+    IconEnum["FolderOpenLightFull"] = "folder_open_light_full";
     IconEnum["GaugeHighSolidFull"] = "gauge_high_solid_full";
     IconEnum["GaugeLowSolidFull"] = "gauge_low_solid_full";
     IconEnum["GaugeMaxSolidFull"] = "gauge_max_solid_full";
@@ -12333,6 +12346,7 @@ var IconEnum;
     IconEnum["WandMagicSparkles"] = "wand_magic_sparkles";
     IconEnum["WifiSolidFull"] = "wifi_solid_full";
     IconEnum["XmarkLight"] = "xmark_light";
+    IconEnum["XmarkLightFull"] = "xmark_light_full";
     IconEnum["XmarkRegular"] = "xmark_regular";
 })(IconEnum || (IconEnum = {}));
 
@@ -12355,6 +12369,7 @@ const IconSvg = {
     "arrow_turn_right": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M379.3 363.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L457.4 240 80 240c-26.5 0-48 21.5-48 48l0 176c0 8.8-7.2 16-16 16s-16-7.2-16-16L0 288c0-44.2 35.8-80 80-80l377.4 0L356.7 107.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0l128 128c6.2 6.2 6.2 16.4 0 22.6l-128 128z\"/></svg>",
     "arrow_turn_right_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M377 369c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87L88 248c-22.1 0-40 17.9-40 40l0 168c0 13.3-10.7 24-24 24s-24-10.7-24-24L0 288c0-48.6 39.4-88 88-88l342.1 0-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L505 207c9.4 9.4 9.4 24.6 0 33.9L377 369z\"/></svg>",
     "ar_circle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,11A14,14,0,1,1,11,25,14,14,0,0,1,25,11m0-1A15,15,0,1,0,40,25,15,15,0,0,0,25,10Z\" fill=\"#484f60\"/><path d=\"M23.23,30.1l-.85-2.2H18.53l-.85,2.2H15.5l4-10.2h2l4,10.2Zm-2.77-7.16-1.15,3h2.3Z\" fill=\"#484f60\"/><path d=\"M33.92,23.29c0,1.63-.58,2.69-1.74,3.16L34.5,30.1H32l-2-3.25H28.53V30.1H26.48V19.9H30a4.65,4.65,0,0,1,3,.8A3.29,3.29,0,0,1,33.92,23.29ZM31.45,24.5a1.64,1.64,0,0,0,.39-1.21,1.38,1.38,0,0,0-.4-1.13,2.35,2.35,0,0,0-1.38-.3H28.53v3H30A2,2,0,0,0,31.45,24.5Z\" fill=\"#484f60\"/></svg>",
+    "bars_light_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M96 144C96 135.2 103.2 128 112 128L528 128C536.8 128 544 135.2 544 144C544 152.8 536.8 160 528 160L112 160C103.2 160 96 152.8 96 144zM96 320C96 311.2 103.2 304 112 304L528 304C536.8 304 544 311.2 544 320C544 328.8 536.8 336 528 336L112 336C103.2 336 96 328.8 96 320zM544 496C544 504.8 536.8 512 528 512L112 512C103.2 512 96 504.8 96 496C96 487.2 103.2 480 112 480L528 480C536.8 480 544 487.2 544 496z\"/></svg>",
     "brush": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M28.16,26a9.71,9.71,0,0,1-4-3.66A.88.88,0,0,0,22.92,22c-1.08.48-2.19.92-3.27,1.43-3.71,1.74-6,4.5-6.23,8.75-.17,2.75-.89,5.32-3.42,7.25,1.18,0,2.12,0,3.05,0,.73,0,1.46-.07,2.18-.12a10.82,10.82,0,0,0,4.86-3.38c1.31-1.61,3.14-3.58,3.95-5.49l-.08.38a22.78,22.78,0,0,1-3.09,5.74A11.79,11.79,0,0,1,18.13,39a22.35,22.35,0,0,0,4.29-1A8.2,8.2,0,0,0,28.06,32c.38-1.62.44-3.31.66-5A1,1,0,0,0,28.16,26Z\" fill=\"#484f60\"/><path d=\"M26.23,20.43l6.57-9.32a1.23,1.23,0,0,1,1.87-.18l4.94,4.7a1.24,1.24,0,0,1-.11,1.9l-9.15,6.78a1.25,1.25,0,0,1-1.58-.08L26.4,22.06A1.23,1.23,0,0,1,26.23,20.43Z\" fill=\"#484f60\"/></svg>",
     "camera_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M149.1 64.8L138.7 96 64 96C28.7 96 0 124.7 0 160L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64l-74.7 0L362.9 64.8C356.4 45.2 338.1 32 317.4 32L194.6 32c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"/></svg>",
     "camera_topdown": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 600 600\" style=\"enable-background:new 0 0 600 600;\" ><g><path d=\"M198.4,473.9c-12.3,0-23.9-6.8-29.4-17.4c-2.4-4.6-3.7-9.8-3.7-15c0-6.7,2-13.1,5.9-18.6l57.5-82.1c3.7-5.2,9.7-8.4,16.1-8.4c4,0,7.9,1.2,11.2,3.5c8.8,6.2,11,18.4,4.8,27.3l-49.9,71.4h178.2l-50-71.4c-3.2-4.7-4.3-10.5-3-16c1.1-5,4-9.1,8.1-11.5c3.3-2.2,7.1-3.4,11-3.4c6.4,0,12.4,3.1,16.1,8.4l57.6,82.1c6.9,9.9,7.8,22.7,2.1,33.6c-5.6,10.8-16.7,17.4-28.7,17.4H198.4z M219.9,320.5c-32,0-58-26-58-58V58c0-32,26-58,58-58h160.2c32,0,58,26,58,58v204.6c0,32-26,58-58,58H219.9z M219.9,39.3c-10.3,0-18.7,8.4-18.7,18.7v204.6c0,10.3,8.4,18.7,18.7,18.7h160.2c10.3,0,18.7-8.4,18.7-18.7V58c0-10.3-8.4-18.7-18.7-18.7H219.9z\"/><path d=\"M300,600c-4,0-7.2-3.2-7.2-7.2v-85.3c0-4,3.2-7.2,7.2-7.2s7.2,3.2,7.2,7.2v85.3C307.2,596.8,304,600,300,600z\"/><path d=\"M179.7,591.6c-1.5,0-2.9-0.5-4.1-1.3c-1.6-1.1-2.6-2.8-3-4.6c-0.3-1.9,0.1-3.8,1.2-5.4l50.6-77c1.3-1.9,3.5-3,5.9-3c1.5,0,2.9,0.5,4.1,1.3c1.6,1.1,2.6,2.8,3,4.6c0.3,1.9-0.1,3.8-1.2,5.4l-50.6,77C184.2,590.5,182,591.6,179.7,591.6z\"/><path d=\"M420.3,591.6c-2.3,0-4.5-1.1-5.9-3l-50.6-77c-2.3-3.3-1.5-7.7,1.8-10c1.2-0.9,2.6-1.3,4.1-1.3c2.3,0,4.5,1.1,5.9,3l50.5,76.9l0,0.1c1.1,1.6,1.5,3.5,1.2,5.4c-0.3,1.9-1.4,3.5-3,4.6C423.2,591.2,421.8,591.6,420.3,591.6z\"/><path d=\"M375.9,65v38.7c0,1.5-1.2,2.8-2.8,2.8h-19.9c-1.5,0-2.8-1.2-2.8-2.8V65c0-1.5,1.2-2.8,2.8-2.8h19.9C374.6,62.2,375.9,63.5,375.9,65z\"/></g></svg>",
@@ -12379,6 +12394,7 @@ const IconSvg = {
     "conf_frame": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><title>conf_frame</title><path d=\"M37,11.5,38.5,10h-27V40L13,38.5v-27H37Z\" fill=\"#484f60\"/><g opacity=\"0.25\"><rect x=\"14.5\" y=\"13\" width=\"21\" height=\"24\" fill=\"#484f60\"/></g><polygon points=\"18.27 15.01 20.28 13 14.5 13 14.5 18.78 16.51 16.77 20.24 20.5 22 18.74 18.27 15.01\" fill=\"#484f60\"/></svg>",
     "conf_plane": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><title>conf_plane</title><g opacity=\"0.25\"><path d=\"M37,11.5,38.5,10h-27V40L13,38.5v-27H37Z\" fill=\"#484f60\"/></g><rect x=\"14.5\" y=\"13\" width=\"21\" height=\"24\" fill=\"#484f60\"/><polygon points=\"19.26 16 17.5 17.76 21.23 21.49 19.22 23.5 25 23.5 25 17.72 22.99 19.73 19.26 16\" fill=\"#fff\"/></svg>",
     "copy_light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M384 352l-160 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l108.1 0c4.2 0 8.3 1.7 11.3 4.7l67.9 67.9c3 3 4.7 7.1 4.7 11.3L416 320c0 17.7-14.3 32-32 32zM433.9 81.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L224 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64l160 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l160 0c35.3 0 64-28.7 64-64l0-32-32 0 0 32c0 17.7-14.3 32-32 32L64 480c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0 0-32-64 0z\"/></svg>",
+    "copy_regular_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M480 400L288 400C279.2 400 272 392.8 272 384L272 128C272 119.2 279.2 112 288 112L421.5 112C425.7 112 429.8 113.7 432.8 116.7L491.3 175.2C494.3 178.2 496 182.3 496 186.5L496 384C496 392.8 488.8 400 480 400zM288 448L480 448C515.3 448 544 419.3 544 384L544 186.5C544 169.5 537.3 153.2 525.3 141.2L466.7 82.7C454.7 70.7 438.5 64 421.5 64L288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L368 496L368 512C368 520.8 360.8 528 352 528L160 528C151.2 528 144 520.8 144 512L144 256C144 247.2 151.2 240 160 240L176 240L176 192L160 192z\"/></svg>",
     "couch": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 512\"><path d=\"M448 64c53 0 96 43 96 96l0 37.5c10-3.5 20.8-5.5 32-5.5l0-32c0-70.7-57.3-128-128-128L192 32C121.3 32 64 89.3 64 160l0 32c11.2 0 22 1.9 32 5.5L96 160c0-53 43-96 96-96l256 0zM96 320l0 96 0 16c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-144c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32zM80 480c20.9 0 38.7-13.4 45.3-32l389.5 0c6.6 18.6 24.4 32 45.3 32l32 0c26.5 0 48-21.5 48-48l0-144c0-35.3-28.7-64-64-64s-64 28.7-64 64l-384 0c0-35.3-28.7-64-64-64s-64 28.7-64 64L0 432c0 26.5 21.5 48 48 48l32 0zm48-64l0-96 384 0 0 96-384 0zm416 16l0-16 0-96 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 144c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16z\"/></svg>",
     "cross": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"35.35 15.52 34.65 14.81 25 24.46 15.35 14.81 14.65 15.52 24.29 25.17 14.65 34.81 15.35 35.52 25 25.87 34.65 35.52 35.35 34.81 25.71 25.17 35.35 15.52\" fill=\"#484f60\"/></svg>",
     "cube-outline": "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z\" /></svg>",
@@ -12391,7 +12407,9 @@ const IconSvg = {
     "edit-button": "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 43 43\" ><g><rect x=\"13.011\" y=\"20.038\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -8.7899 19.4259)\" fill=\"#FFFFFF\" width=\"12.085\" height=\"0.57\"/><rect x=\"19.341\" y=\"16.641\" transform=\"matrix(0.7072 0.707 -0.707 0.7072 22.3084 -8.4979)\" fill=\"#FFFFFF\" width=\"4.145\" height=\"12.086\"/><path fill=\"#FFFFFF\" d=\"M30.839,14.931l-2.772-2.769c-0.348-0.348-0.91-0.348-1.257,0L25.9,13.069l4.032,4.028l0.905-0.908C31.187,15.841,31.187,15.28,30.839,14.931z\"/><rect x=\"23.68\" y=\"15.743\" transform=\"matrix(-0.7072 -0.7071 0.7071 -0.7072 33.6426 46.8755)\" fill=\"#FFFFFF\" width=\"5.696\" height=\"1.456\"/><polygon fill=\"#FFFFFF\" points=\"11.9,31.099 13.546,30.663 12.337,29.456 \"/><polygon fill=\"#FFFFFF\" points=\"13.579,25.643 12.711,28.079 14.921,30.29 17.356,29.421 \"/></g></svg>",
     "expand": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M144 32c8.8 0 16 7.2 16 16s-7.2 16-16 16L32 64l0 112c0 8.8-7.2 16-16 16s-16-7.2-16-16L0 48c0-8.8 7.2-16 16-16l128 0zM0 336c0-8.8 7.2-16 16-16s16 7.2 16 16l0 112 112 0c8.8 0 16 7.2 16 16s-7.2 16-16 16L16 480c-8.8 0-16-7.2-16-16L0 336zM432 32c8.8 0 16 7.2 16 16l0 128c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-112L304 64c-8.8 0-16-7.2-16-16s7.2-16 16-16l128 0zM416 336c0-8.8 7.2-16 16-16s16 7.2 16 16l0 128c0 8.8-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l112 0 0-112z\"/></svg>",
     "fill_drip_light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M36.7 4.7c6.2-6.2 16.4-6.2 22.6 0l97.4 97.4 64.4-64.4c28.1-28.1 73.7-28.1 101.8 0L474.3 189.1c28.1 28.1 28.1 73.7 0 101.8L283.9 481.4c-37.5 37.5-98.3 37.5-135.8 0L30.6 363.9c-37.5-37.5-37.5-98.3 0-135.8L134.1 124.7 36.7 27.3c-6.2-6.2-6.2-16.4 0-22.6zm208 230.6l-88-88L53.3 250.7C42.8 261.2 36.7 274.4 35 288l397 0 19.7-19.7c15.6-15.6 15.6-40.9 0-56.6L300.3 60.3c-15.6-15.6-40.9-15.6-56.6 0l-64.4 64.4 88 88c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0zM39.2 320c3.1 7.7 7.8 15 14.1 21.3L170.7 458.7c25 25 65.5 25 90.5 0L400 320 39.2 320zM544 448s0 0 0 0c0 0 0 0 0 0c0-.1-.1-1.2-.6-3.4c-.6-2.4-1.5-5.4-2.8-9.1c-2.7-7.4-6.8-16.2-11.7-25.8c-5.2-10.2-11.2-20.6-16.9-30.3c-5.8 9.7-11.7 20.1-16.9 30.3c-4.9 9.6-8.9 18.4-11.7 25.8c-1.4 3.7-2.3 6.7-2.8 9.1c-.5 2.2-.6 3.3-.6 3.4c0 0 0 0 0 0c0 17.7 14.3 32 32 32s32-14.3 32-32zm32 0c0 35.3-28.7 64-64 64s-64-28.7-64-64c0-25.2 32.6-79.6 51.2-108.7c6-9.4 19.5-9.4 25.5 0C543.4 368.4 576 422.8 576 448z\"/></svg>",
+    "floppy_disk_light_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M160 128C142.3 128 128 142.3 128 160L128 480C128 497.7 142.3 512 160 512L480 512C497.7 512 512 497.7 512 480L512 237.3C512 228.8 508.6 220.7 502.6 214.7L425.4 137.4C422.7 134.7 419.5 132.5 416 130.9L416 240C416 257.7 401.7 272 384 272L224 272C206.3 272 192 257.7 192 240L192 128L160 128zM224 128L224 240L384 240L384 128L224 128zM96 160C96 124.7 124.7 96 160 96L402.7 96C419.7 96 436 102.7 448 114.7L525.3 192C537.3 204 544 220.3 544 237.3L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM352 384C352 366.3 337.7 352 320 352C302.3 352 288 366.3 288 384C288 401.7 302.3 416 320 416C337.7 416 352 401.7 352 384zM256 384C256 348.7 284.7 320 320 320C355.3 320 384 348.7 384 384C384 419.3 355.3 448 320 448C284.7 448 256 419.3 256 384z\"/></svg>",
     "flower": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M200 0c-48.6 0-88 39.4-88 88c0 21.3 7.6 40.8 20.1 56c-12.6 15.2-20.1 34.7-20.1 56c0 48.6 39.4 88 88 88c14.4 0 28-3.5 40-9.6l0 118.2C200.8 331.5 129.5 288 48 288l-20 0c-15.5 0-28 12.5-28 28C0 424.2 87.8 512 196 512l44 0 16 0 16 0 44 0c108.2 0 196-87.8 196-196c0-15.5-12.5-28-28-28l-20 0c-81.5 0-152.8 43.5-192 108.6l0-118.2c12 6.1 25.6 9.6 40 9.6c48.6 0 88-39.4 88-88c0-21.3-7.6-40.8-20.1-56c12.6-15.2 20.1-34.7 20.1-56c0-48.6-39.4-88-88-88c-21.3 0-40.8 7.6-56 20.1C240.8 7.6 221.3 0 200 0zM144 88c0-30.9 25.1-56 56-56c17.6 0 33.3 8.1 43.6 20.8c3 3.8 7.6 5.9 12.4 5.9s9.4-2.2 12.4-5.9C278.7 40.1 294.4 32 312 32c30.9 0 56 25.1 56 56c0 17.6-8.1 33.3-20.8 43.6c-3.8 3-5.9 7.6-5.9 12.4s2.2 9.4 5.9 12.4c12.7 10.3 20.8 26 20.8 43.6c0 30.9-25.1 56-56 56c-17.6 0-33.3-8.1-43.6-20.8c-3-3.8-7.6-5.9-12.4-5.9s-9.4 2.2-12.4 5.9c-10.3 12.7-26 20.8-43.6 20.8c-30.9 0-56-25.1-56-56c0-17.6 8.1-33.3 20.8-43.6c3.8-3 5.9-7.6 5.9-12.4s-2.2-9.4-5.9-12.4C152.1 121.3 144 105.6 144 88zM32 320l16 0c95.1 0 174.1 69.2 189.3 160L196 480c-89.2 0-161.8-71.3-164-160zM480 320c-2.1 88.7-74.7 160-164 160l-41.3 0c15.2-90.8 94.2-160 189.3-160l16 0zM288 144a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>",
+    "folder_open_light_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M129.5 480C118.7 480 111 469.5 114.2 459.2L164.2 299.2C166.3 292.5 172.5 288 179.5 288L559 288C569.8 288 577.5 298.5 574.3 308.8L524.3 468.8C522.1 475.5 516 480 509 480L129.5 480zM256.2 512L509 512C530 512 548.6 498.4 554.8 478.3L604.8 318.3C614.5 287.4 591.4 256 559 256L179.6 256C158.6 256 140 269.6 133.8 289.7L96.2 409.6L96.2 160C96.2 142.3 110.5 128 128.2 128L266.9 128C273.8 128 280.6 130.2 286.1 134.4L324.5 163.2C335.6 171.5 349.1 176 362.9 176L480.2 176C497.9 176 512.2 190.3 512.2 208L544.2 208C544.2 172.7 515.5 144 480.2 144L362.9 144C356 144 349.2 141.8 343.7 137.6L305.3 108.8C294.2 100.5 280.8 96 266.9 96L128.2 96C92.9 96 64.2 124.7 64.2 160L64.2 448C64.2 483.3 92.9 512 128.2 512L256.2 512z\"/></svg>",
     "gauge_high_solid_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM352 160C352 142.3 337.7 128 320 128C302.3 128 288 142.3 288 160C288 177.7 302.3 192 320 192C337.7 192 352 177.7 352 160zM320 480C355.3 480 384 451.3 384 416C384 399.8 378 384.9 368 373.7L437.5 234.8C443.4 222.9 438.6 208.5 426.8 202.6C415 196.7 400.5 201.5 394.6 213.3L325.1 352.2C323.4 352.1 321.7 352 320 352C284.7 352 256 380.7 256 416C256 451.3 284.7 480 320 480zM240 208C240 190.3 225.7 176 208 176C190.3 176 176 190.3 176 208C176 225.7 190.3 240 208 240C225.7 240 240 225.7 240 208zM160 352C177.7 352 192 337.7 192 320C192 302.3 177.7 288 160 288C142.3 288 128 302.3 128 320C128 337.7 142.3 352 160 352zM512 320C512 302.3 497.7 288 480 288C462.3 288 448 302.3 448 320C448 337.7 462.3 352 480 352C497.7 352 512 337.7 512 320z\"/></svg>",
     "gauge_low_solid_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM352 160C352 142.3 337.7 128 320 128C302.3 128 288 142.3 288 160C288 177.7 302.3 192 320 192C337.7 192 352 177.7 352 160zM320 480C355.3 480 384 451.3 384 416C384 380.7 355.3 352 320 352C318.3 352 316.6 352.1 314.9 352.2L245.5 213.3C239.6 201.4 225.2 196.6 213.3 202.6C201.4 208.6 196.6 222.9 202.6 234.8L272 373.7C262 385 256 399.8 256 416C256 451.3 284.7 480 320 480zM192 320C192 302.3 177.7 288 160 288C142.3 288 128 302.3 128 320C128 337.7 142.3 352 160 352C177.7 352 192 337.7 192 320zM480 352C497.7 352 512 337.7 512 320C512 302.3 497.7 288 480 288C462.3 288 448 302.3 448 320C448 337.7 462.3 352 480 352zM464 208C464 190.3 449.7 176 432 176C414.3 176 400 190.3 400 208C400 225.7 414.3 240 432 240C449.7 240 464 225.7 464 208z\"/></svg>",
     "gauge_max_solid_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM352 160C352 142.3 337.7 128 320 128C302.3 128 288 142.3 288 160C288 177.7 302.3 192 320 192C337.7 192 352 177.7 352 160zM320 480C355.3 480 384 451.3 384 416C384 412.6 383.7 409.3 383.2 406.1L492.3 340.6C503.7 333.8 507.3 319 500.5 307.7C493.7 296.4 478.9 292.6 467.6 299.5L358.5 364.9C347.8 356.8 334.4 352 320 352C284.7 352 256 380.7 256 416C256 451.3 284.7 480 320 480zM240 208C240 190.3 225.7 176 208 176C190.3 176 176 190.3 176 208C176 225.7 190.3 240 208 240C225.7 240 240 225.7 240 208zM160 352C177.7 352 192 337.7 192 320C192 302.3 177.7 288 160 288C142.3 288 128 302.3 128 320C128 337.7 142.3 352 160 352zM464 208C464 190.3 449.7 176 432 176C414.3 176 400 190.3 400 208C400 225.7 414.3 240 432 240C449.7 240 464 225.7 464 208z\"/></svg>",
@@ -12445,6 +12463,7 @@ const IconSvg = {
     "wand_magic_sparkles": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M458.3 34.9c3.1-3.1 8.2-3.1 11.3 0l39.4 39.4c3.1 3.1 3.1 8.2 0 11.3L388.7 206.1l-50.7-50.7L458.3 34.9zM66.9 426.3L315.3 177.9l50.7 50.7L117.7 477.1c-3.1 3.1-8.2 3.1-11.3 0L66.9 437.7c-3.1-3.1-3.1-8.2 0-11.3zM435.7 12.3L44.3 403.7c-15.6 15.6-15.6 40.9 0 56.6l39.4 39.4c15.6 15.6 40.9 15.6 56.6 0L531.7 108.3c15.6-15.6 15.6-40.9 0-56.6L492.3 12.3c-15.6-15.6-40.9-15.6-56.6 0zM128 80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 48-48 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l48 0 0 48c0 8.8 7.2 16 16 16s16-7.2 16-16l0-48 48 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-48 0 0-48zM464 320c-8.8 0-16 7.2-16 16l0 48-48 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l48 0 0 48c0 8.8 7.2 16 16 16s16-7.2 16-16l0-48 48 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-48 0 0-48c0-8.8-7.2-16-16-16zM252.2 16c0-6.7-5.4-12.2-12.2-12.2s-12.2 5.4-12.2 12.2l0 19.8-19.8 0c-6.7 0-12.2 5.4-12.2 12.2s5.4 12.2 12.2 12.2l19.8 0 0 19.8c0 6.7 5.4 12.2 12.2 12.2s12.2-5.4 12.2-12.2l0-19.8 19.8 0c6.7 0 12.2-5.4 12.2-12.2s-5.4-12.2-12.2-12.2l-19.8 0 0-19.8z\"/></svg>",
     "wifi_solid_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M320 160C229.1 160 146.8 196 86.3 254.6C73.6 266.9 53.3 266.6 41.1 253.9C28.9 241.2 29.1 220.9 41.8 208.7C113.7 138.9 211.9 96 320 96C428.1 96 526.3 138.9 598.3 208.7C611 221 611.3 241.3 599 253.9C586.7 266.5 566.4 266.9 553.8 254.6C493.2 196 410.9 160 320 160zM272 496C272 469.5 293.5 448 320 448C346.5 448 368 469.5 368 496C368 522.5 346.5 544 320 544C293.5 544 272 522.5 272 496zM200 390.2C188.3 403.5 168.1 404.7 154.8 393C141.5 381.3 140.3 361.1 152 347.8C193 301.4 253.1 272 320 272C386.9 272 447 301.4 488 347.8C499.7 361.1 498.4 381.3 485.2 393C472 404.7 451.7 403.4 440 390.2C410.6 356.9 367.8 336 320 336C272.2 336 229.4 356.9 200 390.2z\"/></svg>",
     "xmark_light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z\"/></svg>",
+    "xmark_light_full": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M507.3 155.3C513.5 149.1 513.5 138.9 507.3 132.7C501.1 126.5 490.9 126.5 484.7 132.7L320 297.4L155.3 132.7C149.1 126.5 138.9 126.5 132.7 132.7C126.5 138.9 126.5 149.1 132.7 155.3L297.4 320L132.7 484.7C126.5 490.9 126.5 501.1 132.7 507.3C138.9 513.5 149.1 513.5 155.3 507.3L320 342.6L484.7 507.3C490.9 513.5 501.1 513.5 507.3 507.3C513.5 501.1 513.5 490.9 507.3 484.7L342.6 320L507.3 155.3z\"/></svg>",
     "xmark_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z\"/></svg>"
 };
 
@@ -12861,7 +12880,7 @@ class GoogleTranslateService {
             return input;
         }
         const sourceLang = this._defaultLanguage.toLowerCase();
-        const targetLang = this._clientLanguage.toLowerCase();
+        const targetLang = this._clientLanguage ? this._clientLanguage.toLowerCase() : sourceLang;
         const translationList = [input];
         // When we do not need a translation
         if (!input || (sourceLang === targetLang)) {
@@ -14726,6 +14745,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class.should-be-hidden']
             }] } });
 
+var PresetDialogMode;
+(function (PresetDialogMode) {
+    PresetDialogMode[PresetDialogMode["SAVE"] = 0] = "SAVE";
+    PresetDialogMode[PresetDialogMode["LOAD"] = 1] = "LOAD";
+})(PresetDialogMode || (PresetDialogMode = {}));
+
+class ConfigurationPresetComponent {
+    iconService;
+    _appEventService;
+    icons = IconEnum;
+    isSaveLoadMenuOpen = false;
+    showClass() {
+        return true;
+    }
+    closeSaveLoadMenu() {
+        this.isSaveLoadMenuOpen = false;
+    }
+    constructor(iconService, _appEventService) {
+        this.iconService = iconService;
+        this._appEventService = _appEventService;
+    }
+    toggleSaveLoadMenu(event) {
+        event.stopPropagation();
+        this.isSaveLoadMenuOpen = !this.isSaveLoadMenuOpen;
+    }
+    handleSavePresetClicked() {
+        this.isSaveLoadMenuOpen = false;
+        this._appEventService.changeConfigurationPresetDialogMode.next(PresetDialogMode.SAVE);
+    }
+    handleLoadPresetClicked() {
+        this.isSaveLoadMenuOpen = false;
+        this._appEventService.changeConfigurationPresetDialogMode.next(PresetDialogMode.LOAD);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetComponent, deps: [{ token: IconCacheService }, { token: AppEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ConfigurationPresetComponent, isStandalone: false, selector: "co-configuration-preset", host: { listeners: { "document:click": "closeSaveLoadMenu()" }, properties: { "class.co-configuration-preset": "this.showClass" } }, ngImport: i0, template: `
+    <div class="save-load-config-wrapper">
+      <div class="open-save-load" (click)="toggleSaveLoadMenu($event)">
+        <co-icon [iconData]="iconService.getIcon(icons.BarsLightFull)"></co-icon>
+      </div>
+      <div
+          class="save-load-configuration-buttons"
+          [class.is-open]="isSaveLoadMenuOpen"
+          (click)="$event.stopPropagation()">
+        <co-button
+            class="preset-button save-preset-button"
+            [iconData]="iconService.getIcon(icons.FloppyDiskLightFull)"
+            [label]="'SAVE_CONFIGURATION' | localize"
+            (onClick)="handleSavePresetClicked()">
+        </co-button>
+        <co-button
+            class="preset-button load-preset-button"
+            [iconData]="iconService.getIcon(icons.FolderOpenLightFull)"
+            [label]="'LOAD_CONFIGURATION' | localize"
+            (onClick)="handleLoadPresetClicked()">
+        </co-button>
+      </div>
+    </div>
+    
+
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-configuration-preset',
+                    template: `
+    <div class="save-load-config-wrapper">
+      <div class="open-save-load" (click)="toggleSaveLoadMenu($event)">
+        <co-icon [iconData]="iconService.getIcon(icons.BarsLightFull)"></co-icon>
+      </div>
+      <div
+          class="save-load-configuration-buttons"
+          [class.is-open]="isSaveLoadMenuOpen"
+          (click)="$event.stopPropagation()">
+        <co-button
+            class="preset-button save-preset-button"
+            [iconData]="iconService.getIcon(icons.FloppyDiskLightFull)"
+            [label]="'SAVE_CONFIGURATION' | localize"
+            (onClick)="handleSavePresetClicked()">
+        </co-button>
+        <co-button
+            class="preset-button load-preset-button"
+            [iconData]="iconService.getIcon(icons.FolderOpenLightFull)"
+            [label]="'LOAD_CONFIGURATION' | localize"
+            (onClick)="handleLoadPresetClicked()">
+        </co-button>
+      </div>
+    </div>
+    
+
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: AppEventService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-configuration-preset']
+            }], closeSaveLoadMenu: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
 class SelectionsSummaryComponent {
     configuratorConnectorService;
     iconService;
@@ -14738,6 +14859,7 @@ class SelectionsSummaryComponent {
     canClose = true;
     answersTemplate;
     answerToShowFromSelectionText;
+    showSaveAndLoadConfiguration;
     customDimensions = false;
     disableMouse = false;
     handledocumentMouseUp(event) {
@@ -14787,82 +14909,88 @@ class SelectionsSummaryComponent {
         this.selectionToCustomize = sel;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectionsSummaryComponent, isStandalone: false, selector: "co-selections-summary", inputs: { selections: "selections", showLabel: "showLabel", canClose: "canClose", answersTemplate: "answersTemplate", answerToShowFromSelectionText: "answerToShowFromSelectionText", customDimensions: "customDimensions" }, outputs: { closeClick: "closeClick", cancelAnswers: "cancelAnswers", selectSelection: "selectSelection", repeatSelection: "repeatSelection", deleteSelection: "deleteSelection" }, host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class.co-selections-summary": "this.showClass", "class.custom-dimensions": "this.customDimensions", "class.disable-mouse": "this.disableMouse" } }, ngImport: i0, template: `
-    @if (showLabel || canClose) {
-      <header class="drawer__header">
-        @if (showLabel) {
-          <h2 class="mat-title">{{ 'CONFIGURATION' | localize }}</h2>
-        }
-        @if (canClose) {
-          <button class="close-lite-selector" (click)="closeClick.emit()">
-            <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-          </button>
-        }
-      </header>
-    }
-    @if (selections && selections.length > 0) {
-      <div class="selections-content small-scrollbar">
-        @for (sel of selections; track sel; let index = $index) {
-          <co-selections-summary-line
-            [selection]="sel"
-            [answersTemplate]="answersTemplate ? answersTemplate : undefined"
-            [answerToShowFromSelectionText]="answerToShowFromSelectionText"
-            [valutaSymbol]="valutaSymbol"
-            (summaryLineClick)="handleClick(sel)"
-            (summaryLineDelete)="handleDelete($event, sel)"
-            (summaryLineRepeat)="handleRepeat($event, sel)"
-            (customizeButtonClicked)="toggleElement(sel)"
-          ></co-selections-summary-line>
-        }
-        @if (showAsConfigured) {
-          <div class="sum">
-            <label [textContent]="'AS_CONFIGURED' | localize"></label><span class="total-price"></span>
-            <div class="price"> {{ configuratorConnectorService.totalPrice | priceDisplay }}</div>
-          </div>
-        }
-      </div>
-    }
-    `, isInline: true, dependencies: [{ kind: "component", type: SelectionsSummaryLineComponent, selector: "co-selections-summary-line", inputs: ["selection", "valutaSymbol", "answersTemplate", "answerToShowFromSelectionText"], outputs: ["customizeButtonClicked", "summaryLineClick", "summaryLineRepeat", "summaryLineDelete"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectionsSummaryComponent, isStandalone: false, selector: "co-selections-summary", inputs: { selections: "selections", showLabel: "showLabel", canClose: "canClose", answersTemplate: "answersTemplate", answerToShowFromSelectionText: "answerToShowFromSelectionText", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration", customDimensions: "customDimensions" }, outputs: { closeClick: "closeClick", cancelAnswers: "cancelAnswers", selectSelection: "selectSelection", repeatSelection: "repeatSelection", deleteSelection: "deleteSelection" }, host: { listeners: { "document:mouseup": "handledocumentMouseUp($event)", "document:mousemove": "handleDocumentMouseDown($event)" }, properties: { "class.co-selections-summary": "this.showClass", "class.custom-dimensions": "this.customDimensions", "class.disable-mouse": "this.disableMouse" } }, ngImport: i0, template: `
+      @if (showLabel || canClose) {
+        <header class="drawer__header">
+          @if (showLabel) {
+            <h2 class="mat-title">{{ 'CONFIGURATION' | localize }}</h2>
+          }
+          @if (canClose) {
+            <button class="close-lite-selector" (click)="closeClick.emit()">
+              <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
+            </button>
+          }
+        </header>
+      }
+      @if (selections && selections.length > 0) {
+        <div class="selections-content small-scrollbar">
+          @for (sel of selections; track sel; let index = $index) {
+            <co-selections-summary-line
+              [selection]="sel"
+              [answersTemplate]="answersTemplate ? answersTemplate : undefined"
+              [answerToShowFromSelectionText]="answerToShowFromSelectionText"
+              [valutaSymbol]="valutaSymbol"
+              (summaryLineClick)="handleClick(sel)"
+              (summaryLineDelete)="handleDelete($event, sel)"
+              (summaryLineRepeat)="handleRepeat($event, sel)"
+              (customizeButtonClicked)="toggleElement(sel)"
+            ></co-selections-summary-line>
+          }
+          @if (showSaveAndLoadConfiguration) {
+            <co-configuration-preset></co-configuration-preset>
+          }
+          @if (showAsConfigured) {
+            <div class="sum">
+              <label [textContent]="'AS_CONFIGURED' | localize"></label><span class="total-price"></span>
+              <div class="price"> {{ configuratorConnectorService.totalPrice | priceDisplay }}</div>
+            </div>
+          }
+        </div>
+      }
+    `, isInline: true, dependencies: [{ kind: "component", type: SelectionsSummaryLineComponent, selector: "co-selections-summary-line", inputs: ["selection", "valutaSymbol", "answersTemplate", "answerToShowFromSelectionText"], outputs: ["customizeButtonClicked", "summaryLineClick", "summaryLineRepeat", "summaryLineDelete"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ConfigurationPresetComponent, selector: "co-configuration-preset" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-selections-summary',
                     template: `
-    @if (showLabel || canClose) {
-      <header class="drawer__header">
-        @if (showLabel) {
-          <h2 class="mat-title">{{ 'CONFIGURATION' | localize }}</h2>
-        }
-        @if (canClose) {
-          <button class="close-lite-selector" (click)="closeClick.emit()">
-            <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-          </button>
-        }
-      </header>
-    }
-    @if (selections && selections.length > 0) {
-      <div class="selections-content small-scrollbar">
-        @for (sel of selections; track sel; let index = $index) {
-          <co-selections-summary-line
-            [selection]="sel"
-            [answersTemplate]="answersTemplate ? answersTemplate : undefined"
-            [answerToShowFromSelectionText]="answerToShowFromSelectionText"
-            [valutaSymbol]="valutaSymbol"
-            (summaryLineClick)="handleClick(sel)"
-            (summaryLineDelete)="handleDelete($event, sel)"
-            (summaryLineRepeat)="handleRepeat($event, sel)"
-            (customizeButtonClicked)="toggleElement(sel)"
-          ></co-selections-summary-line>
-        }
-        @if (showAsConfigured) {
-          <div class="sum">
-            <label [textContent]="'AS_CONFIGURED' | localize"></label><span class="total-price"></span>
-            <div class="price"> {{ configuratorConnectorService.totalPrice | priceDisplay }}</div>
-          </div>
-        }
-      </div>
-    }
+      @if (showLabel || canClose) {
+        <header class="drawer__header">
+          @if (showLabel) {
+            <h2 class="mat-title">{{ 'CONFIGURATION' | localize }}</h2>
+          }
+          @if (canClose) {
+            <button class="close-lite-selector" (click)="closeClick.emit()">
+              <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
+            </button>
+          }
+        </header>
+      }
+      @if (selections && selections.length > 0) {
+        <div class="selections-content small-scrollbar">
+          @for (sel of selections; track sel; let index = $index) {
+            <co-selections-summary-line
+              [selection]="sel"
+              [answersTemplate]="answersTemplate ? answersTemplate : undefined"
+              [answerToShowFromSelectionText]="answerToShowFromSelectionText"
+              [valutaSymbol]="valutaSymbol"
+              (summaryLineClick)="handleClick(sel)"
+              (summaryLineDelete)="handleDelete($event, sel)"
+              (summaryLineRepeat)="handleRepeat($event, sel)"
+              (customizeButtonClicked)="toggleElement(sel)"
+            ></co-selections-summary-line>
+          }
+          @if (showSaveAndLoadConfiguration) {
+            <co-configuration-preset></co-configuration-preset>
+          }
+          @if (showAsConfigured) {
+            <div class="sum">
+              <label [textContent]="'AS_CONFIGURED' | localize"></label><span class="total-price"></span>
+              <div class="price"> {{ configuratorConnectorService.totalPrice | priceDisplay }}</div>
+            </div>
+          }
+        </div>
+      }
     `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
@@ -14880,6 +15008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], answerToShowFromSelectionText: [{
                 type: Input
+            }], showSaveAndLoadConfiguration: [{
+                type: Input
             }], customDimensions: [{
                 type: HostBinding,
                 args: ['class.custom-dimensions']
@@ -14939,6 +15069,7 @@ class LiteSelectorComponent {
     canClose = true;
     animateSlideout = true;
     customDimensions = false;
+    showSaveAndLoadConfiguration;
     showChange = new EventEmitter();
     answerChosen = new EventEmitter();
     answerToShowFromSelectionText;
@@ -14991,7 +15122,7 @@ class LiteSelectorComponent {
         // this.iOne.getMoodImageForAnswerSelection(answerSelected.answer, false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LiteSelectorComponent, deps: [{ token: SwitchBuildFurnitureService }, { token: ConfiguratorConnectorService }, { token: ConfiguringService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LiteSelectorComponent, isStandalone: false, selector: "co-lite-selector", inputs: { showAnswers: "showAnswers", show: "show", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", animateSlideout: "animateSlideout", customDimensions: "customDimensions" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-lite-selector": "this.showClass", "class.custom-dimensions": "this.customDimensions" } }, viewQueries: [{ propertyName: "templateAnswers", first: true, predicate: ["templateAnswers"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LiteSelectorComponent, isStandalone: false, selector: "co-lite-selector", inputs: { showAnswers: "showAnswers", show: "show", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", animateSlideout: "animateSlideout", customDimensions: "customDimensions", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-lite-selector": "this.showClass", "class.custom-dimensions": "this.customDimensions" } }, viewQueries: [{ propertyName: "templateAnswers", first: true, predicate: ["templateAnswers"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
     <ng-container>
       @if (showSelections && configuratorConnectorService.selectionsToDisplay.length > 0) {
         <co-selections-summary
@@ -15003,11 +15134,11 @@ class LiteSelectorComponent {
           [answersTemplate]="inlineAnswers ? templateAnswers : undefined"
           [answerToShowFromSelectionText]="answerToShowFromSelectionText"
           [selections]="configuratorConnectorService.selectionsToDisplay"
+          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
           (selectSelection)="onSelectionsSummarySelectSelection($event)"
           (repeatSelection)="onSelectionsSummarySelectSelection($event, false, true)"
           (deleteSelection)="onSelectionsSummaryDeleteSelection($event)"
-          (closeClick)="onCloseLiteSelectorButtonClick()"
-          >
+          (closeClick)="onCloseLiteSelectorButtonClick()">
         </co-selections-summary>
       }
       @if (!inlineAnswers) {
@@ -15028,7 +15159,7 @@ class LiteSelectorComponent {
         (answerChosen)="onAnswersSlideoutAnswerChosen($event)"
       ></co-answers-slideout>
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: AnswersSlideoutComponent, selector: "co-answers-slideout", inputs: ["isShown", "question", "showTitle", "showFilter", "answers", "useSlideout", "customDimensions"], outputs: ["isShownChange", "answerChosen"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectionsSummaryComponent, selector: "co-selections-summary", inputs: ["selections", "showLabel", "canClose", "answersTemplate", "answerToShowFromSelectionText", "customDimensions"], outputs: ["closeClick", "cancelAnswers", "selectSelection", "repeatSelection", "deleteSelection"] }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: AnswersSlideoutComponent, selector: "co-answers-slideout", inputs: ["isShown", "question", "showTitle", "showFilter", "answers", "useSlideout", "customDimensions"], outputs: ["isShownChange", "answerChosen"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectionsSummaryComponent, selector: "co-selections-summary", inputs: ["selections", "showLabel", "canClose", "answersTemplate", "answerToShowFromSelectionText", "showSaveAndLoadConfiguration", "customDimensions"], outputs: ["closeClick", "cancelAnswers", "selectSelection", "repeatSelection", "deleteSelection"] }], animations: [
             trigger('showSelections', [
                 state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
                 state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
@@ -15052,11 +15183,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           [answersTemplate]="inlineAnswers ? templateAnswers : undefined"
           [answerToShowFromSelectionText]="answerToShowFromSelectionText"
           [selections]="configuratorConnectorService.selectionsToDisplay"
+          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
           (selectSelection)="onSelectionsSummarySelectSelection($event)"
           (repeatSelection)="onSelectionsSummarySelectSelection($event, false, true)"
           (deleteSelection)="onSelectionsSummaryDeleteSelection($event)"
-          (closeClick)="onCloseLiteSelectorButtonClick()"
-          >
+          (closeClick)="onCloseLiteSelectorButtonClick()">
         </co-selections-summary>
       }
       @if (!inlineAnswers) {
@@ -15111,6 +15242,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 args: ['class.custom-dimensions']
             }, {
                 type: Input
+            }], showSaveAndLoadConfiguration: [{
+                type: Input
             }], showChange: [{
                 type: Output
             }], answerChosen: [{
@@ -15139,6 +15272,7 @@ class ProductConfiguratorSelectorOptionTileComponent {
     icons = IconEnum;
     option;
     tileClass = 'small';
+    noLabel = false;
     selectionClicked = new EventEmitter();
     constructor(configuratorConnectorService, iconService, settingsService) {
         this.configuratorConnectorService = configuratorConnectorService;
@@ -15149,7 +15283,7 @@ class ProductConfiguratorSelectorOptionTileComponent {
         this.selectionClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionTileComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }, { token: SettingsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSelectorOptionTileComponent, isStandalone: false, selector: "co-product-configurator-selector-option-tile", inputs: { option: "option", tileClass: "tileClass" }, outputs: { selectionClicked: "selectionClicked" }, host: { properties: { "class.co-product-configurator-selector-option-tile": "this.showClass" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSelectorOptionTileComponent, isStandalone: false, selector: "co-product-configurator-selector-option-tile", inputs: { option: "option", tileClass: "tileClass", noLabel: "noLabel" }, outputs: { selectionClicked: "selectionClicked" }, host: { properties: { "class.co-product-configurator-selector-option-tile": "this.showClass" } }, ngImport: i0, template: `
     <!-- When selected show checkmark -->
     <div
       class="configurator-selector-option-tile-container configurator-selector-option-tile-container-{{this.tileClass}}"
@@ -15173,14 +15307,16 @@ class ProductConfiguratorSelectorOptionTileComponent {
         }
       </div>
       <!-- Answer text -->
-      <div class="product-configurator-selector-option-tile-description">
-        @if (option.nodeText) {
-          <p [textContent]="option.nodeText | googleTranslate | async"></p>
-        }
-        @if (!option.nodeText) {
-          <p [textContent]="'Skip / Cancel' | googleTranslate | async"></p>
+        @if (!noLabel) {
+            <div class="product-configurator-selector-option-tile-description">
+                @if (option.nodeText) {
+                    <p [textContent]="option.nodeText | googleTranslate | async"></p>
+                }
+                @if (!option.nodeText) {
+                    <p [textContent]="'Skip / Cancel' | googleTranslate | async"></p>
+                }
+            </div>
         }
-      </div>
     </div>
     `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: GoogleTranslatePipe, name: "googleTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 }
@@ -15212,14 +15348,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }
       </div>
       <!-- Answer text -->
-      <div class="product-configurator-selector-option-tile-description">
-        @if (option.nodeText) {
-          <p [textContent]="option.nodeText | googleTranslate | async"></p>
-        }
-        @if (!option.nodeText) {
-          <p [textContent]="'Skip / Cancel' | googleTranslate | async"></p>
+        @if (!noLabel) {
+            <div class="product-configurator-selector-option-tile-description">
+                @if (option.nodeText) {
+                    <p [textContent]="option.nodeText | googleTranslate | async"></p>
+                }
+                @if (!option.nodeText) {
+                    <p [textContent]="'Skip / Cancel' | googleTranslate | async"></p>
+                }
+            </div>
         }
-      </div>
     </div>
     `,
                     encapsulation: ViewEncapsulation.None,
@@ -15232,6 +15370,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], tileClass: [{
                 type: Input
+            }], noLabel: [{
+                type: Input
             }], selectionClicked: [{
                 type: Output
             }] } });
@@ -15498,13 +15638,24 @@ class ProductConfiguratorSelectorOptionComponent {
     selection;
     listOfChoices;
     markAsException;
+    showGlobalAll = false;
+    groupedSubShow = true;
     configurationDisplayOption = ConfigurationDisplayOption;
     selectionClass = '';
     showAllTiles = false;
     maxVisibleTiles = 10;
-    maxVisibleSmallTiles = 24;
+    maxVisibleSmallTiles = 7;
     visibleAnswers = [];
     remainingTilesCount = 0;
+    smallTileOptions = [
+        ConfigurationDisplayOption.TileSmall,
+        ConfigurationDisplayOption.SmallCircle,
+        ConfigurationDisplayOption.SmallSquare
+    ];
+    largeTileOptions = [
+        ConfigurationDisplayOption.TileLarge,
+        ConfigurationDisplayOption.TileRounded
+    ];
     constructor(configuratorConnectorService, settingsService, productConfiguratorService) {
         this.configuratorConnectorService = configuratorConnectorService;
         this.settingsService = settingsService;
@@ -15512,7 +15663,7 @@ class ProductConfiguratorSelectorOptionComponent {
     }
     ngOnInit() {
         if (this.selection && this.selection.displayOptionControl == null) {
-            this.selection.displayOptionControl = ConfigurationDisplayOption.Tab;
+            this.selection.displayOptionControl = ConfigurationDisplayOption.TileLarge;
         }
         if (this.markAsException) {
             this.selectionClass = 'selection-exception selection-container-' + this.selection.displayOptionControl;
@@ -15528,8 +15679,23 @@ class ProductConfiguratorSelectorOptionComponent {
             this.configuratorConnectorService.getImageForAnswer(selectionCopy);
             this.listOfChoices.push(selectionCopy);
         }
+        if (this.showGlobalAll) {
+            this.showAllTiles = true;
+        }
         this._calculateVisibleAnswers();
     }
+    ngOnChanges(changes) {
+        if (changes.showGlobalAll && !changes.showGlobalAll.firstChange) {
+            this.showAllTiles = !!changes.showGlobalAll.currentValue;
+            this._calculateVisibleAnswers();
+        }
+        if (changes.listOfChoices && !changes.listOfChoices.firstChange) {
+            this._calculateVisibleAnswers();
+        }
+        if (changes.selection && !changes.selection.firstChange) {
+            this._calculateVisibleAnswers();
+        }
+    }
     selectionClicked(answer) {
         this.productConfiguratorService.selectSelection.emit(answer);
     }
@@ -15541,23 +15707,39 @@ class ProductConfiguratorSelectorOptionComponent {
         this.showAllTiles = false;
         this._calculateVisibleAnswers();
     }
+    getTileClass() {
+        switch (this.selection.displayOptionControl) {
+            case this.configurationDisplayOption.TileLarge:
+                return 'large';
+            case this.configurationDisplayOption.TileRounded:
+                return 'rounded';
+            case this.configurationDisplayOption.SmallCircle:
+                return 'small-rounded';
+            case this.configurationDisplayOption.SmallSquare:
+                return 'small-square';
+            default:
+                return 'small';
+        }
+    }
     _calculateVisibleAnswers() {
-        if (this.selection.displayOptionControl === ConfigurationDisplayOption.TileLarge) {
-            if (this.showAllTiles) {
-                this.visibleAnswers = this.listOfChoices;
-            }
-            else {
-                this.visibleAnswers = this.listOfChoices.slice(0, this.maxVisibleTiles);
-            }
+        if (this.largeTileOptions.includes(this.selection.displayOptionControl)) {
+            const configuredMaxVisibleTiles = this.settingsService?.settings?.options?.maxVisibleTiles;
+            if (configuredMaxVisibleTiles != null) {
+                this.maxVisibleTiles = configuredMaxVisibleTiles;
+            }
+            this.visibleAnswers = this.showAllTiles
+                ? this.listOfChoices
+                : this.listOfChoices.slice(0, this.maxVisibleTiles);
             this.remainingTilesCount = Math.max(0, this.listOfChoices.length - this.maxVisibleTiles);
         }
-        else if (this.selection.displayOptionControl === ConfigurationDisplayOption.TileSmall) {
-            if (this.showAllTiles) {
-                this.visibleAnswers = this.listOfChoices;
-            }
-            else {
-                this.visibleAnswers = this.listOfChoices.slice(0, this.maxVisibleSmallTiles);
+        else if (this.smallTileOptions.includes(this.selection.displayOptionControl)) {
+            const configuredMaxVisibleTiles = this.settingsService?.settings?.options?.maxVisibleSmallTiles;
+            if (configuredMaxVisibleTiles != null) {
+                this.maxVisibleSmallTiles = configuredMaxVisibleTiles;
             }
+            this.visibleAnswers = this.showAllTiles
+                ? this.listOfChoices
+                : this.listOfChoices.slice(0, this.maxVisibleSmallTiles);
             this.remainingTilesCount = Math.max(0, this.listOfChoices.length - this.maxVisibleSmallTiles);
         }
         else {
@@ -15566,11 +15748,11 @@ class ProductConfiguratorSelectorOptionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionComponent, deps: [{ token: ConfiguratorConnectorService }, { token: SettingsService }, { token: ProductConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSelectorOptionComponent, isStandalone: false, selector: "co-product-configurator-selector-option", inputs: { selection: "selection", listOfChoices: "listOfChoices", markAsException: "markAsException" }, host: { properties: { "class.co-product-configurator-selector-option": "this.showClass" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSelectorOptionComponent, isStandalone: false, selector: "co-product-configurator-selector-option", inputs: { selection: "selection", listOfChoices: "listOfChoices", markAsException: "markAsException", showGlobalAll: "showGlobalAll", groupedSubShow: "groupedSubShow" }, host: { properties: { "class.co-product-configurator-selector-option": "this.showClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <div class="selector-wrapper {{this.selectionClass}}">
       @if (this.selection.displayOptionControl !== configurationDisplayOption.DropDown
-        && this.selection.displayOptionControl !== configurationDisplayOption.TileLarge
-        && this.selection.displayOptionControl !== configurationDisplayOption.TileSmall) {
+        && !this.largeTileOptions.includes(this.selection.displayOptionControl)
+        && !this.smallTileOptions.includes(this.selection.displayOptionControl)) {
         @for (child of listOfChoices; track child) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             @if (this.selection.displayOptionControl === configurationDisplayOption.Button) {
@@ -15592,18 +15774,25 @@ class ProductConfiguratorSelectorOptionComponent {
                 (selectionClicked)="selectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.Tab) {
+            @if (this.selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
               <co-product-configurator-selector-option-tile
                 [option]="child"
-                [tileClass]="'small-rounded'"
+                [tileClass]="'horizontal'"
                 (selectionClicked)="selectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
+            @if (this.selection.displayOptionControl === configurationDisplayOption.OnPage) {
               <co-product-configurator-selector-option-tile
-                [option]="child"
-                [tileClass]="'horizontal'"
-                (selectionClicked)="selectionClicked(child)">
+                  [option]="child"
+                  [tileClass]="'on-page'"
+                  (selectionClicked)="selectionClicked(child)">
+              </co-product-configurator-selector-option-tile>
+            }
+            @if (this.selection.displayOptionControl === configurationDisplayOption.SlideOut) {
+              <co-product-configurator-selector-option-tile
+                  [option]="child"
+                  [tileClass]="'slide-out'"
+                  (selectionClicked)="selectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
           </div>
@@ -15611,13 +15800,14 @@ class ProductConfiguratorSelectorOptionComponent {
       }
     
       @if (
-        this.selection.displayOptionControl === configurationDisplayOption.TileLarge ||
-        this.selection.displayOptionControl === configurationDisplayOption.TileSmall) {
+          this.largeTileOptions.includes(this.selection.displayOptionControl)
+          || this.smallTileOptions.includes(this.selection.displayOptionControl)) {
         @for (child of visibleAnswers; track child) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             <co-product-configurator-selector-option-tile
               [option]="child"
-              [tileClass]="this.selection.displayOptionControl === configurationDisplayOption.TileLarge ? 'large' : 'small'"
+              [noLabel]="this.selection.displayOptionControl === configurationDisplayOption.SmallCircle || this.selection.displayOptionControl === configurationDisplayOption.SmallSquare"
+              [tileClass]="getTileClass()"
               (selectionClicked)="selectionClicked(child)"
             ></co-product-configurator-selector-option-tile>
           </div>
@@ -15625,18 +15815,16 @@ class ProductConfiguratorSelectorOptionComponent {
       }
     
       @if (this.selection.displayOptionControl === configurationDisplayOption.DropDown) {
-        @if (this.selection.displayOptionControl === configurationDisplayOption.DropDown) {
-          <co-product-configurator-selector-option-dropdown
-            [options]="listOfChoices"
-            (selectionClicked)="selectionClicked($event)"
-          ></co-product-configurator-selector-option-dropdown>
-        }
+        <co-product-configurator-selector-option-dropdown
+          [options]="listOfChoices"
+          (selectionClicked)="selectionClicked($event)"
+        ></co-product-configurator-selector-option-dropdown>
       }
     </div>
     
     @if (
-      this.selection.displayOptionControl === configurationDisplayOption.TileLarge ||
-      this.selection.displayOptionControl === configurationDisplayOption.TileSmall) {
+        (this.largeTileOptions.includes(this.selection.displayOptionControl) ||
+        this.smallTileOptions.includes(this.selection.displayOptionControl)) && groupedSubShow) {
       @if (!showAllTiles && remainingTilesCount > 0) {
         <div class="show-more-container">
           <span (click)="showMore()">
@@ -15653,7 +15841,7 @@ class ProductConfiguratorSelectorOptionComponent {
       }
     }
     
-    `, isInline: true, dependencies: [{ kind: "component", type: ProductConfiguratorSelectorOptionTileComponent, selector: "co-product-configurator-selector-option-tile", inputs: ["option", "tileClass"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorOptionCheckboxComponent, selector: "co-product-configurator-option-checkbox", inputs: ["option"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorSelectorOptionButtonComponent, selector: "co-product-configurator-selector-option-button", inputs: ["option"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorSelectorOptionDropDownComponent, selector: "co-product-configurator-selector-option-dropdown", inputs: ["options", "tileClass"], outputs: ["selectionClicked"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: ProductConfiguratorSelectorOptionTileComponent, selector: "co-product-configurator-selector-option-tile", inputs: ["option", "tileClass", "noLabel"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorOptionCheckboxComponent, selector: "co-product-configurator-option-checkbox", inputs: ["option"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorSelectorOptionButtonComponent, selector: "co-product-configurator-selector-option-button", inputs: ["option"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorSelectorOptionDropDownComponent, selector: "co-product-configurator-selector-option-dropdown", inputs: ["options", "tileClass"], outputs: ["selectionClicked"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('showSelections', [
                 state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
                 state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
@@ -15668,8 +15856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     template: `
     <div class="selector-wrapper {{this.selectionClass}}">
       @if (this.selection.displayOptionControl !== configurationDisplayOption.DropDown
-        && this.selection.displayOptionControl !== configurationDisplayOption.TileLarge
-        && this.selection.displayOptionControl !== configurationDisplayOption.TileSmall) {
+        && !this.largeTileOptions.includes(this.selection.displayOptionControl)
+        && !this.smallTileOptions.includes(this.selection.displayOptionControl)) {
         @for (child of listOfChoices; track child) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             @if (this.selection.displayOptionControl === configurationDisplayOption.Button) {
@@ -15691,18 +15879,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 (selectionClicked)="selectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.Tab) {
+            @if (this.selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
               <co-product-configurator-selector-option-tile
                 [option]="child"
-                [tileClass]="'small-rounded'"
+                [tileClass]="'horizontal'"
                 (selectionClicked)="selectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
+            @if (this.selection.displayOptionControl === configurationDisplayOption.OnPage) {
               <co-product-configurator-selector-option-tile
-                [option]="child"
-                [tileClass]="'horizontal'"
-                (selectionClicked)="selectionClicked(child)">
+                  [option]="child"
+                  [tileClass]="'on-page'"
+                  (selectionClicked)="selectionClicked(child)">
+              </co-product-configurator-selector-option-tile>
+            }
+            @if (this.selection.displayOptionControl === configurationDisplayOption.SlideOut) {
+              <co-product-configurator-selector-option-tile
+                  [option]="child"
+                  [tileClass]="'slide-out'"
+                  (selectionClicked)="selectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
           </div>
@@ -15710,13 +15905,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       }
     
       @if (
-        this.selection.displayOptionControl === configurationDisplayOption.TileLarge ||
-        this.selection.displayOptionControl === configurationDisplayOption.TileSmall) {
+          this.largeTileOptions.includes(this.selection.displayOptionControl)
+          || this.smallTileOptions.includes(this.selection.displayOptionControl)) {
         @for (child of visibleAnswers; track child) {
           <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
             <co-product-configurator-selector-option-tile
               [option]="child"
-              [tileClass]="this.selection.displayOptionControl === configurationDisplayOption.TileLarge ? 'large' : 'small'"
+              [noLabel]="this.selection.displayOptionControl === configurationDisplayOption.SmallCircle || this.selection.displayOptionControl === configurationDisplayOption.SmallSquare"
+              [tileClass]="getTileClass()"
               (selectionClicked)="selectionClicked(child)"
             ></co-product-configurator-selector-option-tile>
           </div>
@@ -15724,18 +15920,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       }
     
       @if (this.selection.displayOptionControl === configurationDisplayOption.DropDown) {
-        @if (this.selection.displayOptionControl === configurationDisplayOption.DropDown) {
-          <co-product-configurator-selector-option-dropdown
-            [options]="listOfChoices"
-            (selectionClicked)="selectionClicked($event)"
-          ></co-product-configurator-selector-option-dropdown>
-        }
+        <co-product-configurator-selector-option-dropdown
+          [options]="listOfChoices"
+          (selectionClicked)="selectionClicked($event)"
+        ></co-product-configurator-selector-option-dropdown>
       }
     </div>
     
     @if (
-      this.selection.displayOptionControl === configurationDisplayOption.TileLarge ||
-      this.selection.displayOptionControl === configurationDisplayOption.TileSmall) {
+        (this.largeTileOptions.includes(this.selection.displayOptionControl) ||
+        this.smallTileOptions.includes(this.selection.displayOptionControl)) && groupedSubShow) {
       @if (!showAllTiles && remainingTilesCount > 0) {
         <div class="show-more-container">
           <span (click)="showMore()">
@@ -15772,25 +15966,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], markAsException: [{
                 type: Input
+            }], showGlobalAll: [{
+                type: Input
+            }], groupedSubShow: [{
+                type: Input
             }] } });
 
 class ProductConfiguratorSelectorComponent {
     configuratorConnectorService;
     settingsService;
     iconService;
-    showClass() {
-        return true;
-    }
-    icons = IconEnum;
-    exceptionContainer;
     get hostClasses() {
-        const classes = [];
-        classes.push(`treelevel-${this.treeLevelIndex}`);
-        if (this.treeLevelIndex === 2 && !this.isActive) {
-            classes.push('hidden');
+        const classes = [
+            'co-product-configurator-selector',
+            `treelevel-${this.treeLevelIndex}`
+        ];
+        if (!this._shouldBeVisible()) {
+            classes.push('hidden-frontend');
         }
         return classes.join(' ');
     }
+    icons = IconEnum;
+    exceptionContainer;
     selection;
     options;
     lastNodeWithChildren;
@@ -15798,13 +15995,37 @@ class ProductConfiguratorSelectorComponent {
     treeLevelIndex = 1;
     isActive = true;
     markAsException = false;
+    showAll = false;
+    suppressSubShowMore = false;
+    useGroupedParentVisibility = false;
     activate = new EventEmitter();
-    get selectionIndexText() {
-        return this.selectionIndex + '. ';
-    }
     selectionClass = '';
     listOfChoices = [];
     activeChildIndex = 0;
+    localShowAll = false;
+    get selectionIndexText() {
+        return this.selectionIndex + '. ';
+    }
+    get expandButtonText() {
+        if (this.getChildShowAll()) {
+            return 'VIEW_LESS';
+        }
+        return this.groupedRemainingTilesCount > 0
+            ? `SHOW_ALL`
+            : 'SHOW_ALL';
+    }
+    get suppressSubShowMoreForChildren() {
+        return this.suppressSubShowMore || this.isGroupedSection();
+    }
+    get groupedRemainingTilesCount() {
+        if (!this.isGroupedSection() || this.getChildShowAll()) {
+            return 0;
+        }
+        return this._countGroupedTilesToReveal(this.options);
+    }
+    get useGroupedVisibilityForChildren() {
+        return this.useGroupedParentVisibility || this.isGroupedSection();
+    }
     constructor(configuratorConnectorService, settingsService, iconService) {
         this.configuratorConnectorService = configuratorConnectorService;
         this.settingsService = settingsService;
@@ -15826,6 +16047,15 @@ class ProductConfiguratorSelectorComponent {
         if (this.markAsException) {
             this.showAndScroll();
         }
+        this._setActiveChildIndexFromSelection();
+    }
+    ngOnChanges(changes) {
+        if (changes.options && !changes.options.firstChange) {
+            this._setActiveChildIndexFromSelection();
+        }
+        if (changes.showAll && !changes.showAll.firstChange) {
+            this._setActiveChildIndexFromSelection();
+        }
     }
     showAndScroll() {
         setTimeout(() => {
@@ -15835,8 +16065,128 @@ class ProductConfiguratorSelectorComponent {
     onSubHeaderClick() {
         this.activate.emit();
     }
+    onShowAllClick() {
+        this.localShowAll = !this.localShowAll;
+    }
+    getIsChildVisible(index) {
+        if (!this.useGroupedVisibilityForChildren) {
+            return true;
+        }
+        if (this.getChildShowAll()) {
+            return true;
+        }
+        return index === this.activeChildIndex;
+    }
+    isGroupedSection() {
+        return this.treeLevelIndex === 1
+            && !this.lastNodeWithChildren
+            && this.settingsService.settings.options.groupedShowAllBtn
+            && Array.isArray(this.options)
+            && this.options.length > 1;
+    }
+    shouldShowExpandButton() {
+        return this.isGroupedSection();
+    }
+    getChildShowAll() {
+        return this.showAll || this.localShowAll;
+    }
+    _shouldBeVisible() {
+        if (!this.useGroupedVisibilityForChildren) {
+            return true;
+        }
+        if (this.getChildShowAll()) {
+            return true;
+        }
+        return this.isActive;
+    }
+    _setActiveChildIndexFromSelection() {
+        if (!Array.isArray(this.options) || this.options.length === 0) {
+            this.activeChildIndex = 0;
+            return;
+        }
+        const selectedIndex = this.options.findIndex(option => this._hasSelectedOption(option));
+        this.activeChildIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    }
+    _hasSelectedOption(option) {
+        if (!option) {
+            return false;
+        }
+        if (option.selector && option.selector.selected === 'F') {
+            return true;
+        }
+        if (!Array.isArray(option.selectorOptions) || option.selectorOptions.length === 0) {
+            return false;
+        }
+        return option.selectorOptions.some(childOption => this._hasSelectedOption(childOption));
+    }
+    _countRemainingTiles(options) {
+        if (!Array.isArray(options) || options.length === 0) {
+            return 0;
+        }
+        let total = 0;
+        for (const option of options) {
+            if (!option) {
+                continue;
+            }
+            if (option.lastNodeWithChildren) {
+                total += this._remainingTilesForLeaf(option);
+            }
+            else if (Array.isArray(option.selectorOptions)) {
+                total += this._countRemainingTiles(option.selectorOptions);
+            }
+        }
+        return total;
+    }
+    _countGroupedTilesToReveal(options) {
+        if (!Array.isArray(options) || options.length === 0) {
+            return 0;
+        }
+        let total = 0;
+        options.forEach((option, index) => {
+            if (index === this.activeChildIndex) {
+                total += this._countRemainingTiles([option]);
+            }
+            else {
+                total += this._countAllTiles(option);
+            }
+        });
+        return total;
+    }
+    _countAllTiles(option) {
+        if (!option) {
+            return 0;
+        }
+        if (option.lastNodeWithChildren) {
+            return Array.isArray(option.selectorOptions)
+                ? option.selectorOptions.length
+                : 0;
+        }
+        if (!Array.isArray(option.selectorOptions)) {
+            return 0;
+        }
+        return option.selectorOptions.reduce((total, childOption) => total + this._countAllTiles(childOption), 0);
+    }
+    _remainingTilesForLeaf(option) {
+        if (!option?.selectorOptions || !option.selector) {
+            return 0;
+        }
+        const displayOption = option.selector.displayOptionControl;
+        const count = option.selectorOptions.length;
+        if (displayOption === ConfigurationDisplayOption.TileLarge
+            || displayOption === ConfigurationDisplayOption.TileRounded) {
+            const maxVisibleTiles = this.settingsService?.settings?.options?.maxVisibleTiles ?? 10;
+            return Math.max(0, count - maxVisibleTiles);
+        }
+        if (displayOption === ConfigurationDisplayOption.TileSmall
+            || displayOption === ConfigurationDisplayOption.SmallCircle
+            || displayOption === ConfigurationDisplayOption.SmallSquare) {
+            const maxVisibleSmallTiles = this.settingsService?.settings?.options?.maxVisibleSmallTiles ?? 24;
+            return Math.max(0, count - maxVisibleSmallTiles);
+        }
+        return 0;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: SettingsService }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSelectorComponent, isStandalone: false, selector: "co-product-configurator-selector", inputs: { selection: "selection", options: "options", lastNodeWithChildren: "lastNodeWithChildren", selectionIndex: "selectionIndex", treeLevelIndex: "treeLevelIndex", isActive: "isActive", markAsException: "markAsException" }, outputs: { activate: "activate" }, host: { properties: { "class.co-product-configurator-selector": "this.showClass", "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "exceptionContainer", first: true, predicate: ["exceptionContainer"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSelectorComponent, isStandalone: false, selector: "co-product-configurator-selector", inputs: { selection: "selection", options: "options", lastNodeWithChildren: "lastNodeWithChildren", selectionIndex: "selectionIndex", treeLevelIndex: "treeLevelIndex", isActive: "isActive", markAsException: "markAsException", showAll: "showAll", suppressSubShowMore: "suppressSubShowMore", useGroupedParentVisibility: "useGroupedParentVisibility" }, outputs: { activate: "activate" }, host: { properties: { "class": "this.hostClasses" } }, viewQueries: [{ propertyName: "exceptionContainer", first: true, predicate: ["exceptionContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="selector-container">
       <!--
       Based on the threeLevel and the length op options we got a couple of flavours
@@ -15885,7 +16235,9 @@ class ProductConfiguratorSelectorComponent {
         <co-product-configurator-selector-option
           [selection]="selection"
           [listOfChoices]="listOfChoices"
-          [markAsException]="markAsException">
+          [groupedSubShow]="!suppressSubShowMoreForChildren"
+          [markAsException]="markAsException"
+          [showGlobalAll]="getChildShowAll()">
         </co-product-configurator-selector-option>
       }
     </div>
@@ -15898,13 +16250,29 @@ class ProductConfiguratorSelectorComponent {
           [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
           [selectionIndex]="index + 1"
           [treeLevelIndex]="treeLevelIndex + 1"
-          [isActive]="treeLevelIndex !== 1 || index === activeChildIndex"
+          [showAll]="getChildShowAll()"
+          [isActive]="getIsChildVisible(index)"
+          [suppressSubShowMore]="suppressSubShowMoreForChildren"
+          [useGroupedParentVisibility]="useGroupedVisibilityForChildren"
           [markAsException]="displaySelection.markForExceptionNotification"
           (activate)="activeChildIndex = index">
         </co-product-configurator-selector>
       }
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductConfiguratorSelectorOptionComponent, selector: "co-product-configurator-selector-option", inputs: ["selection", "listOfChoices", "markAsException"] }, { kind: "component", type: ProductConfiguratorSelectorComponent, selector: "co-product-configurator-selector", inputs: ["selection", "options", "lastNodeWithChildren", "selectionIndex", "treeLevelIndex", "isActive", "markAsException"], outputs: ["activate"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: GoogleTranslatePipe, name: "googleTranslate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], animations: [
+    @if (shouldShowExpandButton()) {
+      <div class="show-more-container" (click)="onShowAllClick()">
+    <span class="show-all-button show-more-text-link"
+          [textContent]="expandButtonText | localize">
+    </span>
+
+        @if (this.groupedRemainingTilesCount > 0) {
+          <span class="show-all-button show-more-text-link counter"
+                [textContent]="'(' + this.groupedRemainingTilesCount + ')'">
+      </span>
+        }
+      </div>
+    }
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductConfiguratorSelectorOptionComponent, selector: "co-product-configurator-selector-option", inputs: ["selection", "listOfChoices", "markAsException", "showGlobalAll", "groupedSubShow"] }, { kind: "component", type: ProductConfiguratorSelectorComponent, selector: "co-product-configurator-selector", inputs: ["selection", "options", "lastNodeWithChildren", "selectionIndex", "treeLevelIndex", "isActive", "markAsException", "showAll", "suppressSubShowMore", "useGroupedParentVisibility"], outputs: ["activate"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: GoogleTranslatePipe, name: "googleTranslate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], animations: [
             trigger('showSelections', [
                 state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
                 state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
@@ -15965,7 +16333,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <co-product-configurator-selector-option
           [selection]="selection"
           [listOfChoices]="listOfChoices"
-          [markAsException]="markAsException">
+          [groupedSubShow]="!suppressSubShowMoreForChildren"
+          [markAsException]="markAsException"
+          [showGlobalAll]="getChildShowAll()">
         </co-product-configurator-selector-option>
       }
     </div>
@@ -15978,12 +16348,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
           [selectionIndex]="index + 1"
           [treeLevelIndex]="treeLevelIndex + 1"
-          [isActive]="treeLevelIndex !== 1 || index === activeChildIndex"
+          [showAll]="getChildShowAll()"
+          [isActive]="getIsChildVisible(index)"
+          [suppressSubShowMore]="suppressSubShowMoreForChildren"
+          [useGroupedParentVisibility]="useGroupedVisibilityForChildren"
           [markAsException]="displaySelection.markForExceptionNotification"
           (activate)="activeChildIndex = index">
         </co-product-configurator-selector>
       }
     }
+    @if (shouldShowExpandButton()) {
+      <div class="show-more-container" (click)="onShowAllClick()">
+    <span class="show-all-button show-more-text-link"
+          [textContent]="expandButtonText | localize">
+    </span>
+
+        @if (this.groupedRemainingTilesCount > 0) {
+          <span class="show-all-button show-more-text-link counter"
+                [textContent]="'(' + this.groupedRemainingTilesCount + ')'">
+      </span>
+        }
+      </div>
+    }
     `,
                     encapsulation: ViewEncapsulation.None,
                     animations: [
@@ -15995,15 +16381,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: SettingsService }, { type: IconCacheService }], propDecorators: { showClass: [{
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: SettingsService }, { type: IconCacheService }], propDecorators: { hostClasses: [{
                 type: HostBinding,
-                args: ['class.co-product-configurator-selector']
+                args: ['class']
             }], exceptionContainer: [{
                 type: ViewChild,
                 args: ['exceptionContainer']
-            }], hostClasses: [{
-                type: HostBinding,
-                args: ['class']
             }], selection: [{
                 type: Input
             }], options: [{
@@ -16018,6 +16401,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], markAsException: [{
                 type: Input
+            }], showAll: [{
+                type: Input
+            }], suppressSubShowMore: [{
+                type: Input
+            }], useGroupedParentVisibility: [{
+                type: Input
             }], activate: [{
                 type: Output
             }] } });
@@ -16050,6 +16439,7 @@ class ProductConfiguratorComponent {
     showLabel = true;
     canClose = true;
     customDimensions = false;
+    showSaveAndLoadConfiguration;
     showChange = new EventEmitter();
     answerChosen = new EventEmitter();
     valutaSymbol = '€'; // TODO this should be a setting
@@ -16103,7 +16493,7 @@ class ProductConfiguratorComponent {
         this.showChange.emit(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: SwitchBuildFurnitureService }, { token: SettingsService }, { token: ProductConfiguratorService }, { token: IconCacheService }, { token: i1.DomSanitizer }, { token: ConfiguringService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorComponent, isStandalone: false, selector: "co-product-configurator", inputs: { show: "show", showHeaderInformation: "showHeaderInformation", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", customDimensions: "customDimensions" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-product-configurator": "this.showClass" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorComponent, isStandalone: false, selector: "co-product-configurator", inputs: { show: "show", showHeaderInformation: "showHeaderInformation", showSelections: "showSelections", showLabel: "showLabel", canClose: "canClose", customDimensions: "customDimensions", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration" }, outputs: { showChange: "showChange", answerChosen: "answerChosen" }, host: { properties: { "class.co-product-configurator": "this.showClass" } }, ngImport: i0, template: `
     @if (show) {
       <div class="product-configurator-container">
         @if (showHeaderInformation) {
@@ -16112,11 +16502,16 @@ class ProductConfiguratorComponent {
               <h2 class="product-configurator-header-text" [textContent]="article.name"></h2>
               <p class="product-configurator-text" [innerHTML]="safeDescription"></p>
             </div>
-            @if (canClose) {
-              <div class="product-configurator-close" (click)="handleCloseClick()">
-                <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-              </div>
-            }
+            <div class="product-configurator-header-actions">
+              @if (showSaveAndLoadConfiguration) {
+                <co-configuration-preset></co-configuration-preset>
+              }
+              @if (canClose) {
+                <div class="product-configurator-close" (click)="handleCloseClick()">
+                  <co-icon [iconData]="iconService.getIcon(icons.XmarkLightFull)"></co-icon>
+                </div>
+              } 
+            </div>
           </div>
         }
         <div class="product-configurator-details" #scrollcontainer>
@@ -16144,7 +16539,7 @@ class ProductConfiguratorComponent {
         }
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductConfiguratorSelectorComponent, selector: "co-product-configurator-selector", inputs: ["selection", "options", "lastNodeWithChildren", "selectionIndex", "treeLevelIndex", "isActive", "markAsException"], outputs: ["activate"] }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductConfiguratorSelectorComponent, selector: "co-product-configurator-selector", inputs: ["selection", "options", "lastNodeWithChildren", "selectionIndex", "treeLevelIndex", "isActive", "markAsException", "showAll", "suppressSubShowMore", "useGroupedParentVisibility"], outputs: ["activate"] }, { kind: "component", type: ConfigurationPresetComponent, selector: "co-configuration-preset" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorComponent, decorators: [{
             type: Component,
@@ -16159,11 +16554,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               <h2 class="product-configurator-header-text" [textContent]="article.name"></h2>
               <p class="product-configurator-text" [innerHTML]="safeDescription"></p>
             </div>
-            @if (canClose) {
-              <div class="product-configurator-close" (click)="handleCloseClick()">
-                <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
-              </div>
-            }
+            <div class="product-configurator-header-actions">
+              @if (showSaveAndLoadConfiguration) {
+                <co-configuration-preset></co-configuration-preset>
+              }
+              @if (canClose) {
+                <div class="product-configurator-close" (click)="handleCloseClick()">
+                  <co-icon [iconData]="iconService.getIcon(icons.XmarkLightFull)"></co-icon>
+                </div>
+              } 
+            </div>
           </div>
         }
         <div class="product-configurator-details" #scrollcontainer>
@@ -16210,12 +16610,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], customDimensions: [{
                 type: Input
+            }], showSaveAndLoadConfiguration: [{
+                type: Input
             }], showChange: [{
                 type: Output
             }], answerChosen: [{
                 type: Output
             }] } });
 
+class ConfigurationPresetDialogComponent {
+    iconService;
+    _configuringService;
+    _configuratorConnectorService;
+    _dictionaryService;
+    _appEventService;
+    icons = IconEnum;
+    presetDialogMode = PresetDialogMode;
+    showClass() {
+        return true;
+    }
+    showDialog = false;
+    instanceIdInput;
+    dialogMode = PresetDialogMode.SAVE;
+    showValidationErrors = false;
+    validationError;
+    _subs = [];
+    constructor(iconService, _configuringService, _configuratorConnectorService, _dictionaryService, _appEventService) {
+        this.iconService = iconService;
+        this._configuringService = _configuringService;
+        this._configuratorConnectorService = _configuratorConnectorService;
+        this._dictionaryService = _dictionaryService;
+        this._appEventService = _appEventService;
+        this._subs.push(this._appEventService.changeConfigurationPresetDialogMode.subscribe((mode) => {
+            this.handleOpenDialog(mode);
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach((sub) => sub.unsubscribe());
+    }
+    handleOpenDialog(mode) {
+        if (mode === PresetDialogMode.SAVE) {
+            const instanceId = this._configuringService.buildResult.instanceId;
+            this._configuratorConnectorService.storePreset(instanceId).then((response) => {
+                if (response && response.validationResult && response.validationResult.success) {
+                    this.instanceIdInput = response.resultObject;
+                    this.dialogMode = mode;
+                    this.showDialog = true;
+                }
+            });
+        }
+        else if (mode === PresetDialogMode.LOAD) {
+            this.dialogMode = mode;
+            this.showDialog = true;
+        }
+    }
+    handleCloseClick() {
+        this.showDialog = false;
+    }
+    handleCopySuccess() {
+        this.instanceIdInput = this._dictionaryService.get('COPIED');
+    }
+    loadConfiguration() {
+        const goodId = +this._configuringService.buildResult.goodId;
+        this._configuratorConnectorService.initForPreset(this.instanceIdInput, goodId).then((response) => {
+            if (response && response.validationResult && response.validationResult.success) {
+                this.showDialog = false;
+                const resultObject = this._configuringService.buildResult;
+                resultObject.instanceId = response.resultObject;
+                this._configuringService.configure(resultObject);
+            }
+            else {
+                // error, shit not found
+                if (response.validationResult && response.validationResult.messages && response.validationResult.messages.length > 0) {
+                    const firstMessage = response.validationResult.messages[0].message;
+                    this.showValidationErrors = true;
+                    this.validationError = firstMessage;
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogComponent, deps: [{ token: IconCacheService }, { token: ConfiguringService }, { token: ConfiguratorConnectorService }, { token: DictionaryService }, { token: AppEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfigurationPresetDialogComponent, isStandalone: false, selector: "co-configuration-preset-dialog", host: { properties: { "class.co-configuration-preset-dialog": "this.showClass" } }, ngImport: i0, template: `
+    @if (showDialog) {
+      <div class="configuration-preset-dialog">
+        <div class="configuration-preset-dialog-container">
+          <div class="configuration-preset-dialog-container-header">
+            @if (dialogMode === presetDialogMode.SAVE) {
+              <co-icon [iconData]="iconService.getIcon(icons.FloppyDiskLightFull)"></co-icon>
+              <h3 [textContent]="'SAVE_CONFIGURATION' | localize"></h3>
+            } @else if (dialogMode === presetDialogMode.LOAD) {
+              <co-icon [iconData]="iconService.getIcon(icons.FolderOpenLightFull)"></co-icon>
+              <h3 [textContent]="'LOAD_CONFIGURATION' | localize"></h3>
+            }
+          </div>
+          <div class="configuration-preset-dialog-container-body">
+            @if (dialogMode === presetDialogMode.SAVE) {
+              <div class="save-success">
+                <p class="save-success-text" [textContent]="instanceIdInput"></p>
+                <co-button
+                  class="save-success-button"
+                  [cdkCopyToClipboard]="instanceIdInput"
+                  [iconData]="iconService.getIcon(icons.CopyRegularFull)"
+                  (onClick)="handleCopySuccess()">
+                </co-button>
+              </div>
+            } @else if (dialogMode === presetDialogMode.LOAD) {
+              <co-input-text
+                [placeholder]="'CONFIGURATION_CODE' | localize"
+                [(model)]="instanceIdInput"
+              ></co-input-text>
+              
+              @if (showValidationErrors) {
+                <div class="validation-error">
+                  <p [textContent]="validationError"></p>
+                </div>
+              }
+            }
+          </div>
+          <div class="configuration-preset-dialog-container-footer">
+            @if (dialogMode === presetDialogMode.LOAD) {
+              <co-button
+                class="button-as-link"
+                [label]="'CANCEL' | localize"
+                (onClick)="handleCloseClick()"
+              ></co-button>
+            }
+            @if (dialogMode === presetDialogMode.SAVE) {
+              <co-button
+                class="save-preset-button"
+                [label]="'OK' | localize" 
+                (onClick)="handleCloseClick()">
+              </co-button>
+            } @else if (dialogMode === presetDialogMode.LOAD) {
+              <co-button 
+                class="open-preset-button" 
+                [label]="'OPEN' | localize" 
+                (onClick)="loadConfiguration()">
+              </co-button>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: i4.InputTextComponent, selector: "co-input-text", inputs: ["useContent", "placeholder", "align", "type", "formatPipe", "min", "max", "pattern", "digitsOnly", "excludePlusMinus", "showClearButton", "keyDownWhiteList", "showPlaceholderOnFocus", "leftIcon", "rightIcon", "leftIconData", "rightIconData", "selectOnFocus", "emptyPlace", "firstDayOfWeek", "noStyle", "hideArrowButtons", "model"], outputs: ["leftIconClick", "leftIconMouseDown", "leftIconMouseUp", "rightIconClick", "rightIconMouseDown", "rightIconMouseUp", "clearIconClick", "isFocused"] }, { kind: "directive", type: i7.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-configuration-preset-dialog',
+                    template: `
+    @if (showDialog) {
+      <div class="configuration-preset-dialog">
+        <div class="configuration-preset-dialog-container">
+          <div class="configuration-preset-dialog-container-header">
+            @if (dialogMode === presetDialogMode.SAVE) {
+              <co-icon [iconData]="iconService.getIcon(icons.FloppyDiskLightFull)"></co-icon>
+              <h3 [textContent]="'SAVE_CONFIGURATION' | localize"></h3>
+            } @else if (dialogMode === presetDialogMode.LOAD) {
+              <co-icon [iconData]="iconService.getIcon(icons.FolderOpenLightFull)"></co-icon>
+              <h3 [textContent]="'LOAD_CONFIGURATION' | localize"></h3>
+            }
+          </div>
+          <div class="configuration-preset-dialog-container-body">
+            @if (dialogMode === presetDialogMode.SAVE) {
+              <div class="save-success">
+                <p class="save-success-text" [textContent]="instanceIdInput"></p>
+                <co-button
+                  class="save-success-button"
+                  [cdkCopyToClipboard]="instanceIdInput"
+                  [iconData]="iconService.getIcon(icons.CopyRegularFull)"
+                  (onClick)="handleCopySuccess()">
+                </co-button>
+              </div>
+            } @else if (dialogMode === presetDialogMode.LOAD) {
+              <co-input-text
+                [placeholder]="'CONFIGURATION_CODE' | localize"
+                [(model)]="instanceIdInput"
+              ></co-input-text>
+              
+              @if (showValidationErrors) {
+                <div class="validation-error">
+                  <p [textContent]="validationError"></p>
+                </div>
+              }
+            }
+          </div>
+          <div class="configuration-preset-dialog-container-footer">
+            @if (dialogMode === presetDialogMode.LOAD) {
+              <co-button
+                class="button-as-link"
+                [label]="'CANCEL' | localize"
+                (onClick)="handleCloseClick()"
+              ></co-button>
+            }
+            @if (dialogMode === presetDialogMode.SAVE) {
+              <co-button
+                class="save-preset-button"
+                [label]="'OK' | localize" 
+                (onClick)="handleCloseClick()">
+              </co-button>
+            } @else if (dialogMode === presetDialogMode.LOAD) {
+              <co-button 
+                class="open-preset-button" 
+                [label]="'OPEN' | localize" 
+                (onClick)="loadConfiguration()">
+              </co-button>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: ConfiguringService }, { type: ConfiguratorConnectorService }, { type: DictionaryService }, { type: AppEventService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-configuration-preset-dialog']
+            }] } });
+
 class ThreedselectorComponent {
     _appEventService;
     _buildFurnitureService;
@@ -16229,6 +16842,7 @@ class ThreedselectorComponent {
     canCloseConfigurator = true;
     animateSlideout = true;
     showHeaderInformation = true;
+    showSaveAndLoadConfiguration;
     buildFinished = new EventEmitter();
     showChange = new EventEmitter();
     showElementToolbar = false;
@@ -16291,29 +16905,34 @@ class ThreedselectorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ThreedselectorComponent, deps: [{ token: AppEventService }, { token: SwitchBuildFurnitureService }, { token: ConfiguringService }, { token: ConfiguratorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ThreedselectorComponent, isStandalone: false, selector: "co-threedselector", inputs: { selections: "selections", canCloseConfigurator: "canCloseConfigurator", animateSlideout: "animateSlideout", showHeaderInformation: "showHeaderInformation" }, outputs: { customizeButtonClicked: "customizeButtonClicked", buildFinished: "buildFinished", showChange: "showChange" }, host: { properties: { "class.co-threedselector": "this.showClass" } }, ngImport: i0, template: `
-    @if (!showFullConfiguration) {
-      <co-lite-selector
-        class="floating"
-        [showSelections]="showTemplate"
-        [showAnswers]="showTemplate"
-        [animateSlideout]="animateSlideout"
-        [canClose]="canCloseConfigurator"
-        (showChange)="handleShowChangeSelector($event)">
-      </co-lite-selector>
-    }
-    
-    @if (showFullConfiguration) {
-      <co-product-configurator
-        class="floating"
-        [show]="showTemplate"
-        [showSelections]="showSelections"
-        [canClose]="canCloseConfigurator"
-        [showHeaderInformation]="showHeaderInformation"
-        (showChange)="handleShowChangeSelector($event)">
-      </co-product-configurator>
-    }
-    `, isInline: true, dependencies: [{ kind: "component", type: LiteSelectorComponent, selector: "co-lite-selector", inputs: ["showAnswers", "show", "showSelections", "showLabel", "canClose", "animateSlideout", "customDimensions"], outputs: ["showChange", "answerChosen"] }, { kind: "component", type: ProductConfiguratorComponent, selector: "co-product-configurator", inputs: ["show", "showHeaderInformation", "showSelections", "showLabel", "canClose", "customDimensions"], outputs: ["showChange", "answerChosen"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ThreedselectorComponent, isStandalone: false, selector: "co-threedselector", inputs: { selections: "selections", canCloseConfigurator: "canCloseConfigurator", animateSlideout: "animateSlideout", showHeaderInformation: "showHeaderInformation", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration" }, outputs: { customizeButtonClicked: "customizeButtonClicked", buildFinished: "buildFinished", showChange: "showChange" }, host: { properties: { "class.co-threedselector": "this.showClass" } }, ngImport: i0, template: `
+      @if (!showFullConfiguration) {
+        <co-lite-selector
+          class="floating"
+          [showSelections]="showTemplate"
+          [showAnswers]="showTemplate"
+          [animateSlideout]="animateSlideout"
+          [canClose]="canCloseConfigurator"
+          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
+          (showChange)="handleShowChangeSelector($event)">
+        </co-lite-selector>
+      }
+
+      @if (showFullConfiguration) {
+        <co-product-configurator
+          class="floating"
+          [show]="showTemplate"
+          [showSelections]="showSelections"
+          [canClose]="canCloseConfigurator"
+          [showHeaderInformation]="showHeaderInformation"
+          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
+          (showChange)="handleShowChangeSelector($event)">
+        </co-product-configurator>
+      }
+      @if (showSaveAndLoadConfiguration) {
+        <co-configuration-preset-dialog></co-configuration-preset-dialog>
+      }
+    `, isInline: true, dependencies: [{ kind: "component", type: LiteSelectorComponent, selector: "co-lite-selector", inputs: ["showAnswers", "show", "showSelections", "showLabel", "canClose", "animateSlideout", "customDimensions", "showSaveAndLoadConfiguration"], outputs: ["showChange", "answerChosen"] }, { kind: "component", type: ProductConfiguratorComponent, selector: "co-product-configurator", inputs: ["show", "showHeaderInformation", "showSelections", "showLabel", "canClose", "customDimensions", "showSaveAndLoadConfiguration"], outputs: ["showChange", "answerChosen"] }, { kind: "component", type: ConfigurationPresetDialogComponent, selector: "co-configuration-preset-dialog" }], animations: [
             trigger('showElementToolbar', [
                 state('void', style({ opacity: 0 })),
                 state('*', style({ opacity: 1 })),
@@ -16326,27 +16945,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{
                     selector: 'co-threedselector',
                     template: `
-    @if (!showFullConfiguration) {
-      <co-lite-selector
-        class="floating"
-        [showSelections]="showTemplate"
-        [showAnswers]="showTemplate"
-        [animateSlideout]="animateSlideout"
-        [canClose]="canCloseConfigurator"
-        (showChange)="handleShowChangeSelector($event)">
-      </co-lite-selector>
-    }
-    
-    @if (showFullConfiguration) {
-      <co-product-configurator
-        class="floating"
-        [show]="showTemplate"
-        [showSelections]="showSelections"
-        [canClose]="canCloseConfigurator"
-        [showHeaderInformation]="showHeaderInformation"
-        (showChange)="handleShowChangeSelector($event)">
-      </co-product-configurator>
-    }
+      @if (!showFullConfiguration) {
+        <co-lite-selector
+          class="floating"
+          [showSelections]="showTemplate"
+          [showAnswers]="showTemplate"
+          [animateSlideout]="animateSlideout"
+          [canClose]="canCloseConfigurator"
+          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
+          (showChange)="handleShowChangeSelector($event)">
+        </co-lite-selector>
+      }
+
+      @if (showFullConfiguration) {
+        <co-product-configurator
+          class="floating"
+          [show]="showTemplate"
+          [showSelections]="showSelections"
+          [canClose]="canCloseConfigurator"
+          [showHeaderInformation]="showHeaderInformation"
+          [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
+          (showChange)="handleShowChangeSelector($event)">
+        </co-product-configurator>
+      }
+      @if (showSaveAndLoadConfiguration) {
+        <co-configuration-preset-dialog></co-configuration-preset-dialog>
+      }
     `,
                     encapsulation: ViewEncapsulation.None,
                     animations: [
@@ -16371,6 +16995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], showHeaderInformation: [{
                 type: Input
+            }], showSaveAndLoadConfiguration: [{
+                type: Input
             }], buildFinished: [{
                 type: Output
             }], showChange: [{
@@ -16392,6 +17018,7 @@ class ConfiguratorComponent {
     canCloseConfigurator = true;
     animateSlideout = true;
     showHeaderInformation = true;
+    showSaveAndLoadConfiguration;
     buildResult = new EventEmitter();
     // TODO
     isLoading = new EventEmitter();
@@ -16444,54 +17071,56 @@ class ConfiguratorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorComponent, deps: [{ token: SettingsService }, { token: LoaderService }, { token: AppEventService }, { token: ConfiguringService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorComponent, isStandalone: false, selector: "co-configurator", inputs: { showLoader: "showLoader", showProgressBar: "showProgressBar", showErrorMessages: "showErrorMessages", outputErrorMessages: "outputErrorMessages", canCloseConfigurator: "canCloseConfigurator", animateSlideout: "animateSlideout", showHeaderInformation: "showHeaderInformation" }, outputs: { buildResult: "buildResult", isLoading: "isLoading", updateProgressBar: "updateProgressBar", errorMessages: "errorMessages", showChange: "showChange" }, host: { properties: { "class.co-configurator": "this.showClass" } }, ngImport: i0, template: `
-    @if (showProgressBar) {
-      <co-progress-bar></co-progress-bar>
-    }
-    @if (showLoader) {
-      <co-configurator-loader [show]="loaderService.showLoader"></co-configurator-loader>
-    }
-    @if (showErrorMessages && resultHasErrors && showErrorDiagram) {
-      <co-configurator-error-dialog
-        [errorMessages]="configurationResultObject.errorMessages"
-        (closeErrorDialoag)="handleCloseErrorDialog()"
-      ></co-configurator-error-dialog>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorComponent, isStandalone: false, selector: "co-configurator", inputs: { showLoader: "showLoader", showProgressBar: "showProgressBar", showErrorMessages: "showErrorMessages", outputErrorMessages: "outputErrorMessages", canCloseConfigurator: "canCloseConfigurator", animateSlideout: "animateSlideout", showHeaderInformation: "showHeaderInformation", showSaveAndLoadConfiguration: "showSaveAndLoadConfiguration" }, outputs: { buildResult: "buildResult", isLoading: "isLoading", updateProgressBar: "updateProgressBar", errorMessages: "errorMessages", showChange: "showChange" }, host: { properties: { "class.co-configurator": "this.showClass" } }, ngImport: i0, template: `
+      @if (showProgressBar) {
+        <co-progress-bar></co-progress-bar>
+      }
+      @if (showLoader) {
+        <co-configurator-loader [show]="loaderService.showLoader"></co-configurator-loader>
+      }
+      @if (showErrorMessages && resultHasErrors && showErrorDiagram) {
+        <co-configurator-error-dialog
+          [errorMessages]="configurationResultObject.errorMessages"
+          (closeErrorDialoag)="handleCloseErrorDialog()"
+        ></co-configurator-error-dialog>
+      }
     
-    <co-threedselector
-      [canCloseConfigurator]="canCloseConfigurator"
-      [animateSlideout]="animateSlideout"
-      [showHeaderInformation]="showHeaderInformation"
-      (buildFinished)="handleBuildFinished($event)"
-      (showChange)="handleShowChange($event)">
-    </co-threedselector>
-    `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "co-progress-bar" }, { kind: "component", type: ConfiguratorLoaderComponent, selector: "co-configurator-loader", inputs: ["show"] }, { kind: "component", type: ConfiguratorErrorDialogComponent, selector: "co-configurator-error-dialog", inputs: ["errorMessages"], outputs: ["closeErrorDialoag"] }, { kind: "component", type: ThreedselectorComponent, selector: "co-threedselector", inputs: ["selections", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["customizeButtonClicked", "buildFinished", "showChange"] }], encapsulation: i0.ViewEncapsulation.None });
+      <co-threedselector
+        [canCloseConfigurator]="canCloseConfigurator"
+        [animateSlideout]="animateSlideout"
+        [showHeaderInformation]="showHeaderInformation"
+        [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
+        (buildFinished)="handleBuildFinished($event)"
+        (showChange)="handleShowChange($event)">
+      </co-threedselector>
+    `, isInline: true, dependencies: [{ kind: "component", type: ProgressBarComponent, selector: "co-progress-bar" }, { kind: "component", type: ConfiguratorLoaderComponent, selector: "co-configurator-loader", inputs: ["show"] }, { kind: "component", type: ConfiguratorErrorDialogComponent, selector: "co-configurator-error-dialog", inputs: ["errorMessages"], outputs: ["closeErrorDialoag"] }, { kind: "component", type: ThreedselectorComponent, selector: "co-threedselector", inputs: ["selections", "canCloseConfigurator", "animateSlideout", "showHeaderInformation", "showSaveAndLoadConfiguration"], outputs: ["customizeButtonClicked", "buildFinished", "showChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-configurator',
                     template: `
-    @if (showProgressBar) {
-      <co-progress-bar></co-progress-bar>
-    }
-    @if (showLoader) {
-      <co-configurator-loader [show]="loaderService.showLoader"></co-configurator-loader>
-    }
-    @if (showErrorMessages && resultHasErrors && showErrorDiagram) {
-      <co-configurator-error-dialog
-        [errorMessages]="configurationResultObject.errorMessages"
-        (closeErrorDialoag)="handleCloseErrorDialog()"
-      ></co-configurator-error-dialog>
-    }
+      @if (showProgressBar) {
+        <co-progress-bar></co-progress-bar>
+      }
+      @if (showLoader) {
+        <co-configurator-loader [show]="loaderService.showLoader"></co-configurator-loader>
+      }
+      @if (showErrorMessages && resultHasErrors && showErrorDiagram) {
+        <co-configurator-error-dialog
+          [errorMessages]="configurationResultObject.errorMessages"
+          (closeErrorDialoag)="handleCloseErrorDialog()"
+        ></co-configurator-error-dialog>
+      }
     
-    <co-threedselector
-      [canCloseConfigurator]="canCloseConfigurator"
-      [animateSlideout]="animateSlideout"
-      [showHeaderInformation]="showHeaderInformation"
-      (buildFinished)="handleBuildFinished($event)"
-      (showChange)="handleShowChange($event)">
-    </co-threedselector>
+      <co-threedselector
+        [canCloseConfigurator]="canCloseConfigurator"
+        [animateSlideout]="animateSlideout"
+        [showHeaderInformation]="showHeaderInformation"
+        [showSaveAndLoadConfiguration]="showSaveAndLoadConfiguration"
+        (buildFinished)="handleBuildFinished($event)"
+        (showChange)="handleShowChange($event)">
+      </co-threedselector>
     `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
@@ -16513,6 +17142,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], showHeaderInformation: [{
                 type: Input
+            }], showSaveAndLoadConfiguration: [{
+                type: Input
             }], buildResult: [{
                 type: Output
             }], isLoading: [{
@@ -17390,6 +18021,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+class ConfigurationPresetModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetModule, declarations: [ConfigurationPresetComponent], imports: [PipesModule,
+            ButtonModule,
+            IconModule,
+            InputTextModule,
+            CdkCopyToClipboard], exports: [ConfigurationPresetComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetModule, imports: [PipesModule,
+            ButtonModule,
+            IconModule,
+            InputTextModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        PipesModule,
+                        ButtonModule,
+                        IconModule,
+                        InputTextModule,
+                        CdkCopyToClipboard
+                    ],
+                    declarations: [
+                        ConfigurationPresetComponent
+                    ],
+                    exports: [
+                        ConfigurationPresetComponent
+                    ]
+                }]
+        }] });
+
 class SelectionsSummaryModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryModule, declarations: [SelectionsSummaryComponent], imports: [CoSummaryLineModule,
@@ -17397,13 +18059,15 @@ class SelectionsSummaryModule {
             PipesModule,
             PriceDisplayPipeModule,
             SelectionsSummaryLineModule,
-            IconModule], exports: [SelectionsSummaryComponent] });
+            IconModule,
+            ConfigurationPresetModule], exports: [SelectionsSummaryComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryModule, imports: [CoSummaryLineModule,
             CommonModule,
             PipesModule,
             PriceDisplayPipeModule,
             SelectionsSummaryLineModule,
-            IconModule] });
+            IconModule,
+            ConfigurationPresetModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryModule, decorators: [{
             type: NgModule,
@@ -17414,7 +18078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         PipesModule,
                         PriceDisplayPipeModule,
                         SelectionsSummaryLineModule,
-                        IconModule
+                        IconModule,
+                        ConfigurationPresetModule
                     ],
                     declarations: [
                         SelectionsSummaryComponent,
@@ -17625,7 +18290,8 @@ class ProductConfiguratorModule {
             PipesModule,
             IconModule,
             TooltipDirectiveModule,
-            ProductConfiguratorSelectorModule], exports: [ProductConfiguratorComponent] });
+            ProductConfiguratorSelectorModule,
+            ConfigurationPresetModule], exports: [ProductConfiguratorComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorModule, imports: [CommonModule,
             MatIconModule,
             MatButtonModule,
@@ -17638,7 +18304,8 @@ class ProductConfiguratorModule {
             PipesModule,
             IconModule,
             TooltipDirectiveModule,
-            ProductConfiguratorSelectorModule] });
+            ProductConfiguratorSelectorModule,
+            ConfigurationPresetModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorModule, decorators: [{
             type: NgModule,
@@ -17656,7 +18323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         PipesModule,
                         IconModule,
                         TooltipDirectiveModule,
-                        ProductConfiguratorSelectorModule
+                        ProductConfiguratorSelectorModule,
+                        ConfigurationPresetModule
                     ],
                     schemas: [
                         NO_ERRORS_SCHEMA
@@ -17670,14 +18338,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+class ConfigurationPresetDialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogModule, declarations: [ConfigurationPresetDialogComponent], imports: [PipesModule,
+            ButtonModule,
+            IconModule,
+            InputTextModule,
+            CdkCopyToClipboard], exports: [ConfigurationPresetDialogComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogModule, imports: [PipesModule,
+            ButtonModule,
+            IconModule,
+            InputTextModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        PipesModule,
+                        ButtonModule,
+                        IconModule,
+                        InputTextModule,
+                        CdkCopyToClipboard
+                    ],
+                    declarations: [
+                        ConfigurationPresetDialogComponent
+                    ],
+                    exports: [
+                        ConfigurationPresetDialogComponent
+                    ]
+                }]
+        }] });
+
 class ThreedselectorModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ThreedselectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ThreedselectorModule, declarations: [ThreedselectorComponent], imports: [LiteSelectorModule,
             ProductConfiguratorModule,
-            CommonModule], exports: [ThreedselectorComponent] });
+            CommonModule,
+            ConfigurationPresetDialogModule], exports: [ThreedselectorComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ThreedselectorModule, imports: [LiteSelectorModule,
             ProductConfiguratorModule,
-            CommonModule] });
+            CommonModule,
+            ConfigurationPresetDialogModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ThreedselectorModule, decorators: [{
             type: NgModule,
@@ -17685,7 +18386,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [
                         LiteSelectorModule,
                         ProductConfiguratorModule,
-                        CommonModule
+                        CommonModule,
+                        ConfigurationPresetDialogModule
                     ],
                     declarations: [
                         ThreedselectorComponent