@colijnit/configurator 262.1.9 → 262.1.10

package/fesm2022/colijnit-configurator.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, HostBinding, ViewEncapsulation, Component, Input, Output, HostListener, ViewChild, Directive, ElementRef, ViewChildren, TemplateRef, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import * as i5 from '@angular/common';
+import * as i6$1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import { BehaviorSubject, Subject, combineLatest, debounceTime } from 'rxjs';
 import * as THREE from 'three';
@@ -10,7 +10,7 @@ import { HdecoPlacement } from '@colijnit/configuratorapi/build/enum/hdeco-place
 import * as i6 from '@colijnit/utilities';
 import { ObjectUtils, MaterialUtils, DeviceUtils as DeviceUtils$1, DeviceTier as DeviceTier$1, TranslationModule, UtilitiesPipesModule } from '@colijnit/utilities';
 import { isNill } from '@colijnit/configuratorapi/build/utils/function/is-nill.function';
-import { VariationUtils, AssetUtils, FileUtils, ThreedUtils, DebugUtils, VariationHelper, SelectionUtils, Scene3DUtil } from '@colijnit/configuratorcore';
+import { ImageUtils, VariationUtils, AssetUtils, FileUtils, ThreedUtils, DebugUtils, VariationHelper, SelectionUtils, Scene3DUtil } from '@colijnit/configuratorcore';
 import { UserRoleType } from '@colijnit/ioneconnector/build/enum/user-role-type.enum';
 import { MainApi } from '@colijnit/mainapi';
 import { TableName } from '@colijnit/mainapi/build/enum/table-name.enum';
@@ -21,6 +21,7 @@ import { NodeType } from '@colijnit/configuratorapi/build/enum/node-type.enum';
 import { Articles } from '@colijnit/articleapi/build/articles';
 import { Article } from '@colijnit/configuratorapi/build/model/article';
 import { Selection } from '@colijnit/configuratorapi/build/model/selection';
+import { SelectorStructure } from '@colijnit/configuratorapi/build/model/selector-structure.bo';
 import { SelectorWithOptions } from '@colijnit/configuratorapi/build/model/selector-with-options';
 import { AnswerPrice } from '@colijnit/configuratorapi/build/model/answer-price';
 import { ArticleText } from '@colijnit/configuratorapi/build/model/article-text.bo';
@@ -42,19 +43,21 @@ import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerM
 import axios from 'axios';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i4 from '@colijnit/corecomponents_v12';
-import { LoaderModule, IconModule, ButtonModule, InputTextModule, CardModule, PriceDisplayPipeModule, ImageModule, TooltipDirectiveModule } from '@colijnit/corecomponents_v12';
+import { LoaderModule, IconModule, ButtonModule, InputTextModule, CardModule, PriceDisplayPipeModule, InputTextChipsModule, ImageModule, AppendPipeModule, TooltipDirectiveModule } from '@colijnit/corecomponents_v12';
 import * as i1 from '@angular/platform-browser';
 import { TemplatePortal } from '@angular/cdk/portal';
 import * as i2 from '@angular/cdk/overlay';
 import * as i7 from '@angular/cdk/clipboard';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { ConfigurationDisplayOption } from '@colijnit/configuratorapi/build/enum/refcode/configuration-display-option.enum';
-import { SelectorStructure } from '@colijnit/configuratorapi/build/model/selector-structure.bo';
-import * as i6$1 from '@angular/forms';
+import * as i6$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { fromEvent } from 'rxjs/internal/observable/fromEvent';
+import { filter, delay, takeUntil } from 'rxjs/operators';
+import { of } from 'rxjs/internal/observable/of';
 
 class ArParameters {
     depthOcclusion = false;
@@ -133,8 +136,11 @@ class SettingOptions {
     useExternalOpenSave = false;
     floorFadeStart = 2.0;
     floorFadeEnd = 6.0;
-    maxVisibleTiles = 10;
-    maxVisibleSmallTiles = 24;
+    limitStartView = false; // Only works for full config -> true to enable limited data on start
+    limitAmountOfTiles = false; // this enables the tile limits
+    amountOfGroupsToShow = 2; // this limits the level 1 stuff
+    maxVisibleTiles = 10; // this limits the amount of tiles shown on load
+    maxVisibleSmallTiles = 24; // this limits the amount of tiles shown on load
     groupedShowAllBtn = false;
     showSavePresetButton = false;
     showLoadPresetButton = false;
@@ -428,6 +434,13 @@ class ConfiguratorEventService {
     renderImageChanged = new BehaviorSubject('');
     renderImageError = new BehaviorSubject('');
     startBuildFromPresetId = new Subject();
+    selectSelection = new Subject();
+    showAllConfigurationOptions = new Subject();
+    hideMainConfigurator = new Subject();
+    checkHiddenRepeatItem = new Subject();
+    checkForMarkedInputs = new Subject();
+    closeSlideOut = new Subject();
+    openSlideOut = new Subject();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorEventService, providedIn: 'root' });
 }
