@colijnit/product 261.20.0 → 261.20.2

package/fesm2022/colijnit-product.mjs

@@ -16,12 +16,14 @@ import { ImageContent } from '@colijnit/mainapi/build/model/image-content.bo';
 import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/platform-browser';
+import * as i5 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i6 from '@colijnit/corecomponents_v12';
 import { IconModule, LoaderModule, ScrollContainerModule, InputNumberPickerModule, ButtonModule, ArticleTileModule, TileModule, IconCollapseHandleModule } from '@colijnit/corecomponents_v12';
 import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
+import * as i6$1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
-import * as i5 from '@angular/common';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i3 from '@colijnit/sharedcomponents';
 import { FilesUploadModule } from '@colijnit/sharedcomponents';
 
@@ -30,8 +32,8 @@ class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "261.20.0";
-        this.publishDate = "23-1-2026, 15:54:32";
+        this.symVer = "261.20.2";
+        this.publishDate = "24-3-2026, 15:30:44";
     }
 }
 
@@ -45,6 +47,7 @@ class SettingsOptions {
         this.showArButton = false;
         this.arEnabled = false;
         this.vrEnabled = false;
+        this.showSaveAsPresetButton = false;
     }
 }
 
@@ -247,6 +250,15 @@ class ProductConnectorAdapterService {
             return this._boFactory.makeWithRawBackendData(ImageContent, response.resultObject);
         }
     }
+    async savePreset() {
+        const response = await this.articleConnector.storePreset();
+        if (response && response.validationResult && response.validationResult.success) {
+            return Promise.resolve(true);
+        }
+        else {
+            return Promise.resolve(false);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService, deps: [{ token: ProductEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService }); }
 }
