@colijnit/product 257.1.4 → 257.1.6
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/app/components/image-carousel/image-carousel.component.d.ts +16 -13
- package/app/components/product-addtocart/product-addtocart.component.d.ts +1 -0
- package/app/components/product-page/product-page.component.d.ts +1 -0
- package/app/ione-product.component.d.ts +2 -0
- package/app/service/product-event.service.d.ts +2 -1
- package/bundles/colijnit-product.umd.js +128 -45
- package/bundles/colijnit-product.umd.js.map +1 -1
- package/colijnit-product.metadata.json +1 -1
- package/esm2015/app/components/image-carousel/image-carousel.component.js +127 -70
- package/esm2015/app/components/product-addtocart/product-addtocart.component.js +9 -5
- package/esm2015/app/components/product-page/product-page.component.js +15 -3
- package/esm2015/app/ione-product.component.js +8 -3
- package/esm2015/app/product-version.js +3 -3
- package/esm2015/app/service/product-event.service.js +2 -1
- package/esm2015/assets/dictionary/text.properties.js +3 -1
- package/fesm2015/colijnit-product.js +159 -77
- package/fesm2015/colijnit-product.js.map +1 -1
- package/package.json +1 -1
- package/colijnit-product-257.1.4.tgz +0 -0
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import { ChangeDetectorRef, ElementRef, OnDestroy
|
|
1
|
+
import { ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
|
|
2
2
|
import { CoDocument } from '@colijnit/mainapi/build/model/co-document';
|
|
3
3
|
import { ProductConnectorService } from '../../service/product-connector.service';
|
|
4
4
|
import { ProductEventService } from '../../service/product-event.service';
|
|
5
|
-
import { IconEnum } from '../../enum/icon.enum';
|
|
6
|
-
import { IconCacheService } from '../../service/icon-cache.service';
|
|
7
5
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
|
8
|
-
export declare class
|
|
6
|
+
export declare class ImageViewModel {
|
|
7
|
+
image: CoDocument | string;
|
|
8
|
+
source: SafeUrl;
|
|
9
|
+
originalSource: string;
|
|
10
|
+
}
|
|
11
|
+
export declare class ImageCarouselComponent implements OnDestroy {
|
|
9
12
|
private _ione;
|
|
10
13
|
private _appEventService;
|
|
11
14
|
private _changeDetector;
|
|
12
15
|
private _domSanitizer;
|
|
13
|
-
iconCache: IconCacheService;
|
|
14
|
-
readonly icons: typeof IconEnum;
|
|
15
|
-
showLoader: boolean;
|
|
16
16
|
carousel: ElementRef;
|
|
17
17
|
showRefresh: boolean;
|
|
18
|
-
set images(value: CoDocument[]);
|
|
18
|
+
set images(value: (CoDocument | string)[]);
|
|
19
|
+
get images(): (CoDocument | string)[];
|
|
19
20
|
handleWindowResize(): void;
|
|
20
21
|
gotoNextSlide(): void;
|
|
21
22
|
gotoPrevSlide(): void;
|
|
@@ -23,18 +24,20 @@ export declare class ImageCarouselComponent implements OnInit, OnDestroy {
|
|
|
23
24
|
get currentIndex(): number;
|
|
24
25
|
set currentIndex(value: number);
|
|
25
26
|
resizing: boolean;
|
|
26
|
-
|
|
27
|
+
imageViewModels: ImageViewModel[];
|
|
28
|
+
showLoader: boolean;
|
|
27
29
|
private _resizeTimer;
|
|
28
30
|
private _currentIndex;
|
|
29
31
|
private _images;
|
|
30
32
|
private _subs;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
private _resizeCanvasHeight;
|
|
34
|
+
constructor(_ione: ProductConnectorService, _appEventService: ProductEventService, _changeDetector: ChangeDetectorRef, _domSanitizer: DomSanitizer);
|
|
33
35
|
ngOnDestroy(): void;
|
|
34
36
|
handleThumbClick(index: number): void;
|
|
35
37
|
onForceRenderImage(): void;
|
|
36
|
-
|
|
38
|
+
handleShowImage(imageViewModel: ImageViewModel): void;
|
|
37
39
|
private _filterValidImages;
|
|
38
|
-
private
|
|
40
|
+
private _loadAndRescaleImages;
|
|
41
|
+
private _resizeAndSanitizeSource;
|
|
39
42
|
private _scrollCarouselToIndex;
|
|
40
43
|
}
|
|
@@ -18,6 +18,7 @@ export declare class ProductAddtocartComponent implements OnInit, OnDestroy {
|
|
|
18
18
|
createFrozenArticle: boolean;
|
|
19
19
|
configurable: boolean;
|
|
20
20
|
configuring: boolean;
|
|
21
|
+
showAddToCart: boolean;
|
|
21
22
|
isReturn: boolean;
|
|
22
23
|
fullscreen: boolean;
|
|
23
24
|
set quantity(value: number);
|
|
@@ -32,6 +32,7 @@ export declare class IoneProductComponent implements OnInit, OnChanges, OnDestro
|
|
|
32
32
|
onSelectionsReceived: EventEmitter<Selection[]>;
|
|
33
33
|
onAddToQuote: EventEmitter<string>;
|
|
34
34
|
openStockEvent: EventEmitter<void>;
|
|
35
|
+
onAnswersAvailable: EventEmitter<boolean>;
|
|
35
36
|
settingsLoaded: boolean;
|
|
36
37
|
showHD: boolean;
|
|
37
38
|
private _settings;
|
|
@@ -41,6 +42,7 @@ export declare class IoneProductComponent implements OnInit, OnChanges, OnDestro
|
|
|
41
42
|
ngOnChanges(changes: SimpleChanges): void;
|
|
42
43
|
ngOnDestroy(): void;
|
|
43
44
|
private _handleAnswerInfoReceived;
|
|
45
|
+
private _handleAnswersAvailable;
|
|
44
46
|
private _handleAddToCart;
|
|
45
47
|
openStock(): void;
|
|
46
48
|
}
|
|
@@ -17,8 +17,9 @@ export declare class ProductEventService {
|
|
|
17
17
|
onImageReceived: Subject<string>;
|
|
18
18
|
onRenderStarted: Subject<void>;
|
|
19
19
|
onRenderImageReceived: Subject<string>;
|
|
20
|
-
onDraftRenderImageReceived: Subject<
|
|
20
|
+
onDraftRenderImageReceived: Subject<CustomEvent>;
|
|
21
21
|
onArticleInfoReceived: Subject<string>;
|
|
22
|
+
onAnswersAvailable: Subject<boolean>;
|
|
22
23
|
onUpdateProductInfoTab: Subject<number>;
|
|
23
24
|
errorMessage: Subject<ValidationMessage[]>;
|
|
24
25
|
}
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
function Version() {
|
|
32
32
|
this.name = "@colijnit/product";
|
|
33
33
|
this.description = "Product detail page project for iOne";
|
|
34
|
-
this.symVer = "257.1.
|
|
35
|
-
this.publishDate = "
|
|
34
|
+
this.symVer = "257.1.6";
|
|
35
|
+
this.publishDate = "17-3-2025 08:31:39";
|
|
36
36
|
}
|
|
37
37
|
return Version;
|
|
38
38
|
}());
|
|
@@ -611,6 +611,7 @@
|
|
|
611
611
|
this.onRenderImageReceived = new rxjs.Subject();
|
|
612
612
|
this.onDraftRenderImageReceived = new rxjs.Subject();
|
|
613
613
|
this.onArticleInfoReceived = new rxjs.Subject();
|
|
614
|
+
this.onAnswersAvailable = new rxjs.Subject();
|
|
614
615
|
this.onUpdateProductInfoTab = new rxjs.Subject();
|
|
615
616
|
this.errorMessage = new rxjs.Subject();
|
|
616
617
|
}
|
|
@@ -905,6 +906,7 @@
|
|
|
905
906
|
"ADDITIONAL_DATA": "Additional information",
|
|
906
907
|
"ALTERNATIVE_PRODUCTS": "Alternative products",
|
|
907
908
|
"ARTICLE_NUMBER": "Productnumber",
|
|
909
|
+
"AS_CONFIGURED": "As configured",
|
|
908
910
|
"CATEGORY": "Category",
|
|
909
911
|
"CATEGORY_TYPE": "Category type",
|
|
910
912
|
"CONFIGURE": "Configure",
|
|
@@ -936,6 +938,7 @@
|
|
|
936
938
|
"ADDITIONAL_DATA": "Extra informatie",
|
|
937
939
|
"ALTERNATIVE_PRODUCTS": "Alternatieve producten",
|
|
938
940
|
"ARTICLE_NUMBER": "Artikel nummer",
|
|
941
|
+
"AS_CONFIGURED": "Zoals samengesteld",
|
|
939
942
|
"CATEGORY": "Categorie",
|
|
940
943
|
"CATEGORY_TYPE": "Categorie type",
|
|
941
944
|
"CONFIGURE": "Configureren",
|
|
@@ -1353,6 +1356,7 @@
|
|
|
1353
1356
|
this.onSelectionsReceived = new i0.EventEmitter();
|
|
1354
1357
|
this.onAddToQuote = new i0.EventEmitter();
|
|
1355
1358
|
this.openStockEvent = new i0.EventEmitter();
|
|
1359
|
+
this.onAnswersAvailable = new i0.EventEmitter();
|
|
1356
1360
|
this.settingsLoaded = false;
|
|
1357
1361
|
this.showHD = false;
|
|
1358
1362
|
this._subs = [];
|
|
@@ -1360,7 +1364,7 @@
|
|
|
1360
1364
|
// this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
|
|
1361
1365
|
this._appEventService.onAddToCart.subscribe(function (data) {
|
|
1362
1366
|
_this._handleAddToCart(data);
|
|
1363
|
-
}), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.onAddToQuote.emit(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.onAlternativeClick.emit(article); }), this._appEventService.onArticleInfoReceived.subscribe(function (info) { return _this._handleAnswerInfoReceived(info); }), this._appEventService.onArticleReceived.subscribe(function (article) { return _this.onArticleReceived.emit(article); }), this._appEventService.onSelectionsReceived.subscribe(function (selections) { return _this.onSelectionsReceived.emit(selections); }), this._settingsService.settingsLoaded.subscribe(function (loaded) {
|
|
1367
|
+
}), this._appEventService.onAddToQuote.subscribe(function (json) { return _this.onAddToQuote.emit(json); }), this._appEventService.onAlternativeClick.subscribe(function (article) { return _this.onAlternativeClick.emit(article); }), this._appEventService.onArticleInfoReceived.subscribe(function (info) { return _this._handleAnswerInfoReceived(info); }), this._appEventService.onArticleReceived.subscribe(function (article) { return _this.onArticleReceived.emit(article); }), this._appEventService.onSelectionsReceived.subscribe(function (selections) { return _this.onSelectionsReceived.emit(selections); }), this._appEventService.onAnswersAvailable.subscribe(function (answers) { return _this._handleAnswersAvailable(answers); }), this._settingsService.settingsLoaded.subscribe(function (loaded) {
|
|
1364
1368
|
_this.settingsLoaded = loaded;
|
|
1365
1369
|
}));
|
|
1366
1370
|
}
|
|
@@ -1405,6 +1409,9 @@
|
|
|
1405
1409
|
IoneProductComponent.prototype._handleAnswerInfoReceived = function (info) {
|
|
1406
1410
|
this.onArticleInfoReceived.next(info);
|
|
1407
1411
|
};
|
|
1412
|
+
IoneProductComponent.prototype._handleAnswersAvailable = function (answers) {
|
|
1413
|
+
this.onAnswersAvailable.next(answers);
|
|
1414
|
+
};
|
|
1408
1415
|
IoneProductComponent.prototype._handleAddToCart = function (data) {
|
|
1409
1416
|
return __awaiter(this, void 0, void 0, function () {
|
|
1410
1417
|
return __generator(this, function (_a) {
|
|
@@ -1447,7 +1454,8 @@
|
|
|
1447
1454
|
onArticleReceived: [{ type: i0.Output }],
|
|
1448
1455
|
onSelectionsReceived: [{ type: i0.Output }],
|
|
1449
1456
|
onAddToQuote: [{ type: i0.Output }],
|
|
1450
|
-
openStockEvent: [{ type: i0.Output }]
|
|
1457
|
+
openStockEvent: [{ type: i0.Output }],
|
|
1458
|
+
onAnswersAvailable: [{ type: i0.Output }]
|
|
1451
1459
|
};
|
|
1452
1460
|
|
|
1453
1461
|
var StockAndDelivery = /** @class */ (function () {
|
|
@@ -1568,6 +1576,7 @@
|
|
|
1568
1576
|
this.show2D = true;
|
|
1569
1577
|
this.show3D = false;
|
|
1570
1578
|
this.configuring = false;
|
|
1579
|
+
this.showAddToCart = false;
|
|
1571
1580
|
this.fullscreenAnimationEnd = false;
|
|
1572
1581
|
this.settingsLoaded = false;
|
|
1573
1582
|
this._fullScreen = false;
|
|
@@ -1578,6 +1587,13 @@
|
|
|
1578
1587
|
}
|
|
1579
1588
|
}), this.settingsService.settingsLoaded.subscribe(function (loaded) { return _this._handleSettingsLoaded(loaded); }), this._ione.controllerInitialized.subscribe(function (initialized) {
|
|
1580
1589
|
_this.settingsLoaded = initialized;
|
|
1590
|
+
}), this.appEventService.onAnswersAvailable.subscribe(function (answers) {
|
|
1591
|
+
if (answers && _this.configurable) {
|
|
1592
|
+
_this.showAddToCart = false;
|
|
1593
|
+
}
|
|
1594
|
+
else {
|
|
1595
|
+
_this.showAddToCart = true;
|
|
1596
|
+
}
|
|
1581
1597
|
}));
|
|
1582
1598
|
}
|
|
1583
1599
|
Object.defineProperty(ProductPageComponent.prototype, "sku", {
|
|
@@ -1704,8 +1720,12 @@
|
|
|
1704
1720
|
if (_this.article) {
|
|
1705
1721
|
_this.configurable = _this.article.goodType === 'B';
|
|
1706
1722
|
if (_this.configurable) {
|
|
1723
|
+
_this.showAddToCart = false;
|
|
1707
1724
|
_this.currentView = SelectorType.TwoD;
|
|
1708
1725
|
}
|
|
1726
|
+
else {
|
|
1727
|
+
_this.showAddToCart = true;
|
|
1728
|
+
}
|
|
1709
1729
|
_this.threeD = _this.article.is3D;
|
|
1710
1730
|
_this.selectorType = _this.article.selectorTypeCustomer;
|
|
1711
1731
|
_this._ione.getDeliveryPrognosis(_this.article.goodId).then(function (stockInfo) {
|
|
@@ -1736,7 +1756,7 @@
|
|
|
1736
1756
|
ProductPageComponent.decorators = [
|
|
1737
1757
|
{ type: i0.Component, args: [{
|
|
1738
1758
|
selector: 'app-product-page',
|
|
1739
|
-
template: "<ng-container *ngIf=\"settingsLoaded\">\r\n <div class=\"page-wrapper\">\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\">\r\n <div class=\"product-image-container\">\r\n <div class=\"product-page-block-selector-type\">\r\n <app-product-selector-type class=\"default-padding\"\r\n [(currentType)]=\"currentView\"\r\n [show2D]=\"configurable\"\r\n [show3D]=\"threeD\"\r\n ></app-product-selector-type>\r\n </div>\r\n <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n <ng-container *ngIf=\"settingsLoaded\">\r\n <threed-configurator #configurator class=\"threed-configurator\"\r\n [class.configurator-full-screen]=\"fullScreen\"\r\n [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n ></threed-configurator>\r\n </ng-container>\r\n <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n (click)=\"showFullScreen()\"></co-icon>\r\n <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-right\">\r\n <div class=\"product-page-block-description\">\r\n <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n </div>\r\n <div class=\"product-page-block-additional\">\r\n <div class=\"product-page-block-additional-description\">\r\n <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n </div>\r\n <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n [pricing]=\"article?.pricing\"\r\n [configurable]=\"configurable\"\r\n ></app-product-price>\r\n <ng-container *ngIf=\"settingsLoaded\">\r\n <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n [class.default-padding]=\"!fullScreen\"\r\n [class.show-full-screen]=\"fullScreen\"\r\n [class.mini-scrollbar]=\"fullScreen\"\r\n [sku]=\"sku\"\r\n [settings]=\"settings\"\r\n (onUserActionFromThreeD)=\"configuring = true\"\r\n (instanceSet)=\"setInstance($event)\"\r\n (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n ></threed-selections>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n <app-product-addtocart\r\n [configurable]=\"configurable\"\r\n [createFrozenArticle]=\"createFrozenArticle\"\r\n [configuring]=\"configuring\"\r\n [article]=\"article\"\r\n [externalSource]=\"externalSource\"\r\n [isReturn]=\"isReturn\"\r\n (startConfiguration)=\"handleStartConfiguration()\"\r\n (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n ></app-product-addtocart>\r\n </div>\r\n <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n <app-product-addtocart class=\"default-padding\"\r\n [configurable]=\"false\"\r\n [fullscreen]=\"fullScreen\"\r\n [configuring]=\"configuring\"\r\n [article]=\"article\"\r\n [externalSource]=\"externalSource\"\r\n [isReturn]=\"isReturn\"\r\n (startConfiguration)=\"handleStartConfiguration()\"\r\n ></app-product-addtocart>\r\n </div>\r\n <div class=\"product-page-block-variants\">\r\n <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n </div>\r\n <div class=\"product-page-block-stock\">\r\n <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n </div>\r\n <div class=\"product-page-block-delivery\">\r\n <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\">\r\n <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n </div>\r\n <div class=\"page-wrapper-right\">\r\n <div class=\"product-page-block-related s-padding\">\r\n <app-product-related\r\n *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"1\"\r\n [label]=\"'RELATED_PRODUCTS' | localize\">\r\n </app-product-related>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-content no-top-margin\">\r\n <div class=\"page-wrapper-full\">\r\n <div class=\"product-page-block-alternatives s-padding\">\r\n <app-product-related\r\n *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"4\"\r\n [isSmallModus]=\"false\"\r\n [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n </app-product-related>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showRelatedProductsPopup\">\r\n <co-product-dialog\r\n [mainArticle]=\"article\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"1\"\r\n (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n >\r\n </co-product-dialog>\r\n\r\n<!-- <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n<!-- [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n </div>\r\n\r\n\r\n </div>\r\n</ng-container>\r\n",
|
|
1759
|
+
template: "<ng-container *ngIf=\"settingsLoaded\">\r\n <div class=\"page-wrapper\">\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\">\r\n <div class=\"product-image-container\">\r\n <div class=\"product-page-block-selector-type\">\r\n <app-product-selector-type class=\"default-padding\"\r\n [(currentType)]=\"currentView\"\r\n [show2D]=\"configurable\"\r\n [show3D]=\"threeD\"\r\n ></app-product-selector-type>\r\n </div>\r\n <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n <ng-container *ngIf=\"settingsLoaded\">\r\n <threed-configurator #configurator class=\"threed-configurator\"\r\n [class.configurator-full-screen]=\"fullScreen\"\r\n [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n ></threed-configurator>\r\n </ng-container>\r\n <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n (click)=\"showFullScreen()\"></co-icon>\r\n <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-right\">\r\n <div class=\"product-page-block-description\">\r\n <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n </div>\r\n <div class=\"product-page-block-additional\">\r\n <div class=\"product-page-block-additional-description\">\r\n <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n </div>\r\n <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n [pricing]=\"article?.pricing\"\r\n [configurable]=\"configurable\"\r\n ></app-product-price>\r\n <ng-container *ngIf=\"settingsLoaded\">\r\n <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n [class.default-padding]=\"!fullScreen\"\r\n [class.show-full-screen]=\"fullScreen\"\r\n [class.mini-scrollbar]=\"fullScreen\"\r\n [sku]=\"sku\"\r\n [settings]=\"settings\"\r\n (onUserActionFromThreeD)=\"configuring = true\"\r\n (instanceSet)=\"setInstance($event)\"\r\n (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n ></threed-selections>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n <app-product-addtocart\r\n [configurable]=\"configurable\"\r\n [createFrozenArticle]=\"createFrozenArticle\"\r\n [configuring]=\"configuring\"\r\n [showAddToCart]=\"showAddToCart\"\r\n [article]=\"article\"\r\n [externalSource]=\"externalSource\"\r\n [isReturn]=\"isReturn\"\r\n (startConfiguration)=\"handleStartConfiguration()\"\r\n (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n ></app-product-addtocart>\r\n </div>\r\n <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n <app-product-addtocart class=\"default-padding\"\r\n [configurable]=\"false\"\r\n [fullscreen]=\"fullScreen\"\r\n [showAddToCart]=\"showAddToCart\"\r\n [configuring]=\"configuring\"\r\n [article]=\"article\"\r\n [externalSource]=\"externalSource\"\r\n [isReturn]=\"isReturn\"\r\n (startConfiguration)=\"handleStartConfiguration()\"\r\n ></app-product-addtocart>\r\n </div>\r\n <div class=\"product-page-block-variants\">\r\n <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n </div>\r\n <div class=\"product-page-block-stock\">\r\n <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n </div>\r\n <div class=\"product-page-block-delivery\">\r\n <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\">\r\n <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n </div>\r\n <div class=\"page-wrapper-right\">\r\n <div class=\"product-page-block-related s-padding\">\r\n <app-product-related\r\n *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"1\"\r\n [label]=\"'RELATED_PRODUCTS' | localize\">\r\n </app-product-related>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-content no-top-margin\">\r\n <div class=\"page-wrapper-full\">\r\n <div class=\"product-page-block-alternatives s-padding\">\r\n <app-product-related\r\n *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"4\"\r\n [isSmallModus]=\"false\"\r\n [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n </app-product-related>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showRelatedProductsPopup\">\r\n <co-product-dialog\r\n [mainArticle]=\"article\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"1\"\r\n (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n >\r\n </co-product-dialog>\r\n\r\n<!-- <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n<!-- [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n </div>\r\n\r\n\r\n </div>\r\n</ng-container>\r\n",
|
|
1740
1760
|
animations: [
|
|
1741
1761
|
animations.trigger('toggleFullScreen', [
|
|
1742
1762
|
animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
|
|
@@ -1769,7 +1789,7 @@
|
|
|
1769
1789
|
animations.transition('void => *', animations.animate('200ms ease-in-out')),
|
|
1770
1790
|
])
|
|
1771
1791
|
],
|
|
1772
|
-
styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
|
|
1792
|
+
styles: [".page-wrapper{font-family:iOneMontserrat;font-size:12px;display:flex;flex-direction:column;max-width:1400px;padding:0 15px;margin:0 auto}.page-wrapper-content{display:flex;flex-direction:row;margin:40px 0}.page-wrapper-content:first-child{margin-top:0}.page-wrapper-content.no-top-margin{margin-top:0}.page-wrapper-left{display:flex;width:55%;flex-direction:column}.page-wrapper-right{display:flex;width:45%;flex-direction:column}.page-wrapper-full{display:flex;width:100%;flex-direction:column}.page-wrapper-66{display:flex;width:60%;flex-direction:column}.page-wrapper-33{display:flex;width:40%;flex-direction:column}.threed-selections{display:none}.threed-selections.show-selections{display:block}.threed-selections ::ng-deep .rp-lite-selector .rp-answers-slideout ::ng-deep co-slideout{width:480px;z-index:3}.threed-selections ::ng-deep .co-summary-line{cursor:pointer}.product-action-buttons{position:relative}.product-action-buttons.full-screen{z-index:10}.product-image-container{grid-column:1/7;grid-row:1/6;position:relative}.product-page-block-selector-type{width:auto;position:absolute;top:10px;right:10px;z-index:2}.product-page-block-image{box-sizing:border-box;width:100%;z-index:1;position:relative}.product-page-block-image .threed-configurator{border:1px solid #efefef}.product-page-block-image .threed-configurator .layer .viewer canvas{height:100%;width:100%}.product-page-block-image .threed-configurator ::ng-deep .rp-element-toolbar{top:30px}.product-page-block-image app-image-carousel.show-animated,.product-page-block-image threed-configurator.show-animated{opacity:1;z-index:0;transition:all .2s ease-in-out}.product-page-block-image .fullscreen-button{cursor:pointer;height:50px;width:50px;position:absolute;left:30px;z-index:100;top:30px}.product-page-block-image.full{grid-column:1/11;grid-row:2/span 10;z-index:3}.product-page-block-description{grid-column:7/12;grid-row:1/1}.product-page-block-additional{width:100%}.product-page-block-additional-description{width:100%}.product-page-block-price{grid-column:1/3;grid-row:2/2;align-self:center}.product-page-block-price.full{grid-column:1/5}.product-page-block-addtocart{grid-column:3/5;grid-row:2/2;align-self:center;padding-top:30px!important}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button:hover div.rippler{background:#f6f5f4}.product-page-block-addtocart ::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon{position:relative;z-index:2}.product-page-block-addtocart ::ng-deep co-button.cart-button{cursor:pointer}.product-page-block-addtocart ::ng-deep co-button.cart-button:hover{background:#74B77F}.addtocart-reserved{grid-column:1/3;grid-row:3/3}.product-page-block-stock{grid-column:1/3;grid-row:4/4}.product-page-block-delivery{grid-column:3/5;grid-row:4/4}::ng-deep co-scroll-container{overflow:hidden;position:relative}::ng-deep co-scroll-container .content-wrapper{padding:0}::ng-deep co-scroll-container .scroll-layer{left:0;top:0}::ng-deep co-scroll-container .scroll-layer .scroller{width:34px;height:34px;border-radius:36px;background:#fff;cursor:pointer;box-shadow:0 0 5px #0003}::ng-deep co-scroll-container .scroll-layer .scroller:hover{background:#f6f5f4}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll{left:5px}::ng-deep co-scroll-container .scroll-layer .scroller.left-scroll:before{border-width:0 3px 3px 0;padding:4px;margin-left:13px;margin-top:11px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll{right:5px}::ng-deep co-scroll-container .scroll-layer .scroller.right-scroll:after{border-width:0 3px 3px 0;padding:4px;margin-left:9px;margin-top:11px}.product-page-block-variants{margin:20px 0 0}.product-page-block-variants ::ng-deep app-product-related>div{display:flex;grid-gap:15px;gap:15px;align-items:center;border-top:1px solid #f6f5f4;padding:5px 0 7px 15px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep app-header h3{font-size:14px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container{width:320px;max-width:100%;padding:0 16px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller{width:26px;height:26px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll{left:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.left-scroll:before{border-width:0 2px 2px 0;margin-left:9px;margin-top:9px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll{right:5px}.product-page-block-variants ::ng-deep app-product-related>div ::ng-deep co-scroll-container .scroller.right-scroll:after{border-width:0 2px 2px 0;margin-left:6px;margin-top:9px}.product-page-block-variants ::ng-deep co-tile.small{min-width:50px!important;max-width:50px!important;border:1px solid #f6f5f4;margin:0 10px 0 0;border-radius:4px}.product-page-block-variants ::ng-deep co-tile.small:hover{border-color:#22313c}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper{padding:0}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-top{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image{height:40px!important;padding:5px;margin-bottom:10px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper .no-image{width:40px;height:40px}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .image .no-image-wrapper span{display:none!important}.product-page-block-variants ::ng-deep co-tile.small .tile-wrapper .tile-bottom{display:none}.product-page-block-variants ::ng-deep co-tile.small .tile-extra-bottom{display:none}.product-page-block-alternatives ::ng-deep .article-wrapper{margin:0 20px 0 0}.product-page-block-alternatives ::ng-deep .article-wrapper:last-child{margin:0}.product-page-block-alternatives ::ng-deep co-tile{cursor:pointer;transition:all .14s ease-out;border:1px solid transparent;border-bottom-color:#f6f5f4;padding:15px 10px 0;width:319px;max-width:none;min-width:0;box-sizing:border-box}.product-page-block-alternatives ::ng-deep co-tile:hover{box-shadow:none;border-color:#f6f5f4}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper div.image co-image{transform:scale(1.05)}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-wrapper .tile-bottom{margin:0}.product-page-block-alternatives ::ng-deep co-tile:hover .tile-extra-bottom .main .description{text-decoration:underline}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper{padding:0;position:relative;outline:none;overflow:hidden}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-top{position:absolute;left:0;top:0;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image{position:relative;padding:1px;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:250px;margin:0 auto 10px;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image:after{content:\"\";padding:100% 0 0;float:left;width:100%}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image co-image{position:absolute;left:0;top:0;overflow:hidden;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;z-index:-1;transition:all .2s ease}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper div.image .no-image-wrapper{position:absolute;display:flex;left:50%;top:50%;margin:-48px 0 0 -54px;flex-direction:column;align-items:center;opacity:.25}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom{transition:all .2s ease;height:auto}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button{margin:0 0 5px!important;width:36px;height:36px;border:1px solid #22313C;cursor:pointer;border-radius:4px;padding:0!important;font-size:0}.product-page-block-alternatives ::ng-deep co-tile .tile-wrapper .tile-bottom ::ng-deep co-button co-icon{width:32px;height:32px;margin:0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom{outline:none;padding:15px 0;background:transparent!important;min-height:60px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main{padding:0 10px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .description{font-size:15px;font-weight:bold;margin:0 0 2px}.product-page-block-alternatives ::ng-deep co-tile .tile-extra-bottom .main .price{font-size:16px;margin:15px 0 0;font-weight:bold;color:#2b60a7}.product-page-block-additional-information{grid-column:1/6;grid-row:4/4}.product-page-block-properties{grid-column:7/10;grid-row:3/3}.product-page-block-related-articles{grid-column:2/6;grid-row:4/4}.product-page-block-alternative-articles{grid-column:6/10;grid-row:4/4}.product-page-block-documents{grid-column:2/6;grid-row:5/5}.product-page-block-symbols{grid-column:6/10;grid-row:5/5}@media screen and (max-width: 950px){.default-padding{padding-top:20px;padding-bottom:20px}.m-padding{padding-top:15px;padding-bottom:15px}.s-padding{padding-top:5px;padding-bottom:5px}.page-wrapper{max-width:650px}.page-wrapper .page-wrapper-content{flex-direction:column;margin:30px 0}.page-wrapper .page-wrapper-content .page-wrapper-left{width:100%}.page-wrapper .page-wrapper-content .page-wrapper-right{width:100%}.product-page-block-alternatives ::ng-deep co-tile{width:284px!important}}@media screen and (max-width: 650px){[class*=-padding]{padding-left:0!important;padding-right:0!important}.product-page-block-addtocart ::ng-deep co-number-picker co-button{height:38px!important}.product-page-block-addtocart ::ng-deep co-number-picker co-input-text{height:38px!important;width:36px!important}.product-page-block-addtocart ::ng-deep co-button.cart-button{height:40px;font-size:13px}}\n"]
|
|
1773
1793
|
},] }
|
|
1774
1794
|
];
|
|
1775
1795
|
ProductPageComponent.ctorParameters = function () { return [
|
|
@@ -1905,31 +1925,45 @@
|
|
|
1905
1925
|
},] }
|
|
1906
1926
|
];
|
|
1907
1927
|
|
|
1928
|
+
var ImageViewModel = /** @class */ (function () {
|
|
1929
|
+
function ImageViewModel() {
|
|
1930
|
+
}
|
|
1931
|
+
return ImageViewModel;
|
|
1932
|
+
}());
|
|
1908
1933
|
var ImageCarouselComponent = /** @class */ (function () {
|
|
1909
|
-
function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer
|
|
1934
|
+
function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
1910
1935
|
var _this = this;
|
|
1911
1936
|
this._ione = _ione;
|
|
1912
1937
|
this._appEventService = _appEventService;
|
|
1913
1938
|
this._changeDetector = _changeDetector;
|
|
1914
1939
|
this._domSanitizer = _domSanitizer;
|
|
1915
|
-
this.iconCache = iconCache;
|
|
1916
|
-
this.icons = IconEnum;
|
|
1917
|
-
this.showLoader = false;
|
|
1918
1940
|
this.showRefresh = false;
|
|
1919
1941
|
this.resizing = false;
|
|
1942
|
+
this.imageViewModels = [];
|
|
1943
|
+
this.showLoader = false;
|
|
1920
1944
|
this._currentIndex = 0;
|
|
1921
1945
|
this._images = [];
|
|
1922
1946
|
this._subs = [];
|
|
1947
|
+
this._resizeCanvasHeight = 500;
|
|
1923
1948
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(function () {
|
|
1924
1949
|
_this.showLoader = true;
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
_this.
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1950
|
+
_this._changeDetector.detectChanges();
|
|
1951
|
+
setTimeout(function () {
|
|
1952
|
+
_this.showLoader = false;
|
|
1953
|
+
_this._changeDetector.detectChanges();
|
|
1954
|
+
}, 10000);
|
|
1955
|
+
}), this._appEventService.onDraftRenderImageReceived.subscribe(function (event) {
|
|
1956
|
+
if (event && event.detail) {
|
|
1957
|
+
if (_this._images[0] instanceof coDocument.CoDocument) {
|
|
1958
|
+
_this._images.unshift(event.detail);
|
|
1959
|
+
}
|
|
1960
|
+
else {
|
|
1961
|
+
_this._images[0] = event.detail;
|
|
1962
|
+
}
|
|
1963
|
+
_this._loadAndRescaleImages();
|
|
1931
1964
|
}
|
|
1932
1965
|
_this.showLoader = false;
|
|
1966
|
+
_this._changeDetector.detectChanges();
|
|
1933
1967
|
}));
|
|
1934
1968
|
}
|
|
1935
1969
|
Object.defineProperty(ImageCarouselComponent.prototype, "images", {
|
|
@@ -1939,7 +1973,7 @@
|
|
|
1939
1973
|
set: function (value) {
|
|
1940
1974
|
if (value && value.length > 0) {
|
|
1941
1975
|
this._images = this._filterValidImages(value);
|
|
1942
|
-
this.
|
|
1976
|
+
this._loadAndRescaleImages();
|
|
1943
1977
|
this._changeDetector.detectChanges();
|
|
1944
1978
|
}
|
|
1945
1979
|
},
|
|
@@ -1975,8 +2009,6 @@
|
|
|
1975
2009
|
enumerable: false,
|
|
1976
2010
|
configurable: true
|
|
1977
2011
|
});
|
|
1978
|
-
ImageCarouselComponent.prototype.ngOnInit = function () {
|
|
1979
|
-
};
|
|
1980
2012
|
ImageCarouselComponent.prototype.ngOnDestroy = function () {
|
|
1981
2013
|
this.carousel = undefined;
|
|
1982
2014
|
this._subs.forEach(function (s) { return s.unsubscribe(); });
|
|
@@ -1987,20 +2019,16 @@
|
|
|
1987
2019
|
ImageCarouselComponent.prototype.onForceRenderImage = function () {
|
|
1988
2020
|
this._appEventService.onForceRenderImage.next();
|
|
1989
2021
|
};
|
|
1990
|
-
ImageCarouselComponent.prototype.
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
2022
|
+
ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
|
|
2023
|
+
if (imageViewModel && imageViewModel.originalSource) {
|
|
2024
|
+
var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
|
|
2025
|
+
// Set the content of the popup window
|
|
2026
|
+
popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
|
|
2027
|
+
popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
|
|
2028
|
+
popupWindow.document.write('</body></html>');
|
|
2029
|
+
// Close the document to render the popup window
|
|
2030
|
+
popupWindow.document.close();
|
|
1999
2031
|
}
|
|
2000
|
-
else if (image.detail !== undefined) {
|
|
2001
|
-
source = image.detail;
|
|
2002
|
-
}
|
|
2003
|
-
return this._domSanitizer.bypassSecurityTrustUrl(source);
|
|
2004
2032
|
};
|
|
2005
2033
|
ImageCarouselComponent.prototype._filterValidImages = function (value) {
|
|
2006
2034
|
if (!value) {
|
|
@@ -2008,23 +2036,76 @@
|
|
|
2008
2036
|
}
|
|
2009
2037
|
return value.filter(function (doc) {
|
|
2010
2038
|
var pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
|
|
2011
|
-
return pattern.test(doc.fileName) || !!doc.filePath;
|
|
2039
|
+
return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
|
|
2012
2040
|
});
|
|
2013
2041
|
};
|
|
2014
|
-
ImageCarouselComponent.prototype.
|
|
2042
|
+
ImageCarouselComponent.prototype._loadAndRescaleImages = function () {
|
|
2015
2043
|
var _this = this;
|
|
2044
|
+
this.imageViewModels.length = 0;
|
|
2016
2045
|
if (this._images) {
|
|
2017
2046
|
this._images.forEach(function (i) {
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
}
|
|
2023
|
-
});
|
|
2047
|
+
var imageViewModel = new ImageViewModel();
|
|
2048
|
+
imageViewModel.image = i;
|
|
2049
|
+
if (typeof i === 'string') { // is a rendered image coming from configurator
|
|
2050
|
+
_this._resizeAndSanitizeSource(i, imageViewModel);
|
|
2024
2051
|
}
|
|
2052
|
+
else {
|
|
2053
|
+
if (i.filePath) {
|
|
2054
|
+
_this._resizeAndSanitizeSource(i.filePath, imageViewModel);
|
|
2055
|
+
}
|
|
2056
|
+
else if (i.documentBody) {
|
|
2057
|
+
_this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
2058
|
+
}
|
|
2059
|
+
else {
|
|
2060
|
+
_this._ione.getDocumentContent(i.documentId, false).then(function (content) {
|
|
2061
|
+
if (content) {
|
|
2062
|
+
i.documentBody = content.documentContent;
|
|
2063
|
+
_this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
2064
|
+
_this._changeDetector.detectChanges();
|
|
2065
|
+
}
|
|
2066
|
+
});
|
|
2067
|
+
}
|
|
2068
|
+
}
|
|
2069
|
+
_this.imageViewModels.push(imageViewModel);
|
|
2070
|
+
_this._changeDetector.detectChanges();
|
|
2025
2071
|
});
|
|
2026
2072
|
}
|
|
2027
2073
|
};
|
|
2074
|
+
ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
|
|
2075
|
+
var _this = this;
|
|
2076
|
+
var resizeCanvas = document.createElement('canvas');
|
|
2077
|
+
var resizeCanvasContext = resizeCanvas.getContext('2d');
|
|
2078
|
+
var resizeImage = document.createElement('img');
|
|
2079
|
+
resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
2080
|
+
var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
|
|
2081
|
+
return __generator(this, function (_a) {
|
|
2082
|
+
resizeCanvasContext.imageSmoothingEnabled = true;
|
|
2083
|
+
resizeCanvasContext.imageSmoothingQuality = 'high';
|
|
2084
|
+
originalWidth = resizeImage.width;
|
|
2085
|
+
originalHeight = resizeImage.height;
|
|
2086
|
+
aspectRatio = originalWidth / originalHeight;
|
|
2087
|
+
newWidth = this._resizeCanvasHeight;
|
|
2088
|
+
newHeight = this._resizeCanvasHeight;
|
|
2089
|
+
if (originalWidth > originalHeight) {
|
|
2090
|
+
newHeight = this._resizeCanvasHeight / aspectRatio;
|
|
2091
|
+
}
|
|
2092
|
+
else {
|
|
2093
|
+
newWidth = this._resizeCanvasHeight * aspectRatio;
|
|
2094
|
+
}
|
|
2095
|
+
// Set the canvas size to the new width and height
|
|
2096
|
+
resizeCanvas.width = newWidth;
|
|
2097
|
+
resizeCanvas.height = newHeight;
|
|
2098
|
+
imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
|
|
2099
|
+
resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
|
|
2100
|
+
resizedSource = resizeCanvas.toDataURL('image/jpeg');
|
|
2101
|
+
imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
|
|
2102
|
+
imageViewModel.originalSource = source;
|
|
2103
|
+
return [2 /*return*/];
|
|
2104
|
+
});
|
|
2105
|
+
}); };
|
|
2106
|
+
// @ts-ignore
|
|
2107
|
+
resizeImage.src = source;
|
|
2108
|
+
};
|
|
2028
2109
|
ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
|
|
2029
2110
|
if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
|
|
2030
2111
|
var movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
|
|
@@ -2042,16 +2123,16 @@
|
|
|
2042
2123
|
ImageCarouselComponent.decorators = [
|
|
2043
2124
|
{ type: i0.Component, args: [{
|
|
2044
2125
|
selector: 'app-image-carousel',
|
|
2045
|
-
template: "\n
|
|
2046
|
-
|
|
2126
|
+
template: "\n <div id=\"product_page_carousel\">\n <div id=\"product_page_carousel_items\">\n <co-loader [isShown]=\"true\" *ngIf=\"showLoader\"></co-loader>\n <div #carousel class=\"inner-carousel\">\n <!-- This has been taken out of the for loop to prevent flashing images when updating. -->\n <div *ngIf=\"imageViewModels[0]\" class=\"carousel-item\" [id]=\"'slide-0'\" [class.active]=\"isCurrentIndex(0)\" (click)=\"handleShowImage(imageViewModels[0])\">\n <img [src]=\"imageViewModels[0].source\">\n </div>\n <div *ngFor=\"let imageViewModel of imageViewModels.slice(1); let index = index\" class=\"carousel-item\"\n [id]=\"'slide-' + (index + 1)\" [class.active]=\"isCurrentIndex((index + 1))\" (click)=\"handleShowImage(imageViewModel)\">\n <img [src]=\"imageViewModel.source\">\n </div>\n <div class=\"carousel-scroller-layer\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n <div class=\"carousel-item-scroller prev\" (click)=\"gotoPrevSlide()\" *ngIf=\"currentIndex > 0\"></div>\n <div class=\"carousel-item-scroller next\" (click)=\"gotoNextSlide()\" *ngIf=\"currentIndex < images.length - 1\"></div>\n </div>\n </div>\n <!--\n <co-icon class=\"selector-type-icon refresh-button\" [iconData]=\"iconCache.getIcon(icons.Refresh)\" (click)=\"onForceRenderImage()\" [class.loading]=\"showLoader\" *ngIf=\"showRefresh\"></co-icon>\n -->\n </div>\n\n <div id=\"product_page_carousel_thumbs\">\n <co-scroll-container class=\"scroll-container\" *ngIf=\"imageViewModels && imageViewModels.length > 1\">\n <div *ngFor=\"let imageViewModel of imageViewModels; let index = index\" class=\"carousel-thumb\"\n [class.active]=\"index === currentIndex\">\n <img [src]=\"imageViewModel.source\" (click)=\"handleThumbClick(index)\"/>\n </div>\n </co-scroll-container>\n </div>\n </div>\n ",
|
|
2127
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2128
|
+
styles: [":host{max-height:540px;height:100%;position:relative}:host:not(.resizing) .inner-carousel{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}#product_page_carousel{position:relative}#product_page_carousel .refresh-button{position:absolute;bottom:10px;right:10px;background:#fff}#product_page_carousel .refresh-button.loading{animation:spin 1s linear infinite}#product_page_carousel .refresh-button:hover{box-shadow:none;background:#74B77F;transition:all .2s ease-in-out}#product_page_carousel .refresh-button:hover ::ng-deep svg path{fill:#fff!important}#product_page_carousel #product_page_carousel_items{position:relative;margin-bottom:10px}#product_page_carousel #product_page_carousel_items ::ng-deep co-loader{position:absolute}#product_page_carousel .inner-carousel{display:flex;flex-direction:row;align-items:center;overflow:hidden;max-height:500px;border:1px solid #efefef}#product_page_carousel .carousel-item{max-height:500px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;-o-object-fit:contain;object-fit:contain}#product_page_carousel .carousel-scroller-layer{height:100%;width:100%;position:absolute;pointer-events:none;top:0;left:0}#product_page_carousel #product_page_carousel_thumbs{display:flex;justify-content:flex-start;height:80px;margin-left:auto;margin-right:auto}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container{padding:0 22px}#product_page_carousel #product_page_carousel_thumbs ::ng-deep co-scroll-container .content-wrapper{padding:0}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb{opacity:1;cursor:pointer;transition:all .2s ease;padding:4px;border:1px solid #f6f5f4}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb.active,#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:hover{border-color:#22313c}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb:not(:last-child){margin-right:10px}#product_page_carousel #product_page_carousel_thumbs .carousel-thumb img{height:68px}@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"]
|
|
2047
2129
|
},] }
|
|
2048
2130
|
];
|
|
2049
2131
|
ImageCarouselComponent.ctorParameters = function () { return [
|
|
2050
2132
|
{ type: ProductConnectorService },
|
|
2051
2133
|
{ type: ProductEventService },
|
|
2052
2134
|
{ type: i0.ChangeDetectorRef },
|
|
2053
|
-
{ type: i1$1.DomSanitizer }
|
|
2054
|
-
{ type: IconCacheService }
|
|
2135
|
+
{ type: i1$1.DomSanitizer }
|
|
2055
2136
|
]; };
|
|
2056
2137
|
ImageCarouselComponent.propDecorators = {
|
|
2057
2138
|
carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
|
|
@@ -2318,6 +2399,7 @@
|
|
|
2318
2399
|
this.createFrozenArticle = true;
|
|
2319
2400
|
this.configurable = false;
|
|
2320
2401
|
this.configuring = false;
|
|
2402
|
+
this.showAddToCart = false;
|
|
2321
2403
|
this.isReturn = false;
|
|
2322
2404
|
this.fullscreen = false;
|
|
2323
2405
|
this.startConfiguration = new i0.EventEmitter();
|
|
@@ -2431,7 +2513,7 @@
|
|
|
2431
2513
|
ProductAddtocartComponent.decorators = [
|
|
2432
2514
|
{ type: i0.Component, args: [{
|
|
2433
2515
|
selector: 'app-product-addtocart',
|
|
2434
|
-
template: "\n <div class=\"atc-wrapper\">\n <ng-container *ngIf=\"isReturn\">\n <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"-100\" horizontal></co-number-picker>\n </ng-container>\n\n <ng-container *ngIf=\"!isReturn\">\n <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n </ng-container>\n\n <div class=\"button-wrapper\">\n <co-button class=\"configure-button\"
|
|
2516
|
+
template: "\n <div class=\"atc-wrapper\">\n <ng-container *ngIf=\"isReturn\">\n <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"-100\" horizontal></co-number-picker>\n </ng-container>\n\n <ng-container *ngIf=\"!isReturn\">\n <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n </ng-container>\n\n <div class=\"button-wrapper\" *ngIf=\"configurable\">\n <co-button class=\"configure-button\"\n [iconData]=\"iconCache.getIcon(icon.MagicWand)\"\n [label]=\"'CONFIGURE' | localize\"\n (onClick)=\"startConfiguration.emit()\"\n ></co-button>\n </div>\n <div class=\"button-wrapper\" *ngIf=\"showAddToCart && !configurable\">\n <co-button #addtocartbutton class=\"cart-button\"\n [iconData]=\"iconCache.getIcon(icon.AddToCartDrop)\"\n [label]=\"'SHOPPING_CART_IN' | localize\"\n (onClick)=\"handleAddToCartClick(quantity)\"\n ></co-button>\n <co-button class=\"cart-button quote\" *ngIf=\"showQuoteButton\"\n [iconData]=\"iconCache.getIcon(icon.Quote)\"\n [label]=\"'QUOTATION' | localize\"\n (onClick)=\"handleAddToQuoteClick(quantity)\"\n ></co-button>\n </div>\n </div>\n ",
|
|
2435
2517
|
styles: [":host{display:flex;flex-direction:column}:host *:not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:none!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74B77F}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}\n"]
|
|
2436
2518
|
},] }
|
|
2437
2519
|
];
|
|
@@ -2448,6 +2530,7 @@
|
|
|
2448
2530
|
createFrozenArticle: [{ type: i0.Input }],
|
|
2449
2531
|
configurable: [{ type: i0.Input }],
|
|
2450
2532
|
configuring: [{ type: i0.Input }],
|
|
2533
|
+
showAddToCart: [{ type: i0.Input }],
|
|
2451
2534
|
isReturn: [{ type: i0.Input }],
|
|
2452
2535
|
fullscreen: [{ type: i0.HostBinding, args: ['class.full-screen',] }, { type: i0.Input }],
|
|
2453
2536
|
quantity: [{ type: i0.Input }],
|