@@ -663,7 +676,15 @@ class ConfiguratorService {
         return this._configuratorApi.selectAnswerBySelection(selection, false, userInput);
     }
     navigateTo(chosenOption, showLoader = false) {
-        return this._configuratorApi.navigateTo(chosenOption.opvTreeNodeHierarchy, showLoader);
+        return this._configuratorApi.navigateTo(chosenOption.nodeHierarchy, showLoader);
+    }
+    navigateToBySelNode(instanceId, chosenOption, showLoader = false) {
+        return this._configuratorApi.navigateToBySelNode(instanceId, chosenOption.selNodeHierarchy, showLoader);
+    }
+    nextCombNode(selection, showLoader = false) {
+        let params = {};
+        params.nodeId = selection.selNodeId;
+        return this._configuratorApi.nextCombNode(params, showLoader);
     }
     cancelAnswer(getAnswersAndQuestion = true) {
         return this._configuratorApi.cancelAnswer();
@@ -753,6 +774,9 @@ class ConfiguratorService {
         catch (e) {
         }
     }
+    repeatOption(params) {
+        return this._configuratorApi.repeatOption(params);
+    }
     _getPublicationCodeForRole(role) {
         if (this._publicationCodeForUserRole.has(role)) {
             return this._publicationCodeForUserRole.get(role);
@@ -832,6 +856,17 @@ class ConfiguratorConnectorService {
     get instanceId() {
         return this._instanceId;
     }
+    /**
+     *
+     * This is for the nested article slide out for the full config template
+     *
+     * */
+    set activeSlideOutParentId(id) {
+        this._activeSlideOutParentId = id;
+    }
+    get activeSlideOutParentId() {
+        return this._activeSlideOutParentId;
+    }
     controllerInitialized = new BehaviorSubject(false);
     standAloneInstance = new BehaviorSubject(false);
     connectionReset = new Subject();
@@ -839,6 +874,7 @@ class ConfiguratorConnectorService {
     activeQuestion;
     activeAnswers = [];
     assetPath;
+    _activeSlideOutParentId;
     _selections = [];
     _currentSelections;
     _activeSelection;
@@ -850,6 +886,7 @@ class ConfiguratorConnectorService {
     _totalPrice;
     _imageCache = new Map();
     _exceptionQuestionChanged;
+    _exceptionIds = [];
     _shouldShowLoader;
     _connectorOptions = new Options();
     _subs = [];
@@ -986,17 +1023,24 @@ class ConfiguratorConnectorService {
     copyInstanceAndLoseOriginalConfiguration(instanceId, result) {
         return this._copyInstance(instanceId, false, result);
     }
-    async getQuestionAndAnswersAsync() {
+    async getQuestionAndAnswersAsync(addedElement = false) {
         const questionAndAnswers = await this._configuratorService.getQuestionAndAnswersAsync();
+        // TODO Check exception handling.
         // When using a full config template, we got some shit
         // When we got a response with a question + answers, it means we got an option that got change by exceptions.
         // Save the option for exception, update the selectorStructor and make sure the costumer knows which choice needs to be checked
         if (questionAndAnswers.answers.length > 0 && this.article && this.article.showFullConfiguration) {
-            this._exceptionQuestionChanged = questionAndAnswers.question; // TODO we should change this
+            if (!addedElement) {
+                this._exceptionQuestionChanged = questionAndAnswers.question; // TODO we should change this
+            }
+            questionAndAnswers.answers.forEach(option => {
+                if (option.node) {
+                    this._exceptionIds.push(option.node);
+                }
+            });
             await this.getSelectionsAsync();
         }
         questionAndAnswers.answers = questionAndAnswers.answers.filter(a => this._isAnswerPublished(a));
-        this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
         if (questionAndAnswers.answers.length === 0) {
             this.emptyAnswersAndQuestion();
         }
@@ -1004,6 +1048,8 @@ class ConfiguratorConnectorService {
             this.activeQuestion = questionAndAnswers.question;
             this.activeAnswers = questionAndAnswers.answers;
         }
+        // Emit it here so we can use it ea
+        this._appEventService.answerCountReceived.next(questionAndAnswers.answers.length);
         this.handleAnswersReceived();
         return questionAndAnswers;
     }
@@ -1053,6 +1099,12 @@ class ConfiguratorConnectorService {
     navigateTo(choseValue, showLoader = false) {
         return this._configuratorService.navigateTo(choseValue, showLoader);
     }
+    async navigateToBySelNode(instanceId, choseValue, showLoader = false) {
+        return this._configuratorService.navigateToBySelNode(instanceId, choseValue, showLoader);
+    }
+    async nextCombNode(selection, showLoader = false) {
+        return this._configuratorService.nextCombNode(selection, showLoader);
+    }
     cancelAnswer(getAnswersAndQuestion = true) {
         return this._configuratorService.cancelAnswer();
     }
@@ -1212,8 +1264,13 @@ class ConfiguratorConnectorService {
                 selectedOption.optionText = textAndImage.oText;
                 selectedOption.optionText = textAndImage.oText;
                 const image = textAndImage.oImage;
-                const imageData = await this._configuratorService.getImage(image.key, 4, true, TableName.InternalParam);
-                selectedOption.imageData = this._handleImageResponse(imageData);
+                if (image.thumbnailBody) {
+                    selectedOption.imageData = ImageUtils.getDocBodyWithMimeTypeDefinition(image.fileName, image.thumbnailBody);
+                }
+                else {
+                    const imageData = await this._configuratorService.getImage(image.key, 4, true, TableName.InternalParam);
+                    selectedOption.imageData = this._handleImageResponse(imageData);
+                }
             }
         }
     }
@@ -1249,6 +1306,66 @@ class ConfiguratorConnectorService {
                     (selection.nodeType === NodeType.Answer && (((selection.answerPublicationCode & this._getPublicationCode()) > 0) ||
                         isNill(selection.answerPublicationCode)))));
     }
+    async repeatOption(optCycle, id, after = true) {
+        const params = {};
+        if (after !== undefined) {
+            params.copyAfter = after ? 'T' : 'F';
+        }
+        params.optCycle = optCycle;
+        const response = await this._configuratorService.repeatOption(params);
+        if (response && response.validationResult && response.validationResult.success) {
+            await this.getQuestionAndAnswersAsync(true);
+            return true;
+        }
+        return false;
+    }
+    filterRemoveSelectionsByDeleteExceptions(options) {
+        return options.filter(option => this._checkForRemovedByException(this.selectionWithAnswers, option.node));
+    }
+    markSelectionForUserInput(selectionNode) {
+        this.selectionWithAnswers.forEach(parent => {
+            let found = false;
+            // Normal configurations
+            parent.selectorOptions.forEach(child => {
+                if (child.selector.selNodeId === selectionNode) {
+                    this.activeSlideOutParentId = child.selector.selNodeId;
+                    parent.markForUserInput = true;
+                    found = true;
+                }
+            });
+            // Repeated articles are more nested
+            parent.repeatedOptions.forEach(child => {
+                if (child.selectorOptions && child.selectorOptions.length > 0) {
+                    child.selectorOptions.forEach(value => {
+                        if (value.selector.selNodeId === selectionNode) {
+                            this.activeSlideOutParentId = value.selector.selNodeId;
+                            parent.markForUserInput = true;
+                            found = true;
+                        }
+                    });
+                }
+            });
+            // When someone clicks on a non repeating item, we got the selNodeId of the child and not the parent,
+            // we need to loop extra for this to be sure.
+            if (!found) {
+                parent.selectorOptions.forEach(child => {
+                    if (child.selectorOptions && child.selectorOptions.length > 0) {
+                        child.selectorOptions.forEach(nested => {
+                            if (nested.selectorOptions && nested.selectorOptions.length > 0) {
+                                nested.selectorOptions.forEach(option => {
+                                    if (option.selector.selNodeId === selectionNode) {
+                                        this.activeSlideOutParentId = child.selector.selNodeId;
+                                        parent.markForUserInput = true;
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+            }
+        });
+        this._appEventService.checkForMarkedInputs.next(true);
+    }
     _prepareSelections(selections) {
         this._selections = selections.slice(0);
         this._prepareSelectionsToDisplay();
@@ -1391,6 +1508,17 @@ class ConfiguratorConnectorService {
     * Show full config stuff
     *
     * */
+    async _getSelectorStructure(showLoader = true) {
+        const response = await this._configuratorService.getSelectorStructure(showLoader);
+        if (response && response.validationResult && response.validationResult.success) {
+            if (response.resultObjects) {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(SelectorStructure, response.resultObjects);
+            }
+            else {
+                return this._boFactory.makeBOArrayFromRawBackendDataArray(SelectorStructure, response.resultObject['structures']);
+            }
+        }
+    }
     async _createSelectorFullConfiguration(selections) {
         this._selections = selections.slice(0);
         this._prepareSelectionsToDisplay();
@@ -1402,42 +1530,97 @@ class ConfiguratorConnectorService {
             });
         }
         this._totalPrice = Math.round((totalPrice + Number.EPSILON) * 100) / 100;
-        let selectorStructureList = [];
-        const selectorStructure = await this._configuratorService.getSelectorStructure();
-        if (selectorStructure.validationResult.success) {
-            if (selectorStructure.resultObjects) {
-                selectorStructureList = selectorStructure.resultObjects;
-            }
-            else {
-                selectorStructureList = selectorStructure.resultObject['structures'];
-            }
-        }
-        const filteredList = selectorStructureList.filter(s => this._isStructurePublished(s));
-        struct = this._buildStructureThree(filteredList);
+        // TODO exceptions needs to be checked/ reimplementent
+        // if (this._exceptionQuestionChanged) {
+        //   struct = this._linkExceptionToOption(this._exceptionQuestionChanged, struct);
+        // }
+        const selectorStructure = await this._getSelectorStructure();
+        struct = this._buildStructureThree(selectorStructure);
         this._markLastNodeWithChildren(struct);
-        if (this._exceptionQuestionChanged) {
-            struct = this._linkExceptionToOption(this._exceptionQuestionChanged, struct);
+        struct = this._buildRepeatedOptions(struct);
+        struct = this._filterResultOnPublicationCodes(struct);
+        this._markLastNodeWithChildren(struct);
+        if (this._exceptionIds.length > 0) {
+            struct = this._markExceptions(this._exceptionIds, struct);
+            this._exceptionIds = [];
         }
         this.selectionWithAnswers = struct;
     }
+    _buildRepeatedOptions(items) {
+        const seenByOptId = {};
+        const toRemove = new Set();
+        items.forEach(node => {
+            const optId = node.selector.artNodeOptId;
+            if (optId == null) {
+                return;
+            }
+            if (seenByOptId[optId] == null) {
+                seenByOptId[optId] = node;
+            }
+            else {
+                seenByOptId[optId].repeatedOptions.push(node);
+                toRemove.add(node);
+            }
+        });
+        toRemove.forEach(node => {
+            const index = items.indexOf(node);
+            if (index !== -1) {
+                items.splice(index, 1);
+            }
+        });
+        return items;
+    }
     _buildStructureThree(items) {
         const map = {};
-        const structuredList = [];
+        const roots = [];
         items.forEach(item => {
-            const option = new SelectorWithOptions();
-            option.selector = item;
-            option.selectorOptions = [];
-            map[item.id] = option;
+            const node = new SelectorWithOptions();
+            node.selector = item;
+            node.selectorOptions = [];
+            node.repeatedOptions = [];
+            map[item.id] = node;
         });
+        const isInsideArticle = (item) => {
+            let current = item;
+            while (current.parentId) {
+                const parent = map[current.parentId]?.selector;
+                if (!parent) {
+                    break;
+                }
+                if (parent.nodeType === NodeType.Article) {
+                    return true;
+                }
+                current = parent;
+            }
+            return false;
+        };
+        const markAncestorsAsArticles = (item) => {
+            let current = item;
+            while (current.parentId) {
+                const parentNode = map[current.parentId];
+                if (!parentNode) {
+                    break;
+                }
+                parentNode.selectorOptionsAreArticles = true;
+                current = parentNode.selector;
+            }
+        };
         items.forEach(item => {
-            if (map[item.parentId]) {
-                map[item.parentId].selectorOptions.push(map[item.id]);
+            const parent = map[item.parentId];
+            if (!parent) {
+                roots.push(map[item.id]);
+                return;
+            }
+            if (parent.selector.nodeType === NodeType.Article || (parent.selector.nodeType === NodeType.Question && parent.selector.showGrouped === false) || isInsideArticle(item)) {
+                parent.selectorOptions.push(map[item.id]);
+                parent.selectorOptionsAreArticles = true;
+                markAncestorsAsArticles(item);
             }
             else {
-                structuredList.push(map[item.id]);
+                parent.selectorOptions.push(map[item.id]);
             }
         });
-        return structuredList;
+        return roots;
     }
     _markLastNodeWithChildren(nodes) {
         nodes.forEach(node => {
@@ -1570,13 +1753,70 @@ class ConfiguratorConnectorService {
         }
     }
     _linkExceptionToOption(exceptionQuestion, struct) {
+        let exceptionCount = 0;
         struct.forEach(struct => {
             if (struct.selector.optId === exceptionQuestion.optionId) {
                 struct.markForExceptionNotification = true;
+                exceptionCount++;
+            }
+        });
+        if (exceptionCount === 1) {
+            this._exceptionQuestionChanged = undefined; // reset
+            return struct;
+        }
+    }
+    _filterResultOnPublicationCodes(list) {
+        return list.filter(part => {
+            if (!this._isStructurePublished(part.selector)) {
+                return false;
+            }
+            if (part.selectorOptions && part.selectorOptions.length) {
+                part.selectorOptions = this._filterResultOnPublicationCodes(part.selectorOptions);
+            }
+            if (part.repeatedOptions && part.repeatedOptions.length) {
+                part.repeatedOptions = this._filterResultOnPublicationCodes(part.repeatedOptions);
             }
+            return true;
         });
-        this._exceptionQuestionChanged = undefined; // reset
-        return struct;
+    }
+    _checkForRemovedByException(list, node) {
+        for (const part of list) {
+            if (part.selector.selNodeId === node) {
+                return true;
+            }
+            if (part.selectorOptions && part.selectorOptions.length) {
+                if (part.selectorOptions.length === 1) {
+                    if (part.selectorOptions[0].selector.opvId === 0 && part.selectorOptions[0].selector.selNodeId === node) {
+                        return false;
+                    }
+                }
+                const found = this._checkForRemovedByException(part.selectorOptions, node);
+                if (found !== false) {
+                    return found;
+                }
+            }
+        }
+        return false;
+    }
+    _markExceptions(exceptionIds, structure) {
+        if (structure && structure.length > 0) {
+            for (const item of structure) {
+                if (item.selectorOptions && item.selectorOptions.length > 0) {
+                    this._markExceptions(exceptionIds, item.selectorOptions);
+                }
+                if (item.repeatedOptions && item.repeatedOptions.length > 0) {
+                    this._markExceptions(exceptionIds, item.repeatedOptions);
+                }
+                if (item.selector && exceptionIds.includes(item.selector.selNodeId)) {
+                    item.markForExceptionNotification = true;
+                }
+                if (item.selectorOptions?.some(c => c.markForExceptionNotification) ||
+                    item.repeatedOptions?.some(c => c.markForExceptionNotification)) {
+                    item.markForExceptionNotification = true;
+                }
+            }
+        }
+        return structure;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorConnectorService, deps: [{ token: ConfiguratorEventService }, { token: ConfiguratorSettingsService }, { token: LoaderService }, { token: i6.UtilitiesConnectorService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorConnectorService, providedIn: 'root' });
@@ -2275,7 +2515,7 @@ class BuildFurnitureBaseService {
         this.prepareTheSelections(result.instanceId);
     }
     // TODO check if we need this function for Habufa
-    // protected handleIntegrationConnections(id: string, object: Item): void {
+    // protected handleIntegrationConnections(selNodeId: string, object: Item): void {
     //   const parts: FurniturePartIntegration[] = [];
     //   const childParts: Object3D[] = object.configurable ? object.children : [object];
     //   const len: number = childParts.length;
@@ -2335,12 +2575,12 @@ class BuildFurnitureBaseService {
     //     connection.ConnectedParts = connectors;
     //     parts.push(connection);
     //   }
-    //   this.upsertFurniture(id, {Parts: parts}, object);
+    //   this.upsertFurniture(selNodeId, {Parts: parts}, object);
     // }
     //
-    // protected upsertFurniture(id: string, object: any, item: Item): void {
+    // protected upsertFurniture(selNodeId: string, object: any, item: Item): void {
     //   if (this._integrationEnabled && !item.metadata.obsolete) {
-    //     const idx: number = this._furnitureConfigurations.findIndex(f => f.Id === id);
+    //     const idx: number = this._furnitureConfigurations.findIndex(f => f.Id === selNodeId);
     //     let furniture: FurnitureIntegration;
     //     if (idx < 0) {
     //       // empty entry for mrp code, re-use that one
@@ -2350,7 +2590,7 @@ class BuildFurnitureBaseService {
     //         furniture = new FurnitureIntegration();
     //         this._furnitureConfigurations.push(furniture);
     //       }
-    //       furniture.Id = id;
+    //       furniture.Id = selNodeId;
     //     } else {
     //       furniture = this._furnitureConfigurations[idx];
     //     }
@@ -3785,74 +4025,49 @@ Controls = function (camera, domElement) {
         const position = camera.position.clone();
         const target = this.target.clone();
         const group = new Group$1();
-        const targetTween = new Tween(target)
-            .to(endTarget, duration)
-            .easing(Easing.Quadratic.InOut)
-            .onUpdate(() => {
-            this.target = target;
-            this.update();
-            this.dispatchEvent(changeEvent);
-        })
-            .onComplete(() => {
-            this.update();
-            this.dispatchEvent(changeEvent);
-            group.remove(targetTween);
-            dispatchRemoveGroup(group);
-        })
-            .start();
-        const positionTween = new Tween(position)
-            .to(endPosition, duration)
-            .easing(Easing.Quadratic.In)
-            .onUpdate(() => {
-            this.camera.position.copy(position);
-            this.update();
-            this.dispatchEvent(changeEvent);
-        })
-            .onComplete(() => {
-            this.update();
-            this.dispatchEvent(changeEvent);
-            group.remove(positionTween);
-            dispatchRemoveGroup(group);
-        })
-            .start();
-        group.add(targetTween);
-        group.add(positionTween);
-        dispatchAddGroup(group);
-        // const targetTween = new TWEEN.Tween<any>(target)
-        //   .to(endTarget, duration)
-        //   .easing(TWEEN.Easing.Quadratic.InOut)
-        //   .onUpdate(() => {
-        //     this.target = target;
-        //     this.update();
-        //     this.dispatchEvent(changeEvent);
-        //   });
-        // const positionTween = new TWEEN.Tween<any>(position)
-        //   .to(endPosition, duration)
-        //   .easing(TWEEN.Easing.Quadratic.In)
-        //   .onUpdate(() => {
-        //     this.camera.position.copy(position);
-        //     this.update();
-        //     this.dispatchEvent(changeEvent);
-        //   });
-        // const targetPromise = new Promise<TWEEN.Tween<any>>(resolve => {
-        //   targetTween
-        //     .onComplete(() => {
-        //       this.update();
-        //       this.dispatchEvent(changeEvent);
-        //       resolve(targetTween);
-        //     })
-        //     .start();
-        // });
-        // const positionPromise = new Promise<TWEEN.Tween<any>>(resolve => {
-        //   positionTween
-        //     .onComplete(() => {
-        //       this.update();
-        //       this.dispatchEvent(changeEvent);
-        //       resolve(positionTween);
-        //     })
-        //     .start();
-        // });
-        // return Promise.all([targetPromise, positionPromise]);
+        return new Promise((resolve) => {
+            let completedCount = 0;
+            const onTweenComplete = () => {
+                completedCount++;
+                if (completedCount === 2)
+                    resolve();
+            };
+            const targetTween = new Tween(target)
+                .to(endTarget, duration)
+                .easing(Easing.Quadratic.InOut)
+                .onUpdate(() => {
+                this.target = target;
+                this.update();
+                this.dispatchEvent(changeEvent);
+            })
+                .onComplete(() => {
+                this.update();
+                this.dispatchEvent(changeEvent);
+                group.remove(targetTween);
+                dispatchRemoveGroup(group);
+                onTweenComplete();
+            })
+                .start();
+            const positionTween = new Tween(position)
+                .to(endPosition, duration)
+                .easing(Easing.Quadratic.In)
+                .onUpdate(() => {
+                this.camera.position.copy(position);
+                this.update();
+                this.dispatchEvent(changeEvent);
+            })
+                .onComplete(() => {
+                this.update();
+                this.dispatchEvent(changeEvent);
+                group.remove(positionTween);
+                dispatchRemoveGroup(group);
+                onTweenComplete();
+            })
+                .start();
+            group.add(targetTween);
+            group.add(positionTween);
+            dispatchAddGroup(group);
+        });
     };
     this.fixedCameraMovement = async function (endPosition, endTarget, endDuration) {
         if (!isFinite(endPosition.x) ||
@@ -6255,6 +6470,8 @@ class ConfiguratorSceneService {
     webGL2Available;
     domElement;
     floorTexturesLoaded = new BehaviorSubject(undefined);
+    getFloorSizeFn;
+    getCenterFloorFn;
     _needsRender;
     _arMode = false;
     _subs = [];
@@ -6314,6 +6531,8 @@ class ConfiguratorSceneService {
             this._handleAddTweenGroup(group);
         }), this._cameraService.removeTweenGroup.subscribe((group) => {
             this._handleRemoveTweenGroup(group);
+        }), this._lightsService.renderPropsChanged.subscribe(() => {
+            this.handlePropsChanged();
         }), 
         // this._messageBusService.subscribe(MessageType.TakeScreenshot, async () => {
         //   if (this._viewModeService.is3dViewActive() || this._viewModeService.isTopViewActive()) {
@@ -6342,7 +6561,6 @@ class ConfiguratorSceneService {
                     }
                     MaterialUtils.SetAssetPath(this._assetPath);
                 }
-                this._lightsService.assetPath = this._assetPath;
                 this._initLightService();
                 if (this._configuratorSettingsService.settings.assetIndex) {
                     this._indexJsonFile = this._configuratorSettingsService.settings.assetIndex;
@@ -6394,7 +6612,10 @@ class ConfiguratorSceneService {
     positionInSceneToScreen(pos) {
         return Scene3DUtil.Convert3DPointToScreenPoint(pos, this._cameraService.camera, this.domElement.clientWidth, this.domElement.clientHeight);
     }
-    rendererPropsChange() {
+    handlePropsChanged() {
+        if (!this.scene) {
+            return;
+        }
         this.scene.traverse((node) => {
             if (!node.isMesh) {
                 return;
@@ -6437,7 +6658,10 @@ class ConfiguratorSceneService {
         this._postProcessingService.init(this.renderer, this.scene, this._cameraService.camera, this.domElement.clientWidth, this.domElement.clientHeight);
     }
     _initLightService() {
+        this._lightsService.assetPath = this._assetPath;
         this._lightsService.init(this.scene, this.renderer);
+        this._lightsService.getSizeFn = this.getFloorSizeFn;
+        this._lightsService.getCenterFn = this.getCenterFloorFn;
     }
     _initPathTracer() {
         if (this._configuratorSettingsService.settings.options.pathTracer) {
@@ -6816,6 +7040,13 @@ class RenderApi {
         options.transparency = this._useTransparency(sceneSettings);
         options.objectOptions = objectOptions;
         options.objectRenderTransform = blenderVector;
+        if (optionalRenderParameters && optionalRenderParameters.objectWidth && optionalRenderParameters.objectHeight) {
+            options.width = optionalRenderParameters.objectWidth;
+            options.height = optionalRenderParameters.objectHeight;
+        }
+        if (optionalRenderParameters && optionalRenderParameters.renderType) {
+            options.renderType = optionalRenderParameters.renderType;
+        }
         renderBaseObject.assetUrl = buildResult.assetUrl;
         renderBaseObject.cdnUrl = buildResult.cdnUrl;
         renderBaseObject.options = options;
@@ -7295,6 +7526,7 @@ var IconEnum;
     IconEnum["ArrowTurnRightRegular"] = "arrow_turn_right_regular";
     IconEnum["ArCircle"] = "ar_circle";
     IconEnum["BarsLightFull"] = "bars_light_full";
+    IconEnum["BellSharpSolid"] = "bell_sharp_solid";
     IconEnum["Brush"] = "brush";
     IconEnum["CameraSolid"] = "camera_solid";
     IconEnum["CameraTopdown"] = "camera_topdown";
@@ -7303,6 +7535,7 @@ var IconEnum;
     IconEnum["Check"] = "check";
     IconEnum["CheckRegular"] = "check_regular";
     IconEnum["CheckSolid"] = "check_solid";
+    IconEnum["ChevronLeftRegular"] = "chevron_left_regular";
     IconEnum["CircleCheck"] = "circle_check";
     IconEnum["CircleCheckRegular"] = "circle_check_regular";
     IconEnum["CircleInfo"] = "circle_info";
@@ -7412,6 +7645,7 @@ const IconSvg = {
     "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>",
+    "bell_sharp_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M352 64L288 64L288 99.2C215 114 160 178.6 160 256L160 352L80 480L560 480L480 352L480 256C480 178.6 425 114 352 99.2L352 64zM258 528C265.1 555.6 290.2 576 320 576C349.8 576 374.9 555.6 382 528L258 528z\"/></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>",
@@ -7420,6 +7654,7 @@ const IconSvg = {
     "check": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><polygon fill=\"#29363E\" points=\"15,22.4 19.7,29.5 31.2,10 38.9,10 19.7,40 11.1,27.4 \"/></svg>",
     "check_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M534 132.5C544.8 140.2 547.2 155.2 539.5 166L275.5 534C271.4 539.7 265 543.4 258 543.9C251 544.4 244 542 239 537L103 401C93.6 391.6 93.6 376.4 103 367.1C112.4 357.8 127.6 357.7 136.9 367.1L253 483L500.5 138C508.2 127.2 523.2 124.8 534 132.5z\"/></svg>",
     "check_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z\"/></svg>",
+    "chevron_left_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\"><path d=\"M167.5 303C158.1 312.4 158.1 327.6 167.5 336.9L367.5 536.9C376.9 546.3 392.1 546.3 401.4 536.9C410.7 527.5 410.8 512.3 401.4 503L218.4 320L401.4 137C410.8 127.6 410.8 112.4 401.4 103.1C392 93.8 376.8 93.7 367.5 103.1L167.5 303z\"/></svg>",
     "circle_check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM363.3 203.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L224 297.4l-52.7-52.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l64 64c6.2 6.2 16.4 6.2 22.6 0l128-128z\"/></svg>",
     "circle_check_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z\"/></svg>",
     "circle_info": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM208 352c-8.8 0-16 7.2-16 16s7.2 16 16 16l96 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0 0-112c0-8.8-7.2-16-16-16l-40 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l24 0 0 96-32 0zm48-168a24 24 0 1 0 0-48 24 24 0 1 0 0 48z\"/></svg>",
@@ -7480,7 +7715,7 @@ const IconSvg = {
     "magnifying_glass_plus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M208 32a176 176 0 1 1 0 352 176 176 0 1 1 0-352zm0 384c51.7 0 99-18.8 135.3-50L484.7 507.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L366 343.3c31.2-36.4 50-83.7 50-135.3C416 93.1 322.9 0 208 0S0 93.1 0 208S93.1 416 208 416zM192 304c0 8.8 7.2 16 16 16s16-7.2 16-16l0-80 80 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-80 0 0-80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 80-80 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l80 0 0 80z\"/></svg>",
     "measurements": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M17.8,39.17,11,32.37l21.2-21.2L39,18Zm-4.4-6.8,4.4,4.4L36.6,18l-4.4-4.4Z\" fill=\"#484f60\"/><rect x=\"28.54\" y=\"14.92\" width=\"4.53\" height=\"1.7\" transform=\"translate(20.17 -17.16) rotate(45)\" fill=\"#484f60\"/><rect x=\"13.34\" y=\"30.12\" width=\"4.53\" height=\"1.7\" transform=\"translate(26.47 -1.96) rotate(45)\" fill=\"#484f60\"/><rect x=\"25.84\" y=\"17.85\" width=\"5.66\" height=\"1.7\" transform=\"translate(21.62 -14.79) rotate(45)\" fill=\"#484f60\"/><rect x=\"23.47\" y=\"19.98\" width=\"4.53\" height=\"1.7\" transform=\"translate(22.27 -12.09) rotate(45)\" fill=\"#484f60\"/><rect x=\"20.77\" y=\"22.92\" width=\"5.66\" height=\"1.7\" transform=\"translate(23.72 -9.73) rotate(45)\" fill=\"#484f60\"/><rect x=\"18.4\" y=\"25.05\" width=\"4.53\" height=\"1.7\" transform=\"translate(24.37 -7.03) rotate(45)\" fill=\"#484f60\"/><rect x=\"15.7\" y=\"27.98\" width=\"5.66\" height=\"1.7\" transform=\"translate(25.82 -4.66) rotate(45)\" fill=\"#484f60\"/></svg>",
     "measurements_inside": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 30 30\"><g ><path d=\"m24.64,0h-3.43c-.59,0-1.07.48-1.07,1.07s.48,1.07,1.07,1.07h3.43c1.77,0,3.21,1.44,3.21,3.21v19.29c0,1.77-1.44,3.21-3.21,3.21h-3.43c-.59,0-1.07.48-1.07,1.07s.48,1.07,1.07,1.07h3.43c2.96,0,5.36-2.4,5.36-5.36V5.36c0-2.95-2.4-5.36-5.36-5.36Z\" fill=\"#484f60\" stroke-width=\"0\"/><path d=\"m0,26.25c0-.41.27-.75.6-.75h10.8c.33,0,.6.34.6.75s-.27.75-.6.75H.6c-.33,0-.6-.34-.6-.75Zm1.98-9.53c.23-.3.62-.3.85,0l2.58,3.22v-9.88l-2.58,3.22c-.23.3-.62.3-.85,0-.24-.29-.24-.77,0-1.06l3.6-4.5c.23-.3.62-.3.85,0l3.6,4.5c.24.29.24.77,0,1.06-.23.3-.61.3-.85,0l-2.58-3.22v9.88l2.58-3.22c.23-.3.61-.3.85,0,.24.29.24.77,0,1.06l-3.6,4.5c-.23.29-.61.29-.85,0l-3.6-4.5c-.24-.29-.24-.77,0-1.06h0ZM11.4,3c.33,0,.6.34.6.75s-.27.75-.6.75H.6c-.33,0-.6-.34-.6-.75s.27-.75.6-.75h10.8Z\" fill=\"#484f60\" stroke-width=\"0\"/></g></svg>",
-    "move-phone-ar": "<!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=\"363px\" height=\"222px\" viewBox=\"-0.5 -0.5 363 222\" content=\"&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2022-02-28T15:27:40.868Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36&quot; etag=&quot;_ioPnVdQo6hh2aJpDZbs&quot; version=&quot;16.6.4&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;KlZxfvW3MfvAEXvIozvx&quot; name=&quot;Page-1&quot;&gt;7VjLcpswFP0aL+PRAxAsY8dNu2ibmaTTZolBwZpg5BHyK19fESTeCdhjp80k3hiOpCvpnHPFhRGeLnfXwl8tvvOQxiMEwt0IX40QggAS9Zch+xzxXA1EgoW6UwncsidqRmp0zUKa1jpKzmPJVnUw4ElCA1nDfCH4tt7tgcf1WVd+RFvAbeDHbfQ3C+UiR11ESvwrZdHCzAwdL29Z+qaz3km68EO+rUB4NsJTwbnMr5a7KY0z8gwv+bgvL7QWCxM0kUMGkOAyouDO+bVL0cx9YrPNzeMFzqNs/HitN6wXK/eGAcHXSUizIHCEJ9sFk/R25QdZ61ZprrCFXMa6WXDpS8YTdXvhAQU8sDie8pgLhSQ8UaMmqRT8sWDTVkh7K3p3Gyok3VUgvbVrypdUir3qolsxAGM7H7Q3iDUmGtqW0iHomI6LqnDIM7CvLRMVk5SsqgtN7AEke/0k0yS8zNxaslQjtarAAfTRsGbuNnkVXmzQJsVggsZK1U09Jbpo0jPccKZWUmpDnEIJLQ4ioB4l5WsRUD2w6uJGLMsCvbGkLyIqW7EUwf6+0m2VdUgPW7YLelfnuKD8Oa8NVxf5mkprFdoc7zZzcn5Yu1kAN3WzbOdIu8H+WC/Y7WR6kn49K+p1HdDq0bPKblnKp+s5VcRN5n7wGD0r/XMtY5Z54Hm46nKZRM9xod0pf8eJforzm+AxahzgGBVQxTkEtp1DrLMd3tDtp9/w+xDTnc6rSSXFgthPUxa8lGWgk+YcaRBd5X6UPfOyXya6HohAPrOuo9wxgcSxCLBdF2Ebv4PktQGom8BRm7DbJ+qhiWx77bgOedtEHlAHZCm5Gp5ORd3rz00E0K2eSTOnnWaoKIgqEnsdWeY2uD9djsF+ZgY+srqTqc3oqwr9J7ng1i3bpH+o9RvOJ8MeX4dWS17nYs9b6aBP23QoAZtKFBk/2DlnsspbemPAm+0H9IYLD3SCyW5Y8xQ8zxuXnuW8xrA/jdGRk01FhxrjxE44lfT4m2uhXcDsu/l98CP5c3/tWRcDqox3V8k37NNRNv6zrz7mxbWouL0xPs5kCPWGOrp2V7flN9i8e/klG8/+Ag==&lt;/diagram&gt;&lt;/mxfile&gt;\"><defs/><g><rect x=\"72.5\" y=\"45.75\" width=\"216.5\" height=\"129.5\" rx=\"19.43\" ry=\"19.43\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" transform=\"rotate(-90,180.75,110.5)\" pointer-events=\"all\"/><path d=\"M 148.75 11 L 148.75 16 Q 148.75 21 158.75 21 L 202.68 21 Q 212.68 21 212.72 16 L 212.75 11\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"/><path d=\"M 175.75 197 L 185.75 197\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"/><path d=\"M 180.75 73.25 L 216.25 90.3 L 216.25 130.7 L 180.75 147.75 L 145.25 130.7 L 145.25 90.3 Z\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"all\"/><path d=\"M 145.25 90.3 L 180.75 107.34 L 216.25 90.3 M 180.75 107.34 L 180.75 147.75\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"all\"/><path d=\"M 274.51 121.75 L 274.49 97.75 L 328.34 97.7 L 328.33 85.2 L 359.5 109.67 L 328.37 134.2 L 328.36 121.7 Z\" fill=\"#000000\" stroke=\"none\" pointer-events=\"all\"/><path d=\"M 215.25 153.5 L 225.25 153.5 L 225.25 143.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 145.25 153.75 L 135.25 153.5 L 135.25 143.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 216.25 67.5 L 226.25 67.5 L 226.25 77.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 135.25 77.5 L 135.25 67.5 L 145.25 67.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 86.5 98.3 L 86.5 122.3 L 32.65 122.3 L 32.65 134.8 L 1.5 110.3 L 32.65 85.8 L 32.65 98.3 Z\" fill=\"#000000\" stroke=\"none\" pointer-events=\"none\"/></g></svg>",
+    "move-phone-ar": "<!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=\"363px\" height=\"222px\" viewBox=\"-0.5 -0.5 363 222\" content=\"&lt;mxfile host=&quot;app.diagrams.net&quot; modified=&quot;2022-02-28T15:27:40.868Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36&quot; etag=&quot;_ioPnVdQo6hh2aJpDZbs&quot; version=&quot;16.6.4&quot; type=&quot;device&quot;&gt;&lt;diagram selNodeId=&quot;KlZxfvW3MfvAEXvIozvx&quot; name=&quot;Page-1&quot;&gt;7VjLcpswFP0aL+PRAxAsY8dNu2ibmaTTZolBwZpg5BHyK19fESTeCdhjp80k3hiOpCvpnHPFhRGeLnfXwl8tvvOQxiMEwt0IX40QggAS9Zch+xzxXA1EgoW6UwncsidqRmp0zUKa1jpKzmPJVnUw4ElCA1nDfCH4tt7tgcf1WVd+RFvAbeDHbfQ3C+UiR11ESvwrZdHCzAwdL29Z+qaz3km68EO+rUB4NsJTwbnMr5a7KY0z8gwv+bgvL7QWCxM0kUMGkOAyouDO+bVL0cx9YrPNzeMFzqNs/HitN6wXK/eGAcHXSUizIHCEJ9sFk/R25QdZ61ZprrCFXMa6WXDpS8YTdXvhAQU8sDie8pgLhSQ8UaMmqRT8sWDTVkh7K3p3Gyok3VUgvbVrypdUir3qolsxAGM7H7Q3iDUmGtqW0iHomI6LqnDIM7CvLRMVk5SsqgtN7AEke/0k0yS8zNxaslQjtarAAfTRsGbuNnkVXmzQJsVggsZK1U09Jbpo0jPccKZWUmpDnEIJLQ4ioB4l5WsRUD2w6uJGLMsCvbGkLyIqW7EUwf6+0m2VdUgPW7YLelfnuKD8Oa8NVxf5mkprFdoc7zZzcn5Yu1kAN3WzbOdIu8H+WC/Y7WR6kn49K+p1HdDq0bPKblnKp+s5VcRN5n7wGD0r/XMtY5Z54Hm46nKZRM9xod0pf8eJforzm+AxahzgGBVQxTkEtp1DrLMd3tDtp9/w+xDTnc6rSSXFgthPUxa8lGWgk+YcaRBd5X6UPfOyXya6HohAPrOuo9wxgcSxCLBdF2Ebv4PktQGom8BRm7DbJ+qhiWx77bgOedtEHlAHZCm5Gp5ORd3rz00E0K2eSTOnnWaoKIgqEnsdWeY2uD9djsF+ZgY+srqTqc3oqwr9J7ng1i3bpH+o9RvOJ8MeX4dWS17nYs9b6aBP23QoAZtKFBk/2DlnsspbemPAm+0H9IYLD3SCyW5Y8xQ8zxuXnuW8xrA/jdGRk01FhxrjxE44lfT4m2uhXcDsu/l98CP5c3/tWRcDqox3V8k37NNRNv6zrz7mxbWouL0xPs5kCPWGOrp2V7flN9i8e/klG8/+Ag==&lt;/diagram&gt;&lt;/mxfile&gt;\"><defs/><g><rect x=\"72.5\" y=\"45.75\" width=\"216.5\" height=\"129.5\" rx=\"19.43\" ry=\"19.43\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" transform=\"rotate(-90,180.75,110.5)\" pointer-events=\"all\"/><path d=\"M 148.75 11 L 148.75 16 Q 148.75 21 158.75 21 L 202.68 21 Q 212.68 21 212.72 16 L 212.75 11\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"/><path d=\"M 175.75 197 L 185.75 197\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"stroke\"/><path d=\"M 180.75 73.25 L 216.25 90.3 L 216.25 130.7 L 180.75 147.75 L 145.25 130.7 L 145.25 90.3 Z\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"all\"/><path d=\"M 145.25 90.3 L 180.75 107.34 L 216.25 90.3 M 180.75 107.34 L 180.75 147.75\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"all\"/><path d=\"M 274.51 121.75 L 274.49 97.75 L 328.34 97.7 L 328.33 85.2 L 359.5 109.67 L 328.37 134.2 L 328.36 121.7 Z\" fill=\"#000000\" stroke=\"none\" pointer-events=\"all\"/><path d=\"M 215.25 153.5 L 225.25 153.5 L 225.25 143.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 145.25 153.75 L 135.25 153.5 L 135.25 143.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 216.25 67.5 L 226.25 67.5 L 226.25 77.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 135.25 77.5 L 135.25 67.5 L 145.25 67.5\" fill=\"none\" stroke=\"rgb(0, 0, 0)\" stroke-width=\"5\" stroke-miterlimit=\"10\" pointer-events=\"none\"/><path d=\"M 86.5 98.3 L 86.5 122.3 L 32.65 122.3 L 32.65 134.8 L 1.5 110.3 L 32.65 85.8 L 32.65 98.3 Z\" fill=\"#000000\" stroke=\"none\" pointer-events=\"none\"/></g></svg>",
     "paint_roller_light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M352 32c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32L64 128c-17.7 0-32-14.3-32-32l0-32c0-17.7 14.3-32 32-32l288 0zm64 32c0-35.3-28.7-64-64-64L64 0C28.7 0 0 28.7 0 64L0 96c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-32zM240 352c8.8 0 16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-96c0-8.8 7.2-16 16-16l32 0zm-32-32c-26.5 0-48 21.5-48 48l0 96c0 26.5 21.5 48 48 48l32 0c26.5 0 48-21.5 48-48l0-96c0-26.5-21.5-48-48-48l0-32c0-17.7 14.3-32 32-32l176 0c35.3 0 64-28.7 64-64l0-64c0-35.3-28.7-64-64-64l0 32c17.7 0 32 14.3 32 32l0 64c0 17.7-14.3 32-32 32l-176 0c-35.3 0-64 28.7-64 64l0 32z\"/></svg>",
     "pen-ruler": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M373.2 16.97C395.1-4.901 430.5-4.901 452.4 16.97L495 59.6C516.9 81.47 516.9 116.9 495 138.8L182.3 451.6C170.9 462.9 156.9 471.2 141.5 475.8L20.52 511.3C14.9 512.1 8.827 511.5 4.687 507.3C.5466 503.2-1.002 497.1 .6506 491.5L36.23 370.5C40.76 355.1 49.09 341.1 60.44 329.7L373.2 16.97zM429.8 39.6C420.4 30.22 405.2 30.22 395.8 39.6L341 94.4L417.6 170.1L472.4 116.2C481.8 106.8 481.8 91.6 472.4 82.23L429.8 39.6zM66.93 379.5L39.63 472.4L132.4 445.1C142.7 442 152.1 436.5 159.6 428.9L394.1 193.6L318.4 117L83.07 352.4C75.5 359.9 69.95 369.3 66.93 379.5V379.5zM173.3 27.31L244.1 98.18L221.5 120.8L189.7 88.97L155.3 123.3C149.1 129.6 138.9 129.6 132.7 123.3C126.4 117.1 126.4 106.9 132.7 100.7L167 66.34L150.6 49.94C138.1 37.44 117.9 37.44 105.4 49.94L49.94 105.4C37.44 117.9 37.44 138.1 49.94 150.6L120.8 221.5L98.18 244.1L27.31 173.3C2.32 148.3 2.32 107.7 27.31 82.75L82.75 27.31C107.7 2.32 148.3 2.32 173.3 27.31V27.31zM338.7 484.7L267.9 413.8L290.5 391.2L361.4 462.1C373.9 474.6 394.1 474.6 406.6 462.1L462.1 406.6C474.6 394.1 474.6 373.9 462.1 361.4L445.7 344.1L411.3 379.3C405.1 385.6 394.9 385.6 388.7 379.3C382.4 373.1 382.4 362.9 388.7 356.7L423 322.3L391.2 290.5L413.8 267.9L484.7 338.7C509.7 363.7 509.7 404.3 484.7 429.3L429.3 484.7C404.3 509.7 363.7 509.7 338.7 484.7V484.7z\"/></svg>",
     "pencil_light": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M395.8 39.6c9.4-9.4 24.6-9.4 33.9 0l42.6 42.6c9.4 9.4 9.4 24.6 0 33.9L417.6 171 341 94.4l54.8-54.8zM318.4 117L395 193.6 159.6 428.9c-7.6 7.6-16.9 13.1-27.2 16.1L39.6 472.4l27.3-92.8c3-10.3 8.6-19.6 16.1-27.2L318.4 117zM452.4 17c-21.9-21.9-57.3-21.9-79.2 0L60.4 329.7c-11.4 11.4-19.7 25.4-24.2 40.8L.7 491.5c-1.7 5.6-.1 11.7 4 15.8s10.2 5.7 15.8 4l121-35.6c15.4-4.5 29.4-12.9 40.8-24.2L495 138.8c21.9-21.9 21.9-57.3 0-79.2L452.4 17z\"/></svg>",
@@ -7590,7 +7825,7 @@ class ConfiguratorErrorDialogComponent {
         <button class="close-button" (click)="onClose()" [textContent]="'CLOSE' | localize:false | async"></button>
       </div>
     </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorErrorDialogComponent, decorators: [{
             type: Component,
@@ -7780,7 +8015,7 @@ class AnswersInfoDialogComponent {
         </div>
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AnswersInfoDialogComponent, decorators: [{
             type: Component,
@@ -8061,7 +8296,7 @@ class AnswerCardComponent {
       }
     
     </co-card>
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.CardComponent, selector: "co-card", inputs: ["imageData", "description", "price", "level", "isSelected", "isSmallModus", "hasMagnifierButton", "hasInfoButton"], outputs: ["contentClick", "infoButtonClick", "magnifierButtonClick"] }, { 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: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: AnswersInfoDialogComponent, selector: "co-answer-info-dialog", inputs: ["answer", "structure", "fixedPosition"], outputs: ["nothingToShow"] }, { kind: "component", type: i4.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.CardComponent, selector: "co-card", inputs: ["imageData", "description", "price", "level", "isSelected", "isSmallModus", "hasMagnifierButton", "hasInfoButton"], outputs: ["contentClick", "infoButtonClick", "magnifierButtonClick"] }, { 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: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: AnswersInfoDialogComponent, selector: "co-answer-info-dialog", inputs: ["answer", "structure", "fixedPosition"], outputs: ["nothingToShow"] }, { kind: "component", type: i4.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AnswerCardComponent, decorators: [{
             type: Component,
@@ -8787,19 +9022,6 @@ class AnswersSlideoutComponent {
       </div>
     }
     <ng-template #answerTemplate>
-      @if (searchExpanded) {
-        <div class="search-wrapper" [@showFilter]="searchExpanded">
-          <!-- TODO enable after Angular update -->
-          <!--        <co-input-text-chips-->
-          <!--          class="text-chips"-->
-          <!--          [value]="chipTexts"-->
-          <!--          [initFocus]="true"-->
-          <!--          extraIcon="cancel"-->
-          <!--          (valueChange)="onChipsValueChange($event)"-->
-          <!--          (extraIconClicked)="onChipsClose()"-->
-        <!--        ></co-input-text-chips>-->
-      </div>
-    }
     @if (showTitle) {
       <div class="title">
         <h3 [textContent]="(question?.commercialQuestion ? question?.commercialQuestion : question?.question) | localize:true | async"></h3>
@@ -8814,6 +9036,21 @@ class AnswersSlideoutComponent {
             <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
           </button>
         }
+        @if (searchExpanded) {
+          <div class="search-wrapper">
+            <co-input-text-chips
+              class="text-chips"
+              [model]="chipTexts"
+              [initFocus]="true"
+              (modelChange)="onChipsValueChange($event)"
+              (extraIconClicked)="onChipsClose()"
+            ></co-input-text-chips>
+            <co-button
+              [iconData]="iconService.getIcon(icons.Cross)"
+              (onClick)="searchExpanded = false"
+            ></co-button>
+          </div>
+        }
       </div>
     }
     @if (question && question.optionLinkedText) {
@@ -8898,7 +9135,7 @@ class AnswersSlideoutComponent {
       }
     </div>
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: SlideoutComponent, selector: "co-slideout", inputs: ["show", "resizable"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: AnswerCardComponent, selector: "co-answer-card", inputs: ["model", "valutaSymbol", "showing", "isSelected", "isSmallModus", "freeInput"], outputs: ["freeInputChange", "inqNumberChange", "select", "selectWithInq", "magnifierClick", "answerInfoToggle"] }, { kind: "component", type: ImageZoomComponent, selector: "co-image-zoom", inputs: ["imageData", "show"], outputs: ["showChange"] }, { kind: "component", type: ColorFilterComponent, selector: "co-color-filter", inputs: ["color", "active"] }, { kind: "component", type: TagFilterComponent, selector: "co-tag-filter", inputs: ["tag", "active"] }, { kind: "directive", type: VisibilityObserverDirective, selector: "[visibilityObserver]", inputs: ["observerEnabled"], exportAs: ["intersection"] }, { kind: "directive", type: VisibilityObserverMasterDirective, selector: "[visibilityObserverMaster]" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }, { kind: "pipe", type: i6.AppendPipe, name: "append" }, { kind: "pipe", type: i6.PrependPipe, name: "prepend" }, { kind: "pipe", type: i6.StripHtmlPipe, name: "stripHtml" }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: SlideoutComponent, selector: "co-slideout", inputs: ["show", "resizable"] }, { kind: "directive", type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: AnswerCardComponent, selector: "co-answer-card", inputs: ["model", "valutaSymbol", "showing", "isSelected", "isSmallModus", "freeInput"], outputs: ["freeInputChange", "inqNumberChange", "select", "selectWithInq", "magnifierClick", "answerInfoToggle"] }, { kind: "component", type: ImageZoomComponent, selector: "co-image-zoom", inputs: ["imageData", "show"], outputs: ["showChange"] }, { kind: "component", type: ColorFilterComponent, selector: "co-color-filter", inputs: ["color", "active"] }, { kind: "component", type: TagFilterComponent, selector: "co-tag-filter", inputs: ["tag", "active"] }, { kind: "directive", type: VisibilityObserverDirective, selector: "[visibilityObserver]", inputs: ["observerEnabled"], exportAs: ["intersection"] }, { kind: "directive", type: VisibilityObserverMasterDirective, selector: "[visibilityObserverMaster]" }, { kind: "component", type: i4.InputTextChipsComponent, selector: "co-input-text-chips", inputs: ["placeholder", "colorSeqName", "toggleModel", "toggleBoxLabel", "extraIcon"], outputs: ["extraIconClicked", "submit", "toggleModelChange"] }, { kind: "component", type: i4.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }, { kind: "pipe", type: i6.AppendPipe, name: "append" }, { kind: "pipe", type: i6.PrependPipe, name: "prepend" }, { kind: "pipe", type: i6.StripHtmlPipe, name: "stripHtml" }], animations: [
             trigger('showFilter', [
                 state('1', style({ transform: 'translateX(0%) scaleX(1)', opacity: 1 })),
                 state('void', style({ transform: 'translateX(50%) scaleX(0)', opacity: 0 })),
@@ -8935,19 +9172,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       </div>
     }
     <ng-template #answerTemplate>
-      @if (searchExpanded) {
-        <div class="search-wrapper" [@showFilter]="searchExpanded">
-          <!-- TODO enable after Angular update -->
-          <!--        <co-input-text-chips-->
-          <!--          class="text-chips"-->
-          <!--          [value]="chipTexts"-->
-          <!--          [initFocus]="true"-->
-          <!--          extraIcon="cancel"-->
-          <!--          (valueChange)="onChipsValueChange($event)"-->
-          <!--          (extraIconClicked)="onChipsClose()"-->
-        <!--        ></co-input-text-chips>-->
-      </div>
-    }
     @if (showTitle) {
       <div class="title">
         <h3 [textContent]="(question?.commercialQuestion ? question?.commercialQuestion : question?.question) | localize:true | async"></h3>
@@ -8962,6 +9186,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             <co-icon [iconData]="iconService.getIcon(icons.Cross)"></co-icon>
           </button>
         }
+        @if (searchExpanded) {
+          <div class="search-wrapper">
+            <co-input-text-chips
+              class="text-chips"
+              [model]="chipTexts"
+              [initFocus]="true"
+              (modelChange)="onChipsValueChange($event)"
+              (extraIconClicked)="onChipsClose()"
+            ></co-input-text-chips>
+            <co-button
+              [iconData]="iconService.getIcon(icons.Cross)"
+              (onClick)="searchExpanded = false"
+            ></co-button>
+          </div>
+        }
       </div>
     }
     @if (question && question.optionLinkedText) {
@@ -9256,7 +9495,7 @@ class CoSummaryLine {
         <ng-content></ng-content>
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.ImageComponent, selector: "co-image", inputs: ["source", "placeHolder"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }], animations: [
             trigger('showTheContent', [
                 state('void', style({ height: 0, opacity: 0 })),
                 state('*', style({ height: '*', opacity: 1 })),
@@ -9508,7 +9747,7 @@ class SelectionsSummaryLineComponent {
         }
       </co-summary-line>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoSummaryLine, selector: "co-summary-line", inputs: ["imageData", "title", "description", "price", "multilineData", "valutaSymbol", "isHighlighted", "isCollapsable", "canRepeat", "isDeletable", "showContent"], outputs: ["repeatClicked", "deleteClicked"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CoSummaryLine, selector: "co-summary-line", inputs: ["imageData", "title", "description", "price", "multilineData", "valutaSymbol", "isHighlighted", "isCollapsable", "canRepeat", "isDeletable", "showContent"], outputs: ["repeatClicked", "deleteClicked"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectionsSummaryLineComponent, decorators: [{
             type: Component,
@@ -9763,7 +10002,7 @@ class ConfigurationPresetDialogComponent {
         </div>
       </div>
     </ng-template>
-  `, 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: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+  `, 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: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetDialogComponent, decorators: [{
             type: Component,
@@ -9917,7 +10156,7 @@ class ConfigurationPresetComponent {
       </div>
       <co-configuration-preset-dialog></co-configuration-preset-dialog>
     }
-  `, 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: ConfigurationPresetDialogComponent, selector: "co-configuration-preset-dialog" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+  `, 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: ConfigurationPresetDialogComponent, selector: "co-configuration-preset-dialog" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfigurationPresetComponent, decorators: [{
             type: Component,
@@ -10065,7 +10304,7 @@ class SelectionsSummaryComponent {
           }
         </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: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }], encapsulation: i0.ViewEncapsulation.None });
+    `, 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: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.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,
@@ -10275,7 +10514,7 @@ class LiteSelectorComponent {
         ></co-answers-slideout>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: AnswersSlideoutComponent, selector: "co-answers-slideout", inputs: ["question", "showTitle", "showFilter", "answers", "useSlideout", "customDimensions"], outputs: ["answerChosen"] }, { kind: "directive", type: i5.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: ["question", "showTitle", "showFilter", "answers", "useSlideout", "customDimensions"], outputs: ["answerChosen"] }, { kind: "directive", type: i6$1.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: [
             trigger('showSelections', [
                 state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
                 state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
@@ -10358,17 +10597,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Output
             }] } });
 
-class ProductConfiguratorService {
-    showChange = new EventEmitter();
-    answerChosen = new EventEmitter();
-    selectSelection = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+const trackBySelectionIdFn = (index, selection) => {
+    return selection && selection.id ? `${selection.id}-${selection.selected}` : `__NEW__${index}`;
+};
 
 class ProductConfiguratorSelectorOptionTileComponent {
     configuratorConnectorService;
@@ -10379,94 +10610,152 @@ class ProductConfiguratorSelectorOptionTileComponent {
     }
     icons = IconEnum;
     option;
-    tileClass = 'small';
+    tileClass;
     noLabel = false;
+    markAsException = false;
+    set showing(value) {
+        if (value) {
+            this._getThumbnailImage();
+        }
+    }
     selectionClicked = new EventEmitter();
+    class = 'small';
     constructor(configuratorConnectorService, iconService, settingsService) {
         this.configuratorConnectorService = configuratorConnectorService;
         this.iconService = iconService;
         this.settingsService = settingsService;
     }
+    ngOnInit() {
+        if (this.tileClass) {
+            this.class = this._getTileClass();
+        }
+    }
     changeSelection() {
         this.selectionClicked.emit();
     }
+    _getTileClass() {
+        if (this.tileClass === ConfigurationDisplayOption.TileLarge) {
+            return 'large';
+        }
+        else if (this.tileClass === ConfigurationDisplayOption.TileRounded) {
+            return 'rounded';
+        }
+        else if (this.tileClass === ConfigurationDisplayOption.SmallCircle) {
+            return 'small-rounded';
+        }
+        else if (this.tileClass === ConfigurationDisplayOption.SmallSquare) {
+            return 'small-square';
+        }
+        else if (this.tileClass === ConfigurationDisplayOption.HorizontalTiles) {
+            return 'horizontal';
+        }
+        else if (this.tileClass === ConfigurationDisplayOption.OnPage) {
+            return 'on-page';
+        }
+        else if (this.tileClass === ConfigurationDisplayOption.SlideOut) {
+            return 'slide-out';
+        }
+        else {
+            return 'small';
+        }
+    }
+    async _getThumbnailImage() {
+        await this.configuratorConnectorService.getImageForAnswer(this.option);
+    }
+    NodeType = NodeType;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionTileComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }, { token: ConfiguratorSettingsService }], 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", 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}}"
-      (click)="changeSelection()" [class.active]="option.selected ==='F'">
-      @if (option.selected ==='F') {
-        <div class="product-configurator-selector-option-tile-checkmark">
-          <co-icon class="product-configurator-selector-option-tile-selected"
-            [iconData]="iconService.getIcon(icons.CheckSolid)">
-          </co-icon>
-        </div>
-      }
-      <!-- Image  -->
-      <div class="product-configurator-selector-option-tile-image">
-        @if (option.imageData) {
-          <img [src]="option.imageData" [alt]="option.artNodeId">
-        }
-        @if (!option.imageData) {
-          <co-icon class="product-configurator-selector-option-button-no-image"
-            [iconData]="iconService.getIcon(icons.ImageSlashRegular)">
-          </co-icon>
+    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", markAsException: "markAsException", showing: "showing" }, 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.class}}"
+        (click)="changeSelection()" [class.active]="option.selected ==='F'">
+        @if (option.selected === 'F') {
+          @if (option.nodeType === NodeType.Article) {
+            <div class="product-configurator-selector-option-tile-configurable" [class.exception]="markAsException">
+              <co-icon class="product-configurator-selector-option-tile-selected"
+                       [iconData]="iconService.getIcon(icons.Brush)">
+              </co-icon>
+            </div>
+          } @else {
+            <div class="product-configurator-selector-option-tile-checkmark">
+              <co-icon class="product-configurator-selector-option-tile-selected"
+                       [iconData]="iconService.getIcon(icons.CheckSolid)">
+              </co-icon>
+            </div>
+          }
         }
-      </div>
-      <!-- Answer text -->
+        <!-- Image  -->
+        <div class="product-configurator-selector-option-tile-image">
+          @if (option.imageData) {
+            <img [src]="option.imageData" [alt]="option.artNodeId">
+          }
+          @if (!option.imageData) {
+            <co-icon class="product-configurator-selector-option-button-no-image"
+                     [iconData]="iconService.getIcon(icons.ImageSlashRegular)">
+            </co-icon>
+          }
+        </div>
+        <!-- Answer text -->
         @if (!noLabel) {
-            <div class="product-configurator-selector-option-tile-description">
-                @if (option.nodeText) {
-                    <p [textContent]="option.nodeText | localize:true | async"></p>
-                }
-                @if (!option.nodeText) {
-                    <p [textContent]="'Skip / Cancel' | localize:true | async"></p>
-                }
-            </div>
+          <div class="product-configurator-selector-option-tile-description">
+            @if (option.nodeText) {
+              <p [textContent]="option.nodeText | localize:true | async"></p>
+            }
+            @if (!option.nodeText) {
+              <p [textContent]="'Skip / Cancel' | localize:true | async"></p>
+            }
+          </div>
         }
-    </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+      </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionTileComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-product-configurator-selector-option-tile',
                     template: `
-    <!-- When selected show checkmark -->
-    <div
-      class="configurator-selector-option-tile-container configurator-selector-option-tile-container-{{this.tileClass}}"
-      (click)="changeSelection()" [class.active]="option.selected ==='F'">
-      @if (option.selected ==='F') {
-        <div class="product-configurator-selector-option-tile-checkmark">
-          <co-icon class="product-configurator-selector-option-tile-selected"
-            [iconData]="iconService.getIcon(icons.CheckSolid)">
-          </co-icon>
-        </div>
-      }
-      <!-- Image  -->
-      <div class="product-configurator-selector-option-tile-image">
-        @if (option.imageData) {
-          <img [src]="option.imageData" [alt]="option.artNodeId">
-        }
-        @if (!option.imageData) {
-          <co-icon class="product-configurator-selector-option-button-no-image"
-            [iconData]="iconService.getIcon(icons.ImageSlashRegular)">
-          </co-icon>
+      <!-- When selected show checkmark -->
+      <div
+        class="configurator-selector-option-tile-container configurator-selector-option-tile-container-{{this.class}}"
+        (click)="changeSelection()" [class.active]="option.selected ==='F'">
+        @if (option.selected === 'F') {
+          @if (option.nodeType === NodeType.Article) {
+            <div class="product-configurator-selector-option-tile-configurable" [class.exception]="markAsException">
+              <co-icon class="product-configurator-selector-option-tile-selected"
+                       [iconData]="iconService.getIcon(icons.Brush)">
+              </co-icon>
+            </div>
+          } @else {
+            <div class="product-configurator-selector-option-tile-checkmark">
+              <co-icon class="product-configurator-selector-option-tile-selected"
+                       [iconData]="iconService.getIcon(icons.CheckSolid)">
+              </co-icon>
+            </div>
+          }
         }
-      </div>
-      <!-- Answer text -->
+        <!-- Image  -->
+        <div class="product-configurator-selector-option-tile-image">
+          @if (option.imageData) {
+            <img [src]="option.imageData" [alt]="option.artNodeId">
+          }
+          @if (!option.imageData) {
+            <co-icon class="product-configurator-selector-option-button-no-image"
+                     [iconData]="iconService.getIcon(icons.ImageSlashRegular)">
+            </co-icon>
+          }
+        </div>
+        <!-- Answer text -->
         @if (!noLabel) {
-            <div class="product-configurator-selector-option-tile-description">
-                @if (option.nodeText) {
-                    <p [textContent]="option.nodeText | localize:true | async"></p>
-                }
-                @if (!option.nodeText) {
-                    <p [textContent]="'Skip / Cancel' | localize:true | async"></p>
-                }
-            </div>
+          <div class="product-configurator-selector-option-tile-description">
+            @if (option.nodeText) {
+              <p [textContent]="option.nodeText | localize:true | async"></p>
+            }
+            @if (!option.nodeText) {
+              <p [textContent]="'Skip / Cancel' | localize:true | async"></p>
+            }
+          </div>
         }
-    </div>
+      </div>
     `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
@@ -10480,6 +10769,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], noLabel: [{
                 type: Input
+            }], markAsException: [{
+                type: Input
+            }], showing: [{
+                type: Input
             }], selectionClicked: [{
                 type: Output
             }] } });
@@ -10529,7 +10822,7 @@ class ProductConfiguratorOptionCheckboxComponent {
       </div>
     </div>
     
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorOptionCheckboxComponent, decorators: [{
             type: Component,
@@ -10613,7 +10906,7 @@ class ProductConfiguratorSelectorOptionButtonComponent {
             }
           </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+        `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionButtonComponent, decorators: [{
             type: Component,
@@ -10695,7 +10988,7 @@ class ProductConfiguratorSelectorOptionDropDownComponent {
           </co-icon>
         </div>
       </div>
-      `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+      `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionDropDownComponent, decorators: [{
             type: Component,
@@ -10739,38 +11032,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class ProductConfiguratorSelectorOptionComponent {
     configuratorConnectorService;
     settingsService;
-    productConfiguratorService;
+    _appEventService;
+    trackBySelectionIdFn = trackBySelectionIdFn;
+    smallTileOptions = [
+        ConfigurationDisplayOption.TileSmall,
+        ConfigurationDisplayOption.SmallCircle,
+        ConfigurationDisplayOption.SmallSquare
+    ];
+    largeTileOptions = [
+        ConfigurationDisplayOption.TileLarge,
+        ConfigurationDisplayOption.TileRounded
+    ];
     showClass() {
         return true;
     }
     selection;
     listOfChoices;
     markAsException;
-    showGlobalAll = false;
-    groupedSubShow = true;
+    limitAmountOfTiles = false;
+    maxVisibleTiles = 5;
+    maxVisibleSmallTiles = 10;
+    selectionClicked = new EventEmitter();
     configurationDisplayOption = ConfigurationDisplayOption;
     selectionClass = '';
     showAllTiles = false;
-    maxVisibleTiles = 10;
-    maxVisibleSmallTiles = 7;
-    visibleAnswers = [];
     remainingTilesCount = 0;
-    smallTileOptions = [
-        ConfigurationDisplayOption.TileSmall,
-        ConfigurationDisplayOption.SmallCircle,
-        ConfigurationDisplayOption.SmallSquare
-    ];
-    largeTileOptions = [
-        ConfigurationDisplayOption.TileLarge,
-        ConfigurationDisplayOption.TileRounded
-    ];
-    constructor(configuratorConnectorService, settingsService, productConfiguratorService) {
+    amountOfTilesToShow = 0;
+    showViewMoreButton = true;
+    _subs = [];
+    constructor(configuratorConnectorService, settingsService, _appEventService) {
         this.configuratorConnectorService = configuratorConnectorService;
         this.settingsService = settingsService;
-        this.productConfiguratorService = productConfiguratorService;
+        this._appEventService = _appEventService;
+        this._subs.push(this._appEventService.showAllConfigurationOptions.subscribe(show => {
+            this._handleShowAll(show);
+        }));
     }
     ngOnInit() {
-        if (this.selection && this.selection.displayOptionControl == null) {
+        if (this.selection && this.selection.displayOptionControl === null || this.selection.displayOptionControl === undefined) {
             this.selection.displayOptionControl = ConfigurationDisplayOption.TileLarge;
         }
         if (this.markAsException) {
@@ -10779,160 +11078,126 @@ class ProductConfiguratorSelectorOptionComponent {
         else {
             this.selectionClass = 'selection-container-' + this.selection.displayOptionControl;
         }
-        if (this.selection && this.selection.opvTreeNodeHierarchy && this.selection.nodeType === NodeType.Question) {
-            // When the selection has a opvTreeNodeHierarchy and has nodeType OPT means we need to add a cancel/ skip option.
-            // This is different from the slide out comp/ selector.
-            // But we need to make a copy of it, if we do not do that, we are missing the right header...
-            const selectionCopy = Object.assign(new SelectorStructure(), this.selection);
-            this.configuratorConnectorService.getImageForAnswer(selectionCopy);
-            this.listOfChoices.push(selectionCopy);
-        }
-        if (this.showGlobalAll) {
-            this.showAllTiles = true;
-        }
+        this.amountOfTilesToShow = this.listOfChoices.length; // Set the default amount to show.
+        this.showViewMoreButton = !this.settingsService.settings.options.groupedShowAllBtn;
         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();
-        }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
     }
-    selectionClicked(answer) {
-        this.productConfiguratorService.selectSelection.emit(answer);
+    handleSelectionClicked(answer) {
+        this.selectionClicked.emit(answer);
     }
     showMore() {
         this.showAllTiles = true;
+        this.amountOfTilesToShow = this.listOfChoices.length;
         this._calculateVisibleAnswers();
     }
     showLess() {
         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.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.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);
+        if (this.limitAmountOfTiles && !this.showAllTiles) {
+            if (this.largeTileOptions.includes(this.selection.displayOptionControl)) {
+                this.amountOfTilesToShow = this.maxVisibleTiles;
+                this.remainingTilesCount = Math.max(0, this.listOfChoices.length - this.maxVisibleTiles);
+            }
+            else if (this.smallTileOptions.includes(this.selection.displayOptionControl)) {
+                this.amountOfTilesToShow = this.maxVisibleSmallTiles;
+                this.remainingTilesCount = Math.max(0, this.listOfChoices.length - this.maxVisibleSmallTiles);
+            }
+            else {
+                this.remainingTilesCount = 0;
+            }
         }
-        else {
-            this.visibleAnswers = this.listOfChoices;
-            this.remainingTilesCount = 0;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionComponent, deps: [{ token: ConfiguratorConnectorService }, { token: ConfiguratorSettingsService }, { 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", 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.largeTileOptions.includes(this.selection.displayOptionControl)
-        && !this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of listOfChoices; track child.id) {
-          <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
-            @if (this.selection.displayOptionControl === configurationDisplayOption.Button) {
-              <co-product-configurator-selector-option-button
+    }
+    _handleShowAll(show) {
+        this.limitAmountOfTiles = false;
+        this.showAllTiles = true;
+        this.amountOfTilesToShow = this.listOfChoices.length;
+        this._calculateVisibleAnswers();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionComponent, deps: [{ token: ConfiguratorConnectorService }, { token: ConfiguratorSettingsService }, { token: ConfiguratorEventService }], 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", limitAmountOfTiles: "limitAmountOfTiles", maxVisibleTiles: "maxVisibleTiles", maxVisibleSmallTiles: "maxVisibleSmallTiles" }, outputs: { selectionClicked: "selectionClicked" }, host: { properties: { "class.co-product-configurator-selector-option": "this.showClass" } }, ngImport: i0, template: `
+    <div class="selector-wrapper {{selectionClass}}" visibilityObserverMaster>
+      @if (selection.displayOptionControl !== configurationDisplayOption.DropDown && !largeTileOptions.includes(selection.displayOptionControl) && !smallTileOptions.includes(selection.displayOptionControl)) {
+        @for (child of listOfChoices; track trackBySelectionIdFn($index, child); ) {
+          <div
+            class="selector-option-wrapper"
+            [class.active]="child.selected ==='F'"
+            [class.exception]="child.selected ==='F' && markAsException">
+            @if (selection.displayOptionControl === configurationDisplayOption.Button) {
+              <co-product-configurator-selector-option-button
                 [option]="child"
-                (selectionClicked)="selectionClicked(child)">
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-button>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.ListOfValues) {
+            @if (selection.displayOptionControl === configurationDisplayOption.ListOfValues) {
               <co-product-configurator-option-checkbox
                 [option]="child"
-                (selectionClicked)="selectionClicked(child)">
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-option-checkbox>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.TileRounded) {
+            @if (selection.displayOptionControl === configurationDisplayOption.TileRounded) {
               <co-product-configurator-selector-option-tile
                 [option]="child"
-                [tileClass]="'rounded'"
-                (selectionClicked)="selectionClicked(child)">
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
+            @if (selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
               <co-product-configurator-selector-option-tile
                 [option]="child"
-                [tileClass]="'horizontal'"
-                (selectionClicked)="selectionClicked(child)">
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.OnPage) {
+            @if (selection.displayOptionControl === configurationDisplayOption.OnPage) {
               <co-product-configurator-selector-option-tile
-                  [option]="child"
-                  [tileClass]="'on-page'"
-                  (selectionClicked)="selectionClicked(child)">
+                [option]="child"
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.SlideOut) {
+            @if (selection.displayOptionControl === configurationDisplayOption.SlideOut) {
               <co-product-configurator-selector-option-tile
-                  [option]="child"
-                  [tileClass]="'slide-out'"
-                  (selectionClicked)="selectionClicked(child)">
+                [option]="child"
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
           </div>
         }
       }
-    
-      @if (
-          this.largeTileOptions.includes(this.selection.displayOptionControl)
-          || this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of visibleAnswers; track child.id) {
-          <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
+      @if (largeTileOptions.includes(selection.displayOptionControl) || smallTileOptions.includes(selection.displayOptionControl)) {
+        @for (child of listOfChoices | slice:0:amountOfTilesToShow; track trackBySelectionIdFn($index, child)) {
+          <div
+            class="selector-option-wrapper"
+            [class.active]="child.selected ==='F'"
+            [class.exception]="child.selected ==='F' && markAsException">
             <co-product-configurator-selector-option-tile
+              visibilityObserver
+              #intersection="intersection"
+              [observerEnabled]="true"
+              [showing]="intersection.isIntersecting"
               [option]="child"
-              [noLabel]="this.selection.displayOptionControl === configurationDisplayOption.SmallCircle || this.selection.displayOptionControl === configurationDisplayOption.SmallSquare"
-              [tileClass]="getTileClass()"
-              (selectionClicked)="selectionClicked(child)"
+              [markAsException]="markAsException"
+              [noLabel]="selection.displayOptionControl === configurationDisplayOption.SmallCircle || selection.displayOptionControl === configurationDisplayOption.SmallSquare"
+              [tileClass]="selection.displayOptionControl"
+              (selectionClicked)="handleSelectionClicked(child)"
             ></co-product-configurator-selector-option-tile>
           </div>
         }
       }
-    
-      @if (this.selection.displayOptionControl === configurationDisplayOption.DropDown) {
+      @if (selection.displayOptionControl === configurationDisplayOption.DropDown) {
         <co-product-configurator-selector-option-dropdown
           [options]="listOfChoices"
-          (selectionClicked)="selectionClicked($event)"
+          (selectionClicked)="handleSelectionClicked($event)"
         ></co-product-configurator-selector-option-dropdown>
       }
     </div>
-    
-    @if (
-        (this.largeTileOptions.includes(this.selection.displayOptionControl) ||
-        this.smallTileOptions.includes(this.selection.displayOptionControl)) && groupedSubShow) {
+    @if (showViewMoreButton && (largeTileOptions.includes(selection.displayOptionControl) || smallTileOptions.includes(selection.displayOptionControl))) {
       @if (!showAllTiles && remainingTilesCount > 0) {
         <div class="show-more-container">
           <span (click)="showMore()">
@@ -10948,96 +11213,91 @@ class ProductConfiguratorSelectorOptionComponent {
         </div>
       }
     }
-    
-    `, 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: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: [
-            trigger('showSelections', [
-                state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
-                state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
-                transition('void <=> *', animate(200))
-            ])
-        ], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ProductConfiguratorSelectorOptionTileComponent, selector: "co-product-configurator-selector-option-tile", inputs: ["option", "tileClass", "noLabel", "markAsException", "showing"], 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: "directive", type: VisibilityObserverDirective, selector: "[visibilityObserver]", inputs: ["observerEnabled"], exportAs: ["intersection"] }, { kind: "directive", type: VisibilityObserverMasterDirective, selector: "[visibilityObserverMaster]" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.SlicePipe, name: "slice" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-product-configurator-selector-option',
                     template: `
-    <div class="selector-wrapper {{this.selectionClass}}">
-      @if (this.selection.displayOptionControl !== configurationDisplayOption.DropDown
-        && !this.largeTileOptions.includes(this.selection.displayOptionControl)
-        && !this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of listOfChoices; track child.id) {
-          <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
-            @if (this.selection.displayOptionControl === configurationDisplayOption.Button) {
+    <div class="selector-wrapper {{selectionClass}}" visibilityObserverMaster>
+      @if (selection.displayOptionControl !== configurationDisplayOption.DropDown && !largeTileOptions.includes(selection.displayOptionControl) && !smallTileOptions.includes(selection.displayOptionControl)) {
+        @for (child of listOfChoices; track trackBySelectionIdFn($index, child); ) {
+          <div
+            class="selector-option-wrapper"
+            [class.active]="child.selected ==='F'"
+            [class.exception]="child.selected ==='F' && markAsException">
+            @if (selection.displayOptionControl === configurationDisplayOption.Button) {
               <co-product-configurator-selector-option-button
                 [option]="child"
-                (selectionClicked)="selectionClicked(child)">
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-button>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.ListOfValues) {
+            @if (selection.displayOptionControl === configurationDisplayOption.ListOfValues) {
               <co-product-configurator-option-checkbox
                 [option]="child"
-                (selectionClicked)="selectionClicked(child)">
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-option-checkbox>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.TileRounded) {
+            @if (selection.displayOptionControl === configurationDisplayOption.TileRounded) {
               <co-product-configurator-selector-option-tile
                 [option]="child"
-                [tileClass]="'rounded'"
-                (selectionClicked)="selectionClicked(child)">
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
+            @if (selection.displayOptionControl === configurationDisplayOption.HorizontalTiles) {
               <co-product-configurator-selector-option-tile
                 [option]="child"
-                [tileClass]="'horizontal'"
-                (selectionClicked)="selectionClicked(child)">
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.OnPage) {
+            @if (selection.displayOptionControl === configurationDisplayOption.OnPage) {
               <co-product-configurator-selector-option-tile
-                  [option]="child"
-                  [tileClass]="'on-page'"
-                  (selectionClicked)="selectionClicked(child)">
+                [option]="child"
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
-            @if (this.selection.displayOptionControl === configurationDisplayOption.SlideOut) {
+            @if (selection.displayOptionControl === configurationDisplayOption.SlideOut) {
               <co-product-configurator-selector-option-tile
-                  [option]="child"
-                  [tileClass]="'slide-out'"
-                  (selectionClicked)="selectionClicked(child)">
+                [option]="child"
+                [tileClass]="selection.displayOptionControl"
+                (selectionClicked)="handleSelectionClicked(child)">
               </co-product-configurator-selector-option-tile>
             }
           </div>
         }
       }
-    
-      @if (
-          this.largeTileOptions.includes(this.selection.displayOptionControl)
-          || this.smallTileOptions.includes(this.selection.displayOptionControl)) {
-        @for (child of visibleAnswers; track child.id) {
-          <div class="selector-option-wrapper" [class.active]="child.selected ==='F'">
+      @if (largeTileOptions.includes(selection.displayOptionControl) || smallTileOptions.includes(selection.displayOptionControl)) {
+        @for (child of listOfChoices | slice:0:amountOfTilesToShow; track trackBySelectionIdFn($index, child)) {
+          <div
+            class="selector-option-wrapper"
+            [class.active]="child.selected ==='F'"
+            [class.exception]="child.selected ==='F' && markAsException">
             <co-product-configurator-selector-option-tile
+              visibilityObserver
+              #intersection="intersection"
+              [observerEnabled]="true"
+              [showing]="intersection.isIntersecting"
               [option]="child"
-              [noLabel]="this.selection.displayOptionControl === configurationDisplayOption.SmallCircle || this.selection.displayOptionControl === configurationDisplayOption.SmallSquare"
-              [tileClass]="getTileClass()"
-              (selectionClicked)="selectionClicked(child)"
+              [markAsException]="markAsException"
+              [noLabel]="selection.displayOptionControl === configurationDisplayOption.SmallCircle || selection.displayOptionControl === configurationDisplayOption.SmallSquare"
+              [tileClass]="selection.displayOptionControl"
+              (selectionClicked)="handleSelectionClicked(child)"
             ></co-product-configurator-selector-option-tile>
           </div>
         }
       }
-    
-      @if (this.selection.displayOptionControl === configurationDisplayOption.DropDown) {
+      @if (selection.displayOptionControl === configurationDisplayOption.DropDown) {
         <co-product-configurator-selector-option-dropdown
           [options]="listOfChoices"
-          (selectionClicked)="selectionClicked($event)"
+          (selectionClicked)="handleSelectionClicked($event)"
         ></co-product-configurator-selector-option-dropdown>
       }
     </div>
-    
-    @if (
-        (this.largeTileOptions.includes(this.selection.displayOptionControl) ||
-        this.smallTileOptions.includes(this.selection.displayOptionControl)) && groupedSubShow) {
+    @if (showViewMoreButton && (largeTileOptions.includes(selection.displayOptionControl) || smallTileOptions.includes(selection.displayOptionControl))) {
       @if (!showAllTiles && remainingTilesCount > 0) {
         <div class="show-more-container">
           <span (click)="showMore()">
@@ -11053,19 +11313,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </div>
       }
     }
-    
-    `,
+  `,
                     encapsulation: ViewEncapsulation.None,
-                    animations: [
-                        trigger('showSelections', [
-                            state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
-                            state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
-                            transition('void <=> *', animate(200))
-                        ])
-                    ],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: ConfiguratorSettingsService }, { type: ProductConfiguratorService }], propDecorators: { showClass: [{
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: ConfiguratorSettingsService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
                 type: HostBinding,
                 args: ['class.co-product-configurator-selector-option']
             }], selection: [{
@@ -11074,80 +11326,589 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], markAsException: [{
                 type: Input
-            }], showGlobalAll: [{
+            }], limitAmountOfTiles: [{
+                type: Input
+            }], maxVisibleTiles: [{
+                type: Input
+            }], maxVisibleSmallTiles: [{
+                type: Input
+            }], selectionClicked: [{
+                type: Output
+            }] } });
+
+class ProductConfiguratorRepeatButtonsComponent {
+    iconCacheService;
+    icons = IconEnum;
+    showClass() {
+        return true;
+    }
+    showRepeatButton = false;
+    showDeleteButton = false;
+    repeatClicked = new EventEmitter();
+    deleteClicked = new EventEmitter();
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+    }
+    handleRepeatClick() {
+        this.repeatClicked.emit();
+    }
+    handleDeleteClick() {
+        this.deleteClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorRepeatButtonsComponent, deps: [{ token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorRepeatButtonsComponent, isStandalone: false, selector: "co-product-configurator-repeat-buttons", inputs: { showRepeatButton: "showRepeatButton", showDeleteButton: "showDeleteButton" }, outputs: { repeatClicked: "repeatClicked", deleteClicked: "deleteClicked" }, host: { properties: { "class.co-product-configurator-repeat-buttons": "this.showClass" } }, ngImport: i0, template: `
+    @if (showRepeatButton || showDeleteButton) {
+      <div class="button-container">
+        @if (showRepeatButton) {
+          <div class="repeat-button-container">
+            <co-button
+              [iconData]="iconCacheService.getIcon(icons.AddButton)"
+              [label]="'ADD_ELEMENT' | localize:false | async"
+              (onClick)="handleRepeatClick()"
+            ></co-button>
+          </div>
+        }
+
+        @if (showDeleteButton) {
+<!--          <div class="delete-button-container">-->
+<!--            <co-button-->
+<!--              [iconData]="iconCacheService.getIcon(icons.DeleteButton)"-->
+<!--              (onClick)="handleDeleteClick()"-->
+<!--            ></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: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorRepeatButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-product-configurator-repeat-buttons',
+                    template: `
+    @if (showRepeatButton || showDeleteButton) {
+      <div class="button-container">
+        @if (showRepeatButton) {
+          <div class="repeat-button-container">
+            <co-button
+              [iconData]="iconCacheService.getIcon(icons.AddButton)"
+              [label]="'ADD_ELEMENT' | localize:false | async"
+              (onClick)="handleRepeatClick()"
+            ></co-button>
+          </div>
+        }
+
+        @if (showDeleteButton) {
+<!--          <div class="delete-button-container">-->
+<!--            <co-button-->
+<!--              [iconData]="iconCacheService.getIcon(icons.DeleteButton)"-->
+<!--              (onClick)="handleDeleteClick()"-->
+<!--            ></co-button>-->
+<!--          </div>-->
+        }
+      </div>
+    }
+  `,
+                    standalone: false,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: IconCacheService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-configurator-repeat-buttons']
+            }], showRepeatButton: [{
+                type: Input
+            }], showDeleteButton: [{
+                type: Input
+            }], repeatClicked: [{
+                type: Output
+            }], deleteClicked: [{
+                type: Output
+            }] } });
+
+class ProductConfiguratorSelectorChildArticleComponent {
+    configuratorConnectorService;
+    iconService;
+    _appEventService;
+    icons = IconEnum;
+    showClass() {
+        return true;
+    }
+    selection;
+    listOfChoices;
+    options;
+    repeatedOptions;
+    markAsException = false;
+    selectionClick = new EventEmitter();
+    constructor(configuratorConnectorService, iconService, _appEventService) {
+        this.configuratorConnectorService = configuratorConnectorService;
+        this.iconService = iconService;
+        this._appEventService = _appEventService;
+    }
+    handleOpenChildOptions(selection) {
+        // I have no clue anymore, but on this level could also be a skip cancel that does not need to open a slideout, but just navigateto
+        // This only applies when opvid === 0 and only works for java backend
+        if (selection.opvId === 0) {
+            this.selectionClick.emit(selection);
+        }
+        else {
+            let articleNoChildren = false;
+            if (this.options && this.options.length > 0) {
+                this.options.forEach(option => {
+                    if (option.selector.selNodeId === selection.selNodeId && option.selector.nodeType === NodeType.Article) {
+                        if (option.selectorOptions && option.selectorOptions.length === 0) {
+                            articleNoChildren = true;
+                        }
+                    }
+                });
+            }
+            // Repeated check aswell
+            if (this.repeatedOptions && this.repeatedOptions.length > 0) {
+                this.repeatedOptions.forEach(option => {
+                    if (option.selectorOptions && option.selectorOptions.length > 0) {
+                        option.selectorOptions.forEach(child => {
+                            if (child.selector.selNodeId === selection.selNodeId && child.selector.nodeType === NodeType.Article) {
+                                if (child.selectorOptions && child.selectorOptions.length === 0) {
+                                    articleNoChildren = true;
+                                }
+                            }
+                        });
+                    }
+                });
+            }
+            if (selection.nodeType === NodeType.Article && !articleNoChildren) {
+                const event = {
+                    open: true,
+                    selNodeId: selection.selNodeId,
+                    selection: this.selection,
+                    options: this.options,
+                    repeatedOptions: this.repeatedOptions,
+                };
+                this._appEventService.openSlideOut.next(event);
+            }
+            else {
+                this.selectionClick.emit(selection);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorChildArticleComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }, { token: ConfiguratorEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: ProductConfiguratorSelectorChildArticleComponent, isStandalone: false, selector: "co-product-configurator-selector-child-article", inputs: { selection: "selection", listOfChoices: "listOfChoices", options: "options", repeatedOptions: "repeatedOptions", markAsException: "markAsException" }, outputs: { selectionClick: "selectionClick" }, host: { properties: { "class.co-product-configurator-selector-child-article": "this.showClass" } }, ngImport: i0, template: `
+    <div class="product-configurator-selector-child-article-container">
+      <div class="product-configurator-selector-child-article-container-headers">
+        <co-product-configurator-selector-option
+          [selection]="selection"
+          [listOfChoices]="listOfChoices"
+          [markAsException]="markAsException"
+          (selectionClicked)="handleOpenChildOptions($event)">
+        </co-product-configurator-selector-option>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ProductConfiguratorSelectorOptionComponent, selector: "co-product-configurator-selector-option", inputs: ["selection", "listOfChoices", "markAsException", "limitAmountOfTiles", "maxVisibleTiles", "maxVisibleSmallTiles"], outputs: ["selectionClicked"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorChildArticleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-product-configurator-selector-child-article',
+                    template: `
+    <div class="product-configurator-selector-child-article-container">
+      <div class="product-configurator-selector-child-article-container-headers">
+        <co-product-configurator-selector-option
+          [selection]="selection"
+          [listOfChoices]="listOfChoices"
+          [markAsException]="markAsException"
+          (selectionClicked)="handleOpenChildOptions($event)">
+        </co-product-configurator-selector-option>
+      </div>
+    </div>
+  `,
+                    standalone: false,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: IconCacheService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-configurator-selector-child-article']
+            }], selection: [{
+                type: Input
+            }], listOfChoices: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], repeatedOptions: [{
+                type: Input
+            }], markAsException: [{
+                type: Input
+            }], selectionClick: [{
+                type: Output
+            }] } });
+
+class ProductConfiguratorGroupedRepeatableOptionsComponent {
+    configuratorConnectorService;
+    iconCacheService;
+    _appEventService;
+    icons = IconEnum;
+    showClass() {
+        return true;
+    }
+    selection;
+    listOfChoices;
+    repeatedOptions;
+    selectionIndex;
+    options;
+    selectionClick = new EventEmitter();
+    newSelection;
+    optionGroups = [];
+    showAllElements = true;
+    showRepeatedOption = true;
+    _subs = [];
+    constructor(configuratorConnectorService, iconCacheService, _appEventService) {
+        this.configuratorConnectorService = configuratorConnectorService;
+        this.iconCacheService = iconCacheService;
+        this._appEventService = _appEventService;
+        this._subs.push(this._appEventService.checkHiddenRepeatItem.subscribe(selection => {
+            this._handleCheckRepeats(selection);
+        }));
+    }
+    ngOnInit() {
+        this.buildOptionGroups();
+        setTimeout(() => {
+            const el = this.newSelection?.nativeElement;
+            const container = el?.closest('.product-configurator-details');
+            if (el && container) {
+                const offset = 400;
+                const top = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - offset;
+                container.scrollTo({ top, behavior: 'smooth' });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    hasSelectedItem(options) {
+        return options.some(o => o.selected === 'F');
+    }
+    handleSwitchView(showAll) {
+        this.showAllElements = showAll;
+        this.optionGroups = [];
+        this.buildOptionGroups();
+    }
+    handleSelectionClicked(selection, group) {
+        let articleNoChildren = false;
+        if (this.options && this.options.length > 0) {
+            this.options.forEach(option => {
+                if (option.selector.selNodeId === selection.selNodeId && option.selector.nodeType === NodeType.Article) {
+                    if (option.selectorOptions && option.selectorOptions.length === 0) {
+                        articleNoChildren = true;
+                    }
+                }
+            });
+        }
+        // Repeated check aswell
+        if (this.repeatedOptions && this.repeatedOptions.length > 0) {
+            this.repeatedOptions.forEach(option => {
+                if (option.selectorOptions && option.selectorOptions.length > 0) {
+                    option.selectorOptions.forEach(child => {
+                        if (child.selector.selNodeId === selection.selNodeId && child.selector.nodeType === NodeType.Article) {
+                            if (child.selectorOptions && child.selectorOptions.length === 0) {
+                                articleNoChildren = true;
+                            }
+                        }
+                    });
+                }
+            });
+        }
+        if (selection.nodeType === NodeType.Article && !articleNoChildren) {
+            this.handleOpenChildOptions(selection, group);
+        }
+        else {
+            this.selectionClick.emit(selection);
+        }
+    }
+    buildOptionGroups() {
+        // Base choices get their own group using the parent selector
+        if (this.listOfChoices?.length > 0) {
+            this.optionGroups.push({
+                selector: this.selection,
+                options: [...this.listOfChoices]
+            });
+        }
+        // Each repeatedOptions entry gets its own isolated group
+        if (this.repeatedOptions?.length > 0) {
+            this.repeatedOptions.forEach(repeat => {
+                if (repeat.selectorOptions?.length > 0) {
+                    this.optionGroups.push({
+                        selector: repeat.selector,
+                        options: repeat.selectorOptions.map(o => o.selector)
+                    });
+                }
+            });
+        }
+        if (!this.showAllElements) {
+            // filter out the not selected ones
+            this.optionGroups.forEach(group => {
+                if (group.options && group.options.length > 0) {
+                    group.options.forEach(choice => {
+                        if (choice.selected === 'F') {
+                            group.options = [choice];
+                        }
+                    });
+                }
+            });
+        }
+        // New addition, when there is only 1 group (the default one) and the selected value is 'skip/ cancel' they do not want to show the group.
+        // Hide the group until the user clicks 'Add element', then show this option.
+        if (this.optionGroups.length === 1) {
+            if (this.optionGroups[0].options.length > 0) {
+                this.optionGroups[0].options.forEach(option => {
+                    if (option.opvId === 0 && option.selected === 'F') {
+                        this.showRepeatedOption = false;
+                    }
+                });
+            }
+        }
+    }
+    handleOpenChildOptions(selection, group) {
+        if (selection.opvId === 0) {
+            this.selectionClick.emit(selection);
+        }
+        else {
+            const event = {
+                open: true,
+                selNodeId: selection.selNodeId,
+                selection: this.selection,
+                options: this.options,
+                repeatedOptions: this.repeatedOptions
+            };
+            this._appEventService.openSlideOut.next(event);
+        }
+    }
+    _handleCheckRepeats(selection) {
+        if (this.selection.id === selection.id) {
+            this.showRepeatedOption = true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorGroupedRepeatableOptionsComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }, { token: ConfiguratorEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorGroupedRepeatableOptionsComponent, isStandalone: false, selector: "co-product-configurator-grouped-repeatable-options", inputs: { selection: "selection", listOfChoices: "listOfChoices", repeatedOptions: "repeatedOptions", selectionIndex: "selectionIndex", options: "options" }, outputs: { selectionClick: "selectionClick" }, host: { properties: { "class.co-product-configurator-grouped-repeatable-options": "this.showClass" } }, viewQueries: [{ propertyName: "newSelection", first: true, predicate: ["newSelection"], descendants: true }], ngImport: i0, template: `
+    <div class="product-configurator-grouped-repeatable-options-container" [class.repeatable-options-hidden]="!showRepeatedOption">
+      <div class="grouped-repeatable-display-tabs">
+        <co-button
+          class="left-button"
+          [class.active-button]="showAllElements"
+          [label]="'SHOW_ALL_ELEMENTS' | localize: false | async"
+          (onClick)="handleSwitchView(true)"
+        ></co-button>
+        <co-button
+          class="right-button"
+          [class.active-button]="!showAllElements"
+          [label]="'SHOW_ACTIVE_ELEMENTS' | localize: false | async"
+          (onClick)="handleSwitchView(false)"
+        ></co-button>
+      </div>
+      <div class="grouped-repeatable-display-body">
+        @if (optionGroups && optionGroups.length > 1) {
+          <div class="repeat-explainer">
+            <div class="info-icon">
+              <co-icon
+                [iconData]="iconCacheService.getIcon(icons.InfoSolidFull)"
+              ></co-icon>
+            </div>
+            @if (showAllElements) {
+              <div class="info-text" [textContent]="'REPEAT_ELEMENTS_EXPLAINER' | localize: false | async">
+              </div>
+            }
+            @if (!showAllElements) {
+              <div class="info-text" [textContent]="'CHANGE_ELEMENTS_EXPLAINER' | localize: false | async">
+              </div>
+            }
+          </div>
+        }
+        <div class="grouped-repeatable-items" [class.show-filtered]="!showAllElements">
+          @for (group of optionGroups; track group.selector.id; let index = $index) {
+            @if (!hasSelectedItem(group.options)) {
+              <div #newSelection></div>
+            }
+            <div class="grouped-items-container">
+              @if (optionGroups && optionGroups.length > 1 && showAllElements) {
+                <div class="index-indicator">
+                  <div [textContent]="selectionIndex.toString() | append: '.' | append: (index + 1).toString()"></div>
+                </div>
+              }
+              <div class="selector-options">
+                <co-product-configurator-selector-option
+                  [class.co-product-configurator-selector-new-option]="!hasSelectedItem(group.options)"
+                  [selection]="group.selector"
+                  [listOfChoices]="group.options"
+                  (selectionClicked)="handleSelectionClicked($event, group)">
+                </co-product-configurator-selector-option>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </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", "limitAmountOfTiles", "maxVisibleTiles", "maxVisibleSmallTiles"], outputs: ["selectionClicked"] }, { kind: "component", type: i4.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AppendPipe, name: "append" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorGroupedRepeatableOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-product-configurator-grouped-repeatable-options',
+                    template: `
+    <div class="product-configurator-grouped-repeatable-options-container" [class.repeatable-options-hidden]="!showRepeatedOption">
+      <div class="grouped-repeatable-display-tabs">
+        <co-button
+          class="left-button"
+          [class.active-button]="showAllElements"
+          [label]="'SHOW_ALL_ELEMENTS' | localize: false | async"
+          (onClick)="handleSwitchView(true)"
+        ></co-button>
+        <co-button
+          class="right-button"
+          [class.active-button]="!showAllElements"
+          [label]="'SHOW_ACTIVE_ELEMENTS' | localize: false | async"
+          (onClick)="handleSwitchView(false)"
+        ></co-button>
+      </div>
+      <div class="grouped-repeatable-display-body">
+        @if (optionGroups && optionGroups.length > 1) {
+          <div class="repeat-explainer">
+            <div class="info-icon">
+              <co-icon
+                [iconData]="iconCacheService.getIcon(icons.InfoSolidFull)"
+              ></co-icon>
+            </div>
+            @if (showAllElements) {
+              <div class="info-text" [textContent]="'REPEAT_ELEMENTS_EXPLAINER' | localize: false | async">
+              </div>
+            }
+            @if (!showAllElements) {
+              <div class="info-text" [textContent]="'CHANGE_ELEMENTS_EXPLAINER' | localize: false | async">
+              </div>
+            }
+          </div>
+        }
+        <div class="grouped-repeatable-items" [class.show-filtered]="!showAllElements">
+          @for (group of optionGroups; track group.selector.id; let index = $index) {
+            @if (!hasSelectedItem(group.options)) {
+              <div #newSelection></div>
+            }
+            <div class="grouped-items-container">
+              @if (optionGroups && optionGroups.length > 1 && showAllElements) {
+                <div class="index-indicator">
+                  <div [textContent]="selectionIndex.toString() | append: '.' | append: (index + 1).toString()"></div>
+                </div>
+              }
+              <div class="selector-options">
+                <co-product-configurator-selector-option
+                  [class.co-product-configurator-selector-new-option]="!hasSelectedItem(group.options)"
+                  [selection]="group.selector"
+                  [listOfChoices]="group.options"
+                  (selectionClicked)="handleSelectionClicked($event, group)">
+                </co-product-configurator-selector-option>
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+                    standalone: false,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: IconCacheService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-configurator-grouped-repeatable-options']
+            }], selection: [{
                 type: Input
-            }], groupedSubShow: [{
+            }], listOfChoices: [{
+                type: Input
+            }], repeatedOptions: [{
                 type: Input
+            }], selectionIndex: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectionClick: [{
+                type: Output
+            }], newSelection: [{
+                type: ViewChild,
+                args: ['newSelection']
             }] } });
 
 class ProductConfiguratorSelectorComponent {
     configuratorConnectorService;
     settingsService;
     iconService;
-    get hostClasses() {
-        const classes = [
-            'co-product-configurator-selector',
-            `treelevel-${this.treeLevelIndex}`
-        ];
-        if (!this._shouldBeVisible()) {
-            classes.push('hidden-frontend');
-        }
-        return classes.join(' ');
+    _appEventService;
+    showClass() {
+        return true;
     }
     icons = IconEnum;
     exceptionContainer;
     selection;
     options;
+    repeatedOptions;
     lastNodeWithChildren;
+    set markForUserInput(mark) {
+        this._markForUserInput = mark;
+        this._handleMarkInput(mark);
+    }
+    get markForUserInput() {
+        return this._markForUserInput;
+    }
     selectionIndex;
     treeLevelIndex = 1;
-    isActive = true;
     markAsException = false;
-    showAll = false;
-    suppressSubShowMore = false;
-    useGroupedParentVisibility = false;
+    hasArticlesAsChildren = false;
     activate = new EventEmitter();
-    selectionClass = '';
+    openSlideOutClick = new EventEmitter();
     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) {
+    showAnswerGrouped = true;
+    limitStartView = false;
+    limitAmountOfTiles = false;
+    sliceAmount = 2;
+    amountOfGroupsToShow = 2;
+    maxVisibleTiles = 5;
+    maxVisibleSmallTiles = 7;
+    totalOptionCount = 0;
+    selectableOption = true;
+    callRepeatOption;
+    activeSelection = 0;
+    _markForUserInput;
+    _subs = [];
+    constructor(configuratorConnectorService, settingsService, iconService, _appEventService) {
         this.configuratorConnectorService = configuratorConnectorService;
         this.settingsService = settingsService;
         this.iconService = iconService;
+        this._appEventService = _appEventService;
+        this._subs.push(this._appEventService.checkForMarkedInputs.subscribe(check => {
+            this.markForUserInput = check;
+            this._handleMarkInput(check);
+        }), this._appEventService.showAllConfigurationOptions.subscribe(show => {
+            this.handleLimitedViewMode();
+        }));
     }
     ngOnInit() {
+        this.showAnswerGrouped = this.selection.showGrouped;
         if (this.selection && this.selection.displayOptionControl == null) {
             this.selection.displayOptionControl = ConfigurationDisplayOption.TileLarge;
         }
-        this.selectionClass = 'selection-container-' + this.selection.displayOptionControl;
-        if (this.lastNodeWithChildren) {
+        // When the opvId === 0 it means that we got a skip/ cancel option and if there are no other options to choice from, we should hide this
+        if (this.options.length === 1) {
+            if (this.options[0].selector.opvId === 0 && this.options[0].selectorOptions.length === 0) {
+                this.selectableOption = false;
+            }
+        }
+        // This is filling the 'tile' data in case there are no nested articles
+        if (this.lastNodeWithChildren) {
+            for (const option of this.options) {
+                if (option.selector) {
+                    this.listOfChoices.push(option.selector);
+                }
+            }
+        }
+        // This is the case when we DO have nested articles
+        if (!this.lastNodeWithChildren && this.hasArticlesAsChildren) {
             for (const option of this.options) {
                 if (option.selector) {
-                    this.configuratorConnectorService.getImageForAnswer(option.selector);
                     this.listOfChoices.push(option.selector);
                 }
             }
@@ -11155,15 +11916,35 @@ class ProductConfiguratorSelectorComponent {
         if (this.markAsException) {
             this.showAndScroll();
         }
-        this._setActiveChildIndexFromSelection();
+        this.handleLimitedViewMode();
     }
-    ngOnChanges(changes) {
-        if (changes.options && !changes.options.firstChange) {
-            this._setActiveChildIndexFromSelection();
-        }
-        if (changes.showAll && !changes.showAll.firstChange) {
-            this._setActiveChildIndexFromSelection();
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    handleLimitedViewMode() {
+        this.limitStartView = this.settingsService.settings.options.limitStartView;
+        this.limitAmountOfTiles = this.settingsService.settings.options.limitAmountOfTiles;
+        this.sliceAmount = this.options.length;
+        if (this.limitStartView && this.options && this.options.length) {
+            // amountOfGroupsToShow -> top level group
+            if (this.settingsService.settings.options.amountOfGroupsToShow && this.treeLevelIndex >= 1) {
+                if (this.options.length >= this.amountOfGroupsToShow) {
+                    this.sliceAmount = this.settingsService.settings.options.amountOfGroupsToShow;
+                }
+            }
+            this.totalOptionCount = this._countGroupedTilesToReveal(this.options);
         }
+        this.maxVisibleTiles = this.settingsService.settings.options.maxVisibleTiles;
+        this.maxVisibleSmallTiles = this.settingsService.settings.options.maxVisibleSmallTiles;
+    }
+    /*
+    *
+    * When using the full config template, there are two ways to changing.
+    * NavigateTo -> used for showGrouped true options, jumps the tree to some other point
+    *
+    * */
+    handleNavigateTo(selection) {
+        this._appEventService.selectSelection.next(selection);
     }
     showAndScroll() {
         setTimeout(() => {
@@ -11174,59 +11955,96 @@ class ProductConfiguratorSelectorComponent {
         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;
+        // just limit it to all options so we loop through it all
+        this.amountOfGroupsToShow = this.options.length;
+        // TODO discuss
+        // This is an hacky solution but;
+        // the setting to check if we should limit the amount to show is in a global settings service.
+        // but this is more like a state of loading thing and not a setting that should always be checked.
+        // When clicking show all, we will just change the value of the session.
+        this.settingsService.settings.options.limitStartView = false;
+        this.settingsService.settings.options.limitAmountOfTiles = false;
+        this.handleLimitedViewMode();
+        this._appEventService.showAllConfigurationOptions.next(true);
+    }
+    handleRepeatClicked() {
+        // Some information
+        // When we have a repeatable option with skip cancel selected, we do not show this by default
+        // So when the user clicks on add element, show the skipcancel one so the user can make a selection.
+        // else, just call repeatOption and continue
+        this.callRepeatOption = true;
+        this.configuratorConnectorService.selectionWithAnswers.forEach(parent => {
+            if (parent.selector.id === this.selection.id) {
+                // see if the selected value === a skipperdoodle
+                if (parent.selectorOptions && parent.selectorOptions.length > 0 && parent.repeatedOptions && parent.repeatedOptions.length === 0) {
+                    parent.selectorOptions.forEach(child => {
+                        if (child.selector.selected === 'F' && child.selector.opvId === 0) {
+                            this.callRepeatOption = false;
+                            this._appEventService.checkHiddenRepeatItem.next(this.selection);
+                        }
+                    });
+                }
+            }
+        });
+        if (this.callRepeatOption) {
+            this.configuratorConnectorService.repeatOption(this.selection.optCycle, this.selection.id);
+        }
+    }
+    handleDeleteClicked() {
+        const tempSelection = this.selection;
+        const nodeHierarchy = tempSelection.nodeHierarchy + '[0]';
+        tempSelection.nodeHierarchy = nodeHierarchy;
+        this.handleNavigateTo(tempSelection);
+    }
+    handleOpenSlideOut(event) {
+        this.activeSelection = event.selNodeId;
+        this.configuratorConnectorService.activeSlideOutParentId = this.activeSelection;
+        this._appEventService.openSlideOut.next(event);
+    }
+    _handleMarkInput(mark) {
+        // needs to handle repeated options as well!
+        if (this.options && this.options.length > 0) {
+            this.options.forEach(option => {
+                if (option.selector.selNodeId === this.configuratorConnectorService.activeSlideOutParentId) {
+                    if (mark) {
+                        const event = {
+                            open: true,
+                            selNodeId: this.configuratorConnectorService.activeSlideOutParentId,
+                            selection: this.selection,
+                            options: this.options,
+                            repeatedOptions: this.repeatedOptions,
+                            activeSelection: this.activeSelection,
+                            markForUserInput: this.markForUserInput
+                        };
+                        this.handleOpenSlideOut(event);
+                    }
+                }
+            });
         }
-        if (!Array.isArray(option.selectorOptions) || option.selectorOptions.length === 0) {
-            return false;
+        if (this.repeatedOptions && this.repeatedOptions.length > 0) {
+            this.repeatedOptions.forEach(child => {
+                if (child.selectorOptions && child.selectorOptions.length > 0) {
+                    child.selectorOptions.forEach(value => {
+                        if (value.selector.selNodeId === this.configuratorConnectorService.activeSlideOutParentId) {
+                            if (mark) {
+                                const event = {
+                                    open: true,
+                                    selNodeId: this.configuratorConnectorService.activeSlideOutParentId,
+                                    selection: this.selection,
+                                    options: this.options,
+                                    repeatedOptions: this.repeatedOptions,
+                                    activeSelection: this.activeSelection,
+                                    markForUserInput: this.markForUserInput
+                                };
+                                this.handleOpenSlideOut(event);
+                            }
+                        }
+                    });
+                }
+            });
         }
-        return option.selectorOptions.some(childOption => this._hasSelectedOption(childOption));
     }
+    // TODO review functions below this
     _countRemainingTiles(options) {
         if (!Array.isArray(options) || options.length === 0) {
             return 0;
@@ -11293,9 +12111,13 @@ class ProductConfiguratorSelectorComponent {
         }
         return 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: ConfiguratorSettingsService }, { 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", 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">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: ConfiguratorSettingsService }, { token: IconCacheService }, { token: ConfiguratorEventService }], 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", repeatedOptions: "repeatedOptions", lastNodeWithChildren: "lastNodeWithChildren", markForUserInput: "markForUserInput", selectionIndex: "selectionIndex", treeLevelIndex: "treeLevelIndex", markAsException: "markAsException", hasArticlesAsChildren: "hasArticlesAsChildren" }, outputs: { activate: "activate", openSlideOutClick: "openSlideOutClick" }, host: { properties: { "class.co-product-configurator-selector": "this.showClass" } }, viewQueries: [{ propertyName: "exceptionContainer", first: true, predicate: ["exceptionContainer"], descendants: true }], ngImport: i0, template: `
+    <div
+      class="selector-container tree-level-{{treeLevelIndex}}"
+      [class.hide-from-selector]="!selectableOption"
+      [class.mark-for-input]="markForUserInput"
+    >
       <!--
       Based on the threeLevel and the length op options we got a couple of flavours
       treeLevel 1 -> article, should not be used here
@@ -11304,96 +12126,119 @@ class ProductConfiguratorSelectorComponent {
       treeLevel 4 -> more like bold text, should be for something like 'the fabric group'
       treeLevel 5 -> just text head
       -->
-    
+
       <div class="selector-container-header">
         @if (selection.treeLevel === 2 && options.length > 0) {
           <h2 class="selector-option-header">
-            <span [textContent]="selectionIndexText"></span>
+            <span [textContent]="selectionIndex.toString() | append: '. '"></span>
             <span [textContent]="selection.nodeText ? selection.nodeText : selection.optionText | localize:true | async"></span>
           </h2>
         }
-    
         @if (selection.treeLevel === 3 && options.length > 0) {
-          <h3
-            class="selector-option-sub-header"
-          [textContent]="selection.nodeText | localize:true | async" (click)="onSubHeaderClick()"></h3>
+          <h3 class="selector-option-sub-header" [textContent]="selection.nodeText | localize:true | async" (click)="onSubHeaderClick()"></h3>
         }
-    
         @if (selection.treeLevel === 4 && options.length > 0) {
-          <p
-            class="selector-option-bold-text-header"
-          [textContent]="selection.nodeText | localize:true | async"></p>
+          <p class="selector-option-bold-text-header" [textContent]="selection.nodeText ? selection.nodeText: selection.optionText | localize:true | async"></p>
         }
-    
         @if (selection.treeLevel === 5 && options.length > 0) {
-          <p
-            class="selector-option-text-header"
-          [textContent]="selection.nodeText | localize:true | async"></p>
+          <p class="selector-option-text-header" [textContent]="selection.nodeText | localize:true | async"></p>
         }
-    
-    
         @if (markAsException) {
           <span class="exception-icon" #exceptionContainer [title]="'CONFIGURATION_EXCEPTION_INFO' | localize:false | async">
             <co-icon [iconData]="iconService.getIcon(icons.TriangleExclamation)"></co-icon>
           </span>
         }
+        @if (selection.repeatOptActive || selection.canBeDeleted) {
+          <co-product-configurator-repeat-buttons
+            [showRepeatButton]="selection.repeatOptActive"
+            [showDeleteButton]="selection.canBeDeleted"
+            (repeatClicked)="handleRepeatClicked()"
+            (deleteClicked)="handleDeleteClicked()"
+          ></co-product-configurator-repeat-buttons>
+        }
       </div>
-    
-      @if (lastNodeWithChildren) {
+
+      @if (selection.repeatOptActive && lastNodeWithChildren && !hasArticlesAsChildren) {
+        <co-product-configurator-grouped-repeatable-options
+          [selection]="selection"
+          [listOfChoices]="listOfChoices"
+          [options]="options"
+          [repeatedOptions]="repeatedOptions"
+          [selectionIndex]="selectionIndex"
+          (selectionClick)="handleNavigateTo($event)"
+        ></co-product-configurator-grouped-repeatable-options>
+      } @else if (lastNodeWithChildren) {
+        <!-- Show the tiles now -->
         <co-product-configurator-selector-option
           [selection]="selection"
           [listOfChoices]="listOfChoices"
-          [groupedSubShow]="!suppressSubShowMoreForChildren"
           [markAsException]="markAsException"
-          [showGlobalAll]="getChildShowAll()">
+          [limitAmountOfTiles]="limitAmountOfTiles"
+          [maxVisibleTiles]="maxVisibleTiles"
+          [maxVisibleSmallTiles]="maxVisibleSmallTiles"
+          (selectionClicked)="handleNavigateTo($event)">
         </co-product-configurator-selector-option>
       }
+
+      @if (!lastNodeWithChildren && hasArticlesAsChildren) {
+        <!-- When we have articles, we show show the user a nested view -->
+        @if (selection.repeatOptActive) {
+          <co-product-configurator-grouped-repeatable-options
+            [selection]="selection"
+            [listOfChoices]="listOfChoices"
+            [repeatedOptions]="repeatedOptions"
+            [options]="options"
+            [selectionIndex]="selectionIndex"
+            (selectionClick)="handleNavigateTo($event)"
+          ></co-product-configurator-grouped-repeatable-options>
+        } @else {
+          <co-product-configurator-selector-child-article
+            [selection]="selection"
+            [listOfChoices]="listOfChoices"
+            [options]="options"
+            [repeatedOptions]="repeatedOptions"
+            [markAsException]="markAsException"
+            (selectionClick)="handleNavigateTo($event)">
+          </co-product-configurator-selector-child-article>
+        }
+      }
     </div>
-    
-    @if (!lastNodeWithChildren) {
-      @for (displaySelection of options; track displaySelection; let index = $index) {
+    @if (!lastNodeWithChildren && !hasArticlesAsChildren) {
+      @for (displaySelection of options | slice:0:sliceAmount; track displaySelection.selector; let index = $index) {
         <co-product-configurator-selector
           [selection]="displaySelection.selector"
           [options]="displaySelection.selectorOptions"
+          [repeatedOptions]="displaySelection.repeatedOptions"
           [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
           [selectionIndex]="index + 1"
           [treeLevelIndex]="treeLevelIndex + 1"
-          [showAll]="getChildShowAll()"
-          [isActive]="getIsChildVisible(index)"
-          [suppressSubShowMore]="suppressSubShowMoreForChildren"
-          [useGroupedParentVisibility]="useGroupedVisibilityForChildren"
           [markAsException]="displaySelection.markForExceptionNotification"
+          [hasArticlesAsChildren]="displaySelection.selectorOptionsAreArticles"
+          [markForUserInput]="displaySelection.markForUserInput"
           (activate)="activeChildIndex = index">
         </co-product-configurator-selector>
       }
     }
-    @if (shouldShowExpandButton()) {
+    @if (limitStartView && treeLevelIndex === 1 && !lastNodeWithChildren && !hasArticlesAsChildren) {
       <div class="show-more-container" (click)="onShowAllClick()">
-    <span class="show-all-button show-more-text-link"
-          [textContent]="expandButtonText | localize:false | async">
-    </span>
-
-        @if (this.groupedRemainingTilesCount > 0) {
-          <span class="show-all-button show-more-text-link counter"
-                [textContent]="'(' + this.groupedRemainingTilesCount + ')'">
-      </span>
+        <span class="show-all-button show-more-text-link" [textContent]="'SHOW_ALL' | localize:false | async"></span>
+        @if (totalOptionCount > 0) {
+          <span class="show-all-button show-more-text-link counter" [textContent]="'(' + totalOptionCount + ')'"></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: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: [
-            trigger('showSelections', [
-                state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
-                state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
-                transition('void <=> *', animate(200))
-            ])
-        ], encapsulation: i0.ViewEncapsulation.None });
+  `, 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", "limitAmountOfTiles", "maxVisibleTiles", "maxVisibleSmallTiles"], outputs: ["selectionClicked"] }, { kind: "component", type: ProductConfiguratorRepeatButtonsComponent, selector: "co-product-configurator-repeat-buttons", inputs: ["showRepeatButton", "showDeleteButton"], outputs: ["repeatClicked", "deleteClicked"] }, { kind: "component", type: ProductConfiguratorSelectorComponent, selector: "co-product-configurator-selector", inputs: ["selection", "options", "repeatedOptions", "lastNodeWithChildren", "markForUserInput", "selectionIndex", "treeLevelIndex", "markAsException", "hasArticlesAsChildren"], outputs: ["activate", "openSlideOutClick"] }, { kind: "component", type: ProductConfiguratorSelectorChildArticleComponent, selector: "co-product-configurator-selector-child-article", inputs: ["selection", "listOfChoices", "options", "repeatedOptions", "markAsException"], outputs: ["selectionClick"] }, { kind: "component", type: ProductConfiguratorGroupedRepeatableOptionsComponent, selector: "co-product-configurator-grouped-repeatable-options", inputs: ["selection", "listOfChoices", "repeatedOptions", "selectionIndex", "options"], outputs: ["selectionClick"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.AppendPipe, name: "append" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-product-configurator-selector',
                     template: `
-    <div class="selector-container">
+    <div
+      class="selector-container tree-level-{{treeLevelIndex}}"
+      [class.hide-from-selector]="!selectableOption"
+      [class.mark-for-input]="markForUserInput"
+    >
       <!--
       Based on the threeLevel and the length op options we got a couple of flavours
       treeLevel 1 -> article, should not be used here
@@ -11402,96 +12247,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       treeLevel 4 -> more like bold text, should be for something like 'the fabric group'
       treeLevel 5 -> just text head
       -->
-    
+
       <div class="selector-container-header">
         @if (selection.treeLevel === 2 && options.length > 0) {
           <h2 class="selector-option-header">
-            <span [textContent]="selectionIndexText"></span>
+            <span [textContent]="selectionIndex.toString() | append: '. '"></span>
             <span [textContent]="selection.nodeText ? selection.nodeText : selection.optionText | localize:true | async"></span>
           </h2>
         }
-    
         @if (selection.treeLevel === 3 && options.length > 0) {
-          <h3
-            class="selector-option-sub-header"
-          [textContent]="selection.nodeText | localize:true | async" (click)="onSubHeaderClick()"></h3>
+          <h3 class="selector-option-sub-header" [textContent]="selection.nodeText | localize:true | async" (click)="onSubHeaderClick()"></h3>
         }
-    
         @if (selection.treeLevel === 4 && options.length > 0) {
-          <p
-            class="selector-option-bold-text-header"
-          [textContent]="selection.nodeText | localize:true | async"></p>
+          <p class="selector-option-bold-text-header" [textContent]="selection.nodeText ? selection.nodeText: selection.optionText | localize:true | async"></p>
         }
-    
         @if (selection.treeLevel === 5 && options.length > 0) {
-          <p
-            class="selector-option-text-header"
-          [textContent]="selection.nodeText | localize:true | async"></p>
+          <p class="selector-option-text-header" [textContent]="selection.nodeText | localize:true | async"></p>
         }
-    
-    
         @if (markAsException) {
           <span class="exception-icon" #exceptionContainer [title]="'CONFIGURATION_EXCEPTION_INFO' | localize:false | async">
             <co-icon [iconData]="iconService.getIcon(icons.TriangleExclamation)"></co-icon>
           </span>
         }
+        @if (selection.repeatOptActive || selection.canBeDeleted) {
+          <co-product-configurator-repeat-buttons
+            [showRepeatButton]="selection.repeatOptActive"
+            [showDeleteButton]="selection.canBeDeleted"
+            (repeatClicked)="handleRepeatClicked()"
+            (deleteClicked)="handleDeleteClicked()"
+          ></co-product-configurator-repeat-buttons>
+        }
       </div>
-    
-      @if (lastNodeWithChildren) {
+
+      @if (selection.repeatOptActive && lastNodeWithChildren && !hasArticlesAsChildren) {
+        <co-product-configurator-grouped-repeatable-options
+          [selection]="selection"
+          [listOfChoices]="listOfChoices"
+          [options]="options"
+          [repeatedOptions]="repeatedOptions"
+          [selectionIndex]="selectionIndex"
+          (selectionClick)="handleNavigateTo($event)"
+        ></co-product-configurator-grouped-repeatable-options>
+      } @else if (lastNodeWithChildren) {
+        <!-- Show the tiles now -->
         <co-product-configurator-selector-option
           [selection]="selection"
           [listOfChoices]="listOfChoices"
-          [groupedSubShow]="!suppressSubShowMoreForChildren"
           [markAsException]="markAsException"
-          [showGlobalAll]="getChildShowAll()">
+          [limitAmountOfTiles]="limitAmountOfTiles"
+          [maxVisibleTiles]="maxVisibleTiles"
+          [maxVisibleSmallTiles]="maxVisibleSmallTiles"
+          (selectionClicked)="handleNavigateTo($event)">
         </co-product-configurator-selector-option>
       }
+
+      @if (!lastNodeWithChildren && hasArticlesAsChildren) {
+        <!-- When we have articles, we show show the user a nested view -->
+        @if (selection.repeatOptActive) {
+          <co-product-configurator-grouped-repeatable-options
+            [selection]="selection"
+            [listOfChoices]="listOfChoices"
+            [repeatedOptions]="repeatedOptions"
+            [options]="options"
+            [selectionIndex]="selectionIndex"
+            (selectionClick)="handleNavigateTo($event)"
+          ></co-product-configurator-grouped-repeatable-options>
+        } @else {
+          <co-product-configurator-selector-child-article
+            [selection]="selection"
+            [listOfChoices]="listOfChoices"
+            [options]="options"
+            [repeatedOptions]="repeatedOptions"
+            [markAsException]="markAsException"
+            (selectionClick)="handleNavigateTo($event)">
+          </co-product-configurator-selector-child-article>
+        }
+      }
     </div>
-    
-    @if (!lastNodeWithChildren) {
-      @for (displaySelection of options; track displaySelection; let index = $index) {
+    @if (!lastNodeWithChildren && !hasArticlesAsChildren) {
+      @for (displaySelection of options | slice:0:sliceAmount; track displaySelection.selector; let index = $index) {
         <co-product-configurator-selector
           [selection]="displaySelection.selector"
           [options]="displaySelection.selectorOptions"
+          [repeatedOptions]="displaySelection.repeatedOptions"
           [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
           [selectionIndex]="index + 1"
           [treeLevelIndex]="treeLevelIndex + 1"
-          [showAll]="getChildShowAll()"
-          [isActive]="getIsChildVisible(index)"
-          [suppressSubShowMore]="suppressSubShowMoreForChildren"
-          [useGroupedParentVisibility]="useGroupedVisibilityForChildren"
           [markAsException]="displaySelection.markForExceptionNotification"
+          [hasArticlesAsChildren]="displaySelection.selectorOptionsAreArticles"
+          [markForUserInput]="displaySelection.markForUserInput"
           (activate)="activeChildIndex = index">
         </co-product-configurator-selector>
       }
     }
-    @if (shouldShowExpandButton()) {
+    @if (limitStartView && treeLevelIndex === 1 && !lastNodeWithChildren && !hasArticlesAsChildren) {
       <div class="show-more-container" (click)="onShowAllClick()">
-    <span class="show-all-button show-more-text-link"
-          [textContent]="expandButtonText | localize:false | async">
-    </span>
-
-        @if (this.groupedRemainingTilesCount > 0) {
-          <span class="show-all-button show-more-text-link counter"
-                [textContent]="'(' + this.groupedRemainingTilesCount + ')'">
-      </span>
+        <span class="show-all-button show-more-text-link" [textContent]="'SHOW_ALL' | localize:false | async"></span>
+        @if (totalOptionCount > 0) {
+          <span class="show-all-button show-more-text-link counter" [textContent]="'(' + totalOptionCount + ')'"></span>
         }
       </div>
     }
-    `,
+  `,
                     encapsulation: ViewEncapsulation.None,
-                    animations: [
-                        trigger('showSelections', [
-                            state('void', style({ 'transform': 'translateX(100%)', opacity: 0 })),
-                            state('*', style({ 'transform': 'translateX(0%)', opacity: 1 })),
-                            transition('void <=> *', animate(200))
-                        ])
-                    ],
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: ConfiguratorSettingsService }, { type: IconCacheService }], propDecorators: { hostClasses: [{
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: ConfiguratorSettingsService }, { type: IconCacheService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['class.co-product-configurator-selector']
             }], exceptionContainer: [{
                 type: ViewChild,
                 args: ['exceptionContainer']
@@ -11499,47 +12362,288 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], repeatedOptions: [{
+                type: Input
             }], lastNodeWithChildren: [{
                 type: Input
+            }], markForUserInput: [{
+                type: Input
             }], selectionIndex: [{
                 type: Input
             }], treeLevelIndex: [{
                 type: Input
-            }], isActive: [{
-                type: Input
             }], markAsException: [{
                 type: Input
-            }], showAll: [{
-                type: Input
-            }], suppressSubShowMore: [{
-                type: Input
-            }], useGroupedParentVisibility: [{
+            }], hasArticlesAsChildren: [{
                 type: Input
             }], activate: [{
                 type: Output
+            }], openSlideOutClick: [{
+                type: Output
+            }] } });
+
+class ProductConfiguratorChildArticleConfiguratorComponent {
+    configuratorConnectorService;
+    settingsService;
+    iconService;
+    showClass() {
+        return true;
+    }
+    icons = IconEnum;
+    selection;
+    options;
+    lastNodeWithChildren;
+    selectionIndex;
+    treeLevelIndex = 1;
+    markAsException = false;
+    hasArticlesAsChildren = false;
+    listOfChoices = [];
+    showAnswerGrouped = true;
+    constructor(configuratorConnectorService, settingsService, iconService) {
+        this.configuratorConnectorService = configuratorConnectorService;
+        this.settingsService = settingsService;
+        this.iconService = iconService;
+    }
+    ngOnInit() {
+        this.showAnswerGrouped = this.selection.showGrouped;
+        if (this.selection && this.selection.displayOptionControl == null) {
+            this.selection.displayOptionControl = ConfigurationDisplayOption.TileLarge;
+        }
+        // This is filling the 'tile' data in case there are no nested articles
+        if (this.lastNodeWithChildren) {
+            for (const option of this.options) {
+                if (option.selector) {
+                    this.listOfChoices.push(option.selector);
+                }
+            }
+        }
+        // This is the case when we DO have nested articles
+        if (!this.lastNodeWithChildren && this.hasArticlesAsChildren) {
+            for (const option of this.options) {
+                if (option.selector) {
+                    this.listOfChoices.push(option.selector);
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorChildArticleConfiguratorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: ConfiguratorSettingsService }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorChildArticleConfiguratorComponent, isStandalone: false, selector: "co-product-configurator-child-article-configurator", inputs: { selection: "selection", options: "options", lastNodeWithChildren: "lastNodeWithChildren", selectionIndex: "selectionIndex", treeLevelIndex: "treeLevelIndex", markAsException: "markAsException", hasArticlesAsChildren: "hasArticlesAsChildren" }, host: { properties: { "class.co-product-configurator-child-article-configurator": "this.showClass" } }, ngImport: i0, template: `
+    <div class="selector-container">
+      <div class="selector-container-header">
+        <p class="selector-option-bold-text-header" [textContent]="selection.nodeText ? selection.nodeText: selection.optionText | localize:true | async"></p>
+      </div>
+    </div>
+    @if (!lastNodeWithChildren) {
+      @for (displaySelection of options; track displaySelection.selector; let index = $index) {
+        <co-product-configurator-selector
+          [selection]="displaySelection.selector"
+          [options]="displaySelection.selectorOptions"
+          [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
+          [selectionIndex]="index + 1"
+          [treeLevelIndex]="treeLevelIndex + 1"
+          [markAsException]="displaySelection.markForExceptionNotification"
+          [markForUserInput]="displaySelection.markForUserInput"
+          [hasArticlesAsChildren]="displaySelection.selectorOptionsAreArticles">
+        </co-product-configurator-selector>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ProductConfiguratorSelectorComponent, selector: "co-product-configurator-selector", inputs: ["selection", "options", "repeatedOptions", "lastNodeWithChildren", "markForUserInput", "selectionIndex", "treeLevelIndex", "markAsException", "hasArticlesAsChildren"], outputs: ["activate", "openSlideOutClick"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorChildArticleConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-product-configurator-child-article-configurator',
+                    template: `
+    <div class="selector-container">
+      <div class="selector-container-header">
+        <p class="selector-option-bold-text-header" [textContent]="selection.nodeText ? selection.nodeText: selection.optionText | localize:true | async"></p>
+      </div>
+    </div>
+    @if (!lastNodeWithChildren) {
+      @for (displaySelection of options; track displaySelection.selector; let index = $index) {
+        <co-product-configurator-selector
+          [selection]="displaySelection.selector"
+          [options]="displaySelection.selectorOptions"
+          [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
+          [selectionIndex]="index + 1"
+          [treeLevelIndex]="treeLevelIndex + 1"
+          [markAsException]="displaySelection.markForExceptionNotification"
+          [markForUserInput]="displaySelection.markForUserInput"
+          [hasArticlesAsChildren]="displaySelection.selectorOptionsAreArticles">
+        </co-product-configurator-selector>
+      }
+    }
+  `,
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: ConfiguratorSettingsService }, { type: IconCacheService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-configurator-child-article-configurator']
+            }], selection: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], lastNodeWithChildren: [{
+                type: Input
+            }], selectionIndex: [{
+                type: Input
+            }], treeLevelIndex: [{
+                type: Input
+            }], markAsException: [{
+                type: Input
+            }], hasArticlesAsChildren: [{
+                type: Input
+            }] } });
+
+class ProductConfiguratorSlideoutComponent {
+    configuratorConnectorService;
+    iconService;
+    _appEventService;
+    icons = IconEnum;
+    showClass() {
+        return true;
+    }
+    displaySelection;
+    displayOptions;
+    selection;
+    options;
+    repeatedOptions;
+    showSlideOut = false;
+    activeSelection;
+    _subs = [];
+    constructor(configuratorConnectorService, iconService, _appEventService) {
+        this.configuratorConnectorService = configuratorConnectorService;
+        this.iconService = iconService;
+        this._appEventService = _appEventService;
+        this._subs.push(this._appEventService.openSlideOut.subscribe(event => {
+            this._handleSlideOut(event);
+        }));
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+    }
+    handleCloseClick() {
+        this.showSlideOut = false;
+        this.configuratorConnectorService.activeSlideOutParentId = undefined;
+        this._appEventService.closeSlideOut.next();
+    }
+    _handleSlideOut(event) {
+        this.showSlideOut = event.open;
+        this.selection = event.selection;
+        this.options = event.options;
+        this.repeatedOptions = event.repeatedOptions;
+        this.activeSelection = event.selNodeId;
+        this.configuratorConnectorService.activeSlideOutParentId = event.selNodeId;
+        this._handleRepeatOptions(this.showSlideOut, this.activeSelection);
+    }
+    _handleRepeatOptions(show, activeSelection) {
+        let foundRepeats = false;
+        if (activeSelection && show && this.repeatedOptions && this.repeatedOptions.length > 0) {
+            this.repeatedOptions.forEach(parent => {
+                if (parent && parent.selectorOptions.length > 0) {
+                    if (parent.selectorOptions && parent.selectorOptions.length > 0) {
+                        parent.selectorOptions.forEach(child => {
+                            if (child.selector.selNodeId === activeSelection) {
+                                this.displaySelection = parent.selector;
+                                this.displayOptions = parent.selectorOptions;
+                                foundRepeats = true;
+                            }
+                        });
+                    }
+                }
+            });
+        }
+        if (!foundRepeats) {
+            this.displaySelection = this.selection;
+            this.displayOptions = this.options;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSlideoutComponent, deps: [{ token: ConfiguratorConnectorService }, { token: IconCacheService }, { token: ConfiguratorEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ProductConfiguratorSlideoutComponent, isStandalone: false, selector: "co-product-configurator-slideout", host: { properties: { "class.co-product-configurator-slideout": "this.showClass" } }, ngImport: i0, template: `
+    @if (showSlideOut) {
+      <div class="product-configurator-slideout-body" [class.show-slide-out]="showSlideOut">
+        <div class="product-configurator-selector-slideout-header">
+          <div class="product-configurator-selector-slideout-close" (click)="handleCloseClick()">
+            <co-button
+              [label]="'BACK_TO_MAIN_CONFIGURATION' | localize: false | async"
+              [iconData]="iconService.getIcon(icons.ChevronLeftRegular)"
+            ></co-button>
+          </div>
+          <div class="slideout-head" [textContent]="displaySelection.optionText"></div>
+        </div>
+        @if (displayOptions && displayOptions.length > 0) {
+          @for (child of displayOptions; track child.selector.id) {
+            @if (child.selector.selNodeId === activeSelection) {
+              <div class="child-article-option-container">
+                <co-product-configurator-child-article-configurator
+                  [selection]="child.selector"
+                  [options]="child.selectorOptions"
+                  [lastNodeWithChildren]="child.lastNodeWithChildren"
+                  [markAsException]="child.markForExceptionNotification"
+                  [hasArticlesAsChildren]="child.selectorOptionsAreArticles">
+                </co-product-configurator-child-article-configurator>
+              </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: ProductConfiguratorChildArticleConfiguratorComponent, selector: "co-product-configurator-child-article-configurator", inputs: ["selection", "options", "lastNodeWithChildren", "selectionIndex", "treeLevelIndex", "markAsException", "hasArticlesAsChildren"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSlideoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'co-product-configurator-slideout',
+                    template: `
+    @if (showSlideOut) {
+      <div class="product-configurator-slideout-body" [class.show-slide-out]="showSlideOut">
+        <div class="product-configurator-selector-slideout-header">
+          <div class="product-configurator-selector-slideout-close" (click)="handleCloseClick()">
+            <co-button
+              [label]="'BACK_TO_MAIN_CONFIGURATION' | localize: false | async"
+              [iconData]="iconService.getIcon(icons.ChevronLeftRegular)"
+            ></co-button>
+          </div>
+          <div class="slideout-head" [textContent]="displaySelection.optionText"></div>
+        </div>
+        @if (displayOptions && displayOptions.length > 0) {
+          @for (child of displayOptions; track child.selector.id) {
+            @if (child.selector.selNodeId === activeSelection) {
+              <div class="child-article-option-container">
+                <co-product-configurator-child-article-configurator
+                  [selection]="child.selector"
+                  [options]="child.selectorOptions"
+                  [lastNodeWithChildren]="child.lastNodeWithChildren"
+                  [markAsException]="child.markForExceptionNotification"
+                  [hasArticlesAsChildren]="child.selectorOptionsAreArticles">
+                </co-product-configurator-child-article-configurator>
+              </div>
+            }
+          }
+        }
+      </div>
+    }
+  `,
+                    standalone: false,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: IconCacheService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-product-configurator-slideout']
             }] } });
 
 class ProductConfiguratorComponent {
     configuratorConnectorService;
     buildFurnitureService;
     settingsService;
-    productConfiguratorService;
     iconService;
     _sanitizer;
     _configuringService;
-    _eventService;
+    _appEventService;
     showClass() {
         return true;
     }
     icons = IconEnum;
-    // @Input()
-    // public set show(value: boolean) {
-    //   this._show = value;
-    // }
-    //
-    // public get show(): boolean {
-    //   return this._show;
-    // }
     showHeaderInformation = true;
     set showSelections(value) {
         this._showSelections = value;
@@ -11556,47 +12660,57 @@ class ProductConfiguratorComponent {
     article = new Article();
     selectionList = [];
     safeDescription;
+    hideMainConfiguration = false;
     _showSelections = false;
-    _show = false;
-    _selectionSelected;
     _subs = [];
-    constructor(configuratorConnectorService, buildFurnitureService, settingsService, productConfiguratorService, iconService, _sanitizer, _configuringService, _eventService) {
+    constructor(configuratorConnectorService, buildFurnitureService, settingsService, iconService, _sanitizer, _configuringService, _appEventService) {
         this.configuratorConnectorService = configuratorConnectorService;
         this.buildFurnitureService = buildFurnitureService;
         this.settingsService = settingsService;
-        this.productConfiguratorService = productConfiguratorService;
         this.iconService = iconService;
         this._sanitizer = _sanitizer;
         this._configuringService = _configuringService;
-        this._eventService = _eventService;
+        this._appEventService = _appEventService;
         this._subs.push(this.settingsService.settingsLoaded.subscribe((loaded) => {
             if (loaded && this.settingsService.settings.currencySymbol) {
                 this.valutaSymbol = this.settingsService.settings.currencySymbol;
             }
-        }), this.productConfiguratorService.selectSelection.subscribe((selection) => {
+        }), this._appEventService.selectSelection.subscribe((selection) => {
             if (selection) {
-                this.onSelectionsSummarySelectSelection(selection);
+                this.navigateToSelection(selection);
             }
-        }), this._eventService.articleReceived.subscribe((article) => {
+        }), this._appEventService.articleReceived.subscribe((article) => {
             if (article) {
                 this._handleArticleReceived(article);
             }
-        }), this._eventService.selectionWithAnswersChanged.subscribe((selections) => this._handleSelectionWithAnswersChanged(selections)));
+        }), this._appEventService.selectionWithAnswersChanged.subscribe((selections) => this._handleSelectionWithAnswersChanged(selections)), this._appEventService.openSlideOut.subscribe(event => {
+            if (event.open) {
+                this.handleHideMainConfiguration(true);
+            }
+        }), this._appEventService.closeSlideOut.subscribe(() => {
+            this.handleHideMainConfiguration(false);
+        }));
     }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
     }
-    async onSelectionsSummarySelectSelection(chosenOption) {
-        await this.configuratorConnectorService.navigateTo(chosenOption, true);
+    async navigateToSelection(chosenOption) {
+        await this.configuratorConnectorService.navigateToBySelNode(this._configuringService.buildResult.instanceId, chosenOption, true);
         await this.buildFurnitureService.currentActiveService.selectSelectionAsAnswer(chosenOption, this._configuringService.buildResult);
     }
     handleCloseClick() {
-        this.showChange.emit(false);
+        // this.showChange.emit(false);
+    }
+    handleHideMainConfiguration(hide) {
+        this.hideMainConfiguration = hide;
     }
     _handleSelectionWithAnswersChanged(selections) {
         if (selections && selections.length > 0) {
             this.selectionList = selections;
         }
+        if (this.configuratorConnectorService.activeSlideOutParentId) {
+            this.configuratorConnectorService.markSelectionForUserInput(this.configuratorConnectorService.activeSlideOutParentId);
+        }
     }
     _handleArticleReceived(article) {
         if (!article) {
@@ -11614,102 +12728,114 @@ class ProductConfiguratorComponent {
             this.safeDescription = this._sanitizer.bypassSecurityTrustHtml(this.article.description);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: SwitchBuildFurnitureService }, { token: ConfiguratorSettingsService }, { token: ProductConfiguratorService }, { token: IconCacheService }, { token: i1.DomSanitizer }, { token: ConfiguringService }, { token: ConfiguratorEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorComponent, deps: [{ token: ConfiguratorConnectorService }, { token: SwitchBuildFurnitureService }, { token: ConfiguratorSettingsService }, { token: IconCacheService }, { token: i1.DomSanitizer }, { token: ConfiguringService }, { token: ConfiguratorEventService }], 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: { 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: `
-      <div class="product-configurator-container">
-        @if (showHeaderInformation) {
-          <div class="product-configurator-header">
-            <div class="product-configurator-head">
-              <h2 class="product-configurator-header-text" [textContent]="article.name"></h2>
-              <p class="product-configurator-text" [innerHTML]="safeDescription"></p>
-            </div>
-            <div class="product-configurator-header-actions">
-              <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 class="product-configurator-container" [class.hide-main-configuration]="hideMainConfiguration">
+      @if (showHeaderInformation) {
+        <div class="product-configurator-header">
+          <div class="product-configurator-head">
+            <h2 class="product-configurator-header-text" [textContent]="article.name"></h2>
+            <p class="product-configurator-text" [innerHTML]="safeDescription"></p>
           </div>
-        }
-        <div class="product-configurator-details" #scrollcontainer>
-          @for (displaySelection of configuratorConnectorService.selectionWithAnswers; track displaySelection; let index = $index) {
-            <co-product-configurator-selector
-              [selection]="displaySelection.selector"
-              [options]="displaySelection.selectorOptions"
-              [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
-              [markAsException]="displaySelection.markForExceptionNotification"
-              [selectionIndex]="index + 1">
-            </co-product-configurator-selector>
-          }
-        </div>
-        @if (configuratorConnectorService.totalPrice !== undefined) {
-          <div class="product-configurator-summary">
-            <div class="product-configurator-summary-price-container">
-              @if (settingsService.settings.options.showAsConfigured) {
-                <div class="sum">
-                  <label [textContent]="'AS_CONFIGURED' | localize:false | async"></label><span class="total-price"></span>
-                  <div class="price" [textContent]="configuratorConnectorService.totalPrice | priceDisplay"></div>
-                </div>
-              }
-            </div>
+          <div class="product-configurator-header-actions">
+            <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>
+        @for (displaySelection of configuratorConnectorService.selectionWithAnswers; track displaySelection.selector; let index = $index) {
+          <co-product-configurator-selector
+            [selection]="displaySelection.selector"
+            [options]="displaySelection.selectorOptions"
+            [repeatedOptions]="displaySelection.repeatedOptions"
+            [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
+            [markAsException]="displaySelection.markForExceptionNotification"
+            [hasArticlesAsChildren]="displaySelection.selectorOptionsAreArticles"
+            [markForUserInput]="displaySelection.markForUserInput"
+            [selectionIndex]="index + 1">
+          </co-product-configurator-selector>
         }
       </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", "showAll", "suppressSubShowMore", "useGroupedParentVisibility"], outputs: ["activate"] }, { kind: "component", type: ConfigurationPresetComponent, selector: "co-configuration-preset" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
+      @if (configuratorConnectorService.totalPrice !== undefined) {
+        <div class="product-configurator-summary">
+          <div class="product-configurator-summary-price-container">
+            @if (settingsService.settings.options.showAsConfigured) {
+              <div class="sum">
+                <label [textContent]="'AS_CONFIGURED' | localize:false | async"></label><span class="total-price"></span>
+                <div class="price" [textContent]="configuratorConnectorService.totalPrice | priceDisplay"></div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
+      <co-product-configurator-slideout></co-product-configurator-slideout>
+    </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", "repeatedOptions", "lastNodeWithChildren", "markForUserInput", "selectionIndex", "treeLevelIndex", "markAsException", "hasArticlesAsChildren"], outputs: ["activate", "openSlideOutClick"] }, { kind: "component", type: ProductConfiguratorSlideoutComponent, selector: "co-product-configurator-slideout" }, { kind: "component", type: ConfigurationPresetComponent, selector: "co-configuration-preset" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.PriceDisplayPipe, name: "priceDisplay" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'co-product-configurator',
                     template: `
-      <div class="product-configurator-container">
-        @if (showHeaderInformation) {
-          <div class="product-configurator-header">
-            <div class="product-configurator-head">
-              <h2 class="product-configurator-header-text" [textContent]="article.name"></h2>
-              <p class="product-configurator-text" [innerHTML]="safeDescription"></p>
-            </div>
-            <div class="product-configurator-header-actions">
-              <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 class="product-configurator-container" [class.hide-main-configuration]="hideMainConfiguration">
+      @if (showHeaderInformation) {
+        <div class="product-configurator-header">
+          <div class="product-configurator-head">
+            <h2 class="product-configurator-header-text" [textContent]="article.name"></h2>
+            <p class="product-configurator-text" [innerHTML]="safeDescription"></p>
           </div>
-        }
-        <div class="product-configurator-details" #scrollcontainer>
-          @for (displaySelection of configuratorConnectorService.selectionWithAnswers; track displaySelection; let index = $index) {
-            <co-product-configurator-selector
-              [selection]="displaySelection.selector"
-              [options]="displaySelection.selectorOptions"
-              [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
-              [markAsException]="displaySelection.markForExceptionNotification"
-              [selectionIndex]="index + 1">
-            </co-product-configurator-selector>
-          }
-        </div>
-        @if (configuratorConnectorService.totalPrice !== undefined) {
-          <div class="product-configurator-summary">
-            <div class="product-configurator-summary-price-container">
-              @if (settingsService.settings.options.showAsConfigured) {
-                <div class="sum">
-                  <label [textContent]="'AS_CONFIGURED' | localize:false | async"></label><span class="total-price"></span>
-                  <div class="price" [textContent]="configuratorConnectorService.totalPrice | priceDisplay"></div>
-                </div>
-              }
-            </div>
+          <div class="product-configurator-header-actions">
+            <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>
+        @for (displaySelection of configuratorConnectorService.selectionWithAnswers; track displaySelection.selector; let index = $index) {
+          <co-product-configurator-selector
+            [selection]="displaySelection.selector"
+            [options]="displaySelection.selectorOptions"
+            [repeatedOptions]="displaySelection.repeatedOptions"
+            [lastNodeWithChildren]="displaySelection.lastNodeWithChildren"
+            [markAsException]="displaySelection.markForExceptionNotification"
+            [hasArticlesAsChildren]="displaySelection.selectorOptionsAreArticles"
+            [markForUserInput]="displaySelection.markForUserInput"
+            [selectionIndex]="index + 1">
+          </co-product-configurator-selector>
         }
       </div>
-    `,
+      @if (configuratorConnectorService.totalPrice !== undefined) {
+        <div class="product-configurator-summary">
+          <div class="product-configurator-summary-price-container">
+            @if (settingsService.settings.options.showAsConfigured) {
+              <div class="sum">
+                <label [textContent]="'AS_CONFIGURED' | localize:false | async"></label><span class="total-price"></span>
+                <div class="price" [textContent]="configuratorConnectorService.totalPrice | priceDisplay"></div>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
+      <co-product-configurator-slideout></co-product-configurator-slideout>
+    </div>
+
+  `,
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: SwitchBuildFurnitureService }, { type: ConfiguratorSettingsService }, { type: ProductConfiguratorService }, { type: IconCacheService }, { type: i1.DomSanitizer }, { type: ConfiguringService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
+        }], ctorParameters: () => [{ type: ConfiguratorConnectorService }, { type: SwitchBuildFurnitureService }, { type: ConfiguratorSettingsService }, { type: IconCacheService }, { type: i1.DomSanitizer }, { type: ConfiguringService }, { type: ConfiguratorEventService }], propDecorators: { showClass: [{
                 type: HostBinding,
                 args: ['class.co-product-configurator']
             }], showHeaderInformation: [{
@@ -12298,7 +13424,7 @@ class ConfiguratorCameraSettingsComponent {
         <button (click)="exportSettings()" [textContent]="'EXPORT_SETTINGS' | localize:false | async"></button>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: i6$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "directive", type: i6$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorCameraSettingsComponent, decorators: [{
             type: Component,
@@ -12499,7 +13625,7 @@ class ConfiguratorExportDialogComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorExportDialogComponent, decorators: [{
             type: Component,
@@ -12794,7 +13920,9 @@ class AnswersSlideoutModule {
             ColorFilterModule,
             TagFilterModule,
             DirectivesModule,
-            UtilitiesPipesModule], exports: [AnswersSlideoutComponent] });
+            UtilitiesPipesModule,
+            InputTextChipsModule,
+            ButtonModule], exports: [AnswersSlideoutComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AnswersSlideoutModule, imports: [SlideoutModule,
             TranslationModule,
             CommonModule,
@@ -12805,7 +13933,9 @@ class AnswersSlideoutModule {
             ColorFilterModule,
             TagFilterModule,
             DirectivesModule,
-            UtilitiesPipesModule] });
+            UtilitiesPipesModule,
+            InputTextChipsModule,
+            ButtonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AnswersSlideoutModule, decorators: [{
             type: NgModule,
@@ -12821,7 +13951,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ColorFilterModule,
                         TagFilterModule,
                         DirectivesModule,
-                        UtilitiesPipesModule
+                        UtilitiesPipesModule,
+                        InputTextChipsModule,
+                        ButtonModule
                     ],
                     declarations: [
                         AnswersSlideoutComponent,
@@ -13097,13 +14229,15 @@ class ProductConfiguratorSelectorOptionModule {
             ProductConfiguratorSelectorOptionTileModule,
             ProductConfiguratorSelectorOptionCheckboxModule,
             ProductConfiguratorSelectorOptionButtonModule,
-            ProductConfiguratorSelectorOptionDropdownModule], exports: [ProductConfiguratorSelectorOptionComponent] });
+            ProductConfiguratorSelectorOptionDropdownModule,
+            DirectivesModule], exports: [ProductConfiguratorSelectorOptionComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionModule, imports: [TranslationModule,
             CommonModule,
             ProductConfiguratorSelectorOptionTileModule,
             ProductConfiguratorSelectorOptionCheckboxModule,
             ProductConfiguratorSelectorOptionButtonModule,
-            ProductConfiguratorSelectorOptionDropdownModule] });
+            ProductConfiguratorSelectorOptionDropdownModule,
+            DirectivesModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorOptionModule, decorators: [{
             type: NgModule,
@@ -13114,23 +14248,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ProductConfiguratorSelectorOptionTileModule,
                         ProductConfiguratorSelectorOptionCheckboxModule,
                         ProductConfiguratorSelectorOptionButtonModule,
-                        ProductConfiguratorSelectorOptionDropdownModule
+                        ProductConfiguratorSelectorOptionDropdownModule,
+                        DirectivesModule
                     ],
                     declarations: [ProductConfiguratorSelectorOptionComponent],
                     exports: [ProductConfiguratorSelectorOptionComponent]
                 }]
         }] });
 
+class ProductConfiguratorRepeatButtonsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorRepeatButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorRepeatButtonsModule, declarations: [ProductConfiguratorRepeatButtonsComponent], imports: [ButtonModule,
+            TranslationModule,
+            AsyncPipe], exports: [ProductConfiguratorRepeatButtonsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorRepeatButtonsModule, imports: [ButtonModule,
+            TranslationModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorRepeatButtonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ButtonModule,
+                        TranslationModule,
+                        AsyncPipe
+                    ],
+                    schemas: [
+                        NO_ERRORS_SCHEMA
+                    ],
+                    declarations: [
+                        ProductConfiguratorRepeatButtonsComponent
+                    ],
+                    exports: [
+                        ProductConfiguratorRepeatButtonsComponent
+                    ]
+                }]
+        }] });
+
 class ProductConfiguratorSelectorModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorModule, declarations: [ProductConfiguratorSelectorComponent], imports: [TranslationModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorModule, declarations: [ProductConfiguratorSelectorComponent,
+            ProductConfiguratorSelectorChildArticleComponent,
+            ProductConfiguratorChildArticleConfiguratorComponent,
+            ProductConfiguratorSlideoutComponent,
+            ProductConfiguratorGroupedRepeatableOptionsComponent], imports: [TranslationModule,
             CommonModule,
             IconModule,
-            ProductConfiguratorSelectorOptionModule], exports: [ProductConfiguratorSelectorComponent] });
+            ProductConfiguratorSelectorOptionModule,
+            AppendPipeModule,
+            AnswerCardModule,
+            DirectivesModule,
+            ButtonModule,
+            ProductConfiguratorRepeatButtonsModule], exports: [ProductConfiguratorSelectorComponent,
+            ProductConfiguratorSelectorChildArticleComponent,
+            ProductConfiguratorChildArticleConfiguratorComponent,
+            ProductConfiguratorSlideoutComponent,
+            ProductConfiguratorGroupedRepeatableOptionsComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorModule, imports: [TranslationModule,
             CommonModule,
             IconModule,
-            ProductConfiguratorSelectorOptionModule] });
+            ProductConfiguratorSelectorOptionModule,
+            AppendPipeModule,
+            AnswerCardModule,
+            DirectivesModule,
+            ButtonModule,
+            ProductConfiguratorRepeatButtonsModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ProductConfiguratorSelectorModule, decorators: [{
             type: NgModule,
@@ -13139,13 +14320,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TranslationModule,
                         CommonModule,
                         IconModule,
-                        ProductConfiguratorSelectorOptionModule
+                        ProductConfiguratorSelectorOptionModule,
+                        AppendPipeModule,
+                        AnswerCardModule,
+                        DirectivesModule,
+                        ButtonModule,
+                        ProductConfiguratorRepeatButtonsModule
                     ],
                     declarations: [
-                        ProductConfiguratorSelectorComponent
+                        ProductConfiguratorSelectorComponent,
+                        ProductConfiguratorSelectorChildArticleComponent,
+                        ProductConfiguratorChildArticleConfiguratorComponent,
+                        ProductConfiguratorSlideoutComponent,
+                        ProductConfiguratorGroupedRepeatableOptionsComponent
                     ],
                     exports: [
-                        ProductConfiguratorSelectorComponent
+                        ProductConfiguratorSelectorComponent,
+                        ProductConfiguratorSelectorChildArticleComponent,
+                        ProductConfiguratorChildArticleConfiguratorComponent,
+                        ProductConfiguratorSlideoutComponent,
+                        ProductConfiguratorGroupedRepeatableOptionsComponent
                     ]
                 }]
         }] });
@@ -13265,7 +14459,7 @@ class ConfiguratorSceneLoaderComponent {
         {{ loaderProgress | number: '1.0-0' }}%
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: i5.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "pipe", type: i6$1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorSceneLoaderComponent, decorators: [{
             type: Component,
@@ -13608,7 +14802,7 @@ class ElementToolbarComponent {
         }
       </div>
     }
-    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: [
+    `, isInline: true, dependencies: [{ kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }], animations: [
             trigger('showHideEditMenu', [
                 state('void', style({ 'height': '0', opacity: 0 })),
                 state('*', style({ 'height': '*', opacity: 1 })),
@@ -13874,7 +15068,7 @@ class SceneOptionsComponent {
         </div>
       }
     </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], animations: [
+    `, isInline: true, dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocalizePipe, name: "localize" }], animations: [
             trigger('showHideChild', [
                 state('true', style({ 'opacity': '1', 'visibility': 'visible' })),
                 state('false', style({ 'opacity': '0', 'visibility': 'hidden' })),
@@ -14291,36 +15485,62 @@ class CustomObject3D extends THREE.Object3D {
 class SceneButtonUtils {
     static getAddButtons(item, selectedMesh) {
         const result = [];
-        let objectToTraverse = item;
+        const usedKeys = new Set();
+        let objectToTraverse;
         if (selectedMesh) {
             objectToTraverse = selectedMesh;
         }
+        else {
+            objectToTraverse = item;
+        }
         objectToTraverse.traverse((child) => {
             const selection = ObjectUtils.GetSelectionFromSelectedObject(child);
-            if (selection) {
-                // @ts-ignore
-                if (selection.hdecoPositioning !== 'N') {
-                    const len = selection.decoNode ? selection.decoNode.connectors.length : 0;
-                    for (let i = 0; i < len; i++) {
-                        if (selection.decoNode.connectors[i] === null) {
-                            return;
-                        }
-                        const conObject = this._getConnectorObject(child, selection.decoNode.connectors[i].connector);
-                        const conObjectParent = ObjectUtils.GetParentItem(conObject, CustomObject3D);
-                        const existingButton = result.find((eab) => {
-                            return conObjectParent && ((eab.connectorObject.connectedTo === conObjectParent.name) || (eab.connectorObject.name === conObject.name));
-                        }); // only unique buttons
-                        if (!existingButton) {
-                            if (conObject && this._canShowAddButton(selection.decoNode.connectors[i], conObject)) {
-                                result.push({
-                                    selection: selection,
-                                    connector: selection.decoNode.connectors[i],
-                                    child: child,
-                                    connectorObject: conObject
-                                });
-                            }
-                        }
-                    }
+            if (!selection) {
+                return;
+            }
+            if (selection.hdecoPositioning === 'N') {
+                return;
+            }
+            let len;
+            if (selection.decoNode && selection.decoNode.connectors) {
+                len = selection.decoNode.connectors.length;
+            }
+            else {
+                len = 0;
+            }
+            for (let i = 0; i < len; i++) {
+                const connector = selection.decoNode.connectors[i];
+                if (connector === null) {
+                    continue;
+                }
+                const conObject = this._getConnectorObject(child, connector.connector);
+                if (!conObject || !this._canShowAddButton(connector, conObject)) {
+                    continue;
+                }
+                const conObjectParent = ObjectUtils.GetParentItem(conObject, CustomObject3D);
+                let parentName;
+                if (conObjectParent) {
+                    parentName = conObjectParent.name;
+                }
+                else {
+                    parentName = '';
+                }
+                let connectedTo;
+                if (conObject.connectedTo) {
+                    connectedTo = conObject.connectedTo;
+                }
+                else {
+                    connectedTo = '';
+                }
+                const dedupeKey = conObject.name + '|' + parentName + '|' + connectedTo;
+                if (!usedKeys.has(dedupeKey)) {
+                    usedKeys.add(dedupeKey);
+                    result.push({
+                        selection: selection,
+                        connector: connector,
+                        child: child,
+                        connectorObject: conObject
+                    });
                 }
             }
         });
@@ -14892,6 +16112,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: ConfiguratorSceneService }, { type: FontService }, { type: ConfiguratorItemService }] });
 
+var SceneEventState;
+(function (SceneEventState) {
+    SceneEventState[SceneEventState["UNSELECTED"] = 0] = "UNSELECTED";
+    SceneEventState[SceneEventState["SELECTED"] = 1] = "SELECTED";
+    SceneEventState[SceneEventState["DRAGGING"] = 2] = "DRAGGING";
+    SceneEventState[SceneEventState["ROTATING"] = 3] = "ROTATING";
+    SceneEventState[SceneEventState["PANNING"] = 5] = "PANNING";
+    SceneEventState[SceneEventState["DND"] = 6] = "DND";
+    SceneEventState[SceneEventState["EXPLORE"] = 7] = "EXPLORE";
+    SceneEventState[SceneEventState["DRAGGINGCONNECTOR"] = 8] = "DRAGGINGCONNECTOR";
+})(SceneEventState || (SceneEventState = {}));
+
+class IntersectedObjects {
+    parent;
+    child;
+    constructor(parent = undefined, child = undefined) {
+        this.parent = parent;
+        this.child = child;
+    }
+}
+
+class IntersectionService {
+    _cameraService;
+    constructor(_cameraService) {
+        this._cameraService = _cameraService;
+    }
+    getIntersections(mouseVector, planeObjects, options) {
+        const { filterByNormals = false, onlyVisible = false, recursive = true, linePrecision = 0.2, includeFloors = false, onlyConfigurableFloors = false } = options || {};
+        if (!mouseVector || !planeObjects.length) {
+            return [];
+        }
+        const camera = this._cameraService.camera;
+        const direction = mouseVector.sub(camera.position).normalize();
+        const rayCaster = new Raycaster(camera.position, direction);
+        rayCaster.params.Line.threshold = linePrecision;
+        try {
+            let intersections = rayCaster.intersectObjects(planeObjects, recursive);
+            if (onlyVisible && intersections.length > 0) {
+                intersections = this.removeIf(intersections, (intersection) => {
+                    return !intersection.object.visible;
+                });
+            }
+            return intersections;
+        }
+        catch (e) {
+            return [];
+        }
+    }
+    removeIf(array, func) {
+        const tResult = [];
+        array.forEach((element) => {
+            if (!func(element)) {
+                tResult.push(element);
+            }
+        });
+        return tResult;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IntersectionService, deps: [{ token: ConfiguratorCameraService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IntersectionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: IntersectionService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ConfiguratorCameraService }] });
+
 var TextureType;
 (function (TextureType) {
     TextureType[TextureType["Basic"] = 0] = "Basic";
@@ -15056,6 +16341,8 @@ class FloorPlaneService {
         this._settingsService = _settingsService;
         this._sceneService = _sceneService;
         this._sceneOptionsService = _sceneOptionsService;
+        this._sceneService.getFloorSizeFn = () => this.getPlaneSize();
+        this._sceneService.getCenterFloorFn = () => this.getCenterFloorPlane();
         this._subs.push(this._sceneService.floorTexturesLoaded.subscribe((textures) => {
             if (textures && textures.length > 0) {
                 this.createFloorPlane(textures);
@@ -15105,6 +16392,9 @@ class FloorPlaneService {
         }
     }
     getDimensions(scale = 1) {
+        if (!this._floorPlane) {
+            return { x: { min: 0, max: 0 }, y: { min: 0, max: 0 } };
+        }
         const box = new Box3().setFromObject(this._floorPlane);
         return {
             x: {
@@ -15283,6 +16573,252 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: ConfiguratorSettingsService }, { type: ConfiguratorSceneService }, { type: SceneOptionsService }] });
 
+class SceneEventService {
+    _sceneService;
+    _cameraService;
+    _connectorService;
+    _intersectionService;
+    _floorPlaneService;
+    _itemService;
+    _appEventService;
+    intersectOffsetForWalls = 20;
+    longTouchDuration = 600;
+    rotateNoDrag = false;
+    _element;
+    _controls;
+    _camera;
+    _mousePosition = new Vector2();
+    _oldMousePosition = new Vector2();
+    _rotationStartPoint = null;
+    _intersectedObject;
+    _intersectedMesh;
+    _mouseoverObject;
+    _selectedObject;
+    _prevSelectedObject;
+    _defaultCursorStyle = 'pointer';
+    _inDragOver = false;
+    _mouseDown = false;
+    _mouseMoved = false; // has mouse moved since down click
+    _rotateMouseOver = false;
+    _groupingMode = false;
+    _state = SceneEventState.UNSELECTED;
+    _intersectedWall;
+    _intersectedFloor;
+    _subs = [];
+    _cameraMoveSub;
+    _debouncedSaveState = new Subject();
+    _touchStart;
+    _touchEnd;
+    _touchCancel;
+    _touchMove;
+    constructor(_sceneService, _cameraService, _connectorService, _intersectionService, _floorPlaneService, _itemService, _appEventService) {
+        this._sceneService = _sceneService;
+        this._cameraService = _cameraService;
+        this._connectorService = _connectorService;
+        this._intersectionService = _intersectionService;
+        this._floorPlaneService = _floorPlaneService;
+        this._itemService = _itemService;
+        this._appEventService = _appEventService;
+    }
+    ngOnDestroy() {
+        this._subs.forEach(s => s.unsubscribe());
+        this._element = undefined;
+    }
+    init(element) {
+        this._element = element;
+        this._controls = this._cameraService.controls;
+        this._camera = this._cameraService.camera;
+        this._touchStart = fromEvent(element, 'touchstart');
+        this._touchEnd = fromEvent(element, 'touchend');
+        this._touchCancel = fromEvent(element, 'touchcancel');
+        this._touchMove = fromEvent(element, 'touchmove');
+        fromEvent(element, 'mousedown').pipe(filter((event) => event.button === 0)).subscribe(event => this._leftMouseDownEvent(event));
+        fromEvent(element, 'mouseup').subscribe((event) => this._mouseUpEvent(event));
+        fromEvent(element, 'mousemove').subscribe((event) => this._mouseMoveEvent(event));
+        this._touchStart.subscribe((event) => this._touchStartEvent(event));
+        this._touchEnd.subscribe((event) => this._touchEndEvent(event));
+        this._touchCancel.subscribe((event) => this._touchEndEvent(event));
+        this._touchMove.subscribe((event) => this._touchMoveEvent(event));
+        this._subs.push(
+        // this._itemGroupService.objectAdded.subscribe((object) => this.setSelectedObject(object)),
+        );
+    }
+    setExploreMode(on = true) {
+        // TODO Remove
+    }
+    setSelectedObject(object, mesh) {
+        if (object) {
+            const intersectedObjects = new IntersectedObjects(object, mesh);
+            this._state = SceneEventState.SELECTED;
+            this._appEventService.onObjectSelected.next(intersectedObjects);
+        }
+        this._markSceneToUpdate();
+    }
+    setUnselectedObject() {
+        this._state = SceneEventState.UNSELECTED;
+        this._appEventService.onObjectUnSelected.next(true);
+    }
+    _updateIntersections() {
+        // get floorplan
+        const floorPlane = this._floorPlaneService.floorPlane;
+        // get object in the scene
+        const item = this._itemService.sceneItems.values().next().value;
+        const objectPlanes = [floorPlane, item];
+        const intersects = this._getIntersections(this._mousePosition, objectPlanes, { onlyVisible: true, includeFloors: false });
+        // object intersection is prioritized
+        if (intersects.length > 1) {
+            this._setIntersectedObject(intersects[0].object);
+        }
+        else if (intersects.length === 1 && intersects[0].object.name === floorPlane.name) {
+            // just the floor, no object
+            this._clearIntersectedObject();
+        }
+        else {
+            this._clearIntersectedObject();
+        }
+    }
+    _clearIntersectedObject() {
+        this._intersectedMesh = null;
+        this._intersectedObject = null;
+    }
+    _setMousePositionFromTouchEvent(event) {
+        const canvas = this._element;
+        this._mousePosition = RelativePositionUtils.GetClientTouchPosition(event, canvas);
+    }
+    _touchStartEvent(event) {
+        if (this._isMouseEventAllowed(event)) {
+            const longTouch = of(1)
+                .pipe(delay(this.longTouchDuration))
+                .pipe(takeUntil(this._touchStart))
+                .pipe(takeUntil(this._touchEnd))
+                .pipe(takeUntil(this._touchCancel));
+            longTouch.subscribe(() => {
+                this._updateIntersections();
+            });
+            this._mouseMoved = false;
+            this._mouseDown = true;
+            this._setMousePositionFromTouchEvent(event);
+            switch (this._state) {
+                case SceneEventState.SELECTED:
+                    if (!this._intersectedObject) {
+                        this.setUnselectedObject();
+                    }
+                    else {
+                        this.setSelectedObject(this._intersectedObject, this._intersectedMesh);
+                    }
+                    break;
+                case SceneEventState.UNSELECTED:
+                    if (this._intersectedObject) {
+                        this.setSelectedObject(this._intersectedObject, this._intersectedMesh);
+                    }
+                    break;
+            }
+        }
+    }
+    async _touchEndEvent(event) {
+        // TODO check if we still need this.
+    }
+    _touchMoveEvent(event) {
+        if (this._isMouseEventAllowed(event)) {
+            this._setMousePositionFromTouchEvent(event);
+            this._mouseMoved = true;
+            if (this._mouseMoved) {
+                this._updateIntersections();
+            }
+        }
+    }
+    //
+    // MOUSE EVENTS
+    //
+    // TODO Might be ok to remove
+    async _mouseUpEvent(event) {
+        // this._mouseDown = false;
+        // switch (this._state) {
+        //   case SceneEventState.UNSELECTED:
+        //     break;
+        //   case SceneEventState.SELECTED:
+        //     break;
+        // }
+    }
+    _mouseMoveEvent(event) {
+        if (this._isMouseEventAllowed(event)) {
+            const mousePos = event ? RelativePositionUtils.GetClientMousePosition(event) : this._mousePosition;
+            let canvas;
+            if (event) {
+                event.preventDefault();
+                canvas = event.currentTarget;
+            }
+            this._mousePosition.set(mousePos.x - (canvas ? canvas.offsetLeft : 0), mousePos.y - (canvas ? canvas.offsetTop : 0));
+            if (this._oldMousePosition.x !== mousePos.x && this._oldMousePosition.y !== mousePos.y) {
+                this._mouseMoved = true;
+            }
+            if (this._mouseMoved) {
+                this._updateIntersections();
+            }
+        }
+    }
+    _leftMouseDownEvent(event) {
+        if (this._isMouseEventAllowed(event)) {
+            if (event) {
+                event.preventDefault();
+            }
+            switch (this._state) {
+                case SceneEventState.SELECTED:
+                    if (!this._intersectedObject) {
+                        this.setUnselectedObject();
+                    }
+                    else {
+                        this.setSelectedObject(this._intersectedObject, this._intersectedMesh);
+                    }
+                    break;
+                case SceneEventState.UNSELECTED:
+                    if (this._intersectedObject) {
+                        this.setSelectedObject(this._intersectedObject, this._intersectedMesh);
+                    }
+                    break;
+            }
+        }
+    }
+    _getIntersections(mousePos, objects, options) {
+        const mouseVector = this._mouseToVec3(mousePos);
+        return this._intersectionService.getIntersections(mouseVector, objects, options);
+    }
+    _setIntersectedObject(mesh) {
+        if (mesh && mesh.parent && mesh.parent.userData && mesh.parent.userData.rootObject) {
+            this._intersectedMesh = mesh;
+        }
+        if (mesh && mesh.userData && mesh.userData.rootObject) {
+            this._intersectedObject = mesh;
+        }
+        else if (mesh.parent) {
+            this._setIntersectedObject(mesh.parent);
+        }
+    }
+    _isMouseEventAllowed(event) {
+        return event ? (event.target && event.target.nodeName === 'CANVAS') : true;
+    }
+    // Reverted changes from IONE-31399
+    _mouseToVec3(vec2) {
+        const rendererElement = this._element;
+        const mPosition = new Vector2((vec2.x / rendererElement.clientWidth) * 2 - 1, -(vec2.y / rendererElement.clientHeight) * 2 + 1);
+        const vector = new Vector3(mPosition.x, mPosition.y, 0.5);
+        vector.unproject(this._camera);
+        return vector;
+    }
+    _markSceneToUpdate() {
+        this._sceneService.needsRender = true;
+    }
+    _setCursorStyle(style) {
+        this._element.style.cursor = style;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SceneEventService, deps: [{ token: ConfiguratorSceneService }, { token: ConfiguratorCameraService }, { token: ConfiguratorConnectorService }, { token: IntersectionService }, { token: FloorPlaneService }, { token: ConfiguratorItemService }, { token: ConfiguratorEventService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SceneEventService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SceneEventService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ConfiguratorSceneService }, { type: ConfiguratorCameraService }, { type: ConfiguratorConnectorService }, { type: IntersectionService }, { type: FloorPlaneService }, { type: ConfiguratorItemService }, { type: ConfiguratorEventService }] });
+
 class ConfiguratorSceneComponent {
     _settingsService;
     _rotationService;
@@ -15294,6 +16830,8 @@ class ConfiguratorSceneComponent {
     _buildFurnitureService;
     _sceneOptionsService;
     _dimensionsService;
+    _configuratorConnectorService;
+    _sceneEventService;
     _floorService;
     canvasElement;
     elementToolbar;
@@ -15313,11 +16851,12 @@ class ConfiguratorSceneComponent {
     development = false;
     showDownloadDialog = false;
     showCameraSettingsDialog = false;
+    showFullConfiguration = undefined;
     _subs = [];
     _firstBuild = true;
     _selectedElementObject;
     _buildResult;
-    constructor(_settingsService, _rotationService, _dynamicCameraService, _sceneService, _eventService, _cameraService, _itemService, _buildFurnitureService, _sceneOptionsService, _dimensionsService, _floorService // do not remove
+    constructor(_settingsService, _rotationService, _dynamicCameraService, _sceneService, _eventService, _cameraService, _itemService, _buildFurnitureService, _sceneOptionsService, _dimensionsService, _configuratorConnectorService, _sceneEventService, _floorService // do not remove
     ) {
         this._settingsService = _settingsService;
         this._rotationService = _rotationService;
@@ -15329,6 +16868,8 @@ class ConfiguratorSceneComponent {
         this._buildFurnitureService = _buildFurnitureService;
         this._sceneOptionsService = _sceneOptionsService;
         this._dimensionsService = _dimensionsService;
+        this._configuratorConnectorService = _configuratorConnectorService;
+        this._sceneEventService = _sceneEventService;
         this._floorService = _floorService;
         this._subs.push(this._eventService.buildFinished.subscribe((result) => {
             if (!result || !result.object) {
@@ -15344,6 +16885,7 @@ class ConfiguratorSceneComponent {
                 this._firstBuild = false;
             }
             this._eventService.addedToScene.next(this._buildResult);
+            this._sceneService.handlePropsChanged();
         }), this._eventService.buildStarted.subscribe((started) => {
             if (started) {
                 this.setSceneBuildLoader = started;
@@ -15354,7 +16896,11 @@ class ConfiguratorSceneComponent {
                     this._loaderProcessUpdate(this.totalSteps);
                 }
             }
-        }), this._settingsService.settingsLoaded.subscribe((loaded) => {
+        }), this._eventService.articleReceived.subscribe((article) => {
+            if (article) {
+                this.showFullConfiguration = !!article.showFullConfiguration;
+            }
+        }), this._eventService.onObjectSelected.subscribe((intersected) => this._handleIntersectedObjects(intersected)), this._eventService.onObjectUnSelected.subscribe((unselect) => this._handleUnselectObject(unselect)), this._sceneService.onAfterRender.subscribe(() => this._handleRender()), this._settingsService.settingsLoaded.subscribe((loaded) => {
             if (loaded && this._settingsService.settings && this._settingsService.settings.options) {
                 if (this._settingsService.settings.options.showDownloadButton) {
                     this._createDownloadButton();
@@ -15373,10 +16919,12 @@ class ConfiguratorSceneComponent {
     }
     ngAfterViewInit() {
         this._sceneService.init(this.canvasElement.nativeElement);
+        this._sceneEventService.init(this.canvasElement.nativeElement);
     }
     ngOnDestroy() {
         this._subs.forEach(sub => sub.unsubscribe());
         this.canvasElement = undefined;
+        this.showFullConfiguration = undefined;
     }
     swapElement() {
         if (this._selectedElementObject) {
@@ -15485,6 +17033,19 @@ class ConfiguratorSceneComponent {
         this._buildFurnitureService.currentActiveService.selectSelection(selection, this._buildResult, connector.linkedRepeatables !== 'T', after, connector.connector);
         this._resetSelectedElement();
     }
+    _handleFullConfigAddButtonClick(selection, connector, parent) {
+        let after;
+        if (connector.addAdjust === 2) {
+            after = connector.connector.indexOf('_M_') > -1;
+        }
+        if (selection.repeatOptActive) {
+            this._configuratorConnectorService.repeatOption(selection.optCycle, selection.id, after);
+        }
+        else {
+            // when it's not repeatable, we need to short cut to the correct in the configuration, like the Element menu
+            this._configuratorConnectorService.markSelectionForUserInput(selection.node);
+        }
+    }
     _resetSelectedElement() {
         this._selectedElementObject = undefined;
         this._resetElementPosition();
@@ -15581,7 +17142,90 @@ class ConfiguratorSceneComponent {
     _handleShowMeasurements() {
         this._dimensionsService.enabled = !this._dimensionsService.enabled;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorSceneComponent, deps: [{ token: ConfiguratorSettingsService }, { token: ConfiguratorRotationService }, { token: ConfiguratorDynamicCameraService }, { token: ConfiguratorSceneService }, { token: ConfiguratorEventService }, { token: ConfiguratorCameraService }, { token: ConfiguratorItemService }, { token: SwitchBuildFurnitureService }, { token: SceneOptionsService }, { token: DimensionsService }, { token: FloorPlaneService }], target: i0.ɵɵFactoryTarget.Component });
+    _handleUnselectObject(unselected) {
+        if (unselected) {
+            this.editAddButtons = [];
+            this.showElementToolbar = false;
+            this._sceneService.needsRender = true;
+        }
+    }
+    _handleRender() {
+        if (this.showElementToolbar) {
+            this._repositionButtons();
+        }
+    }
+    _handleIntersectedObjects(intersectedObjects) {
+        this._selectedElementObject = intersectedObjects.child;
+        if (this._selectedElementObject) {
+            this._prepareAddButtons(intersectedObjects);
+            this._prepareElementMenu(intersectedObjects);
+            const shouldBeHidden = this._selectedElementObject.userData &&
+                this._selectedElementObject.userData.selection &&
+                this._selectedElementObject.userData.selection.question.indexOf('[hidden]') > -1;
+            if (this._settingsService.settings.options.instantReplace) {
+                if (shouldBeHidden) {
+                    // this._cancelElementReplace();
+                }
+                else {
+                    this.swapElement();
+                }
+            }
+            this.showElementToolbar = true;
+            this._sceneService.needsRender = true;
+            this._repositionButtons();
+        }
+    }
+    _prepareAddButtons(intersectedObjects) {
+        this.editAddButtons = [];
+        const buttonList = SceneButtonUtils.getAddButtons(intersectedObjects.parent, intersectedObjects.child);
+        for (const customButtonItem of buttonList) {
+            // We should check them here again to make sure we do not have dubs
+            this.editAddButtons.push(new CustomButton('', () => {
+                if (this.showFullConfiguration) {
+                    this._handleFullConfigAddButtonClick(customButtonItem.selection, customButtonItem.connector, customButtonItem.child);
+                }
+                else {
+                    this._handleAddButtonClick(customButtonItem.selection, customButtonItem.connector, customButtonItem.child);
+                }
+            }, customButtonItem.connectorObject));
+        }
+    }
+    _prepareElementMenu(intersectedObjects) {
+        this.editElementMenu = [];
+        const selection = ObjectUtils.GetSelectionFromSelectedObject(intersectedObjects.child);
+        if (this._settingsService.settings.options.showEditPencilConfigurator && selection) {
+            let options = this._getOptionsFromSelection(selection);
+            options = options.filter(o => {
+                return o.nodeType === 'OPT' && this._configuratorConnectorService.isSelectionPublished(o);
+            });
+            if (this.showFullConfiguration) {
+                // TODO discuss, this means that we remove selections that got removed by exceptions.
+                // When we do not remove them, we see them, we can click on them, but the will be removed from the _getOptionsFromSelection data
+                // Not sure if this is correct, maybe conflict between normale and full config.
+                //options = this._configuratorConnectorService.filterRemoveSelectionsByDeleteExceptions(options);
+            }
+            const len = options.length;
+            for (let i = 0; i < len; i++) {
+                this.editElementMenu.push(new CustomButton(options[i].question, () => {
+                    if (this.showFullConfiguration) {
+                        // TODO we might need to redo this when we got in trouble again but option[i].node matches with selectorStructure.selNodeId
+                        // We shoul be able to mark this in the template.
+                        this._configuratorConnectorService.markSelectionForUserInput(selection.node);
+                    }
+                    else {
+                        this._buildFurnitureService.currentActiveService.selectSelection(options[i], this._buildResult);
+                    }
+                    if (!this._settingsService.settings.options.instantEditMenu) {
+                        this._resetSelectedElement();
+                    }
+                }));
+            }
+        }
+    }
+    _getOptionsFromSelection(baseSelection) {
+        return this._buildFurnitureService.currentActiveService.getOptionsFromSelection(baseSelection);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ConfiguratorSceneComponent, deps: [{ token: ConfiguratorSettingsService }, { token: ConfiguratorRotationService }, { token: ConfiguratorDynamicCameraService }, { token: ConfiguratorSceneService }, { token: ConfiguratorEventService }, { token: ConfiguratorCameraService }, { token: ConfiguratorItemService }, { token: SwitchBuildFurnitureService }, { token: SceneOptionsService }, { token: DimensionsService }, { token: ConfiguratorConnectorService }, { token: SceneEventService }, { token: FloorPlaneService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ConfiguratorSceneComponent, isStandalone: false, selector: "co-configurator-scene", host: { properties: { "class.co-configurator-scene": "this.showClass" } }, viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }, { propertyName: "elementToolbar", first: true, predicate: ElementToolbarComponent, descendants: true }], ngImport: i0, template: `
     @if (showSceneBuildLoader && setSceneBuildLoader) {
       <co-configurator-scene-loader
@@ -15672,7 +17316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: ConfiguratorSettingsService }, { type: ConfiguratorRotationService }, { type: ConfiguratorDynamicCameraService }, { type: ConfiguratorSceneService }, { type: ConfiguratorEventService }, { type: ConfiguratorCameraService }, { type: ConfiguratorItemService }, { type: SwitchBuildFurnitureService }, { type: SceneOptionsService }, { type: DimensionsService }, { type: FloorPlaneService }], propDecorators: { canvasElement: [{
+        }], ctorParameters: () => [{ type: ConfiguratorSettingsService }, { type: ConfiguratorRotationService }, { type: ConfiguratorDynamicCameraService }, { type: ConfiguratorSceneService }, { type: ConfiguratorEventService }, { type: ConfiguratorCameraService }, { type: ConfiguratorItemService }, { type: SwitchBuildFurnitureService }, { type: SceneOptionsService }, { type: DimensionsService }, { type: ConfiguratorConnectorService }, { type: SceneEventService }, { type: FloorPlaneService }], propDecorators: { canvasElement: [{
                 type: ViewChild,
                 args: ['canvas', { read: ElementRef }]
             }], elementToolbar: [{
@@ -15720,5 +17364,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AnswerCardComponent, AnswerCardModule, AnswersInfoDialogComponent, AnswersInfoDialogModule, AnswersSlideoutComponent, AnswersSlideoutModule, ArFeature, ArPositionIndicator, CoSummaryLine, CoSummaryLineModule, ColorFilterComponent, ColorFilterModule, ConfigurationPresetComponent, ConfigurationPresetModule, ConfigurationResultObject, ConfiguratorArService, ConfiguratorCameraService, ConfiguratorCameraSettingsComponent, ConfiguratorComponent, ConfiguratorConnectorService, ConfiguratorDialogModule, ConfiguratorErrorDialogComponent, ConfiguratorErrorMessage, ConfiguratorEventService, ConfiguratorExportDialogComponent, ConfiguratorLoaderComponent, ConfiguratorLoaderModule, ConfiguratorModule, ConfiguratorSceneComponent, ConfiguratorSceneLoaderComponent, ConfiguratorSceneLoaderModule, ConfiguratorSceneModule, ConfiguratorSceneService, ConfiguratorVrService, ConfiguratorXrService, ConfiguringService, Controls, ElementButtonsComponent, ElementButtonsModule, ElementToolbarComponent, ElementToolbarModule, ImageZoomComponent, ImageZoomModule, LiteSelectorComponent, LiteSelectorModule, ProductConfiguratorComponent, ProductConfiguratorModule, ProductConfiguratorOptionCheckboxComponent, ProductConfiguratorSelectorComponent, ProductConfiguratorSelectorModule, ProductConfiguratorSelectorOptionButtonComponent, ProductConfiguratorSelectorOptionButtonModule, ProductConfiguratorSelectorOptionCheckboxModule, ProductConfiguratorSelectorOptionComponent, ProductConfiguratorSelectorOptionDropDownComponent, ProductConfiguratorSelectorOptionDropdownModule, ProductConfiguratorSelectorOptionModule, ProductConfiguratorSelectorOptionTileComponent, ProductConfiguratorSelectorOptionTileModule, ProgressBarComponent, ProgressBarModule, Reticle, SceneOptionsComponent, SelectionsModule, SelectionsSummaryComponent, SelectionsSummaryLineComponent, SelectionsSummaryModule, TagFilterComponent, TagFilterModule, XrMode };
+export { AnswerCardComponent, AnswerCardModule, AnswersInfoDialogComponent, AnswersInfoDialogModule, AnswersSlideoutComponent, AnswersSlideoutModule, ArFeature, ArPositionIndicator, CoSummaryLine, CoSummaryLineModule, ColorFilterComponent, ColorFilterModule, ConfigurationPresetComponent, ConfigurationPresetModule, ConfigurationResultObject, ConfiguratorArService, ConfiguratorCameraService, ConfiguratorCameraSettingsComponent, ConfiguratorComponent, ConfiguratorConnectorService, ConfiguratorDialogModule, ConfiguratorErrorDialogComponent, ConfiguratorErrorMessage, ConfiguratorEventService, ConfiguratorExportDialogComponent, ConfiguratorLoaderComponent, ConfiguratorLoaderModule, ConfiguratorModule, ConfiguratorSceneComponent, ConfiguratorSceneLoaderComponent, ConfiguratorSceneLoaderModule, ConfiguratorSceneModule, ConfiguratorSceneService, ConfiguratorVrService, ConfiguratorXrService, ConfiguringService, Controls, ElementButtonsComponent, ElementButtonsModule, ElementToolbarComponent, ElementToolbarModule, ImageZoomComponent, ImageZoomModule, LiteSelectorComponent, LiteSelectorModule, ProductConfiguratorChildArticleConfiguratorComponent, ProductConfiguratorComponent, ProductConfiguratorGroupedRepeatableOptionsComponent, ProductConfiguratorModule, ProductConfiguratorOptionCheckboxComponent, ProductConfiguratorSelectorChildArticleComponent, ProductConfiguratorSelectorComponent, ProductConfiguratorSelectorModule, ProductConfiguratorSelectorOptionButtonComponent, ProductConfiguratorSelectorOptionButtonModule, ProductConfiguratorSelectorOptionCheckboxModule, ProductConfiguratorSelectorOptionComponent, ProductConfiguratorSelectorOptionDropDownComponent, ProductConfiguratorSelectorOptionDropdownModule, ProductConfiguratorSelectorOptionModule, ProductConfiguratorSelectorOptionTileComponent, ProductConfiguratorSelectorOptionTileModule, ProductConfiguratorSlideoutComponent, ProgressBarComponent, ProgressBarModule, Reticle, SceneOptionsComponent, SelectionsModule, SelectionsSummaryComponent, SelectionsSummaryLineComponent, SelectionsSummaryModule, TagFilterComponent, TagFilterModule, XrMode };
 //# sourceMappingURL=colijnit-configurator.mjs.map