@colijnit/product 256.1.5 → 256.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/service/product-event.service.d.ts +1 -1
- package/bundles/colijnit-product.umd.js +102 -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/fesm2015/colijnit-product.js +128 -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.6";
|
|
35
|
+
this.publishDate = "14-3-2025 14:06:38";
|
|
36
36
|
}
|
|
37
37
|
return Version;
|
|
38
38
|
}());
|
|
@@ -1738,7 +1738,7 @@
|
|
|
1738
1738
|
animations.transition('void => *', animations.animate('200ms ease-in-out')),
|
|
1739
1739
|
])
|
|
1740
1740
|
],
|
|
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"]
|
|
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}.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
1742
|
},] }
|
|
1743
1743
|
];
|
|
1744
1744
|
ProductPageComponent.ctorParameters = function () { return [
|
|
@@ -1874,31 +1874,45 @@
|
|
|
1874
1874
|
},] }
|
|
1875
1875
|
];
|
|
1876
1876
|
|
|
1877
|
+
var ImageViewModel = /** @class */ (function () {
|
|
1878
|
+
function ImageViewModel() {
|
|
1879
|
+
}
|
|
1880
|
+
return ImageViewModel;
|
|
1881
|
+
}());
|
|
1877
1882
|
var ImageCarouselComponent = /** @class */ (function () {
|
|
1878
|
-
function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer
|
|
1883
|
+
function ImageCarouselComponent(_ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
1879
1884
|
var _this = this;
|
|
1880
1885
|
this._ione = _ione;
|
|
1881
1886
|
this._appEventService = _appEventService;
|
|
1882
1887
|
this._changeDetector = _changeDetector;
|
|
1883
1888
|
this._domSanitizer = _domSanitizer;
|
|
1884
|
-
this.iconCache = iconCache;
|
|
1885
|
-
this.icons = IconEnum;
|
|
1886
|
-
this.showLoader = false;
|
|
1887
1889
|
this.showRefresh = false;
|
|
1888
1890
|
this.resizing = false;
|
|
1891
|
+
this.imageViewModels = [];
|
|
1892
|
+
this.showLoader = false;
|
|
1889
1893
|
this._currentIndex = 0;
|
|
1890
1894
|
this._images = [];
|
|
1891
1895
|
this._subs = [];
|
|
1896
|
+
this._resizeCanvasHeight = 500;
|
|
1892
1897
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(function () {
|
|
1893
1898
|
_this.showLoader = true;
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
_this.
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1899
|
+
_this._changeDetector.detectChanges();
|
|
1900
|
+
setTimeout(function () {
|
|
1901
|
+
_this.showLoader = false;
|
|
1902
|
+
_this._changeDetector.detectChanges();
|
|
1903
|
+
}, 10000);
|
|
1904
|
+
}), this._appEventService.onDraftRenderImageReceived.subscribe(function (event) {
|
|
1905
|
+
if (event && event.detail) {
|
|
1906
|
+
if (_this._images[0] instanceof coDocument.CoDocument) {
|
|
1907
|
+
_this._images.unshift(event.detail);
|
|
1908
|
+
}
|
|
1909
|
+
else {
|
|
1910
|
+
_this._images[0] = event.detail;
|
|
1911
|
+
}
|
|
1912
|
+
_this._loadAndRescaleImages();
|
|
1900
1913
|
}
|
|
1901
1914
|
_this.showLoader = false;
|
|
1915
|
+
_this._changeDetector.detectChanges();
|
|
1902
1916
|
}));
|
|
1903
1917
|
}
|
|
1904
1918
|
Object.defineProperty(ImageCarouselComponent.prototype, "images", {
|
|
@@ -1908,7 +1922,7 @@
|
|
|
1908
1922
|
set: function (value) {
|
|
1909
1923
|
if (value && value.length > 0) {
|
|
1910
1924
|
this._images = this._filterValidImages(value);
|
|
1911
|
-
this.
|
|
1925
|
+
this._loadAndRescaleImages();
|
|
1912
1926
|
this._changeDetector.detectChanges();
|
|
1913
1927
|
}
|
|
1914
1928
|
},
|
|
@@ -1944,8 +1958,6 @@
|
|
|
1944
1958
|
enumerable: false,
|
|
1945
1959
|
configurable: true
|
|
1946
1960
|
});
|
|
1947
|
-
ImageCarouselComponent.prototype.ngOnInit = function () {
|
|
1948
|
-
};
|
|
1949
1961
|
ImageCarouselComponent.prototype.ngOnDestroy = function () {
|
|
1950
1962
|
this.carousel = undefined;
|
|
1951
1963
|
this._subs.forEach(function (s) { return s.unsubscribe(); });
|
|
@@ -1956,20 +1968,16 @@
|
|
|
1956
1968
|
ImageCarouselComponent.prototype.onForceRenderImage = function () {
|
|
1957
1969
|
this._appEventService.onForceRenderImage.next();
|
|
1958
1970
|
};
|
|
1959
|
-
ImageCarouselComponent.prototype.
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
}
|
|
1969
|
-
else if (image.detail !== undefined) {
|
|
1970
|
-
source = image.detail;
|
|
1971
|
+
ImageCarouselComponent.prototype.handleShowImage = function (imageViewModel) {
|
|
1972
|
+
if (imageViewModel && imageViewModel.originalSource) {
|
|
1973
|
+
var popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
|
|
1974
|
+
// Set the content of the popup window
|
|
1975
|
+
popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
|
|
1976
|
+
popupWindow.document.write("<img src=" + imageViewModel.originalSource + " alt=\"Image\" style=\"width:100%; height:auto;\">");
|
|
1977
|
+
popupWindow.document.write('</body></html>');
|
|
1978
|
+
// Close the document to render the popup window
|
|
1979
|
+
popupWindow.document.close();
|
|
1971
1980
|
}
|
|
1972
|
-
return this._domSanitizer.bypassSecurityTrustUrl(source);
|
|
1973
1981
|
};
|
|
1974
1982
|
ImageCarouselComponent.prototype._filterValidImages = function (value) {
|
|
1975
1983
|
if (!value) {
|
|
@@ -1977,23 +1985,76 @@
|
|
|
1977
1985
|
}
|
|
1978
1986
|
return value.filter(function (doc) {
|
|
1979
1987
|
var pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
|
|
1980
|
-
return pattern.test(doc.fileName) || !!doc.filePath;
|
|
1988
|
+
return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
|
|
1981
1989
|
});
|
|
1982
1990
|
};
|
|
1983
|
-
ImageCarouselComponent.prototype.
|
|
1991
|
+
ImageCarouselComponent.prototype._loadAndRescaleImages = function () {
|
|
1984
1992
|
var _this = this;
|
|
1993
|
+
this.imageViewModels.length = 0;
|
|
1985
1994
|
if (this._images) {
|
|
1986
1995
|
this._images.forEach(function (i) {
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
}
|
|
1992
|
-
});
|
|
1996
|
+
var imageViewModel = new ImageViewModel();
|
|
1997
|
+
imageViewModel.image = i;
|
|
1998
|
+
if (typeof i === 'string') { // is a rendered image coming from configurator
|
|
1999
|
+
_this._resizeAndSanitizeSource(i, imageViewModel);
|
|
1993
2000
|
}
|
|
2001
|
+
else {
|
|
2002
|
+
if (i.filePath) {
|
|
2003
|
+
_this._resizeAndSanitizeSource(i.filePath, imageViewModel);
|
|
2004
|
+
}
|
|
2005
|
+
else if (i.documentBody) {
|
|
2006
|
+
_this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
2007
|
+
}
|
|
2008
|
+
else {
|
|
2009
|
+
_this._ione.getDocumentContent(i.documentId, false).then(function (content) {
|
|
2010
|
+
if (content) {
|
|
2011
|
+
i.documentBody = content.documentContent;
|
|
2012
|
+
_this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
2013
|
+
_this._changeDetector.detectChanges();
|
|
2014
|
+
}
|
|
2015
|
+
});
|
|
2016
|
+
}
|
|
2017
|
+
}
|
|
2018
|
+
_this.imageViewModels.push(imageViewModel);
|
|
2019
|
+
_this._changeDetector.detectChanges();
|
|
1994
2020
|
});
|
|
1995
2021
|
}
|
|
1996
2022
|
};
|
|
2023
|
+
ImageCarouselComponent.prototype._resizeAndSanitizeSource = function (source, imageViewModel) {
|
|
2024
|
+
var _this = this;
|
|
2025
|
+
var resizeCanvas = document.createElement('canvas');
|
|
2026
|
+
var resizeCanvasContext = resizeCanvas.getContext('2d');
|
|
2027
|
+
var resizeImage = document.createElement('img');
|
|
2028
|
+
resizeImage.onload = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
2029
|
+
var originalWidth, originalHeight, aspectRatio, newWidth, newHeight, imageWidth, resizedSource;
|
|
2030
|
+
return __generator(this, function (_a) {
|
|
2031
|
+
resizeCanvasContext.imageSmoothingEnabled = true;
|
|
2032
|
+
resizeCanvasContext.imageSmoothingQuality = 'high';
|
|
2033
|
+
originalWidth = resizeImage.width;
|
|
2034
|
+
originalHeight = resizeImage.height;
|
|
2035
|
+
aspectRatio = originalWidth / originalHeight;
|
|
2036
|
+
newWidth = this._resizeCanvasHeight;
|
|
2037
|
+
newHeight = this._resizeCanvasHeight;
|
|
2038
|
+
if (originalWidth > originalHeight) {
|
|
2039
|
+
newHeight = this._resizeCanvasHeight / aspectRatio;
|
|
2040
|
+
}
|
|
2041
|
+
else {
|
|
2042
|
+
newWidth = this._resizeCanvasHeight * aspectRatio;
|
|
2043
|
+
}
|
|
2044
|
+
// Set the canvas size to the new width and height
|
|
2045
|
+
resizeCanvas.width = newWidth;
|
|
2046
|
+
resizeCanvas.height = newHeight;
|
|
2047
|
+
imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
|
|
2048
|
+
resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
|
|
2049
|
+
resizedSource = resizeCanvas.toDataURL('image/jpeg');
|
|
2050
|
+
imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
|
|
2051
|
+
imageViewModel.originalSource = source;
|
|
2052
|
+
return [2 /*return*/];
|
|
2053
|
+
});
|
|
2054
|
+
}); };
|
|
2055
|
+
// @ts-ignore
|
|
2056
|
+
resizeImage.src = source;
|
|
2057
|
+
};
|
|
1997
2058
|
ImageCarouselComponent.prototype._scrollCarouselToIndex = function () {
|
|
1998
2059
|
if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
|
|
1999
2060
|
var movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
|
|
@@ -2011,16 +2072,16 @@
|
|
|
2011
2072
|
ImageCarouselComponent.decorators = [
|
|
2012
2073
|
{ type: i0.Component, args: [{
|
|
2013
2074
|
selector: 'app-image-carousel',
|
|
2014
|
-
template: "\n
|
|
2015
|
-
|
|
2075
|
+
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 ",
|
|
2076
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
2077
|
+
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
2078
|
},] }
|
|
2017
2079
|
];
|
|
2018
2080
|
ImageCarouselComponent.ctorParameters = function () { return [
|
|
2019
2081
|
{ type: ProductConnectorService },
|
|
2020
2082
|
{ type: ProductEventService },
|
|
2021
2083
|
{ type: i0.ChangeDetectorRef },
|
|
2022
|
-
{ type: i1$1.DomSanitizer }
|
|
2023
|
-
{ type: IconCacheService }
|
|
2084
|
+
{ type: i1$1.DomSanitizer }
|
|
2024
2085
|
]; };
|
|
2025
2086
|
ImageCarouselComponent.propDecorators = {
|
|
2026
2087
|
carousel: [{ type: i0.ViewChild, args: ['carousel', { read: i0.ElementRef },] }],
|