@colijnit/product 262.1.6 → 262.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/colijnit-product.mjs +183 -45
- package/fesm2022/colijnit-product.mjs.map +1 -1
- package/index.d.ts +23 -8
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Pipe, EventEmitter, Output, Input, Component, ElementRef, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, SecurityContext, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, PLATFORM_ID, Inject, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
2
|
+
import { Injectable, Pipe, EventEmitter, Output, Input, Component, ElementRef, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, SecurityContext, ViewEncapsulation, ContentChild, NgModule, CUSTOM_ELEMENTS_SCHEMA, PLATFORM_ID, Inject, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
|
|
4
4
|
import { Options } from '@colijnit/ioneconnector/build/model/options';
|
|
5
5
|
import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
|
|
@@ -13,11 +13,13 @@ import { MainApi } from '@colijnit/mainapi';
|
|
|
13
13
|
import { TransactionInfoResponse } from '@colijnit/transactionapi/build/model/transaction-info-response.bo';
|
|
14
14
|
import { ArticleListObjectExtended } from '@colijnit/articleapi/build/model/article-list-object-extended.bo';
|
|
15
15
|
import { ImageContent } from '@colijnit/mainapi/build/model/image-content.bo';
|
|
16
|
+
import * as i5 from '@colijnit/configurator';
|
|
17
|
+
import { ConfigurationPresetModule, ConfiguratorModule, ConfiguratorSceneModule } from '@colijnit/configurator';
|
|
16
18
|
import { StringUtils } from '@colijnit/ioneconnector/build/utils/string-utils';
|
|
17
19
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
18
20
|
import * as i1 from '@angular/platform-browser';
|
|
19
|
-
import * as
|
|
20
|
-
import {
|
|
21
|
+
import * as i6$2 from '@angular/common';
|
|
22
|
+
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
21
23
|
import * as i6 from '@colijnit/corecomponents_v12';
|
|
22
24
|
import { IconModule, LoaderModule, ScrollContainerModule, InputNumberPickerModule, ButtonModule, ArticleTileModule, TileModule, IconCollapseHandleModule } from '@colijnit/corecomponents_v12';
|
|
23
25
|
import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
|
|
@@ -26,16 +28,14 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
|
26
28
|
import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
|
|
27
29
|
import * as i3 from '@colijnit/sharedcomponents';
|
|
28
30
|
import { FilesUploadModule } from '@colijnit/sharedcomponents';
|
|
29
|
-
import * as i5$1 from '@angular/common';
|
|
30
|
-
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
|
31
31
|
|
|
32
32
|
// this file is dynamically created, do not change this
|
|
33
33
|
class Version {
|
|
34
34
|
constructor() {
|
|
35
35
|
this.name = "@colijnit/product";
|
|
36
36
|
this.description = "Product detail page project for iOne";
|
|
37
|
-
this.symVer = "262.1.
|
|
38
|
-
this.publishDate = "
|
|
37
|
+
this.symVer = "262.1.8";
|
|
38
|
+
this.publishDate = "30-6-2026, 16:40:54";
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -110,8 +110,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
110
110
|
// Sole responsibility is simply to wrap around a colijn.Connector to create a stable inner interface to the library in a 1:1 method way.
|
|
111
111
|
// Only to be used by the IOneControllerService.
|
|
112
112
|
class ProductConnectorAdapterService {
|
|
113
|
-
constructor(_eventService) {
|
|
113
|
+
constructor(_eventService, _configuratorConnectorService) {
|
|
114
114
|
this._eventService = _eventService;
|
|
115
|
+
this._configuratorConnectorService = _configuratorConnectorService;
|
|
115
116
|
this.showLoader = new Subject();
|
|
116
117
|
this._boFactory = new BusinessObjectFactory();
|
|
117
118
|
this._subs = [];
|
|
@@ -269,12 +270,15 @@ class ProductConnectorAdapterService {
|
|
|
269
270
|
}
|
|
270
271
|
return 'nl'; // just to be safe
|
|
271
272
|
}
|
|
272
|
-
|
|
273
|
+
async storeConfiguratorPreset() {
|
|
274
|
+
return await this._configuratorConnectorService.storePreset();
|
|
275
|
+
}
|
|
276
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService, deps: [{ token: ProductEventService }, { token: i5.ConfiguratorConnectorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
273
277
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService }); }
|
|
274
278
|
}
|
|
275
279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService, decorators: [{
|
|
276
280
|
type: Injectable
|
|
277
|
-
}], ctorParameters: () => [{ type: ProductEventService }] });
|
|
281
|
+
}], ctorParameters: () => [{ type: ProductEventService }, { type: i5.ConfiguratorConnectorService }] });
|
|
278
282
|
|
|
279
283
|
class JsonUtilsService {
|
|
280
284
|
async readJsonFile(filePath) {
|
|
@@ -320,6 +324,7 @@ class Dictionary {
|
|
|
320
324
|
"AS_CONFIGURED": "As configured",
|
|
321
325
|
"CATEGORY": "Category",
|
|
322
326
|
"CATEGORY_TYPE": "Category type",
|
|
327
|
+
"CLICK_TO_LOAD": "Click to load",
|
|
323
328
|
"CONFIGURE": "Configure",
|
|
324
329
|
"DELIVERY_TIME_PERIOD": "Delivery time",
|
|
325
330
|
"DESCRIPTION": "Description",
|
|
@@ -328,6 +333,7 @@ class Dictionary {
|
|
|
328
333
|
"FEATURES": "Features",
|
|
329
334
|
"HEIGHT": "Height",
|
|
330
335
|
"MATERIAL": "Material",
|
|
336
|
+
"OPEN_IN_HOMEDECORATOR": "Open in homedecorator",
|
|
331
337
|
"PRODUCT_IN_STOCK": "In stock",
|
|
332
338
|
"PRODUCT_LIMITED_STOCK": "Limited stock",
|
|
333
339
|
"PRODUCT_NOT_IN_STOCK": "Not in stock",
|
|
@@ -335,6 +341,7 @@ class Dictionary {
|
|
|
335
341
|
"QUOTATION": "Quotation",
|
|
336
342
|
"READ_MORE": "Read more",
|
|
337
343
|
"RELATED_PRODUCTS": "Related products",
|
|
344
|
+
"SAVED_CONFIGURATION": "Saved configuration",
|
|
338
345
|
"SHOPPING_CART_IN": "In Shopping Cart",
|
|
339
346
|
"SHOW_IN": "Show in",
|
|
340
347
|
"STOCK": "Stock",
|
|
@@ -353,6 +360,7 @@ class Dictionary {
|
|
|
353
360
|
"ALTERNATIVE_PRODUCTS": "Alternatieve producten",
|
|
354
361
|
"ARTICLE_NUMBER": "Artikel nummer",
|
|
355
362
|
"AS_CONFIGURED": "Zoals samengesteld",
|
|
363
|
+
"CLICK_TO_LOAD": "Klik om te openen",
|
|
356
364
|
"CATEGORY": "Categorie",
|
|
357
365
|
"CATEGORY_TYPE": "Categorie type",
|
|
358
366
|
"CONFIGURE": "Configureren",
|
|
@@ -363,6 +371,7 @@ class Dictionary {
|
|
|
363
371
|
"FEATURES": "Kenmerken",
|
|
364
372
|
"HEIGHT": "Hoogte",
|
|
365
373
|
"MATERIAL": "Materiaal",
|
|
374
|
+
"OPEN_IN_HOMEDECORATOR": "Open in homedecorator",
|
|
366
375
|
"PRODUCT_IN_STOCK": "Op voorraad",
|
|
367
376
|
"PRODUCT_LIMITED_STOCK": "Beperkt op voorraad",
|
|
368
377
|
"PRODUCT_NOT_IN_STOCK": "Niet op voorraad",
|
|
@@ -370,6 +379,7 @@ class Dictionary {
|
|
|
370
379
|
"QUOTATION": "Quotatie",
|
|
371
380
|
"READ_MORE": "Lees meer",
|
|
372
381
|
"RELATED_PRODUCTS": "Gerelateerde producten",
|
|
382
|
+
"SAVED_CONFIGURATION": "Opslagen configuratie",
|
|
373
383
|
"SHOPPING_CART_IN": "In winkelwagen",
|
|
374
384
|
"SHOW_IN": "Laat zien",
|
|
375
385
|
"STOCK": "Voorraad",
|
|
@@ -962,17 +972,21 @@ class ImageCarouselComponent {
|
|
|
962
972
|
return this._currentIndex;
|
|
963
973
|
}
|
|
964
974
|
set currentIndex(value) {
|
|
965
|
-
this._currentIndex = value;
|
|
975
|
+
this._currentIndex = Math.max(0, Math.min(value, this.images.length - 1));
|
|
966
976
|
this._scrollCarouselToIndex();
|
|
977
|
+
setTimeout(() => this.scrollActiveThumbIntoView(), 0);
|
|
967
978
|
}
|
|
968
|
-
constructor(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
979
|
+
constructor(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
|
|
969
980
|
this.iconCacheService = iconCacheService;
|
|
970
981
|
this._ione = _ione;
|
|
971
982
|
this._appEventService = _appEventService;
|
|
972
983
|
this._changeDetector = _changeDetector;
|
|
973
984
|
this._domSanitizer = _domSanitizer;
|
|
985
|
+
this.iconCache = iconCache;
|
|
974
986
|
this.icons = IconEnum;
|
|
975
987
|
this.isPopupOpen = false;
|
|
988
|
+
this.canScrollThumbsLeft = false;
|
|
989
|
+
this.canScrollThumbsRight = false;
|
|
976
990
|
this.showRefresh = false;
|
|
977
991
|
this.resizing = false;
|
|
978
992
|
this.imageViewModels = [];
|
|
@@ -981,6 +995,7 @@ class ImageCarouselComponent {
|
|
|
981
995
|
this._images = [];
|
|
982
996
|
this._subs = [];
|
|
983
997
|
this._resizeCanvasHeight = 500;
|
|
998
|
+
this.icon = IconEnum;
|
|
984
999
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(() => {
|
|
985
1000
|
this.showLoader = true;
|
|
986
1001
|
this._changeDetector.detectChanges();
|
|
@@ -1008,6 +1023,7 @@ class ImageCarouselComponent {
|
|
|
1008
1023
|
}
|
|
1009
1024
|
handleThumbClick(index) {
|
|
1010
1025
|
this.currentIndex = index;
|
|
1026
|
+
setTimeout(() => this.scrollActiveThumbIntoView(), 0);
|
|
1011
1027
|
}
|
|
1012
1028
|
onForceRenderImage() {
|
|
1013
1029
|
this._appEventService.onForceRenderImage.next();
|
|
@@ -1024,6 +1040,41 @@ class ImageCarouselComponent {
|
|
|
1024
1040
|
this.selectedImage = undefined;
|
|
1025
1041
|
this._changeDetector.markForCheck();
|
|
1026
1042
|
}
|
|
1043
|
+
scrollThumbs(direction) {
|
|
1044
|
+
const element = this.thumbScroller?.nativeElement;
|
|
1045
|
+
if (!element) {
|
|
1046
|
+
return;
|
|
1047
|
+
}
|
|
1048
|
+
const firstThumb = element.querySelector('.carousel-thumb');
|
|
1049
|
+
const scrollAmount = firstThumb ? firstThumb.offsetWidth * 6 : element.clientWidth;
|
|
1050
|
+
element.scrollBy({
|
|
1051
|
+
left: direction * scrollAmount,
|
|
1052
|
+
behavior: 'smooth'
|
|
1053
|
+
});
|
|
1054
|
+
setTimeout(() => this.updateThumbScrollState(), 250);
|
|
1055
|
+
}
|
|
1056
|
+
scrollActiveThumbIntoView() {
|
|
1057
|
+
const element = this.thumbScroller?.nativeElement;
|
|
1058
|
+
const activeThumb = element?.querySelector('.carousel-thumb.active');
|
|
1059
|
+
activeThumb?.scrollIntoView({
|
|
1060
|
+
behavior: 'smooth',
|
|
1061
|
+
inline: 'nearest',
|
|
1062
|
+
block: 'nearest'
|
|
1063
|
+
});
|
|
1064
|
+
setTimeout(() => this.updateThumbScrollState(), 250);
|
|
1065
|
+
}
|
|
1066
|
+
updateThumbScrollState() {
|
|
1067
|
+
const element = this.thumbScroller?.nativeElement;
|
|
1068
|
+
if (!element) {
|
|
1069
|
+
this.canScrollThumbsLeft = false;
|
|
1070
|
+
this.canScrollThumbsRight = false;
|
|
1071
|
+
return;
|
|
1072
|
+
}
|
|
1073
|
+
this.canScrollThumbsLeft = element.scrollLeft > 0;
|
|
1074
|
+
this.canScrollThumbsRight =
|
|
1075
|
+
element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
|
|
1076
|
+
this._changeDetector.markForCheck();
|
|
1077
|
+
}
|
|
1027
1078
|
_filterValidImages(value) {
|
|
1028
1079
|
if (!value) {
|
|
1029
1080
|
return [];
|
|
@@ -1063,6 +1114,10 @@ class ImageCarouselComponent {
|
|
|
1063
1114
|
this._changeDetector.detectChanges();
|
|
1064
1115
|
});
|
|
1065
1116
|
}
|
|
1117
|
+
this._changeDetector.detectChanges();
|
|
1118
|
+
setTimeout(() => {
|
|
1119
|
+
this.updateThumbScrollState();
|
|
1120
|
+
});
|
|
1066
1121
|
}
|
|
1067
1122
|
_resizeAndSanitizeSource(source, imageViewModel) {
|
|
1068
1123
|
const resizeCanvas = document.createElement('canvas');
|
|
@@ -1139,8 +1194,8 @@ class ImageCarouselComponent {
|
|
|
1139
1194
|
}
|
|
1140
1195
|
}
|
|
1141
1196
|
}
|
|
1142
|
-
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 }); }
|
|
1143
|
-
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: `
|
|
1197
|
+
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 }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1198
|
+
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 }, { propertyName: "thumbScroller", first: true, predicate: ["thumbScroller"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
1144
1199
|
<div id="product_page_carousel">
|
|
1145
1200
|
<div id="product_page_carousel_items">
|
|
1146
1201
|
@if (showLoader) {
|
|
@@ -1174,18 +1229,35 @@ class ImageCarouselComponent {
|
|
|
1174
1229
|
|
|
1175
1230
|
<div id="product_page_carousel_thumbs">
|
|
1176
1231
|
@if (imageViewModels && imageViewModels.length > 1) {
|
|
1177
|
-
<
|
|
1232
|
+
<div class="thumbs-pointer left-point">
|
|
1233
|
+
<co-icon
|
|
1234
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointLeft)"
|
|
1235
|
+
class="thumb-scroller prev"
|
|
1236
|
+
[class.visible]="canScrollThumbsLeft"
|
|
1237
|
+
(click)="scrollThumbs(-1)">
|
|
1238
|
+
</co-icon>
|
|
1239
|
+
</div>
|
|
1240
|
+
|
|
1241
|
+
|
|
1242
|
+
<div #thumbScroller class="thumbs-scroll-container" (scroll)="updateThumbScrollState()">
|
|
1178
1243
|
@for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
|
|
1179
|
-
<div class="carousel-thumb"
|
|
1180
|
-
|
|
1181
|
-
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
|
|
1244
|
+
<div class="carousel-thumb" [class.active]="index === currentIndex">
|
|
1245
|
+
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)" />
|
|
1182
1246
|
</div>
|
|
1183
1247
|
}
|
|
1184
|
-
</
|
|
1248
|
+
</div>
|
|
1249
|
+
<div class="thumbs-pointer right-point">
|
|
1250
|
+
<co-icon
|
|
1251
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointRight)"
|
|
1252
|
+
class="thumb-scroller next"
|
|
1253
|
+
[class.visible]="canScrollThumbsRight"
|
|
1254
|
+
(click)="scrollThumbs(1)">
|
|
1255
|
+
</co-icon>
|
|
1256
|
+
</div>
|
|
1185
1257
|
}
|
|
1186
1258
|
</div>
|
|
1187
1259
|
</div>
|
|
1188
|
-
|
|
1260
|
+
|
|
1189
1261
|
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
|
|
1190
1262
|
<ng-template
|
|
1191
1263
|
cdkConnectedOverlay
|
|
@@ -1202,7 +1274,7 @@ class ImageCarouselComponent {
|
|
|
1202
1274
|
</div>
|
|
1203
1275
|
</div>
|
|
1204
1276
|
</ng-template>
|
|
1205
|
-
`, isInline: true, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;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:
|
|
1277
|
+
`, isInline: true, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;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;align-items:center;gap:8px}#product_page_carousel .thumbs-scroll-container{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;max-width:528px;scrollbar-width:none}#product_page_carousel .thumbs-scroll-container::-webkit-scrollbar{display:none}#product_page_carousel .carousel-thumb{flex:0 0 80px}#product_page_carousel .thumb-scroller{display:none;width:28px;height:28px;border:0;cursor:pointer}#product_page_carousel .thumb-scroller.visible{display:block}#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;width:80px;height:80px;align-items:center;display:flex}#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{max-height:100%;max-width:100%;object-fit:contain}.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: "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 }); }
|
|
1206
1278
|
}
|
|
1207
1279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, decorators: [{
|
|
1208
1280
|
type: Component,
|
|
@@ -1240,18 +1312,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1240
1312
|
|
|
1241
1313
|
<div id="product_page_carousel_thumbs">
|
|
1242
1314
|
@if (imageViewModels && imageViewModels.length > 1) {
|
|
1243
|
-
<
|
|
1315
|
+
<div class="thumbs-pointer left-point">
|
|
1316
|
+
<co-icon
|
|
1317
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointLeft)"
|
|
1318
|
+
class="thumb-scroller prev"
|
|
1319
|
+
[class.visible]="canScrollThumbsLeft"
|
|
1320
|
+
(click)="scrollThumbs(-1)">
|
|
1321
|
+
</co-icon>
|
|
1322
|
+
</div>
|
|
1323
|
+
|
|
1324
|
+
|
|
1325
|
+
<div #thumbScroller class="thumbs-scroll-container" (scroll)="updateThumbScrollState()">
|
|
1244
1326
|
@for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
|
|
1245
|
-
<div class="carousel-thumb"
|
|
1246
|
-
|
|
1247
|
-
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
|
|
1327
|
+
<div class="carousel-thumb" [class.active]="index === currentIndex">
|
|
1328
|
+
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)" />
|
|
1248
1329
|
</div>
|
|
1249
1330
|
}
|
|
1250
|
-
</
|
|
1331
|
+
</div>
|
|
1332
|
+
<div class="thumbs-pointer right-point">
|
|
1333
|
+
<co-icon
|
|
1334
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointRight)"
|
|
1335
|
+
class="thumb-scroller next"
|
|
1336
|
+
[class.visible]="canScrollThumbsRight"
|
|
1337
|
+
(click)="scrollThumbs(1)">
|
|
1338
|
+
</co-icon>
|
|
1339
|
+
</div>
|
|
1251
1340
|
}
|
|
1252
1341
|
</div>
|
|
1253
1342
|
</div>
|
|
1254
|
-
|
|
1343
|
+
|
|
1255
1344
|
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
|
|
1256
1345
|
<ng-template
|
|
1257
1346
|
cdkConnectedOverlay
|
|
@@ -1268,10 +1357,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1268
1357
|
</div>
|
|
1269
1358
|
</div>
|
|
1270
1359
|
</ng-template>
|
|
1271
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;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:
|
|
1272
|
-
}], ctorParameters: () => [{ type: IconCacheService }, { type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { carousel: [{
|
|
1360
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;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;align-items:center;gap:8px}#product_page_carousel .thumbs-scroll-container{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;max-width:528px;scrollbar-width:none}#product_page_carousel .thumbs-scroll-container::-webkit-scrollbar{display:none}#product_page_carousel .carousel-thumb{flex:0 0 80px}#product_page_carousel .thumb-scroller{display:none;width:28px;height:28px;border:0;cursor:pointer}#product_page_carousel .thumb-scroller.visible{display:block}#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;width:80px;height:80px;align-items:center;display:flex}#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{max-height:100%;max-width:100%;object-fit:contain}.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"] }]
|
|
1361
|
+
}], ctorParameters: () => [{ type: IconCacheService }, { type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }, { type: IconCacheService }], propDecorators: { carousel: [{
|
|
1273
1362
|
type: ViewChild,
|
|
1274
1363
|
args: ['carousel', { read: ElementRef }]
|
|
1364
|
+
}], thumbScroller: [{
|
|
1365
|
+
type: ViewChild,
|
|
1366
|
+
args: ['thumbScroller', { read: ElementRef }]
|
|
1275
1367
|
}], onEsc: [{
|
|
1276
1368
|
type: HostListener,
|
|
1277
1369
|
args: ['document:keydown.escape']
|
|
@@ -2927,7 +3019,7 @@ class ProductPageComponent {
|
|
|
2927
3019
|
this._configuringService.renderImage(this._buildResult, renderOptions, false);
|
|
2928
3020
|
}
|
|
2929
3021
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPageComponent, deps: [{ token: IconCacheService }, { token: ProductSettingsService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: ProductConnectorService }, { token: i5.ConfiguratorEventService }, { token: i5.ConfiguratorConnectorService }, { token: i5.ConfiguringService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2930
|
-
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" }, host: { properties: { "class.co-product-page": "this.showClass" } }, viewQueries: [{ propertyName: "fullscreenbutton", first: true, predicate: ["fullscreenbutton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
3022
|
+
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", externalButtonTemplate: "externalButtonTemplate" }, outputs: { openStockEvent: "openStockEvent" }, host: { properties: { "class.co-product-page": "this.showClass" } }, viewQueries: [{ propertyName: "fullscreenbutton", first: true, predicate: ["fullscreenbutton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
2931
3023
|
@if (settingsLoaded) {
|
|
2932
3024
|
<div class="page-wrapper">
|
|
2933
3025
|
<div class="page-wrapper-content">
|
|
@@ -2978,6 +3070,13 @@ class ProductPageComponent {
|
|
|
2978
3070
|
[iconData]="iconCache.getIcon(icon.Logo)">
|
|
2979
3071
|
</co-icon>
|
|
2980
3072
|
}
|
|
3073
|
+
|
|
3074
|
+
<!-- show this button ONLY we there is 3D data -->
|
|
3075
|
+
@if (threeD){
|
|
3076
|
+
<div class="external-button-container">
|
|
3077
|
+
<ng-container *ngTemplateOutlet="externalButtonTemplate"></ng-container>
|
|
3078
|
+
</div>
|
|
3079
|
+
}
|
|
2981
3080
|
</div>
|
|
2982
3081
|
</div>
|
|
2983
3082
|
</div>
|
|
@@ -3112,7 +3211,7 @@ class ProductPageComponent {
|
|
|
3112
3211
|
}
|
|
3113
3212
|
</div>
|
|
3114
3213
|
}
|
|
3115
|
-
`, isInline: true, styles: [".co-product-page .page-wrapper{font-family:Public Sans;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 10px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:0 0 10px;gap:10px}.co-product-page .page-wrapper-content:first-child{margin-top:10px}.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .swimming-lane{display:flex;box-shadow:1px 1px 4px #0000001a;padding:30px;background:#fff}.co-product-page .page-wrapper-left{display:flex;width:65%;flex-direction:column}.co-product-page .page-wrapper-right{display:flex;width:35%;flex-direction:column}.co-product-page .page-wrapper-right .product-page-scroll-container{max-height:100vh;overflow-y:scroll}.co-product-page .page-wrapper-full{display:flex;width:100%;flex-direction:column}.co-product-page .page-wrapper-66{display:flex;width:60%;flex-direction:column}.co-product-page .page-wrapper-33{display:flex;width:40%;flex-direction:column}.co-product-page .product-action-buttons{position:relative}.co-product-page .product-action-buttons.full-screen{z-index:10}.co-product-page .product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.co-product-page .product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.co-product-page .product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.co-product-page .product-page-block-image .co-configurator-scene{width:100%;height:300px;display:block;position:relative}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container{position:relative;height:650px;width:100%}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer{min-height:0;min-width:0;width:auto;height:auto}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer canvas{width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.hide-3d-scene{visibility:hidden;overflow:hidden;height:0}.co-product-page .product-page-block-image .co-configurator-scene.show-3d-scene{min-height:650px;position:relative}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen{position:fixed;inset:0;width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen .configurator-bundle-container{height:100%}.co-product-page .product-page-block-image .co-configurator-scene canvas{height:100%}.co-product-page .product-page-block-image app-image-carousel.show-animated,.co-product-page .product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.co-product-page .product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.co-product-page .product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.co-product-page .product-page-block-description{grid-column:7/12;grid-row:1/1}.co-product-page .product-page-block-additional,.co-product-page .product-page-block-additional-description{width:100%}.co-product-page .product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.co-product-page .product-page-block-price.full{grid-column:1/5}.co-product-page .product-page-block-price .hide-configurator{display:none}.co-product-page .product-page-block-price .show-configurator{display:block}.co-product-page .product-page-block-price .show-configurator .co-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:0;padding-right:0;height:auto;max-height:100%}.co-product-page .preset-container{display:flex;justify-content:right}.co-product-page .preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.co-product-page .preset-container .save-preset-button:hover{background:#4e9b7e}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#4e9b7e}.co-product-page .addtocart-reserved{grid-column:1/3;grid-row:3/3}.co-product-page .product-page-block-stock{grid-column:1/3;grid-row:4/4}.co-product-page .product-page-block-delivery{grid-column:3/5;grid-row:4/4}.co-product-page ::ng-deep co-scroll-container{overflow:hidden;position:relative}.co-product-page ::ng-deep co-scroll-container .content-wrapper{padding:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer{left:0;top:0}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}.co-product-page ::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}.co-product-page .product-page-block-variants{margin:20px 0 0}.co-product-page .product-page-block-variants app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.co-product-page .product-page-block-variants app-product-related>div app-header h3{font-size:14px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container{width:320px;max-width:100%;padding:0 16px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller{width:26px;height:26px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll{left:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll{right:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.co-product-page .product-page-block-variants co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.co-product-page .product-page-block-variants co-tile.small:hover{border-color:#22313c}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper{padding:0}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-top{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-bottom{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-extra-bottom{display:none}.co-product-page .product-page-block-alternatives .co-scroll-container,.co-product-page .product-page-block-alternatives .co-scroll-container .content-wrapper{width:auto}.co-product-page .product-page-block-alternatives .article-wrapper{margin:0 20px 0 0}.co-product-page .product-page-block-alternatives .article-wrapper:last-child{margin:0}.co-product-page .product-page-block-alternatives .co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.co-product-page .product-page-block-alternatives .co-tile:hover{box-shadow:none;border-color:#f6f5f4}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper .tile-bottom{margin:0}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;object-fit:contain;transition:all .2s ease}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom{outline:none;padding:5px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button{margin:0 0 5px!important;width:34px;height:34px;border:none;background:#1a73e8;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button .co-icon{width:28px;height:28px;margin:0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main{padding:0 10px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#1a73e8}.co-product-page .product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.co-product-page .product-page-block-properties{grid-column:7/10;grid-row:3/3}.co-product-page .product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.co-product-page .product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.co-product-page .product-page-block-documents{grid-column:2/6;grid-row:5/5}.co-product-page .product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.co-product-page .default-padding{padding-top:20px;padding-bottom:20px}.co-product-page .m-padding{padding-top:15px;padding-bottom:15px}.co-product-page .s-padding{padding-top:5px;padding-bottom:5px}.co-product-page .page-wrapper{max-width:650px}.co-product-page .page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-left,.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.co-product-page .product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){.co-product-page [class*=-padding]{padding-left:0!important;padding-right:0!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.co-product-page .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", "configuring"] }, { 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: 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: i5.ConfiguratorComponent, selector: "co-configurator", inputs: ["show", "sku", "instanceId", "settings", "scene", "showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["isLoading", "updateProgressBar", "errorMessages", "showChange"] }, { kind: "component", type: i5.ConfiguratorSceneComponent, selector: "co-configurator-scene" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
|
|
3214
|
+
`, isInline: true, styles: [".co-product-page .page-wrapper{font-family:Public Sans;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 10px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:0 0 10px;gap:10px}.co-product-page .page-wrapper-content:first-child{margin-top:10px}.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .swimming-lane{display:flex;box-shadow:1px 1px 4px #0000001a;padding:30px;background:#fff}.co-product-page .page-wrapper-left{display:flex;width:65%;flex-direction:column}.co-product-page .page-wrapper-right{display:flex;width:35%;flex-direction:column}.co-product-page .page-wrapper-right .product-page-scroll-container{max-height:100vh;overflow-y:scroll}.co-product-page .page-wrapper-full{display:flex;width:100%;flex-direction:column}.co-product-page .page-wrapper-66{display:flex;width:60%;flex-direction:column}.co-product-page .page-wrapper-33{display:flex;width:40%;flex-direction:column}.co-product-page .product-action-buttons{position:relative}.co-product-page .product-action-buttons.full-screen{z-index:10}.co-product-page .product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.co-product-page .product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.co-product-page .product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.co-product-page .product-page-block-image .co-configurator-scene{width:100%;height:300px;display:block;position:relative}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container{position:relative;height:650px;width:100%}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer{min-height:0;min-width:0;width:auto;height:auto}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer canvas{width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.hide-3d-scene{visibility:hidden;overflow:hidden;height:0}.co-product-page .product-page-block-image .co-configurator-scene.show-3d-scene{min-height:650px;position:relative}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen{position:fixed;inset:0;width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen .configurator-bundle-container{height:100%}.co-product-page .product-page-block-image .co-configurator-scene canvas{height:100%}.co-product-page .product-page-block-image app-image-carousel.show-animated,.co-product-page .product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.co-product-page .product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.co-product-page .product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.co-product-page .product-page-block-image .external-button-container{width:100%;display:flex;justify-content:space-between}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button{margin-left:auto}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button .co-button{margin-left:auto;cursor:pointer;background:#ececec;border-radius:10px}.co-product-page .product-page-block-description{grid-column:7/12;grid-row:1/1}.co-product-page .product-page-block-additional,.co-product-page .product-page-block-additional-description{width:100%}.co-product-page .product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.co-product-page .product-page-block-price.full{grid-column:1/5}.co-product-page .product-page-block-price .hide-configurator{display:none}.co-product-page .product-page-block-price .show-configurator{display:block}.co-product-page .product-page-block-price .show-configurator .co-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:0;padding-right:0;height:auto;max-height:100%}.co-product-page .preset-container{display:flex;justify-content:right}.co-product-page .preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.co-product-page .preset-container .save-preset-button:hover{background:#4e9b7e}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#4e9b7e}.co-product-page .addtocart-reserved{grid-column:1/3;grid-row:3/3}.co-product-page .product-page-block-stock{grid-column:1/3;grid-row:4/4}.co-product-page .product-page-block-delivery{grid-column:3/5;grid-row:4/4}.co-product-page ::ng-deep co-scroll-container{overflow:hidden;position:relative}.co-product-page ::ng-deep co-scroll-container .content-wrapper{padding:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer{left:0;top:0}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}.co-product-page ::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}.co-product-page .product-page-block-variants{margin:20px 0 0}.co-product-page .product-page-block-variants app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.co-product-page .product-page-block-variants app-product-related>div app-header h3{font-size:14px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container{width:320px;max-width:100%;padding:0 16px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller{width:26px;height:26px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll{left:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll{right:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.co-product-page .product-page-block-variants co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.co-product-page .product-page-block-variants co-tile.small:hover{border-color:#22313c}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper{padding:0}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-top{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-bottom{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-extra-bottom{display:none}.co-product-page .product-page-block-alternatives .co-scroll-container,.co-product-page .product-page-block-alternatives .co-scroll-container .content-wrapper{width:auto}.co-product-page .product-page-block-alternatives .article-wrapper{margin:0 20px 0 0}.co-product-page .product-page-block-alternatives .article-wrapper:last-child{margin:0}.co-product-page .product-page-block-alternatives .co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.co-product-page .product-page-block-alternatives .co-tile:hover{box-shadow:none;border-color:#f6f5f4}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper .tile-bottom{margin:0}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;object-fit:contain;transition:all .2s ease}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom{outline:none;padding:5px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button{margin:0 0 5px!important;width:34px;height:34px;border:none;background:#1a73e8;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button .co-icon{width:28px;height:28px;margin:0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main{padding:0 10px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#1a73e8}.co-product-page .product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.co-product-page .product-page-block-properties{grid-column:7/10;grid-row:3/3}.co-product-page .product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.co-product-page .product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.co-product-page .product-page-block-documents{grid-column:2/6;grid-row:5/5}.co-product-page .product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.co-product-page .default-padding{padding-top:20px;padding-bottom:20px}.co-product-page .m-padding{padding-top:15px;padding-bottom:15px}.co-product-page .s-padding{padding-top:5px;padding-bottom:5px}.co-product-page .page-wrapper{max-width:650px}.co-product-page .page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-left,.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.co-product-page .product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){.co-product-page [class*=-padding]{padding-left:0!important;padding-right:0!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"], dependencies: [{ kind: "directive", type: i6$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "configuring"] }, { 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: 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: i5.ConfiguratorComponent, selector: "co-configurator", inputs: ["show", "sku", "instanceId", "settings", "scene", "showLoader", "showProgressBar", "showErrorMessages", "outputErrorMessages", "canCloseConfigurator", "animateSlideout", "showHeaderInformation"], outputs: ["isLoading", "updateProgressBar", "errorMessages", "showChange"] }, { kind: "component", type: i5.ConfiguratorSceneComponent, selector: "co-configurator-scene" }, { kind: "pipe", type: LocalizePipe, name: "localize" }], animations: [
|
|
3116
3215
|
trigger('toggleFullScreen', [
|
|
3117
3216
|
state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
|
|
3118
3217
|
state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
|
|
@@ -3199,6 +3298,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3199
3298
|
[iconData]="iconCache.getIcon(icon.Logo)">
|
|
3200
3299
|
</co-icon>
|
|
3201
3300
|
}
|
|
3301
|
+
|
|
3302
|
+
<!-- show this button ONLY we there is 3D data -->
|
|
3303
|
+
@if (threeD){
|
|
3304
|
+
<div class="external-button-container">
|
|
3305
|
+
<ng-container *ngTemplateOutlet="externalButtonTemplate"></ng-container>
|
|
3306
|
+
</div>
|
|
3307
|
+
}
|
|
3202
3308
|
</div>
|
|
3203
3309
|
</div>
|
|
3204
3310
|
</div>
|
|
@@ -3365,7 +3471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3365
3471
|
state('*', style({ 'opacity': '1' })),
|
|
3366
3472
|
transition('void => *', animate('200ms ease-in-out'))
|
|
3367
3473
|
])
|
|
3368
|
-
], standalone: false, styles: [".co-product-page .page-wrapper{font-family:Public Sans;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 10px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:0 0 10px;gap:10px}.co-product-page .page-wrapper-content:first-child{margin-top:10px}.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .swimming-lane{display:flex;box-shadow:1px 1px 4px #0000001a;padding:30px;background:#fff}.co-product-page .page-wrapper-left{display:flex;width:65%;flex-direction:column}.co-product-page .page-wrapper-right{display:flex;width:35%;flex-direction:column}.co-product-page .page-wrapper-right .product-page-scroll-container{max-height:100vh;overflow-y:scroll}.co-product-page .page-wrapper-full{display:flex;width:100%;flex-direction:column}.co-product-page .page-wrapper-66{display:flex;width:60%;flex-direction:column}.co-product-page .page-wrapper-33{display:flex;width:40%;flex-direction:column}.co-product-page .product-action-buttons{position:relative}.co-product-page .product-action-buttons.full-screen{z-index:10}.co-product-page .product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.co-product-page .product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.co-product-page .product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.co-product-page .product-page-block-image .co-configurator-scene{width:100%;height:300px;display:block;position:relative}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container{position:relative;height:650px;width:100%}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer{min-height:0;min-width:0;width:auto;height:auto}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer canvas{width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.hide-3d-scene{visibility:hidden;overflow:hidden;height:0}.co-product-page .product-page-block-image .co-configurator-scene.show-3d-scene{min-height:650px;position:relative}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen{position:fixed;inset:0;width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen .configurator-bundle-container{height:100%}.co-product-page .product-page-block-image .co-configurator-scene canvas{height:100%}.co-product-page .product-page-block-image app-image-carousel.show-animated,.co-product-page .product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.co-product-page .product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.co-product-page .product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.co-product-page .product-page-block-description{grid-column:7/12;grid-row:1/1}.co-product-page .product-page-block-additional,.co-product-page .product-page-block-additional-description{width:100%}.co-product-page .product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.co-product-page .product-page-block-price.full{grid-column:1/5}.co-product-page .product-page-block-price .hide-configurator{display:none}.co-product-page .product-page-block-price .show-configurator{display:block}.co-product-page .product-page-block-price .show-configurator .co-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:0;padding-right:0;height:auto;max-height:100%}.co-product-page .preset-container{display:flex;justify-content:right}.co-product-page .preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.co-product-page .preset-container .save-preset-button:hover{background:#4e9b7e}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#4e9b7e}.co-product-page .addtocart-reserved{grid-column:1/3;grid-row:3/3}.co-product-page .product-page-block-stock{grid-column:1/3;grid-row:4/4}.co-product-page .product-page-block-delivery{grid-column:3/5;grid-row:4/4}.co-product-page ::ng-deep co-scroll-container{overflow:hidden;position:relative}.co-product-page ::ng-deep co-scroll-container .content-wrapper{padding:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer{left:0;top:0}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}.co-product-page ::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}.co-product-page .product-page-block-variants{margin:20px 0 0}.co-product-page .product-page-block-variants app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.co-product-page .product-page-block-variants app-product-related>div app-header h3{font-size:14px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container{width:320px;max-width:100%;padding:0 16px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller{width:26px;height:26px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll{left:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll{right:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.co-product-page .product-page-block-variants co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.co-product-page .product-page-block-variants co-tile.small:hover{border-color:#22313c}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper{padding:0}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-top{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-bottom{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-extra-bottom{display:none}.co-product-page .product-page-block-alternatives .co-scroll-container,.co-product-page .product-page-block-alternatives .co-scroll-container .content-wrapper{width:auto}.co-product-page .product-page-block-alternatives .article-wrapper{margin:0 20px 0 0}.co-product-page .product-page-block-alternatives .article-wrapper:last-child{margin:0}.co-product-page .product-page-block-alternatives .co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.co-product-page .product-page-block-alternatives .co-tile:hover{box-shadow:none;border-color:#f6f5f4}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper .tile-bottom{margin:0}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;object-fit:contain;transition:all .2s ease}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom{outline:none;padding:5px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button{margin:0 0 5px!important;width:34px;height:34px;border:none;background:#1a73e8;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button .co-icon{width:28px;height:28px;margin:0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main{padding:0 10px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#1a73e8}.co-product-page .product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.co-product-page .product-page-block-properties{grid-column:7/10;grid-row:3/3}.co-product-page .product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.co-product-page .product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.co-product-page .product-page-block-documents{grid-column:2/6;grid-row:5/5}.co-product-page .product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.co-product-page .default-padding{padding-top:20px;padding-bottom:20px}.co-product-page .m-padding{padding-top:15px;padding-bottom:15px}.co-product-page .s-padding{padding-top:5px;padding-bottom:5px}.co-product-page .page-wrapper{max-width:650px}.co-product-page .page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-left,.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.co-product-page .product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){.co-product-page [class*=-padding]{padding-left:0!important;padding-right:0!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"] }]
|
|
3474
|
+
], standalone: false, styles: [".co-product-page .page-wrapper{font-family:Public Sans;font-size:12px;display:flex;flex-direction:column;max-width:100%;padding:0 10px;margin:0 auto}.co-product-page .page-wrapper-content{display:flex;flex-direction:row;margin:0 0 10px;gap:10px}.co-product-page .page-wrapper-content:first-child{margin-top:10px}.co-product-page .page-wrapper-content.no-top-margin{margin-top:0}.co-product-page .swimming-lane{display:flex;box-shadow:1px 1px 4px #0000001a;padding:30px;background:#fff}.co-product-page .page-wrapper-left{display:flex;width:65%;flex-direction:column}.co-product-page .page-wrapper-right{display:flex;width:35%;flex-direction:column}.co-product-page .page-wrapper-right .product-page-scroll-container{max-height:100vh;overflow-y:scroll}.co-product-page .page-wrapper-full{display:flex;width:100%;flex-direction:column}.co-product-page .page-wrapper-66{display:flex;width:60%;flex-direction:column}.co-product-page .page-wrapper-33{display:flex;width:40%;flex-direction:column}.co-product-page .product-action-buttons{position:relative}.co-product-page .product-action-buttons.full-screen{z-index:10}.co-product-page .product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.co-product-page .product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.co-product-page .product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.co-product-page .product-page-block-image .co-configurator-scene{width:100%;height:300px;display:block;position:relative}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container{position:relative;height:650px;width:100%}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer{min-height:0;min-width:0;width:auto;height:auto}.co-product-page .product-page-block-image .co-configurator-scene .configurator-bundle-container .threedviewer canvas{width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.hide-3d-scene{visibility:hidden;overflow:hidden;height:0}.co-product-page .product-page-block-image .co-configurator-scene.show-3d-scene{min-height:650px;position:relative}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen{position:fixed;inset:0;width:100%;height:100%}.co-product-page .product-page-block-image .co-configurator-scene.show-full-screen .configurator-bundle-container{height:100%}.co-product-page .product-page-block-image .co-configurator-scene canvas{height:100%}.co-product-page .product-page-block-image app-image-carousel.show-animated,.co-product-page .product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.co-product-page .product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.co-product-page .product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.co-product-page .product-page-block-image .external-button-container{width:100%;display:flex;justify-content:space-between}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button{margin-left:auto}.co-product-page .product-page-block-image .external-button-container .co-homedecorator-button .co-button{margin-left:auto;cursor:pointer;background:#ececec;border-radius:10px}.co-product-page .product-page-block-description{grid-column:7/12;grid-row:1/1}.co-product-page .product-page-block-additional,.co-product-page .product-page-block-additional-description{width:100%}.co-product-page .product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.co-product-page .product-page-block-price.full{grid-column:1/5}.co-product-page .product-page-block-price .hide-configurator{display:none}.co-product-page .product-page-block-price .show-configurator{display:block}.co-product-page .product-page-block-price .show-configurator .co-lite-selector.floating co-selections-summary{position:relative}.co-product-page .product-page-block-price .show-configurator .co-lite-selector:not(.custom-dimensions).floating co-selections-summary{top:auto;background:none}.co-product-page .product-page-block-price .show-configurator .co-selections-summary .selections-content{gap:10px;box-sizing:border-box;padding:10px}.co-product-page .product-page-block-price .show-configurator .co-product-configurator .product-configurator-container{position:relative;width:auto;top:auto;right:auto;padding-left:0;padding-right:0;height:auto;max-height:100%}.co-product-page .preset-container{display:flex;justify-content:right}.co-product-page .preset-container .save-preset-button{cursor:pointer;width:100%;max-width:205px;box-sizing:border-box}.co-product-page .preset-container .save-preset-button:hover{background:#4e9b7e}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#4e9b7e}.co-product-page .addtocart-reserved{grid-column:1/3;grid-row:3/3}.co-product-page .product-page-block-stock{grid-column:1/3;grid-row:4/4}.co-product-page .product-page-block-delivery{grid-column:3/5;grid-row:4/4}.co-product-page ::ng-deep co-scroll-container{overflow:hidden;position:relative}.co-product-page ::ng-deep co-scroll-container .content-wrapper{padding:0}.co-product-page ::ng-deep co-scroll-container .scroll-layer{left:0;top:0}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}.co-product-page ::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}.co-product-page ::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}.co-product-page ::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}.co-product-page .product-page-block-variants{margin:20px 0 0}.co-product-page .product-page-block-variants app-product-related>div{display:flex;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.co-product-page .product-page-block-variants app-product-related>div app-header h3{font-size:14px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container{width:320px;max-width:100%;padding:0 16px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller{width:26px;height:26px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll{left:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll{right:5px}.co-product-page .product-page-block-variants app-product-related>div co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.co-product-page .product-page-block-variants co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.co-product-page .product-page-block-variants co-tile.small:hover{border-color:#22313c}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper{padding:0}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-top{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.co-product-page .product-page-block-variants co-tile.small .tile-wrapper .tile-bottom{display:none}.co-product-page .product-page-block-variants co-tile.small .tile-extra-bottom{display:none}.co-product-page .product-page-block-alternatives .co-scroll-container,.co-product-page .product-page-block-alternatives .co-scroll-container .content-wrapper{width:auto}.co-product-page .product-page-block-alternatives .article-wrapper{margin:0 20px 0 0}.co-product-page .product-page-block-alternatives .article-wrapper:last-child{margin:0}.co-product-page .product-page-block-alternatives .co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.co-product-page .product-page-block-alternatives .co-tile:hover{box-shadow:none;border-color:#f6f5f4}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-wrapper .tile-bottom{margin:0}.co-product-page .product-page-block-alternatives .co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper div.image .co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;object-fit:contain;transition:all .2s ease}.co-product-page .product-page-block-alternatives .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}.co-product-page .product-page-block-alternatives .co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom{outline:none;padding:5px 0;background:transparent!important;min-height:60px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button{margin:0 0 5px!important;width:34px;height:34px;border:none;background:#1a73e8;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .co-button .co-icon{width:28px;height:28px;margin:0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main{padding:0 10px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:700;margin:0 0 2px}.co-product-page .product-page-block-alternatives .co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:700;color:#1a73e8}.co-product-page .product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.co-product-page .product-page-block-properties{grid-column:7/10;grid-row:3/3}.co-product-page .product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.co-product-page .product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.co-product-page .product-page-block-documents{grid-column:2/6;grid-row:5/5}.co-product-page .product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.co-product-page .default-padding{padding-top:20px;padding-bottom:20px}.co-product-page .m-padding{padding-top:15px;padding-bottom:15px}.co-product-page .s-padding{padding-top:5px;padding-bottom:5px}.co-product-page .page-wrapper{max-width:650px}.co-product-page .page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-left,.co-product-page .page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.co-product-page .product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){.co-product-page [class*=-padding]{padding-left:0!important;padding-right:0!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.co-product-page .product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"] }]
|
|
3369
3475
|
}], ctorParameters: () => [{ type: IconCacheService }, { type: ProductSettingsService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: ProductConnectorService }, { type: i5.ConfiguratorEventService }, { type: i5.ConfiguratorConnectorService }, { type: i5.ConfiguringService }], propDecorators: { showClass: [{
|
|
3370
3476
|
type: HostBinding,
|
|
3371
3477
|
args: ['class.co-product-page']
|
|
@@ -3386,6 +3492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3386
3492
|
type: Input
|
|
3387
3493
|
}], enableRenderCarousel: [{
|
|
3388
3494
|
type: Input
|
|
3495
|
+
}], externalButtonTemplate: [{
|
|
3496
|
+
type: Input
|
|
3389
3497
|
}], openStockEvent: [{
|
|
3390
3498
|
type: Output
|
|
3391
3499
|
}] } });
|
|
@@ -3496,23 +3604,29 @@ class IoneProductComponent {
|
|
|
3496
3604
|
this.openStockEvent.emit();
|
|
3497
3605
|
}
|
|
3498
3606
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IoneProductComponent, deps: [{ token: ProductEventService }, { token: ProductSettingsService }, { token: ProductConnectorService }, { token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IoneProductComponent, isStandalone: false, selector: "app-ione-product", inputs: { sku: "sku", isReturn: "isReturn", showRelatedProductsPopup: "showRelatedProductsPopup", enableRenderCarousel: "enableRenderCarousel", settings: "settings", handleAddArticleInternally: "handleAddArticleInternally", handleAddToCartInternally: "handleAddToCartInternally" }, outputs: { onAddToCart: "onAddToCart", forceRenderImage: "forceRenderImage", getRenderForRenderCarousel: "getRenderForRenderCarousel", onAlternativeClick: "onAlternativeClick", onArticleInfoReceived: "onArticleInfoReceived", onArticleReceived: "onArticleReceived", onSelectionsReceived: "onSelectionsReceived", onAddToQuote: "onAddToQuote", openStockEvent: "openStockEvent", onAnswersAvailable: "onAnswersAvailable" }, providers: [
|
|
3607
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IoneProductComponent, isStandalone: false, selector: "app-ione-product", inputs: { sku: "sku", isReturn: "isReturn", showRelatedProductsPopup: "showRelatedProductsPopup", enableRenderCarousel: "enableRenderCarousel", settings: "settings", handleAddArticleInternally: "handleAddArticleInternally", handleAddToCartInternally: "handleAddToCartInternally", externalButtonTemplate: "externalButtonTemplate" }, outputs: { onAddToCart: "onAddToCart", forceRenderImage: "forceRenderImage", getRenderForRenderCarousel: "getRenderForRenderCarousel", onAlternativeClick: "onAlternativeClick", onArticleInfoReceived: "onArticleInfoReceived", onArticleReceived: "onArticleReceived", onSelectionsReceived: "onSelectionsReceived", onAddToQuote: "onAddToQuote", openStockEvent: "openStockEvent", onAnswersAvailable: "onAnswersAvailable" }, providers: [
|
|
3500
3608
|
ProductSettingsService,
|
|
3501
3609
|
ProductConnectorService,
|
|
3502
3610
|
ProductEventService,
|
|
3503
3611
|
ProductConnectorAdapterService
|
|
3504
|
-
], ngImport: i0, template: `
|
|
3612
|
+
], queries: [{ propertyName: "externalButtonsTpl", first: true, predicate: ["externalButtonsTpl"], descendants: true }], ngImport: i0, template: `
|
|
3505
3613
|
@if (settingsLoaded) {
|
|
3506
3614
|
<app-product-page
|
|
3507
3615
|
[createFrozenArticle]="handleAddArticleInternally"
|
|
3508
3616
|
[isReturn]="isReturn"
|
|
3509
3617
|
[sku]="sku"
|
|
3618
|
+
[externalButtonTemplate]="externalButtonsTpl"
|
|
3510
3619
|
[showRelatedProductsPopup]="showRelatedProductsPopup"
|
|
3511
3620
|
[enableRenderCarousel]="enableRenderCarousel"
|
|
3512
|
-
(openStockEvent)="openStock()"
|
|
3513
|
-
|
|
3621
|
+
(openStockEvent)="openStock()">
|
|
3622
|
+
</app-product-page>
|
|
3514
3623
|
}
|
|
3515
|
-
|
|
3624
|
+
|
|
3625
|
+
<ng-template #externalButtonsTpl>
|
|
3626
|
+
<ng-content select="[externalButtons]"></ng-content>
|
|
3627
|
+
</ng-template>
|
|
3628
|
+
|
|
3629
|
+
`, isInline: true, styles: [""], dependencies: [{ kind: "component", type: ProductPageComponent, selector: "app-product-page", inputs: ["sku", "settings", "externalSource", "createFrozenArticle", "isReturn", "showRelatedProductsPopup", "enableRenderCarousel", "externalButtonTemplate"], outputs: ["openStockEvent"] }] }); }
|
|
3516
3630
|
}
|
|
3517
3631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IoneProductComponent, decorators: [{
|
|
3518
3632
|
type: Component,
|
|
@@ -3522,18 +3636,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3522
3636
|
[createFrozenArticle]="handleAddArticleInternally"
|
|
3523
3637
|
[isReturn]="isReturn"
|
|
3524
3638
|
[sku]="sku"
|
|
3639
|
+
[externalButtonTemplate]="externalButtonsTpl"
|
|
3525
3640
|
[showRelatedProductsPopup]="showRelatedProductsPopup"
|
|
3526
3641
|
[enableRenderCarousel]="enableRenderCarousel"
|
|
3527
|
-
(openStockEvent)="openStock()"
|
|
3528
|
-
|
|
3642
|
+
(openStockEvent)="openStock()">
|
|
3643
|
+
</app-product-page>
|
|
3529
3644
|
}
|
|
3645
|
+
|
|
3646
|
+
<ng-template #externalButtonsTpl>
|
|
3647
|
+
<ng-content select="[externalButtons]"></ng-content>
|
|
3648
|
+
</ng-template>
|
|
3649
|
+
|
|
3530
3650
|
`, providers: [
|
|
3531
3651
|
ProductSettingsService,
|
|
3532
3652
|
ProductConnectorService,
|
|
3533
3653
|
ProductEventService,
|
|
3534
3654
|
ProductConnectorAdapterService
|
|
3535
3655
|
], encapsulation: ViewEncapsulation.Emulated, standalone: false }]
|
|
3536
|
-
}], ctorParameters: () => [{ type: ProductEventService }, { type: ProductSettingsService }, { type: ProductConnectorService }, { type: LocalStorageService }], propDecorators: {
|
|
3656
|
+
}], ctorParameters: () => [{ type: ProductEventService }, { type: ProductSettingsService }, { type: ProductConnectorService }, { type: LocalStorageService }], propDecorators: { externalButtonsTpl: [{
|
|
3657
|
+
type: ContentChild,
|
|
3658
|
+
args: ['externalButtonsTpl']
|
|
3659
|
+
}], sku: [{
|
|
3537
3660
|
type: Input
|
|
3538
3661
|
}], isReturn: [{
|
|
3539
3662
|
type: Input
|
|
@@ -3547,6 +3670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
3547
3670
|
type: Input
|
|
3548
3671
|
}], handleAddToCartInternally: [{
|
|
3549
3672
|
type: Input
|
|
3673
|
+
}], externalButtonTemplate: [{
|
|
3674
|
+
type: Input
|
|
3550
3675
|
}], onAddToCart: [{
|
|
3551
3676
|
type: Output
|
|
3552
3677
|
}], forceRenderImage: [{
|
|
@@ -3864,7 +3989,7 @@ class ProductDeliveryComponent {
|
|
|
3864
3989
|
<div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
|
|
3865
3990
|
</div>
|
|
3866
3991
|
</div>
|
|
3867
|
-
`, isInline: true, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type:
|
|
3992
|
+
`, isInline: true, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i6$2.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
|
|
3868
3993
|
}
|
|
3869
3994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryComponent, decorators: [{
|
|
3870
3995
|
type: Component,
|
|
@@ -4558,12 +4683,13 @@ class ProductExternalSourceComponent {
|
|
|
4558
4683
|
ProductConnectorService,
|
|
4559
4684
|
ProductEventService,
|
|
4560
4685
|
ProductConnectorAdapterService
|
|
4561
|
-
], ngImport: i0, template: `
|
|
4686
|
+
], queries: [{ propertyName: "externalButtonsTpl", first: true, predicate: ["externalButtonsTpl"], descendants: true }], ngImport: i0, template: `
|
|
4562
4687
|
@if (loaded) {
|
|
4563
4688
|
@if (showProduct) {
|
|
4564
4689
|
<app-product-page
|
|
4565
4690
|
[sku]="sku"
|
|
4566
4691
|
[settings]="externalSettings"
|
|
4692
|
+
[externalButtonTemplate]="externalButtonsTpl"
|
|
4567
4693
|
[externalSource]="externalSource"
|
|
4568
4694
|
></app-product-page>
|
|
4569
4695
|
}
|
|
@@ -4579,7 +4705,11 @@ class ProductExternalSourceComponent {
|
|
|
4579
4705
|
(configuratorFinished)="handleConfigurationFinished($event)"></co-product-hd>
|
|
4580
4706
|
}
|
|
4581
4707
|
}
|
|
4582
|
-
|
|
4708
|
+
|
|
4709
|
+
<ng-template #externalButtonsTpl>
|
|
4710
|
+
<ng-content select="[externalButtons]"></ng-content>
|
|
4711
|
+
</ng-template>
|
|
4712
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ProductPageComponent, selector: "app-product-page", inputs: ["sku", "settings", "externalSource", "createFrozenArticle", "isReturn", "showRelatedProductsPopup", "enableRenderCarousel", "externalButtonTemplate"], outputs: ["openStockEvent"] }, { kind: "component", type: ProductHdComponent, selector: "co-product-hd", inputs: ["sku", "token", "variant", "urlParams"], outputs: ["configuratorFinished", "configurationError"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4583
4713
|
}
|
|
4584
4714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductExternalSourceComponent, decorators: [{
|
|
4585
4715
|
type: Component,
|
|
@@ -4591,6 +4721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4591
4721
|
<app-product-page
|
|
4592
4722
|
[sku]="sku"
|
|
4593
4723
|
[settings]="externalSettings"
|
|
4724
|
+
[externalButtonTemplate]="externalButtonsTpl"
|
|
4594
4725
|
[externalSource]="externalSource"
|
|
4595
4726
|
></app-product-page>
|
|
4596
4727
|
}
|
|
@@ -4606,7 +4737,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4606
4737
|
(configuratorFinished)="handleConfigurationFinished($event)"></co-product-hd>
|
|
4607
4738
|
}
|
|
4608
4739
|
}
|
|
4609
|
-
|
|
4740
|
+
|
|
4741
|
+
<ng-template #externalButtonsTpl>
|
|
4742
|
+
<ng-content select="[externalButtons]"></ng-content>
|
|
4743
|
+
</ng-template>
|
|
4744
|
+
`,
|
|
4610
4745
|
providers: [
|
|
4611
4746
|
ProductSettingsService,
|
|
4612
4747
|
ProductConnectorService,
|
|
@@ -4616,7 +4751,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4616
4751
|
encapsulation: ViewEncapsulation.None,
|
|
4617
4752
|
standalone: false
|
|
4618
4753
|
}]
|
|
4619
|
-
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: ProductConnectorService }, { type: ProductEventService }], propDecorators: {
|
|
4754
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: ProductConnectorService }, { type: ProductEventService }], propDecorators: { externalButtonsTpl: [{
|
|
4755
|
+
type: ContentChild,
|
|
4756
|
+
args: ['externalButtonsTpl']
|
|
4757
|
+
}], sku: [{
|
|
4620
4758
|
type: Input
|
|
4621
4759
|
}], catalogDefinition: [{
|
|
4622
4760
|
type: Input
|