@@ -322,6 +334,9 @@ class Dictionary {
                 "VARIANTS": "Variations",
                 "WIDTH": "Width",
                 "SUGGESTION": "Suggestion",
+                "PRESET_SAVE_AS": "Save as preset",
+                "PRESET_OVERWRITE_TEXT": "This article already has a preset. Do you want to overwrite it?",
+                "PRESET_SAVED_TEXT": "Preset saved"
             },
             "nl": {
                 "ADDITIONAL_DATA": "Extra informatie",
@@ -354,6 +369,9 @@ class Dictionary {
                 "VARIANTS": "Varianten",
                 "WIDTH": "Breedte",
                 "SUGGESTION": "Suggesties bij",
+                "PRESET_SAVE_AS": "Opslaan als preset",
+                "PRESET_OVERWRITE_TEXT": "Dit artikel heeft al een preset, wilt u deze overschrijven?",
+                "PRESET_SAVED_TEXT": "Preset opgeslagen"
             },
             "de": {
                 "ADDITIONAL_DATA": "Extra informatie",
@@ -625,6 +643,9 @@ class ProductConnectorService {
     async getImageForCoDocument(document, thumb = false) {
         return this._adapterService.getImageForCoDocument(document, thumb);
     }
+    async savePreset() {
+        return await this._adapterService.savePreset();
+    }
     onShowLoaderChange(showLoader) {
         this._shouldShowLoader = showLoader;
     }
@@ -703,6 +724,7 @@ var IconEnum;
     IconEnum["NormalScreen"] = "normal_screen";
     IconEnum["Quote"] = "quote";
     IconEnum["Refresh"] = "refresh";
+    IconEnum["SaveDisk"] = "save_disk";
     IconEnum["SaveSkinny"] = "save_skinny";
     IconEnum["ThreeD"] = "three_d";
     IconEnum["Truck"] = "truck";
@@ -710,6 +732,13 @@ var IconEnum;
     IconEnum["Warehouse"] = "warehouse";
 })(IconEnum || (IconEnum = {}));
 
+var PresetDialogType;
+(function (PresetDialogType) {
+    PresetDialogType[PresetDialogType["info"] = 0] = "info";
+    PresetDialogType[PresetDialogType["warning"] = 1] = "warning";
+    PresetDialogType[PresetDialogType["success"] = 2] = "success";
+})(PresetDialogType || (PresetDialogType = {}));
+
 /** AUTO GENERATED FILE. DO NOT CHANGE.. **/
 const IconSvg = {
     "add_to_cart_drop": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.58,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,16.58,34.84Z\" fill=\"#484f60\"/><path d=\"M31.49,34.84a1.8,1.8,0,1,0,1.8,1.8A1.79,1.79,0,0,0,31.49,34.84Z\" fill=\"#484f60\"/><path d=\"M35.6,17.9l-1.51.18L31.88,20.3l1.31-.17a.88.88,0,0,1,1,1.08L32.35,29.5a1.52,1.52,0,0,1-1.44,1.2H16.51a1.75,1.75,0,0,1-1.57-1.17l-2.31-5.6a1,1,0,0,1,.85-1.29l4.43-.56-1.86-1.86-5.13.61a1,1,0,0,0-.87,1.28l3.34,9.44A1.73,1.73,0,0,0,15,32.72H32.64a1.51,1.51,0,0,0,1.43-1.2L36.6,19A.89.89,0,0,0,35.6,17.9Z\" fill=\"#484f60\"/><path d=\"M39,17a1.87,1.87,0,0,0-1.36,1.46l-.42,2.89c-.1.67.31,1,.9.7a2.75,2.75,0,0,0,1.33-1.7L40,18A.73.73,0,0,0,39,17Z\" fill=\"#484f60\"/><polygon points=\"24 25.35 32.04 17.3 27.04 17.3 27.04 10 20.95 10 20.95 17.3 15.96 17.3 24 25.35\" fill=\"#484f60\"/></svg>",
@@ -726,6 +755,7 @@ const IconSvg = {
     "normal_screen": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M38,38.17H12v-26H38ZM13.24,36.93H36.76V13.4H13.24Z\" fill=\"#484f60\"/><polygon points=\"22.18 29.83 24.29 31.93 24.29 25.87 18.23 25.87 20.34 27.98 16.43 31.89 18.28 33.73 22.18 29.83\" fill=\"#484f60\"/><polygon points=\"33.57 18.44 31.73 16.6 27.82 20.51 25.71 18.4 25.71 24.46 31.77 24.46 29.66 22.35 33.57 18.44\" fill=\"#484f60\"/></svg>",
     "quote": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M14.5,31.51V12a.5.5,0,0,1,.5-.5H35a.5.5,0,0,1,.5.5V38a.5.5,0,0,1-.5.5H21.27V40H35a2,2,0,0,0,2-2V12a2,2,0,0,0-2-2H15a2,2,0,0,0-2,2V31.51Z\" fill=\"#484f60\"/><path d=\"M21.27,40V33.56c0-1.78-.27-2.05-2.05-2.05H13Z\" fill=\"#484f60\"/><rect x=\"17.5\" y=\"18.5\" width=\"6\" height=\"4\" fill=\"#484f60\"/><rect x=\"25.5\" y=\"21.5\" width=\"7\" height=\"1\" fill=\"#484f60\"/><rect x=\"25.5\" y=\"18.5\" width=\"7\" height=\"1\" fill=\"#484f60\"/><rect x=\"26.5\" y=\"25.5\" width=\"6\" height=\"4\" transform=\"translate(59 55) rotate(-180)\" fill=\"#484f60\"/><rect x=\"17.5\" y=\"28.5\" width=\"7\" height=\"1\" fill=\"#484f60\"/><rect x=\"17.5\" y=\"25.5\" width=\"7\" height=\"1\" fill=\"#484f60\"/><rect x=\"17.5\" y=\"14.5\" width=\"6\" height=\"1\" fill=\"#484f60\"/><rect x=\"26.5\" y=\"34.5\" width=\"6\" height=\"1\" fill=\"#484f60\"/></svg>",
     "refresh": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" version=\"1.1\" sodipodi:docname=\"refresh.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"><metadata ><rdf:RDF><cc:Work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs /><sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" showgr inkscape:zoom=\"9.44\" inkscape:cx=\"13.990693\" inkscape:cy=\"13.961336\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg6\" /><g transform=\"matrix(0.05356365,0,0,0.05356365,11.44076,11.82465)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"M 414.32892,173.53368 397.86852,58.29997 c -1.3534,-9.447409 -12.96516,-13.373353 -19.75699,-6.581524 l -23.97472,23.97472 C 323.3074,57.095569 288.30682,47.308258 252.3168,47.308258 c -108.23157,0 -195.126154,84.711612 -197.8314,192.852392 -0.147446,5.91103 4.149441,10.98085 9.992183,11.82206 l 46.516107,6.64982 c 6.93462,1.01194 13.38577,-4.43269 13.28954,-11.68548 -0.9646,-71.37163 56.68057,-129.79595 128.03357,-129.79595 17.27835,0 34.3526,3.51232 50.13165,10.23043 l -23.11022,23.11022 c -6.74915,6.74915 -2.91866,18.3966 6.58152,19.75699 l 115.23371,16.4604 c 7.59269,1.14465 14.26423,-5.4586 13.17546,-13.17546 z\" style=\"fill:#484f60;fill-opacity:1;stroke-width:0.77603161\" /></g></g><path inkscape:connector-curvature=\"0\" d=\"m 35.105827,24.725982 -2.489742,-0.355606 c -0.321647,-0.04073 -0.711797,0.234897 -0.711797,0.671018 0,3.781814 -3.076753,6.858567 -6.858567,6.858567 -0.920628,0 -1.830946,-0.186303 -2.673013,-0.542533 l 1.198298,-1.198297 c 0.361507,-0.361507 0.156331,-0.985389 -0.352533,-1.058254 l -6.172336,-0.882302 c -0.405403,-0.05792 -0.764422,0.289765 -0.705726,0.705725 l 0.881637,6.172381 c 0.07258,0.506577 0.694003,0.71545 1.058254,0.352527 l 1.315225,-1.314599 c 1.643397,0.987012 3.516951,1.506391 5.450194,1.506391 5.769264,0 10.423029,-4.514936 10.595325,-10.27871 0.0091,-0.317237 -0.221012,-0.591248 -0.535219,-0.636308 z\" style=\"fill:#484f60;fill-opacity:1;stroke-width:0.04156709\" /></svg>",
+    "save_disk": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-288 379 35 35\" enable-background=\"new -288 379 35 35\" ><g opacity=\"0.95\"><path fill=\"#29363E\" d=\"M-259.5,384.4h-2.1v6.8c0,0.4-0.3,0.7-0.7,0.7h-16.6c-0.4,0-0.7-0.3-0.7-0.7v-6.8h-2c-0.6,0-1.1,0.5-1.1,1.1v22.4c0,0.6,0.5,1.1,1.1,1.1h2v-14c0-0.4,0.3-0.7,0.7-0.7h16.7c0.4,0,0.7,0.3,0.7,0.7v14h2c0.6,0,1.1-0.5,1.1-1.1v-22.4C-258.4,384.9-258.9,384.4-259.5,384.4z M-280.1,406.6h-1.7V405h1.7V406.6z M-259.2,406.6h-1.7V405h1.7V406.6z\"/><rect x=\"-278.4\" y=\"395.4\" fill=\"#29363E\" width=\"15.8\" height=\"13.5\"/><path fill=\"#29363E\" d=\"M-263.4,384h-12c-0.1,0-0.3,0.1-0.3,0.3v6.5c0,0.1,0.1,0.3,0.3,0.3h12c0.1,0,0.2-0.1,0.2-0.3v-6.5C-263.1,384.1-263.2,384-263.4,384z M-265.6,390c0,0.1-0.1,0.3-0.3,0.3h-2.4c-0.1,0-0.2-0.1-0.2-0.3v-4.8c0-0.1,0.1-0.3,0.2-0.3h2.4c0.1,0,0.3,0.1,0.3,0.3V390z\"/></g></svg>",
     "save_skinny": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51 51\"><polygon points=\"23.8 38.1 14.9 25.6 15.7 25 23.6 36.2 35.2 12.9 36.1 13.4 23.8 38.1\" fill=\"#fff\"/></svg>",
     "three_d": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M16.08,30.77a4.85,4.85,0,0,1-3-.8,4,4,0,0,0-2.49-.15,6.21,6.21,0,0,0,2.53,1.09,12.84,12.84,0,0,0,2.93-.14\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M14.27,19.68A4.71,4.71,0,0,0,11,20.78l2,.14c.31,0,1.2-.69,1.55-.81a3.88,3.88,0,0,1,1.65-.24l-1.94-.19\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M21.64,28.79a4.13,4.13,0,0,0-3.1-4c.89-.7,1.77-1.09,2.26-2.21a5.12,5.12,0,0,0,.35-1.9c-.13-3.24-2.64-3.73-5.29-4.15a4,4,0,0,1,3.44,3.7,4.61,4.61,0,0,1-.83,3.12,9.7,9.7,0,0,1-1.82,1.43,4.3,4.3,0,0,1,3.17,4.34,4.9,4.9,0,0,1-4.21,5c2.09-.34,4.37-.64,5.46-2.69a5,5,0,0,0,.57-2.58\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M28.44,18.88l.38-.07.48-.06.57,0h.75l.36,0,.35.05c-.2,0-.42-.08-1.57-.25l-.36-.05-.37,0h-.77l-.59,0-.49.07a3.08,3.08,0,0,0-.39.07l-.3.07V31.38H27l.13,0h1.63l.21,0h.2l.2,0h.05l1.55-.24h0l-.34.05-.33,0H29.12l-.36,0-.33,0a1.15,1.15,0,0,1-.28-.06V19Z\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M40,24.34a9,9,0,0,0-3-7.1,11.06,11.06,0,0,0-4.47-1.86c4.38,1.13,6.23,5.31,6.13,9.54-.12,4.5-2.27,8.55-6.86,9.66,2.59-.63,5-1.41,6.52-3.78A12,12,0,0,0,40,24.34\" fill=\"#484f60\" opacity=\"0.5\"/><path d=\"M35.38,16.71A7.32,7.32,0,0,1,36.74,18a7.82,7.82,0,0,1,1,1.73,10.32,10.32,0,0,1,.68,2.16,13.86,13.86,0,0,1,.23,2.59,15,15,0,0,1-.25,2.78,11.39,11.39,0,0,1-.68,2.31,9.34,9.34,0,0,1-1,1.85,8.23,8.23,0,0,1-1.28,1.4,7.76,7.76,0,0,1-1.7,1.07,9.07,9.07,0,0,1-2,.69,13.36,13.36,0,0,1-2.26.33,18.25,18.25,0,0,1-2.45,0c-.5,0-1-.08-1.39-.12l-1.17-.14c-.36,0-.68-.11-1-.16l-.77-.15V15.86c.34-.09.71-.18,1.09-.26s.81-.15,1.24-.21.88-.12,1.34-.17.95-.1,1.44-.13a20.57,20.57,0,0,1,2.33,0,12,12,0,0,1,2,.24,8.24,8.24,0,0,1,1.72.55A7.1,7.1,0,0,1,35.38,16.71ZM27.92,31.53a6.53,6.53,0,0,0,2.46-.32A4.81,4.81,0,0,0,32.32,30a5.82,5.82,0,0,0,1.27-2.18A10.11,10.11,0,0,0,34,24.67a8.65,8.65,0,0,0-.42-2.85,4.94,4.94,0,0,0-1.18-2,4.45,4.45,0,0,0-1.83-1.11,6.55,6.55,0,0,0-2.35-.28l-.59,0-.49.07a3.08,3.08,0,0,0-.39.07l-.3.07V31.38a2.11,2.11,0,0,0,.29.06l.34,0,.37,0,.36,0h.07\" fill=\"#484f60\"/><path d=\"M14.57,16.47a5.49,5.49,0,0,1,2,.22,3.89,3.89,0,0,1,1.49.84A3.66,3.66,0,0,1,19,18.89a4.29,4.29,0,0,1,.33,1.7,5.29,5.29,0,0,1-.17,1.34,4.29,4.29,0,0,1-.5,1.16,4.17,4.17,0,0,1-.84.94,4.88,4.88,0,0,1-1.16.69v.05a3.7,3.7,0,0,1,1.22.5,4,4,0,0,1,1,.92,4.61,4.61,0,0,1,.69,1.3,5.24,5.24,0,0,1,.25,1.62,5.36,5.36,0,0,1-.42,2.15,4.44,4.44,0,0,1-1.2,1.64,4.84,4.84,0,0,1-1.86,1,6.78,6.78,0,0,1-2.39.23,7.69,7.69,0,0,1-2.36-.52,6.89,6.89,0,0,1-.9-.42,4.36,4.36,0,0,1-.69-.47l.62-2.9a4.12,4.12,0,0,0,.53.34,6.21,6.21,0,0,0,.73.36,5.69,5.69,0,0,0,.88.31,5.19,5.19,0,0,0,1,.15,3.11,3.11,0,0,0,1.1-.13,2,2,0,0,0,.8-.45,1.93,1.93,0,0,0,.49-.71,2.35,2.35,0,0,0,.17-.89A2.48,2.48,0,0,0,16,27.67a2.23,2.23,0,0,0-.63-.79,2.9,2.9,0,0,0-.89-.46,3.5,3.5,0,0,0-1-.15H12.2V23.44l1.23,0a3.44,3.44,0,0,0,.83-.11,2.83,2.83,0,0,0,.79-.36,2,2,0,0,0,.6-.62,2,2,0,0,0,.23-.94,1.8,1.8,0,0,0-.13-.71,1.36,1.36,0,0,0-.38-.56,1.58,1.58,0,0,0-.64-.35,2.79,2.79,0,0,0-.9-.1,4.07,4.07,0,0,0-.84.13c-.27.08-.53.18-.78.28a6.56,6.56,0,0,0-1.17.7L10.42,18a5,5,0,0,1,.72-.51,7.82,7.82,0,0,1,2.12-.82A8,8,0,0,1,14.57,16.47Z\" fill=\"#484f60\"/></svg>",
     "truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" version=\"1.1\" sodipodi:docname=\"truck.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"><metadata ><rdf:RDF><cc:Work rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs /><sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1920\" inkscape:window-height=\"1017\" showgr inkscape:zoom=\"9.44\" inkscape:cx=\"31.555563\" inkscape:cy=\"21.585628\" inkscape:window-x=\"-8\" inkscape:window-y=\"-8\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg8\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06827145,0,0,0.06827064,7.670918,5.1378096)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 119.467,337.067 c -28.237,0 -51.2,22.963 -51.2,51.2 0,28.237 22.963,51.2 51.2,51.2 28.237,0 51.2,-22.963 51.2,-51.2 0,-28.237 -22.964,-51.2 -51.2,-51.2 z m 0,85.333 c -18.825,0 -34.133,-15.309 -34.133,-34.133 0,-18.825 15.309,-34.133 34.133,-34.133 18.824,0 34.133,15.309 34.133,34.133 0,18.824 -15.309,34.133 -34.133,34.133 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 409.6,337.067 c -28.237,0 -51.2,22.963 -51.2,51.2 0,28.237 22.963,51.2 51.2,51.2 28.237,0 51.2,-22.963 51.2,-51.2 0,-28.237 -22.963,-51.2 -51.2,-51.2 z m 0,85.333 c -18.825,0 -34.133,-15.309 -34.133,-34.133 0,-18.825 15.309,-34.133 34.133,-34.133 18.825,0 34.133,15.309 34.133,34.133 0,18.824 -15.308,34.133 -34.133,34.133 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"m 510.643,289.784 -76.8,-119.467 c -1.57,-2.441 -4.275,-3.917 -7.177,-3.917 H 332.8 c -4.719,0 -8.533,3.823 -8.533,8.533 v 213.333 c 0,4.719 3.814,8.533 8.533,8.533 h 34.133 v -17.067 h -25.6 V 183.467 h 80.674 l 72.926,113.442 v 82.825 H 452.266 V 396.8 h 51.2 c 4.719,0 8.533,-3.814 8.533,-8.533 V 294.4 c 10e-4,-1.63 -0.468,-3.243 -1.356,-4.616 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"M 375.467,277.333 V 217.6 h 68.267 v -17.067 h -76.8 c -4.719,0 -8.533,3.823 -8.533,8.533 v 76.8 c 0,4.719 3.814,8.533 8.533,8.533 h 128 V 277.332 H 375.467 Z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><path inkscape:connector-curvature=\"0\" d=\"M 332.8,106.667 H 8.533 C 3.823,106.667 0,110.49 0,115.2 v 273.067 c 0,4.719 3.823,8.533 8.533,8.533 H 76.8 V 379.733 H 17.067 v -256 h 307.2 v 256 H 162.133 V 396.8 H 332.8 c 4.719,0 8.533,-3.814 8.533,-8.533 V 115.2 c 0,-4.71 -3.814,-8.533 -8.533,-8.533 z\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"8.533\" y=\"345.60001\" width=\"51.200001\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"179.2\" y=\"345.60001\" width=\"145.067\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"469.33301\" y=\"345.60001\" width=\"34.132999\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"34.132999\" y=\"140.8\" width=\"298.66699\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"110.933\" y=\"379.733\" width=\"17.066999\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\"><g style=\"fill:#484f60;fill-opacity:1\"><rect x=\"401.06699\" y=\"379.733\" width=\"17.066999\" height=\"17.066999\" style=\"fill:#484f60;fill-opacity:1\" /></g></g><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /><g transform=\"matrix(0.06813214,0,0,0.06813214,7.6,6.2856989)\" style=\"fill:#484f60;fill-opacity:1\" /></svg>",
@@ -929,11 +959,13 @@ class ImageCarouselComponent {
         this._currentIndex = value;
         this._scrollCarouselToIndex();
     }
-    constructor(_ione, _appEventService, _changeDetector, _domSanitizer) {
+    constructor(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer) {
+        this.iconCacheService = iconCacheService;
         this._ione = _ione;
         this._appEventService = _appEventService;
         this._changeDetector = _changeDetector;
         this._domSanitizer = _domSanitizer;
+        this.icons = IconEnum;
         this.isPopupOpen = false;
         this.showRefresh = false;
         this.resizing = false;
@@ -1031,51 +1063,63 @@ class ImageCarouselComponent {
         const ctx = resizeCanvas.getContext('2d');
         const img = document.createElement('img');
         img.crossOrigin = 'anonymous';
+        const handleFallback = () => {
+            // When a CDN does not accept our tainted canvas, we fallback to the original source.
+            imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(source);
+            imageViewModel.originalSource = source;
+            this._changeDetector.detectChanges();
+        };
+        img.onerror = () => {
+            handleFallback();
+        };
         img.onload = () => {
-            ctx.imageSmoothingEnabled = true;
-            ctx.imageSmoothingQuality = 'high';
-            const ow = img.width;
-            const oh = img.height;
-            const aspect = ow / oh;
-            let newW = this._resizeCanvasHeight;
-            let newH = this._resizeCanvasHeight;
-            if (ow > oh) {
-                newH = this._resizeCanvasHeight / aspect;
+            try {
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                const aspect = img.width / img.height;
+                let newW = this._resizeCanvasHeight;
+                let newH = this._resizeCanvasHeight;
+                if (img.width > img.height) {
+                    newH = this._resizeCanvasHeight / aspect;
+                }
+                else {
+                    newW = this._resizeCanvasHeight * aspect;
+                }
+                resizeCanvas.width = Math.round(newW);
+                resizeCanvas.height = Math.round(newH);
+                ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
+                ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
+                const mime = this._handleMimeTypes(source);
+                const resizedSource = resizeCanvas.toDataURL(mime);
+                imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
+                imageViewModel.originalSource = source;
+                this._changeDetector.detectChanges();
             }
-            else {
-                newW = this._resizeCanvasHeight * aspect;
+            catch (error) {
+                handleFallback();
             }
-            resizeCanvas.width = Math.round(newW);
-            resizeCanvas.height = Math.round(newH);
-            // Ensure transparent background before drawing
-            ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
-            ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
-            const mime = this._detectPreferredMime(source);
-            const resizedSource = mime === 'image/jpeg'
-                ? resizeCanvas.toDataURL('image/jpeg', 0.92) // only if original was JPEG
-                : resizeCanvas.toDataURL(mime); // PNG/WebP keep alpha
-            imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
-            imageViewModel.originalSource = source;
-            this._changeDetector.detectChanges();
         };
         img.src = source;
     }
-    _detectPreferredMime(source) {
-        // Data URI check
-        const m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
-        if (m) {
-            const t = m[1].toLowerCase();
-            if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
-                return t;
+    _handleMimeTypes(imageSource) {
+        // When we got base64 data
+        if (imageSource.startsWith('data:')) {
+            const match = imageSource.match(/^data:(image\/(png|webp|jpeg|jpg))/i);
+            return match ? match[1].toLowerCase() : 'image/png';
+        }
+        // when we got an URL.
+        const extension = imageSource.substring(imageSource.lastIndexOf('.') + 1).toLowerCase();
+        switch (extension) {
+            case 'png':
+                return 'image/png';
+            case 'webp':
+                return 'image/webp';
+            case 'jpg':
+            case 'jpeg':
+                return 'image/jpeg';
+            default:
+                return 'image/png';
         }
-        const lower = source.toLowerCase();
-        if (lower.endsWith('.png'))
-            return 'image/png';
-        if (lower.endsWith('.webp'))
-            return 'image/webp';
-        if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
-            return 'image/jpeg';
-        return 'image/png';
     }
     _scrollCarouselToIndex() {
         if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
@@ -1089,147 +1133,137 @@ class ImageCarouselComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: ProductConnectorService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: IconCacheService }, { token: ProductConnectorService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ImageCarouselComponent, isStandalone: false, selector: "app-image-carousel", inputs: { showRefresh: "showRefresh", images: "images" }, host: { listeners: { "document:keydown.escape": "onEsc()", "window:resize": "handleWindowResize()", "swipeleft": "gotoNextSlide()", "swiperight": "gotoPrevSlide()" }, properties: { "class.resizing": "this.resizing" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-      <div id="product_page_carousel">
-        <div id="product_page_carousel_items">
-          @if (showLoader) {
-            <co-loader></co-loader>
+    <div id="product_page_carousel">
+      <div id="product_page_carousel_items">
+        @if (showLoader) {
+          <co-loader></co-loader>
+        }
+        <div #carousel class="inner-carousel">
+          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+          @if (imageViewModels[0]) {
+            <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
+              <img [src]="imageViewModels[0].source">
+            </div>
+          }
+          @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
+            <div class="carousel-item"
+                 [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
+              <img [src]="imageViewModel.source">
+            </div>
           }
-          <div #carousel class="inner-carousel">
-            <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
-            @if (imageViewModels[0]) {
-              <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
-                <img [src]="imageViewModels[0].source">
-              </div>
-            }
-            @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
-              <div class="carousel-item"
-                [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
-                <img [src]="imageViewModel.source">
-              </div>
-            }
-            @if (imageViewModels && imageViewModels.length > 1) {
-              <div class="carousel-scroller-layer">
-                @if (currentIndex > 0) {
-                  <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
-                }
-                @if (currentIndex < images.length - 1) {
-                  <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
-                }
-              </div>
-            }
-          </div>
-        </div>
-      
-        <div id="product_page_carousel_thumbs">
           @if (imageViewModels && imageViewModels.length > 1) {
-            <co-scroll-container class="scroll-container">
-              @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
-                <div class="carousel-thumb"
-                  [class.active]="index === currentIndex">
-                  <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
-                </div>
+            <div class="carousel-scroller-layer">
+              @if (currentIndex > 0) {
+                <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
               }
-            </co-scroll-container>
+              @if (currentIndex < images.length - 1) {
+                <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
+              }
+            </div>
           }
         </div>
       </div>
-      <!-- Modal (real popup) -->
-      @if (isPopupOpen) {
-        <div
-          class="image-modal"
-          (click)="closePopup()"
-          role="dialog"
-          aria-modal="true"
-          aria-label="Image preview"
-          >
-          <div class="image-modal__content" (click)="$event.stopPropagation()">
-            <button
-              class="image-modal__close"
-              type="button"
-              aria-label="Close"
-              (click)="closePopup()"
-              >
-              ×
-            </button>
-            <img [src]="selectedImage?.originalSource" alt="Image preview" />
-          </div>
+
+      <div id="product_page_carousel_thumbs">
+        @if (imageViewModels && imageViewModels.length > 1) {
+          <co-scroll-container class="scroll-container">
+            @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
+              <div class="carousel-thumb"
+                   [class.active]="index === currentIndex">
+                <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
+              </div>
+            }
+          </co-scroll-container>
+        }
+      </div>
+    </div>
+    
+    <div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isPopupOpen"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="closePopup()">
+      <div class="image-modal" role="dialog" aria-modal="true" aria-label="Image preview">
+        <div class="image-modal__content">
+          <button class="image-modal__close" type="button" aria-label="Close" (click)="closePopup()">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"></co-icon>
+          </button>
+          <img [src]="selectedImage?.originalSource" alt="Image preview"/>
         </div>
-      }
-      `, isInline: true, styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "component", type: i6.ScrollContainerComponent, selector: "co-scroll-container", inputs: ["vertical"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "component", type: i6.ScrollContainerComponent, selector: "co-scroll-container", inputs: ["vertical"] }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-image-carousel', template: `
-      <div id="product_page_carousel">
-        <div id="product_page_carousel_items">
-          @if (showLoader) {
-            <co-loader></co-loader>
+    <div id="product_page_carousel">
+      <div id="product_page_carousel_items">
+        @if (showLoader) {
+          <co-loader></co-loader>
+        }
+        <div #carousel class="inner-carousel">
+          <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
+          @if (imageViewModels[0]) {
+            <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
+              <img [src]="imageViewModels[0].source">
+            </div>
+          }
+          @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
+            <div class="carousel-item"
+                 [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
+              <img [src]="imageViewModel.source">
+            </div>
           }
-          <div #carousel class="inner-carousel">
-            <!-- This has been taken out of the for loop to prevent flashing images when updating. -->
-            @if (imageViewModels[0]) {
-              <div class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
-                <img [src]="imageViewModels[0].source">
-              </div>
-            }
-            @for (imageViewModel of imageViewModels.slice(1); track imageViewModel; let index = $index) {
-              <div class="carousel-item"
-                [id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
-                <img [src]="imageViewModel.source">
-              </div>
-            }
-            @if (imageViewModels && imageViewModels.length > 1) {
-              <div class="carousel-scroller-layer">
-                @if (currentIndex > 0) {
-                  <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
-                }
-                @if (currentIndex < images.length - 1) {
-                  <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
-                }
-              </div>
-            }
-          </div>
-        </div>
-      
-        <div id="product_page_carousel_thumbs">
           @if (imageViewModels && imageViewModels.length > 1) {
-            <co-scroll-container class="scroll-container">
-              @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
-                <div class="carousel-thumb"
-                  [class.active]="index === currentIndex">
-                  <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
-                </div>
+            <div class="carousel-scroller-layer">
+              @if (currentIndex > 0) {
+                <div class="carousel-item-scroller prev" (click)="gotoPrevSlide()"></div>
               }
-            </co-scroll-container>
+              @if (currentIndex < images.length - 1) {
+                <div class="carousel-item-scroller next" (click)="gotoNextSlide()"></div>
+              }
+            </div>
           }
         </div>
       </div>
-      <!-- Modal (real popup) -->
-      @if (isPopupOpen) {
-        <div
-          class="image-modal"
-          (click)="closePopup()"
-          role="dialog"
-          aria-modal="true"
-          aria-label="Image preview"
-          >
-          <div class="image-modal__content" (click)="$event.stopPropagation()">
-            <button
-              class="image-modal__close"
-              type="button"
-              aria-label="Close"
-              (click)="closePopup()"
-              >
-              ×
-            </button>
-            <img [src]="selectedImage?.originalSource" alt="Image preview" />
-          </div>
+
+      <div id="product_page_carousel_thumbs">
+        @if (imageViewModels && imageViewModels.length > 1) {
+          <co-scroll-container class="scroll-container">
+            @for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
+              <div class="carousel-thumb"
+                   [class.active]="index === currentIndex">
+                <img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
+              </div>
+            }
+          </co-scroll-container>
+        }
+      </div>
+    </div>
+    
+    <div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isPopupOpen"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="closePopup()">
+      <div class="image-modal" role="dialog" aria-modal="true" aria-label="Image preview">
+        <div class="image-modal__content">
+          <button class="image-modal__close" type="button" aria-label="Close" (click)="closePopup()">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"></co-icon>
+          </button>
+          <img [src]="selectedImage?.originalSource" alt="Image preview"/>
         </div>
-      }
-      `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [{ type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { carousel: [{
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74b77f;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}.image-modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@media screen and (max-width: 650px){#product_page_carousel_thumbs{height:57px!important}#product_page_carousel_thumbs .carousel-thumb img{height:50px!important}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [{ type: IconCacheService }, { type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { carousel: [{
                 type: ViewChild,
                 args: ['carousel', { read: ElementRef }]
             }], onEsc: [{
@@ -1808,10 +1842,15 @@ class ProductRelatedComponent {
     async _loadImages() {
         this.articleViewModels.forEach(avm => {
             if (avm.article.image) {
-                this._iOne.getImageForCoDocument(avm.article.image, false).then(imageContent => avm.imageData = imageContent.image);
+                this._iOne.getImageForCoDocument(avm.article.image, false).then(imageContent => this._handleImageData(avm, imageContent));
             }
         });
     }
+    _handleImageData(avm, imageContent) {
+        if (imageContent && imageContent.image) {
+            avm.imageData = imageContent.image;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductRelatedComponent, deps: [{ token: ProductConnectorService }, { token: ProductEventService }, { token: ProductConnectorAdapterService }, { token: ProductSettingsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductRelatedComponent, isStandalone: false, selector: "app-product-related", inputs: { refType: "refType", label: "label", externalSource: "externalSource", isSmallModus: "isSmallModus", createFrozenArticle: "createFrozenArticle", articles: "articles" }, ngImport: i0, template: `
         @if (articles && articles.length > 0) {
@@ -2659,6 +2698,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['class.resizing']
             }] } });
 
+class PresetDialogComponent {
+    showClass() {
+        return true;
+    }
+    constructor(iconCache) {
+        this.iconCache = iconCache;
+        this.icon = IconEnum;
+        this.presetId = undefined;
+        this.cancelSavePreset = new EventEmitter();
+        this.overwritePreset = new EventEmitter();
+        this.PresetDialogType = PresetDialogType;
+    }
+    closeAndCancelPreset() {
+        this.cancelSavePreset.emit(true);
+    }
+    closeAndOverwritePreset() {
+        this.overwritePreset.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetDialogComponent, deps: [{ token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PresetDialogComponent, isStandalone: false, selector: "co-preset-dialog", inputs: { type: "type", presetId: "presetId" }, outputs: { cancelSavePreset: "cancelSavePreset", overwritePreset: "overwritePreset" }, host: { properties: { "class.co-preset-dialog": "this.showClass" } }, ngImport: i0, template: `
+    <div class="preset-dialog-wrap">
+      <div class="preset-dialog-container">
+        <div class="container-header">
+          <div class="header-info">
+            <h3 [textContent]="'PRESET_SAVE_AS' | localize"></h3>
+          </div>
+          <div class="close-icon" (click)="closeAndCancelPreset()">
+            <co-icon class="fullscreen-button"
+                     [iconData]="iconCache.getIcon(icon.CrossSkinny)"
+                     (click)="closeAndCancelPreset()"></co-icon>
+          </div>
+        </div>
+
+        <div class="body">
+          @if (presetId !== undefined && type === PresetDialogType.warning) {
+            <p [textContent]="'PRESET_OVERWRITE_TEXT' | localize"></p>
+          }
+          @if (presetId !== undefined && type === PresetDialogType.success) {
+            <p [textContent]="'PRESET_SAVED_TEXT' | localize"></p>
+          }
+        </div>
+
+        <div class="close-button-container">
+          @if (presetId !== undefined && type === PresetDialogType.warning) {
+            <button class="ok-button" (click)="closeAndOverwritePreset()">
+              <co-icon [iconData]="iconCache.getIcon(icon.SaveSkinny)" (click)="closeAndOverwritePreset()"></co-icon>
+            </button>
+          }
+          <button class="close-button" (click)="closeAndCancelPreset()">
+            <co-icon [iconData]="iconCache.getIcon(icon.CrossSkinny)" (click)="closeAndCancelPreset()"></co-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host .preset-dialog-wrap{background:#00000080;position:fixed;z-index:1000;inset:0;display:flex;justify-content:center;align-items:center;font-family:iOneMontserrat}:host .preset-dialog-wrap .preset-dialog-container{background:#fff;max-width:500px;width:75vw;max-height:90vh;border:1px solid #F8F8F8}:host .preset-dialog-wrap .preset-dialog-container .container-header{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}:host .preset-dialog-wrap .preset-dialog-container .container-header .header-info h3{display:flex;align-items:center}:host .preset-dialog-wrap .preset-dialog-container .container-header .header-info h3 co-icon{margin-right:10px}:host .preset-dialog-wrap .preset-dialog-container .container-header .close-icon{cursor:pointer}:host .preset-dialog-wrap .preset-dialog-container .body{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}:host .preset-dialog-wrap .preset-dialog-container .close-button-container{display:flex;justify-content:center;padding:10px}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button{cursor:pointer;border:none;color:#fff;padding:8px;box-shadow:0 3px 3px #0000004d;height:auto;width:auto;margin:0 3px;border-radius:3px}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button ::ng-deep co-icon [fill]{fill:#fff}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon{height:25px;width:25px}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon svg{fill:#fff}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon svg path,:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon svg polygon{fill:#fff}:host .preset-dialog-wrap .preset-dialog-container .close-button-container .ok-button{background:#1a73e8}:host .preset-dialog-wrap .preset-dialog-container .close-button-container .close-button{background:#475060}:host ::ng-deep .content-wrapper{width:auto!important}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'co-preset-dialog', template: `
+    <div class="preset-dialog-wrap">
+      <div class="preset-dialog-container">
+        <div class="container-header">
+          <div class="header-info">
+            <h3 [textContent]="'PRESET_SAVE_AS' | localize"></h3>
+          </div>
+          <div class="close-icon" (click)="closeAndCancelPreset()">
+            <co-icon class="fullscreen-button"
+                     [iconData]="iconCache.getIcon(icon.CrossSkinny)"
+                     (click)="closeAndCancelPreset()"></co-icon>
+          </div>
+        </div>
+
+        <div class="body">
+          @if (presetId !== undefined && type === PresetDialogType.warning) {
+            <p [textContent]="'PRESET_OVERWRITE_TEXT' | localize"></p>
+          }
+          @if (presetId !== undefined && type === PresetDialogType.success) {
+            <p [textContent]="'PRESET_SAVED_TEXT' | localize"></p>
+          }
+        </div>
+
+        <div class="close-button-container">
+          @if (presetId !== undefined && type === PresetDialogType.warning) {
+            <button class="ok-button" (click)="closeAndOverwritePreset()">
+              <co-icon [iconData]="iconCache.getIcon(icon.SaveSkinny)" (click)="closeAndOverwritePreset()"></co-icon>
+            </button>
+          }
+          <button class="close-button" (click)="closeAndCancelPreset()">
+            <co-icon [iconData]="iconCache.getIcon(icon.CrossSkinny)" (click)="closeAndCancelPreset()"></co-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  `, standalone: false, styles: [":host .preset-dialog-wrap{background:#00000080;position:fixed;z-index:1000;inset:0;display:flex;justify-content:center;align-items:center;font-family:iOneMontserrat}:host .preset-dialog-wrap .preset-dialog-container{background:#fff;max-width:500px;width:75vw;max-height:90vh;border:1px solid #F8F8F8}:host .preset-dialog-wrap .preset-dialog-container .container-header{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}:host .preset-dialog-wrap .preset-dialog-container .container-header .header-info h3{display:flex;align-items:center}:host .preset-dialog-wrap .preset-dialog-container .container-header .header-info h3 co-icon{margin-right:10px}:host .preset-dialog-wrap .preset-dialog-container .container-header .close-icon{cursor:pointer}:host .preset-dialog-wrap .preset-dialog-container .body{display:flex;justify-content:space-between;border-bottom:1px solid #F8F8F8;padding:25px;box-sizing:border-box;align-items:center}:host .preset-dialog-wrap .preset-dialog-container .close-button-container{display:flex;justify-content:center;padding:10px}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button{cursor:pointer;border:none;color:#fff;padding:8px;box-shadow:0 3px 3px #0000004d;height:auto;width:auto;margin:0 3px;border-radius:3px}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button ::ng-deep co-icon [fill]{fill:#fff}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon{height:25px;width:25px}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon svg{fill:#fff}:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon svg path,:host .preset-dialog-wrap .preset-dialog-container .close-button-container button .co-icon svg polygon{fill:#fff}:host .preset-dialog-wrap .preset-dialog-container .close-button-container .ok-button{background:#1a73e8}:host .preset-dialog-wrap .preset-dialog-container .close-button-container .close-button{background:#475060}:host ::ng-deep .content-wrapper{width:auto!important}\n"] }]
+        }], ctorParameters: () => [{ type: IconCacheService }], propDecorators: { showClass: [{
+                type: HostBinding,
+                args: ['class.co-preset-dialog']
+            }], type: [{
+                type: Input
+            }], presetId: [{
+                type: Input
+            }], cancelSavePreset: [{
+                type: Output
+            }], overwritePreset: [{
+                type: Output
+            }] } });
+
 class ProductPageComponent {
     set sku(value) {
         if (value) {
@@ -2711,13 +2857,12 @@ class ProductPageComponent {
     get currentView() {
         return this._currentView;
     }
-    constructor(_ione, _renderer, _changeDetector, iconCache, settingsService, appEventService) {
+    constructor(_ione, iconCache, settingsService, appEventService, _changeDetector) {
         this._ione = _ione;
-        this._renderer = _renderer;
-        this._changeDetector = _changeDetector;
         this.iconCache = iconCache;
         this.settingsService = settingsService;
         this.appEventService = appEventService;
+        this._changeDetector = _changeDetector;
         this.icon = IconEnum;
         this.createFrozenArticle = true;
         this.isReturn = false;
@@ -2731,6 +2876,9 @@ class ProductPageComponent {
         this.showAddToCart = false;
         this.fullscreenAnimationEnd = false;
         this.settingsLoaded = false;
+        this.showPresetDialog = false;
+        this.configPresetId = undefined;
+        this.presetDialogType = PresetDialogType.info;
         this._fullScreen = false;
         this._subs = [];
         this._subs.push(this.appEventService.onForceRenderImage.subscribe((x) => {
@@ -2759,7 +2907,7 @@ class ProductPageComponent {
             if (this.selections.nativeElement) {
                 this.selections.nativeElement.getRenderForRenderCarousel(renderParameters);
             }
-        }));
+        }), this.appEventService.onArticleReceived.subscribe(article => this.setConfigPresetId(article.configPresetId)));
     }
     ngOnInit() {
         if (this._settings) {
@@ -2770,8 +2918,6 @@ class ProductPageComponent {
             this._settings = this.settingsService.settings;
         }
     }
-    ngAfterViewInit() {
-    }
     ngOnDestroy() {
         this._subs.forEach(s => s.unsubscribe());
         if (this._initializedSub) {
@@ -2838,187 +2984,241 @@ class ProductPageComponent {
     handlePopUpChange(event) {
         this.showRelatedProductsPopup = event;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, deps: [{ token: ProductConnectorService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: IconCacheService }, { token: ProductSettingsService }, { token: ProductEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    setConfigPresetId(presetId) {
+        if (presetId) {
+            this.configPresetId = presetId;
+        }
+    }
+    handleSavePreset() {
+        if (this.configPresetId !== undefined) {
+            // prompt warning
+            this.presetDialogType = PresetDialogType.warning;
+            this.showPresetDialog = true;
+        }
+        else {
+            this._savePreset();
+        }
+    }
+    handleCancelSavePreset(event) {
+        this.presetDialogType = PresetDialogType.info;
+        this.showPresetDialog = false;
+    }
+    handleOverwritePreset(event) {
+        this.presetDialogType = PresetDialogType.info;
+        this.showPresetDialog = false;
+        this._savePreset();
+    }
+    _savePreset() {
+        this._ione.savePreset().then((success) => {
+            if (success) {
+                this.presetDialogType = PresetDialogType.success;
+                this.showPresetDialog = true;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, deps: [{ token: ProductConnectorService }, { token: IconCacheService }, { token: ProductSettingsService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductPageComponent, isStandalone: false, selector: "app-product-page", inputs: { sku: "sku", settings: "settings", externalSource: "externalSource", createFrozenArticle: "createFrozenArticle", isReturn: "isReturn", showRelatedProductsPopup: "showRelatedProductsPopup", enableRenderCarousel: "enableRenderCarousel" }, outputs: { openStockEvent: "openStockEvent" }, viewQueries: [{ propertyName: "configurator", first: true, predicate: ["configurator"], descendants: true, read: ElementRef }, { propertyName: "selections", first: true, predicate: ["selections"], descendants: true, read: ElementRef }, { propertyName: "fullscreenbutton", first: true, predicate: ["fullscreenbutton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
-        @if (settingsLoaded) {
-            <div class="page-wrapper">
-                <div class="page-wrapper-content">
-                    <div class="page-wrapper-left">
-                        <div class="product-image-container">
-                            <div class="product-page-block-selector-type">
-                                <app-product-selector-type class="default-padding"
-                                                           [(currentType)]="currentView"
-                                                           [show2D]="configurable"
-                                                           [show3D]="threeD"
-                                ></app-product-selector-type>
-                            </div>
-                            <div class="product-page-block-image default-padding" [class.full]="fullScreen">
-                                @if (!enableRenderCarousel) {
-                                    <app-image-carousel
-                                            [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
-                                            [images]="article?.images"
-                                            [showRefresh]="configurable && threeD">
-                                    </app-image-carousel>
-                                }
-                                @if (enableRenderCarousel) {
-                                    <app-render-carousel
-                                            [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
-                                            [article]="article">
-                                    </app-render-carousel>
-                                }
-                                @if (settingsLoaded && this.configurable) {
-                                    <threed-configurator
-                                            #configurator
-                                            class="threed-configurator"
-                                            [class.configurator-full-screen]="fullScreen"
-                                            [@toggleVisibilityByState]="show3D ? 'show' : 'hide'"
-                                            [@toggleFullScreen]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                                    </threed-configurator>
-                                }
-                                @if (show3D) {
-                                    <co-icon #fullscreenbutton class="fullscreen-button"
-                                             [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                                             [iconData]="iconCache.getIcon(fullScreenIcon)"
-                                             (click)="showFullScreen()"></co-icon>
-                                }
-                                @if (show3D && fullScreen) {
-                                    <co-icon class="threed-watermark"
-                                             [iconData]="iconCache.getIcon(icon.Logo)"></co-icon>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                    <div class="page-wrapper-right">
-                        <div class="product-page-block-description">
-                            <app-product-description class="default-padding" [article]="article"></app-product-description>
-                        </div>
-                        <div class="product-page-block-additional">
-                            <div class="product-page-block-additional-description">
-                                <app-product-additional-description class="default-padding" [article]="article"></app-product-additional-description>
-                            </div>
-                            <div class="product-page-block-price" [class.full]="configuring">
-                                @if (!configuring) {
-                                    <app-product-price class="s-padding"
-                                                       [pricing]="article?.pricing"
-                                                       [configurable]="configurable"
-                                    ></app-product-price>
-                                }
-                                @if (settingsLoaded) {
-                                    <threed-selections #selections class="threed-selections"
-                                                       [class.show-selections]="configuring"
-                                                       [@toggleFullScreenRight]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                                                       [class.default-padding]="!fullScreen"
-                                                       [class.show-full-screen]="fullScreen"
-                                                       [class.mini-scrollbar]="fullScreen"
-                                                       [sku]="sku"
-                                                       [settings]="settings"
-                                                       (onUserActionFromThreeD)="configuring = true"
-                                                       (instanceSet)="setInstance($event)"
-                                                       (onImageReceived)="appEventService.onImageReceived.next($event)"
-                                                       (onRenderStarted)="appEventService.onRenderStarted.next()"
-                                                       (onDraftRenderImageReceived)="appEventService.onDraftRenderImageReceived.next($event)"
-                                                       (onArticleReceived)="appEventService.onArticleReceived.next($event.detail)"
-                                                       (onSelectionsReceived)="appEventService.onSelectionsReceived.next($event.detail)"
-                                                       (onArticleInfoReceived)="appEventService.onArticleInfoReceived.next($event.detail)"
-                                                       (onAnswersAvailable)="appEventService.onAnswersAvailable.next($event.detail)"
-                                                       (onReadyToRender)="appEventService.onReadyToRender.next($event.detail)"
-                                                       (onRenderImageReceived)="appEventService.onRenderImageReceived.next($event.detail)"
-                                    ></threed-selections>
-                                }
-                            </div>
-                            @if (!configuring) {
-                                <div class="product-page-block-addtocart no-padding product-action-buttons" [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                                    <app-product-addtocart
-                                            [configurable]="configurable"
-                                            [createFrozenArticle]="createFrozenArticle"
-                                            [configuring]="configuring"
-                                            [showAddToCart]="showAddToCart"
-                                            [article]="article"
-                                            [externalSource]="externalSource"
-                                            [isReturn]="isReturn"
-                                            (startConfiguration)="handleStartConfiguration()"
-                                            (showRelatedPopup)="handlePopUpChange($event)"
-                                    ></app-product-addtocart>
-                                </div>
-                            }
-                            @if (configuring) {
-                                <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
-                                    <app-product-addtocart class="default-padding"
-                                                           [configurable]="false"
-                                                           [fullscreen]="fullScreen"
-                                                           [showAddToCart]="showAddToCart"
-                                                           [configuring]="configuring"
-                                                           [article]="article"
-                                                           [externalSource]="externalSource"
-                                                           [isReturn]="isReturn"
-                                                           (startConfiguration)="handleStartConfiguration()"
-                                    ></app-product-addtocart>
-                                </div>
-                            }
-                            <div class="product-page-block-variants">
-                                @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                                    <app-product-related class="no-padding"
-                                                         [externalSource]="externalSource"
-                                                         [articles]="article?.relatedArticles" [refType]="64" [label]="'VARIANTS' | localize"></app-product-related>
-                                }
-                            </div>
-                            <div class="product-page-block-stock">
-                                <app-product-stock class="no-padding" [goodId]="article?.goodId" (openStockEvent)="openStock()"></app-product-stock>
-                            </div>
-                            <div class="product-page-block-delivery">
-                                <app-product-delivery class="no-padding" [stockAndDelivery]="stockAndDelivery"></app-product-delivery>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="page-wrapper-content">
-                    @if (article) {
-                        <div class="page-wrapper-left">
-                            <app-product-info-tabs class="no-padding" [article]="article"></app-product-info-tabs>
-                        </div>
-                    }
-                    <div class="page-wrapper-right">
-                        <div class="product-page-block-related s-padding">
-                            @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                                <app-product-related
-                                        [externalSource]="externalSource"
-                                        [articles]="article?.relatedArticles"
-                                        [refType]="1"
-                                        [label]="'RELATED_PRODUCTS' | localize">
-                                </app-product-related>
-                            }
-                        </div>
-                    </div>
+    @if (settingsLoaded) {
+      <div class="page-wrapper">
+        <div class="page-wrapper-content">
+          <div class="page-wrapper-left">
+            <div class="product-image-container">
+              <div class="product-page-block-selector-type">
+                <app-product-selector-type class="default-padding"
+                                           [(currentType)]="currentView"
+                                           [show2D]="configurable"
+                                           [show3D]="threeD"
+                ></app-product-selector-type>
+              </div>
+              <div class="product-page-block-image default-padding" [class.full]="fullScreen">
+                @if (!enableRenderCarousel) {
+                  <app-image-carousel
+                    [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
+                    [images]="article?.images"
+                    [showRefresh]="configurable && threeD">
+                  </app-image-carousel>
+                }
+                @if (enableRenderCarousel) {
+                  <app-render-carousel
+                    [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
+                    [article]="article">
+                  </app-render-carousel>
+                }
+                @if (settingsLoaded && this.configurable) {
+                  <threed-configurator
+                    #configurator
+                    class="threed-configurator"
+                    [class.configurator-full-screen]="fullScreen"
+                    [@toggleVisibilityByState]="show3D ? 'show' : 'hide'"
+                    [@toggleFullScreen]="fullScreen ? 'fullscreen' : 'halfscreen'">
+                  </threed-configurator>
+                }
+                @if (show3D) {
+                  <co-icon #fullscreenbutton class="fullscreen-button"
+                           [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
+                           [iconData]="iconCache.getIcon(fullScreenIcon)"
+                           (click)="showFullScreen()"></co-icon>
+                }
+                @if (show3D && fullScreen) {
+                  <co-icon class="threed-watermark"
+                           [iconData]="iconCache.getIcon(icon.Logo)"></co-icon>
+                }
+              </div>
+            </div>
+          </div>
+          <div class="page-wrapper-right">
+            <div class="product-page-block-description">
+              <app-product-description class="default-padding" [article]="article"></app-product-description>
+            </div>
+            <div class="product-page-block-additional">
+              <div class="product-page-block-additional-description">
+                <app-product-additional-description class="default-padding" [article]="article"></app-product-additional-description>
+              </div>
+              <div class="product-page-block-price" [class.full]="configuring">
+                @if (configuring && this.settingsService.settings.options.showSaveAsPresetButton) {
+                  <div class="preset-container">
+                    <co-button
+                      class="save-preset-button"
+                      [iconData]="iconCache.getIcon(icon.SaveDisk)"
+                      [label]="'PRESET_SAVE_AS' | localize"
+                      (onClick)="handleSavePreset()"
+                    ></co-button>
+                  </div>
+                }
+                @if (!configuring) {
+                  <app-product-price class="s-padding"
+                                     [pricing]="article?.pricing"
+                                     [configurable]="configurable"
+                  ></app-product-price>
+                }
+
+                @if (settingsLoaded) {
+                  <threed-selections #selections class="threed-selections"
+                                     [class.show-selections]="configuring"
+                                     [@toggleFullScreenRight]="fullScreen ? 'fullscreen' : 'halfscreen'"
+                                     [class.default-padding]="!fullScreen"
+                                     [class.show-full-screen]="fullScreen"
+                                     [class.mini-scrollbar]="fullScreen"
+                                     [sku]="sku"
+                                     [settings]="settings"
+                                     (onUserActionFromThreeD)="configuring = true"
+                                     (instanceSet)="setInstance($event)"
+                                     (onImageReceived)="appEventService.onImageReceived.next($event)"
+                                     (onRenderStarted)="appEventService.onRenderStarted.next()"
+                                     (onDraftRenderImageReceived)="appEventService.onDraftRenderImageReceived.next($event)"
+                                     (onArticleReceived)="appEventService.onArticleReceived.next($event.detail)"
+                                     (onSelectionsReceived)="appEventService.onSelectionsReceived.next($event.detail)"
+                                     (onArticleInfoReceived)="appEventService.onArticleInfoReceived.next($event.detail)"
+                                     (onAnswersAvailable)="appEventService.onAnswersAvailable.next($event.detail)"
+                                     (onReadyToRender)="appEventService.onReadyToRender.next($event.detail)"
+                                     (onRenderImageReceived)="appEventService.onRenderImageReceived.next($event.detail)"
+                  ></threed-selections>
+                }
+              </div>
+              @if (!configuring) {
+                <div class="product-page-block-addtocart no-padding product-action-buttons"
+                     [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
+                  <app-product-addtocart
+                    [configurable]="configurable"
+                    [createFrozenArticle]="createFrozenArticle"
+                    [configuring]="configuring"
+                    [showAddToCart]="showAddToCart"
+                    [article]="article"
+                    [externalSource]="externalSource"
+                    [isReturn]="isReturn"
+                    (startConfiguration)="handleStartConfiguration()"
+                    (showRelatedPopup)="handlePopUpChange($event)"
+                  ></app-product-addtocart>
                 </div>
-                <div class="page-wrapper-content no-top-margin">
-                    <div class="page-wrapper-full">
-                        <div class="product-page-block-alternatives s-padding">
-                            @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                                <app-product-related
-                                        [externalSource]="externalSource"
-                                        [articles]="article?.relatedArticles"
-                                        [refType]="4"
-                                        [isSmallModus]="false"
-                                        [label]="'ALTERNATIVE_PRODUCTS' | localize">
-                                </app-product-related>
-                            }
-                        </div>
-                    </div>
+              }
+              @if (configuring) {
+                <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
+                  <app-product-addtocart class="default-padding"
+                                         [configurable]="false"
+                                         [fullscreen]="fullScreen"
+                                         [showAddToCart]="showAddToCart"
+                                         [configuring]="configuring"
+                                         [article]="article"
+                                         [externalSource]="externalSource"
+                                         [isReturn]="isReturn"
+                                         (startConfiguration)="handleStartConfiguration()"
+                  ></app-product-addtocart>
                 </div>
-                @if (showRelatedProductsPopup) {
-                    <div>
-                        <co-product-dialog
-                                [mainArticle]="article"
-                                [articles]="article?.relatedArticles"
-                                [refType]="1"
-                                (closeRelatedPopup)="handlePopUpChange($event)"
-                        >
-                        </co-product-dialog>
-                    </div>
+              }
+              <div class="product-page-block-variants">
+                @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                  <app-product-related class="no-padding"
+                                       [externalSource]="externalSource"
+                                       [articles]="article?.relatedArticles" [refType]="64"
+                                       [label]="'VARIANTS' | localize"></app-product-related>
                 }
+              </div>
+              <div class="product-page-block-stock">
+                <app-product-stock class="no-padding" [goodId]="article?.goodId" (openStockEvent)="openStock()"></app-product-stock>
+              </div>
+              <div class="product-page-block-delivery">
+                <app-product-delivery class="no-padding" [stockAndDelivery]="stockAndDelivery"></app-product-delivery>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="page-wrapper-content">
+          @if (article) {
+            <div class="page-wrapper-left">
+              <app-product-info-tabs class="no-padding" [article]="article"></app-product-info-tabs>
             </div>
+          }
+          <div class="page-wrapper-right">
+            <div class="product-page-block-related s-padding">
+              @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                <app-product-related
+                  [externalSource]="externalSource"
+                  [articles]="article?.relatedArticles"
+                  [refType]="1"
+                  [label]="'RELATED_PRODUCTS' | localize">
+                </app-product-related>
+              }
+            </div>
+          </div>
+        </div>
+        <div class="page-wrapper-content no-top-margin">
+          <div class="page-wrapper-full">
+            <div class="product-page-block-alternatives s-padding">
+              @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                <app-product-related
+                  [externalSource]="externalSource"
+                  [articles]="article?.relatedArticles"
+                  [refType]="4"
+                  [isSmallModus]="false"
+                  [label]="'ALTERNATIVE_PRODUCTS' | localize">
+                </app-product-related>
+              }
+            </div>
+          </div>
+        </div>
+        @if (showRelatedProductsPopup) {
+          <div>
+            <co-product-dialog
+              [mainArticle]="article"
+              [articles]="article?.relatedArticles"
+              [refType]="1"
+              (closeRelatedPopup)="handlePopUpChange($event)"
+            >
+            </co-product-dialog>
+          </div>
         }
-    `, isInline: true, styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child,.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"], dependencies: [{ kind: "component", type: ProductSelectorTypeComponent, selector: "app-product-selector-type", inputs: ["show2D", "show3D", "showRenderCarousel", "currentType"], outputs: ["onIconClick", "currentTypeChange"] }, { kind: "component", type: ImageCarouselComponent, selector: "app-image-carousel", inputs: ["showRefresh", "images"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductDescriptionComponent, selector: "app-product-description", inputs: ["article"] }, { kind: "component", type: ProductAdditionalDescriptionComponent, selector: "app-product-additional-description", inputs: ["article"] }, { kind: "component", type: ProductPriceComponent, selector: "app-product-price", inputs: ["pricing", "configurable"] }, { kind: "component", type: ProductAddtocartComponent, selector: "app-product-addtocart", inputs: ["article", "externalSource", "createFrozenArticle", "configurable", "configuring", "showAddToCart", "isReturn", "fullscreen", "quantity"], outputs: ["startConfiguration", "addToCartClick", "addToQuoteClick", "showRelatedPopup"] }, { kind: "component", type: ProductRelatedComponent, selector: "app-product-related", inputs: ["refType", "label", "externalSource", "isSmallModus", "createFrozenArticle", "articles"] }, { kind: "component", type: ProductStockComponent, selector: "app-product-stock", inputs: ["goodId"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductDeliveryComponent, selector: "app-product-delivery", inputs: ["stockAndDelivery"] }, { kind: "component", type: ProductInfoTabsComponent, selector: "app-product-info-tabs", inputs: ["article"] }, { kind: "component", type: ProductDialogComponent, selector: "co-product-dialog", inputs: ["refType", "mainArticle", "articles"], outputs: ["closeRelatedPopup"] }, { kind: "component", type: RenderCarouselComponent, selector: "app-render-carousel", inputs: ["showRefresh", "article"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
+      </div>
+
+      <co-preset-dialog
+        *ngIf="showPresetDialog"
+        [type]="presetDialogType"
+        [presetId]="configPresetId"
+        (cancelSavePreset)="handleCancelSavePreset($event)"
+        (overwritePreset)="handleOverwritePreset($event)"
+      >
+      </co-preset-dialog>
+    }
+  `, isInline: true, styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child,.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.preset-container{display:flex;justify-content:right}.preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.preset-container .save-preset-button:hover{background:#74b77f}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProductSelectorTypeComponent, selector: "app-product-selector-type", inputs: ["show2D", "show3D", "showRenderCarousel", "currentType"], outputs: ["onIconClick", "currentTypeChange"] }, { kind: "component", type: ImageCarouselComponent, selector: "app-image-carousel", inputs: ["showRefresh", "images"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "component", type: ProductDescriptionComponent, selector: "app-product-description", inputs: ["article"] }, { kind: "component", type: ProductAdditionalDescriptionComponent, selector: "app-product-additional-description", inputs: ["article"] }, { kind: "component", type: ProductPriceComponent, selector: "app-product-price", inputs: ["pricing", "configurable"] }, { kind: "component", type: ProductAddtocartComponent, selector: "app-product-addtocart", inputs: ["article", "externalSource", "createFrozenArticle", "configurable", "configuring", "showAddToCart", "isReturn", "fullscreen", "quantity"], outputs: ["startConfiguration", "addToCartClick", "addToQuoteClick", "showRelatedPopup"] }, { kind: "component", type: ProductRelatedComponent, selector: "app-product-related", inputs: ["refType", "label", "externalSource", "isSmallModus", "createFrozenArticle", "articles"] }, { kind: "component", type: ProductStockComponent, selector: "app-product-stock", inputs: ["goodId"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductDeliveryComponent, selector: "app-product-delivery", inputs: ["stockAndDelivery"] }, { kind: "component", type: ProductInfoTabsComponent, selector: "app-product-info-tabs", inputs: ["article"] }, { kind: "component", type: ProductDialogComponent, selector: "co-product-dialog", inputs: ["refType", "mainArticle", "articles"], outputs: ["closeRelatedPopup"] }, { kind: "component", type: RenderCarouselComponent, selector: "app-render-carousel", inputs: ["showRefresh", "article"] }, { kind: "component", type: i6.ButtonComponent, selector: "co-button", inputs: ["label", "iconData", "iconDataRight", "isToggleButton", "isToggled", "hidden", "disabled"], outputs: ["onClick", "clickedWhileDisabled", "isToggledChange"] }, { kind: "component", type: PresetDialogComponent, selector: "co-preset-dialog", inputs: ["type", "presetId"], outputs: ["cancelSavePreset", "overwritePreset"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
             trigger('toggleFullScreen', [
                 state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
                 state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
@@ -3054,185 +3254,207 @@ class ProductPageComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-page', template: `
-        @if (settingsLoaded) {
-            <div class="page-wrapper">
-                <div class="page-wrapper-content">
-                    <div class="page-wrapper-left">
-                        <div class="product-image-container">
-                            <div class="product-page-block-selector-type">
-                                <app-product-selector-type class="default-padding"
-                                                           [(currentType)]="currentView"
-                                                           [show2D]="configurable"
-                                                           [show3D]="threeD"
-                                ></app-product-selector-type>
-                            </div>
-                            <div class="product-page-block-image default-padding" [class.full]="fullScreen">
-                                @if (!enableRenderCarousel) {
-                                    <app-image-carousel
-                                            [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
-                                            [images]="article?.images"
-                                            [showRefresh]="configurable && threeD">
-                                    </app-image-carousel>
-                                }
-                                @if (enableRenderCarousel) {
-                                    <app-render-carousel
-                                            [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
-                                            [article]="article">
-                                    </app-render-carousel>
-                                }
-                                @if (settingsLoaded && this.configurable) {
-                                    <threed-configurator
-                                            #configurator
-                                            class="threed-configurator"
-                                            [class.configurator-full-screen]="fullScreen"
-                                            [@toggleVisibilityByState]="show3D ? 'show' : 'hide'"
-                                            [@toggleFullScreen]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                                    </threed-configurator>
-                                }
-                                @if (show3D) {
-                                    <co-icon #fullscreenbutton class="fullscreen-button"
-                                             [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                                             [iconData]="iconCache.getIcon(fullScreenIcon)"
-                                             (click)="showFullScreen()"></co-icon>
-                                }
-                                @if (show3D && fullScreen) {
-                                    <co-icon class="threed-watermark"
-                                             [iconData]="iconCache.getIcon(icon.Logo)"></co-icon>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                    <div class="page-wrapper-right">
-                        <div class="product-page-block-description">
-                            <app-product-description class="default-padding" [article]="article"></app-product-description>
-                        </div>
-                        <div class="product-page-block-additional">
-                            <div class="product-page-block-additional-description">
-                                <app-product-additional-description class="default-padding" [article]="article"></app-product-additional-description>
-                            </div>
-                            <div class="product-page-block-price" [class.full]="configuring">
-                                @if (!configuring) {
-                                    <app-product-price class="s-padding"
-                                                       [pricing]="article?.pricing"
-                                                       [configurable]="configurable"
-                                    ></app-product-price>
-                                }
-                                @if (settingsLoaded) {
-                                    <threed-selections #selections class="threed-selections"
-                                                       [class.show-selections]="configuring"
-                                                       [@toggleFullScreenRight]="fullScreen ? 'fullscreen' : 'halfscreen'"
-                                                       [class.default-padding]="!fullScreen"
-                                                       [class.show-full-screen]="fullScreen"
-                                                       [class.mini-scrollbar]="fullScreen"
-                                                       [sku]="sku"
-                                                       [settings]="settings"
-                                                       (onUserActionFromThreeD)="configuring = true"
-                                                       (instanceSet)="setInstance($event)"
-                                                       (onImageReceived)="appEventService.onImageReceived.next($event)"
-                                                       (onRenderStarted)="appEventService.onRenderStarted.next()"
-                                                       (onDraftRenderImageReceived)="appEventService.onDraftRenderImageReceived.next($event)"
-                                                       (onArticleReceived)="appEventService.onArticleReceived.next($event.detail)"
-                                                       (onSelectionsReceived)="appEventService.onSelectionsReceived.next($event.detail)"
-                                                       (onArticleInfoReceived)="appEventService.onArticleInfoReceived.next($event.detail)"
-                                                       (onAnswersAvailable)="appEventService.onAnswersAvailable.next($event.detail)"
-                                                       (onReadyToRender)="appEventService.onReadyToRender.next($event.detail)"
-                                                       (onRenderImageReceived)="appEventService.onRenderImageReceived.next($event.detail)"
-                                    ></threed-selections>
-                                }
-                            </div>
-                            @if (!configuring) {
-                                <div class="product-page-block-addtocart no-padding product-action-buttons" [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
-                                    <app-product-addtocart
-                                            [configurable]="configurable"
-                                            [createFrozenArticle]="createFrozenArticle"
-                                            [configuring]="configuring"
-                                            [showAddToCart]="showAddToCart"
-                                            [article]="article"
-                                            [externalSource]="externalSource"
-                                            [isReturn]="isReturn"
-                                            (startConfiguration)="handleStartConfiguration()"
-                                            (showRelatedPopup)="handlePopUpChange($event)"
-                                    ></app-product-addtocart>
-                                </div>
-                            }
-                            @if (configuring) {
-                                <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
-                                    <app-product-addtocart class="default-padding"
-                                                           [configurable]="false"
-                                                           [fullscreen]="fullScreen"
-                                                           [showAddToCart]="showAddToCart"
-                                                           [configuring]="configuring"
-                                                           [article]="article"
-                                                           [externalSource]="externalSource"
-                                                           [isReturn]="isReturn"
-                                                           (startConfiguration)="handleStartConfiguration()"
-                                    ></app-product-addtocart>
-                                </div>
-                            }
-                            <div class="product-page-block-variants">
-                                @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                                    <app-product-related class="no-padding"
-                                                         [externalSource]="externalSource"
-                                                         [articles]="article?.relatedArticles" [refType]="64" [label]="'VARIANTS' | localize"></app-product-related>
-                                }
-                            </div>
-                            <div class="product-page-block-stock">
-                                <app-product-stock class="no-padding" [goodId]="article?.goodId" (openStockEvent)="openStock()"></app-product-stock>
-                            </div>
-                            <div class="product-page-block-delivery">
-                                <app-product-delivery class="no-padding" [stockAndDelivery]="stockAndDelivery"></app-product-delivery>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="page-wrapper-content">
-                    @if (article) {
-                        <div class="page-wrapper-left">
-                            <app-product-info-tabs class="no-padding" [article]="article"></app-product-info-tabs>
-                        </div>
-                    }
-                    <div class="page-wrapper-right">
-                        <div class="product-page-block-related s-padding">
-                            @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                                <app-product-related
-                                        [externalSource]="externalSource"
-                                        [articles]="article?.relatedArticles"
-                                        [refType]="1"
-                                        [label]="'RELATED_PRODUCTS' | localize">
-                                </app-product-related>
-                            }
-                        </div>
-                    </div>
+    @if (settingsLoaded) {
+      <div class="page-wrapper">
+        <div class="page-wrapper-content">
+          <div class="page-wrapper-left">
+            <div class="product-image-container">
+              <div class="product-page-block-selector-type">
+                <app-product-selector-type class="default-padding"
+                                           [(currentType)]="currentView"
+                                           [show2D]="configurable"
+                                           [show3D]="threeD"
+                ></app-product-selector-type>
+              </div>
+              <div class="product-page-block-image default-padding" [class.full]="fullScreen">
+                @if (!enableRenderCarousel) {
+                  <app-image-carousel
+                    [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
+                    [images]="article?.images"
+                    [showRefresh]="configurable && threeD">
+                  </app-image-carousel>
+                }
+                @if (enableRenderCarousel) {
+                  <app-render-carousel
+                    [@toggleVisibilityByState]="show2D ? 'show' : 'hide'"
+                    [article]="article">
+                  </app-render-carousel>
+                }
+                @if (settingsLoaded && this.configurable) {
+                  <threed-configurator
+                    #configurator
+                    class="threed-configurator"
+                    [class.configurator-full-screen]="fullScreen"
+                    [@toggleVisibilityByState]="show3D ? 'show' : 'hide'"
+                    [@toggleFullScreen]="fullScreen ? 'fullscreen' : 'halfscreen'">
+                  </threed-configurator>
+                }
+                @if (show3D) {
+                  <co-icon #fullscreenbutton class="fullscreen-button"
+                           [@toggleTopLeft]="fullScreen ? 'fullscreen' : 'halfscreen'"
+                           [iconData]="iconCache.getIcon(fullScreenIcon)"
+                           (click)="showFullScreen()"></co-icon>
+                }
+                @if (show3D && fullScreen) {
+                  <co-icon class="threed-watermark"
+                           [iconData]="iconCache.getIcon(icon.Logo)"></co-icon>
+                }
+              </div>
+            </div>
+          </div>
+          <div class="page-wrapper-right">
+            <div class="product-page-block-description">
+              <app-product-description class="default-padding" [article]="article"></app-product-description>
+            </div>
+            <div class="product-page-block-additional">
+              <div class="product-page-block-additional-description">
+                <app-product-additional-description class="default-padding" [article]="article"></app-product-additional-description>
+              </div>
+              <div class="product-page-block-price" [class.full]="configuring">
+                @if (configuring && this.settingsService.settings.options.showSaveAsPresetButton) {
+                  <div class="preset-container">
+                    <co-button
+                      class="save-preset-button"
+                      [iconData]="iconCache.getIcon(icon.SaveDisk)"
+                      [label]="'PRESET_SAVE_AS' | localize"
+                      (onClick)="handleSavePreset()"
+                    ></co-button>
+                  </div>
+                }
+                @if (!configuring) {
+                  <app-product-price class="s-padding"
+                                     [pricing]="article?.pricing"
+                                     [configurable]="configurable"
+                  ></app-product-price>
+                }
+
+                @if (settingsLoaded) {
+                  <threed-selections #selections class="threed-selections"
+                                     [class.show-selections]="configuring"
+                                     [@toggleFullScreenRight]="fullScreen ? 'fullscreen' : 'halfscreen'"
+                                     [class.default-padding]="!fullScreen"
+                                     [class.show-full-screen]="fullScreen"
+                                     [class.mini-scrollbar]="fullScreen"
+                                     [sku]="sku"
+                                     [settings]="settings"
+                                     (onUserActionFromThreeD)="configuring = true"
+                                     (instanceSet)="setInstance($event)"
+                                     (onImageReceived)="appEventService.onImageReceived.next($event)"
+                                     (onRenderStarted)="appEventService.onRenderStarted.next()"
+                                     (onDraftRenderImageReceived)="appEventService.onDraftRenderImageReceived.next($event)"
+                                     (onArticleReceived)="appEventService.onArticleReceived.next($event.detail)"
+                                     (onSelectionsReceived)="appEventService.onSelectionsReceived.next($event.detail)"
+                                     (onArticleInfoReceived)="appEventService.onArticleInfoReceived.next($event.detail)"
+                                     (onAnswersAvailable)="appEventService.onAnswersAvailable.next($event.detail)"
+                                     (onReadyToRender)="appEventService.onReadyToRender.next($event.detail)"
+                                     (onRenderImageReceived)="appEventService.onRenderImageReceived.next($event.detail)"
+                  ></threed-selections>
+                }
+              </div>
+              @if (!configuring) {
+                <div class="product-page-block-addtocart no-padding product-action-buttons"
+                     [@toggleTopRight]="fullScreen ? 'fullscreen' : 'halfscreen'">
+                  <app-product-addtocart
+                    [configurable]="configurable"
+                    [createFrozenArticle]="createFrozenArticle"
+                    [configuring]="configuring"
+                    [showAddToCart]="showAddToCart"
+                    [article]="article"
+                    [externalSource]="externalSource"
+                    [isReturn]="isReturn"
+                    (startConfiguration)="handleStartConfiguration()"
+                    (showRelatedPopup)="handlePopUpChange($event)"
+                  ></app-product-addtocart>
                 </div>
-                <div class="page-wrapper-content no-top-margin">
-                    <div class="page-wrapper-full">
-                        <div class="product-page-block-alternatives s-padding">
-                            @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
-                                <app-product-related
-                                        [externalSource]="externalSource"
-                                        [articles]="article?.relatedArticles"
-                                        [refType]="4"
-                                        [isSmallModus]="false"
-                                        [label]="'ALTERNATIVE_PRODUCTS' | localize">
-                                </app-product-related>
-                            }
-                        </div>
-                    </div>
+              }
+              @if (configuring) {
+                <div class="addtocart-reserved product-action-buttons" [class.full-screen]="fullScreen">
+                  <app-product-addtocart class="default-padding"
+                                         [configurable]="false"
+                                         [fullscreen]="fullScreen"
+                                         [showAddToCart]="showAddToCart"
+                                         [configuring]="configuring"
+                                         [article]="article"
+                                         [externalSource]="externalSource"
+                                         [isReturn]="isReturn"
+                                         (startConfiguration)="handleStartConfiguration()"
+                  ></app-product-addtocart>
                 </div>
-                @if (showRelatedProductsPopup) {
-                    <div>
-                        <co-product-dialog
-                                [mainArticle]="article"
-                                [articles]="article?.relatedArticles"
-                                [refType]="1"
-                                (closeRelatedPopup)="handlePopUpChange($event)"
-                        >
-                        </co-product-dialog>
-                    </div>
+              }
+              <div class="product-page-block-variants">
+                @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                  <app-product-related class="no-padding"
+                                       [externalSource]="externalSource"
+                                       [articles]="article?.relatedArticles" [refType]="64"
+                                       [label]="'VARIANTS' | localize"></app-product-related>
                 }
+              </div>
+              <div class="product-page-block-stock">
+                <app-product-stock class="no-padding" [goodId]="article?.goodId" (openStockEvent)="openStock()"></app-product-stock>
+              </div>
+              <div class="product-page-block-delivery">
+                <app-product-delivery class="no-padding" [stockAndDelivery]="stockAndDelivery"></app-product-delivery>
+              </div>
             </div>
+          </div>
+        </div>
+        <div class="page-wrapper-content">
+          @if (article) {
+            <div class="page-wrapper-left">
+              <app-product-info-tabs class="no-padding" [article]="article"></app-product-info-tabs>
+            </div>
+          }
+          <div class="page-wrapper-right">
+            <div class="product-page-block-related s-padding">
+              @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                <app-product-related
+                  [externalSource]="externalSource"
+                  [articles]="article?.relatedArticles"
+                  [refType]="1"
+                  [label]="'RELATED_PRODUCTS' | localize">
+                </app-product-related>
+              }
+            </div>
+          </div>
+        </div>
+        <div class="page-wrapper-content no-top-margin">
+          <div class="page-wrapper-full">
+            <div class="product-page-block-alternatives s-padding">
+              @if (article?.relatedArticles && article?.relatedArticles.length > 0) {
+                <app-product-related
+                  [externalSource]="externalSource"
+                  [articles]="article?.relatedArticles"
+                  [refType]="4"
+                  [isSmallModus]="false"
+                  [label]="'ALTERNATIVE_PRODUCTS' | localize">
+                </app-product-related>
+              }
+            </div>
+          </div>
+        </div>
+        @if (showRelatedProductsPopup) {
+          <div>
+            <co-product-dialog
+              [mainArticle]="article"
+              [articles]="article?.relatedArticles"
+              [refType]="1"
+              (closeRelatedPopup)="handlePopUpChange($event)"
+            >
+            </co-product-dialog>
+          </div>
         }
-    `, animations: [
+      </div>
+
+      <co-preset-dialog
+        *ngIf="showPresetDialog"
+        [type]="presetDialogType"
+        [presetId]="configPresetId"
+        (cancelSavePreset)="handleCancelSavePreset($event)"
+        (overwritePreset)="handleOverwritePreset($event)"
+      >
+      </co-preset-dialog>
+    }
+  `, animations: [
                         trigger('toggleFullScreen', [
                             state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
                             state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
@@ -3263,8 +3485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             state('*', style({ 'opacity': '1' })),
                             transition('void => *', animate('200ms ease-in-out'))
                         ])
-                    ], standalone: false, styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child,.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"] }]
-        }], ctorParameters: () => [{ type: ProductConnectorService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: IconCacheService }, { type: ProductSettingsService }, { type: ProductEventService }], propDecorators: { configurator: [{
+                    ], standalone: false, styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child,.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:65%;flex-direction:column}.page-wrapper-right{display:flex;width:35%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:none}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional,.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.preset-container{display:flex;justify-content:right}.preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.preset-container .save-preset-button:hover{background:#74b77f}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74b77f}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left,.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"] }]
+        }], ctorParameters: () => [{ type: ProductConnectorService }, { type: IconCacheService }, { type: ProductSettingsService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }], propDecorators: { configurator: [{
                 type: ViewChild,
                 args: ['configurator', { read: ElementRef }]
             }], selections: [{
@@ -3342,7 +3564,7 @@ class IoneProductComponent {
         // this.sku = "4387";
         // this.sku = "1000612725";
         // this.sku = '1000610952'; // elix = 1000234793
-        this.sku = '1000234793';
+        // this.sku = 'A30';
     }
     async ngOnInit() {
         this._subs.push(this._appEventService.onAddToCart.subscribe((data) => {
@@ -3524,10 +3746,14 @@ class ImageCarouselModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, declarations: [ImageCarouselComponent], imports: [CommonModule,
             LoaderModule,
-            ScrollContainerModule], exports: [ImageCarouselComponent] }); }
+            ScrollContainerModule,
+            CdkConnectedOverlay,
+            CdkOverlayOrigin,
+            IconModule], exports: [ImageCarouselComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, imports: [CommonModule,
             LoaderModule,
-            ScrollContainerModule] }); }
+            ScrollContainerModule,
+            IconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselModule, decorators: [{
             type: NgModule,
@@ -3535,7 +3761,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     imports: [
                         CommonModule,
                         LoaderModule,
-                        ScrollContainerModule
+                        ScrollContainerModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        IconModule
                     ],
                     declarations: [
                         ImageCarouselComponent
@@ -3948,6 +4177,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
+class PresetDialogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: PresetDialogModule, declarations: [PresetDialogComponent], imports: [IconModule,
+            PipeModule,
+            ProductRelatedModule], exports: [PresetDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetDialogModule, imports: [IconModule,
+            PipeModule,
+            ProductRelatedModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PresetDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        IconModule,
+                        PipeModule,
+                        ProductRelatedModule
+                    ],
+                    declarations: [
+                        PresetDialogComponent
+                    ],
+                    exports: [
+                        PresetDialogComponent
+                    ]
+                }]
+        }] });
+
 class ProductPageModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProductPageModule, declarations: [ProductPageComponent], imports: [CommonModule,
@@ -3965,7 +4220,9 @@ class ProductPageModule {
             PipeModule,
             ProductDialogModule,
             LoaderModule,
-            RenderCarouselModule], exports: [ProductPageComponent] }); }
+            RenderCarouselModule,
+            ButtonModule,
+            PresetDialogModule], exports: [ProductPageComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageModule, imports: [CommonModule,
             ProductSelectorTypeModule,
             ImageCarouselModule,
@@ -3981,7 +4238,9 @@ class ProductPageModule {
             PipeModule,
             ProductDialogModule,
             LoaderModule,
-            RenderCarouselModule] }); }
+            RenderCarouselModule,
+            ButtonModule,
+            PresetDialogModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageModule, decorators: [{
             type: NgModule,
@@ -4002,7 +4261,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         PipeModule,
                         ProductDialogModule,
                         LoaderModule,
-                        RenderCarouselModule
+                        RenderCarouselModule,
+                        ButtonModule,
+                        PresetDialogModule
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     declarations: [