@colijnit/product 256.1.5 → 256.1.7
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/service/product-event.service.d.ts +1 -1
- package/bundles/colijnit-product.umd.js +135 -41
- 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-page/product-page.component.js +1 -1
- package/esm2015/app/product-version.js +3 -3
- package/esm2015/app/service/product-event.service.js +1 -1
- package/esm2015/assets/dictionary/text.properties.js +34 -1
- package/fesm2015/colijnit-product.js +161 -70
- package/fesm2015/colijnit-product.js.map +1 -1
- package/package.json +2 -2
|
@@ -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
|
}
|
|
@@ -17,7 +17,7 @@ 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
22
|
onUpdateProductInfoTab: Subject<number>;
|
|
23
23
|
errorMessage: Subject<ValidationMessage[]>;
|
|
@@ -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 = "256.1.
|
|
35
|
-
this.publishDate = "
|
|
34
|
+
this.symVer = "256.1.7";
|
|
35
|
+
this.publishDate = "18/03/2025, 10:19:43";
|
|
36
36
|
}
|
|
37
37
|
return Version;
|
|
38
38
|
}());
|
|
@@ -901,10 +901,43 @@
|
|
|
901
901
|
var Dictionary = /** @class */ (function () {
|
|
902
902
|
function Dictionary() {
|
|
903
903
|
this.strings = {
|
|
904
|
+
"en": {
|
|
905
|
+
"ADDITIONAL_DATA": "Additional information",
|
|
906
|
+
"ALTERNATIVE_PRODUCTS": "Alternative products",
|
|
907
|
+
"ARTICLE_NUMBER": "Productnumber",
|
|
908
|
+
"AS_CONFIGURED": "As configured",
|
|
909
|
+
"CATEGORY": "Category",
|
|
910
|
+
"CATEGORY_TYPE": "Category type",
|
|
911
|
+
"CONFIGURE": "Configure",
|
|
912
|
+
"DELIVERY_TIME_PERIOD": "Delivery time",
|
|
913
|
+
"DESCRIPTION": "Description",
|
|
914
|
+
"DOCUMENTS": "Documents",
|
|
915
|
+
"DOWNLOADS": "Downloads",
|
|
916
|
+
"FEATURES": "Features",
|
|
917
|
+
"HEIGHT": "Height",
|
|
918
|
+
"MATERIAL": "Material",
|
|
919
|
+
"PRODUCT_IN_STOCK": "In stock",
|
|
920
|
+
"PRODUCT_LIMITED_STOCK": "Limited stock",
|
|
921
|
+
"PRODUCT_NOT_IN_STOCK": "Not in stock",
|
|
922
|
+
"PROPERTIES": "Characteristics",
|
|
923
|
+
"QUOTATION": "Quotation",
|
|
924
|
+
"READ_MORE": "Read more",
|
|
925
|
+
"RELATED_PRODUCTS": "Related products",
|
|
926
|
+
"SHOPPING_CART_IN": "In Shopping Cart",
|
|
927
|
+
"SHOW_IN": "Show in",
|
|
928
|
+
"STOCK": "Stock",
|
|
929
|
+
"SYMBOLS": "Symbols",
|
|
930
|
+
"TITLE": "Title",
|
|
931
|
+
"TURNOVERGROUP": "Turnover group",
|
|
932
|
+
"VARIANTS": "Variations",
|
|
933
|
+
"WIDTH": "Width",
|
|
934
|
+
"SUGGESTION": "Suggestion",
|
|
935
|
+
},
|
|
904
936
|
"nl": {
|
|
905
937
|
"ADDITIONAL_DATA": "Extra informatie",
|
|
906
938
|
"ALTERNATIVE_PRODUCTS": "Alternatieve producten",
|
|
907
939
|
"ARTICLE_NUMBER": "Artikel nummer",
|
|
940
|
+
"AS_CONFIGURED": "Zoals samengesteld",
|
|
908
941
|
"CATEGORY": "Categorie",
|
|
909
942
|
"CATEGORY_TYPE": "Categorie type",
|
|
910
943
|
"CONFIGURE": "Configureren",
|
|
@@ -1738,7 +1771,7 @@
|
|
|
1738
1771
|
animations.transition('void => *', animations.animate('200ms ease-in-out')),
|
|
1739
1772
|
])
|
|
1740
1773
|
],
|
|
1741
|
-
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"]
|
|
1774
|
+
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"]
|
|
1742
1775
|
},] }
|
|
1743
1776
|
];
|
|
1744
1777
|
ProductPageComponent.ctorParameters = function () { return [
|
|
@@ -1874,31 +1907,45 @@
|
|
|
1874
1907
|
},] }
|
|
1875
1908
|
];
|
|
1876
1909
|
|
|
1910
|
+
var ImageViewModel = /** @class */ (function () {
|
|
1911
|
+
function ImageViewModel() {
|
|
1912
|
+
}
|
|
1913
|
+
return ImageViewModel;
|
|
1914
|
+
}());
|
|
1877
1915
|
var ImageCarouselComponent = /** @class */ (function () {
|
|
1878
|
-
function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer
|
|
1916
|
+
function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
1879
1917
|
var _this = this;
|
|
1880
1918
|
this._ione = _ione;
|
|
1881
1919
|
this._appEventService = _appEventService;
|
|
1882
1920
|
this._changeDetector = _changeDetector;
|
|
1883
1921
|
this._domSanitizer = _domSanitizer;
|
|
1884
|
-
this.iconCache = iconCache;
|
|
1885
|
-
this.icons = IconEnum;
|
|
1886
|
-
this.showLoader = false;
|
|
1887
1922
|
this.showRefresh = false;
|
|
1888
1923
|
this.resizing = false;
|
|
1924
|
+
this.imageViewModels = [];
|
|
1925
|
+
this.showLoader = false;
|
|
1889
1926
|
this._currentIndex = 0;
|
|
1890
1927
|
this._images = [];
|
|
1891
1928
|
this._subs = [];
|
|
1929
|
+
this._resizeCanvasHeight = 500;
|
|
1892
1930
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(function () {
|
|
1893
1931
|
_this.showLoader = true;
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
_this.
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1932
|
+
_this._changeDetector.detectChanges();
|
|
1933
|
+
setTimeout(function () {
|
|
1934
|
+
_this.showLoader = false;
|
|
1935
|
+
_this._changeDetector.detectChanges();
|
|
1936
|
+
}, 10000);
|
|
1937
|
+
}), this._appEventService.onDraftRenderImageReceived.subscribe(function (event) {
|
|
1938
|
+
if (event && event.detail) {
|
|
1939
|
+
if (_this._images[0] instanceof coDocument.CoDocument) {
|
|
1940
|
+
_this._images.unshift(event.detail);
|
|
1941
|
+
}
|
|
1942
|
+
else {
|
|
1943
|
+
_this._images[0] = event.detail;
|
|
1944
|
+
}
|
|
1945
|
+
_this._loadAndRescaleImages();
|
|
1900
1946
|
}
|
|
1901
1947
|
_this.showLoader = false;
|
|
1948
|
+
_this._changeDetector.detectChanges();
|
|
1902
1949
|
}));
|
|
1903
1950
|
}
|
|
1904
1951
|
Object.defineProperty(ImageCarouselComponent.prototype, "images", {
|
|
@@ -1908,7 +1955,7 @@
|
|
|
1908
1955
|
set: function (value) {
|
|
1909
1956
|
if (value && value.length > 0) {
|
|
1910
1957
|
this._images = this._filterValidImages(value);
|
|
1911
|
-
this.
|
|
1958
|
+
this._loadAndRescaleImages();
|
|
1912
1959
|
this._changeDetector.detectChanges();
|
|
1913
1960
|
}
|
|
1914
1961
|
},
|
|
@@ -1944,8 +1991,6 @@
|
|
|
1944
1991
|
enumerable: false,
|
|
1945
1992
|
configurable: true
|
|
1946
1993
|
});
|
|
1947
|
-
ImageCarouselComponent.prototype.ngOnInit = function () {
|
|
1948
|
-
};
|
|
1949
1994
|
ImageCarouselComponent.prototype.ngOnDestroy = function () {
|
|
1950
1995
|
this.carousel = undefined;
|
|
1951
1996
|
this._subs.forEach(function (s) { return s.unsubscribe(); });
|
|
@@ -1956,20 +2001,16 @@
|
|
|
1956
2001
|
ImageCarouselComponent.prototype.onForceRenderImage = function () {
|
|
1957
2002
|
this._appEventService.onForceRenderImage.next();
|
|
1958
2003
|
};
|
|
1959
|
-
ImageCarouselComponent.prototype.
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
}
|
|
1969
|
-
else if (image.detail !== undefined) {
|
|
1970
|
-
source = image.detail;
|
|
2004
|
+
ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
|
|
2005
|
+
if (imageViewModel && imageViewModel.originalSource) {
|
|
2006
|
+
var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
|
|
2007
|
+
// Set the content of the popup window
|
|
2008
|
+
popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
|
|
2009
|
+
popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
|
|
2010
|
+
popupWindow.document.write('</body></html>');
|
|
2011
|
+
// Close the document to render the popup window
|
|
2012
|
+
popupWindow.document.close();
|
|
1971
2013
|
}
|
|
1972
|
-
return this._domSanitizer.bypassSecurityTrustUrl(source);
|
|
1973
2014
|
};
|
|
1974
2015
|
ImageCarouselComponent.prototype._filterValidImages = function (value) {
|
|
1975
2016
|
if (!value) {
|
|
@@ -1977,23 +2018,76 @@
|
|
|
1977
2018
|
}
|
|
1978
2019
|
return value.filter(function (doc) {
|
|
1979
2020
|
var pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
|
|
1980
|
-
return pattern.test(doc.fileName) || !!doc.filePath;
|
|
2021
|
+
return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
|
|
1981
2022
|
});
|
|
1982
2023
|
};
|
|
1983
|
-
ImageCarouselComponent.prototype.
|
|
2024
|
+
ImageCarouselComponent.prototype._loadAndRescaleImages = function () {
|
|
1984
2025
|
var _this = this;
|
|
2026
|
+
this.imageViewModels.length = 0;
|
|
1985
2027
|
if (this._images) {
|
|
1986
2028
|
this._images.forEach(function (i) {
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
2029
|
+
var imageViewModel = new ImageViewModel();
|
|
2030
|
+
imageViewModel.image = i;
|
|
2031
|
+
if (typeof i === 'string') { // is a rendered image coming from configurator
|
|
2032
|
+
_this._resizeAndSanitizeSource(i, imageViewModel);
|
|
2033
|
+
}
|
|
2034
|
+
else {
|
|
2035
|
+
if (i.filePath) {
|
|
2036
|
+
_this._resizeAndSanitizeSource(i.filePath, imageViewModel);
|
|
2037
|
+
}
|
|
2038
|
+
else if (i.documentBody) {
|
|
2039
|
+
_this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
2040
|
+
}
|
|
2041
|
+
else {
|
|
2042
|
+
_this._ione.getDocumentContent(i.documentId, false).then(function (content) {
|
|
2043
|
+
if (content) {
|
|
2044
|
+
i.documentBody = content.documentContent;
|
|
2045
|
+
_this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
2046
|
+
_this._changeDetector.detectChanges();
|
|
2047
|
+
}
|
|
2048
|
+
});
|
|
2049
|
+
}
|
|
1993
2050
|
}
|
|
2051
|
+
_this.imageViewModels.push(imageViewModel);
|
|
2052
|
+
_this._changeDetector.detectChanges();
|
|
1994
2053
|
});
|
|
1995
2054
|
}
|
|
1996
2055
|
};
|
|
2056
|
+
ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
|
|
2057
|
+
var _this = this;
|
|
2058
|
+
var resizeCanvas = document.createElement('canvas');
|
|
2059
|
+
var resizeCanvasContext = resizeCanvas.getContext('2d');
|
|
2060
|
+
var resizeImage = document.createElement('img');
|
|
2061
|
+
resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
2062
|
+
var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
|
|
2063
|
+
return __generator(this, function (_a) {
|
|
2064
|
+
resizeCanvasContext.imageSmoothingEnabled = true;
|
|
2065
|
+
resizeCanvasContext.imageSmoothingQuality = 'high';
|
|
2066
|
+
originalWidth = resizeImage.width;
|
|
2067
|
+
originalHeight = resizeImage.height;
|
|
2068
|
+
aspectRatio = originalWidth / originalHeight;
|
|
2069
|
+
newWidth = this._resizeCanvasHeight;
|
|
2070
|
+
newHeight = this._resizeCanvasHeight;
|
|
2071
|
+
if (originalWidth > originalHeight) {
|
|
2072
|
+
newHeight = this._resizeCanvasHeight / aspectRatio;
|
|
2073
|
+
}
|
|
2074
|
+
else {
|
|
2075
|
+
newWidth = this._resizeCanvasHeight * aspectRatio;
|
|
2076
|
+
}
|
|
2077
|
+
// Set the canvas size to the new width and height
|
|
2078
|
+
resizeCanvas.width = newWidth;
|
|
2079
|
+
resizeCanvas.height = newHeight;
|
|
2080
|
+
imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
|
|
2081
|
+
resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
|
|
2082
|
+
resizedSource = resizeCanvas.toDataURL('image/jpeg');
|
|
2083
|
+
imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
|
|
2084
|
+
imageViewModel.originalSource = source;
|
|
2085
|
+
return [2 /*return*/];
|
|
2086
|
+
});
|
|
2087
|
+
}); };
|
|
2088
|
+
// @ts-ignore
|
|
2089
|
+
resizeImage.src = source;
|
|
2090
|
+
};
|
|
1997
2091
|
ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
|
|
1998
2092
|
if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
|
|
1999
2093
|
var movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
|
|
@@ -2011,16 +2105,16 @@
|
|
|
2011
2105
|
ImageCarouselComponent.decorators = [
|
|
2012
2106
|
{ type: i0.Component, args: [{
|
|
2013
2107
|
selector: 'app-image-carousel',
|
|
2014
|
-
template: "\n
|
|
2015
|
-
|
|
2108
|
+
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 ",
|
|
2109
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2110
|
+
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"]
|
|
2016
2111
|
},] }
|
|
2017
2112
|
];
|
|
2018
2113
|
ImageCarouselComponent.ctorParameters = function () { return [
|
|
2019
2114
|
{ type: ProductConnectorService },
|
|
2020
2115
|
{ type: ProductEventService },
|
|
2021
2116
|
{ type: i0.ChangeDetectorRef },
|
|
2022
|
-
{ type: i1$1.DomSanitizer }
|
|
2023
|
-
{ type: IconCacheService }
|
|
2117
|
+
{ type: i1$1.DomSanitizer }
|
|
2024
2118
|
]; };
|
|
2025
2119
|
ImageCarouselComponent.propDecorators = {
|
|
2026
2120
|
carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
|