@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,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Directive, EventEmitter, Component, ViewEncapsulation, ChangeDetectorRef, Input, Output, Renderer2, ViewChild, ElementRef, Pipe, NgModule, HostListener, HostBinding, SecurityContext, CUSTOM_ELEMENTS_SCHEMA, Inject, PLATFORM_ID, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
2
|
+
import { Injectable, Directive, EventEmitter, Component, ViewEncapsulation, ChangeDetectorRef, Input, Output, Renderer2, ViewChild, ElementRef, Pipe, NgModule, ChangeDetectionStrategy, HostListener, HostBinding, SecurityContext, CUSTOM_ELEMENTS_SCHEMA, Inject, PLATFORM_ID, NO_ERRORS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { __awaiter } from 'tslib';
|
|
4
4
|
import { Subject, BehaviorSubject } from 'rxjs';
|
|
5
5
|
import { Options } from '@colijnit/ioneconnector/build/model/options';
|
|
@@ -30,8 +30,8 @@ class Version {
|
|
|
30
30
|
constructor() {
|
|
31
31
|
this.name = "@colijnit/product";
|
|
32
32
|
this.description = "Product detail page project for iOne";
|
|
33
|
-
this.symVer = "256.1.
|
|
34
|
-
this.publishDate = "
|
|
33
|
+
this.symVer = "256.1.6";
|
|
34
|
+
this.publishDate = "14-3-2025 14:06:38";
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -1036,7 +1036,7 @@ ProductPageComponent.decorators = [
|
|
|
1036
1036
|
transition('void => *', animate('200ms ease-in-out')),
|
|
1037
1037
|
])
|
|
1038
1038
|
],
|
|
1039
|
-
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"]
|
|
1039
|
+
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"]
|
|
1040
1040
|
},] }
|
|
1041
1041
|
];
|
|
1042
1042
|
ProductPageComponent.ctorParameters = () => [
|
|
@@ -1173,39 +1173,53 @@ ProductSelectorTypeModule.decorators = [
|
|
|
1173
1173
|
},] }
|
|
1174
1174
|
];
|
|
1175
1175
|
|
|
1176
|
+
class ImageViewModel {
|
|
1177
|
+
}
|
|
1176
1178
|
class ImageCarouselComponent {
|
|
1177
|
-
constructor(_ione, _appEventService, _changeDetector, _domSanitizer
|
|
1179
|
+
constructor(_ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
1178
1180
|
this._ione = _ione;
|
|
1179
1181
|
this._appEventService = _appEventService;
|
|
1180
1182
|
this._changeDetector = _changeDetector;
|
|
1181
1183
|
this._domSanitizer = _domSanitizer;
|
|
1182
|
-
this.iconCache = iconCache;
|
|
1183
|
-
this.icons = IconEnum;
|
|
1184
|
-
this.showLoader = false;
|
|
1185
1184
|
this.showRefresh = false;
|
|
1186
1185
|
this.resizing = false;
|
|
1186
|
+
this.imageViewModels = [];
|
|
1187
|
+
this.showLoader = false;
|
|
1187
1188
|
this._currentIndex = 0;
|
|
1188
1189
|
this._images = [];
|
|
1189
1190
|
this._subs = [];
|
|
1191
|
+
this._resizeCanvasHeight = 500;
|
|
1190
1192
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(() => {
|
|
1191
1193
|
this.showLoader = true;
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
this.
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1194
|
+
this._changeDetector.detectChanges();
|
|
1195
|
+
setTimeout(() => {
|
|
1196
|
+
this.showLoader = false;
|
|
1197
|
+
this._changeDetector.detectChanges();
|
|
1198
|
+
}, 10000);
|
|
1199
|
+
}), this._appEventService.onDraftRenderImageReceived.subscribe((event) => {
|
|
1200
|
+
if (event && event.detail) {
|
|
1201
|
+
if (this._images[0] instanceof CoDocument) {
|
|
1202
|
+
this._images.unshift(event.detail);
|
|
1203
|
+
}
|
|
1204
|
+
else {
|
|
1205
|
+
this._images[0] = event.detail;
|
|
1206
|
+
}
|
|
1207
|
+
this._loadAndRescaleImages();
|
|
1198
1208
|
}
|
|
1199
1209
|
this.showLoader = false;
|
|
1210
|
+
this._changeDetector.detectChanges();
|
|
1200
1211
|
}));
|
|
1201
1212
|
}
|
|
1202
1213
|
set images(value) {
|
|
1203
1214
|
if (value && value.length > 0) {
|
|
1204
1215
|
this._images = this._filterValidImages(value);
|
|
1205
|
-
this.
|
|
1216
|
+
this._loadAndRescaleImages();
|
|
1206
1217
|
this._changeDetector.detectChanges();
|
|
1207
1218
|
}
|
|
1208
1219
|
}
|
|
1220
|
+
get images() {
|
|
1221
|
+
return this._images;
|
|
1222
|
+
}
|
|
1209
1223
|
handleWindowResize() {
|
|
1210
1224
|
this.resizing = true;
|
|
1211
1225
|
this._scrollCarouselToIndex();
|
|
@@ -1230,11 +1244,6 @@ class ImageCarouselComponent {
|
|
|
1230
1244
|
this._currentIndex = value;
|
|
1231
1245
|
this._scrollCarouselToIndex();
|
|
1232
1246
|
}
|
|
1233
|
-
get images() {
|
|
1234
|
-
return this._images;
|
|
1235
|
-
}
|
|
1236
|
-
ngOnInit() {
|
|
1237
|
-
}
|
|
1238
1247
|
ngOnDestroy() {
|
|
1239
1248
|
this.carousel = undefined;
|
|
1240
1249
|
this._subs.forEach(s => s.unsubscribe());
|
|
@@ -1245,43 +1254,90 @@ class ImageCarouselComponent {
|
|
|
1245
1254
|
onForceRenderImage() {
|
|
1246
1255
|
this._appEventService.onForceRenderImage.next();
|
|
1247
1256
|
}
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
}
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
+
handleShowImage(imageViewModel) {
|
|
1258
|
+
if (imageViewModel && imageViewModel.originalSource) {
|
|
1259
|
+
let popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
|
|
1260
|
+
// Set the content of the popup window
|
|
1261
|
+
popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
|
|
1262
|
+
popupWindow.document.write(`<img src=${imageViewModel.originalSource} alt="Image" style="width:100%; height:auto;">`);
|
|
1263
|
+
popupWindow.document.write('</body></html>');
|
|
1264
|
+
// Close the document to render the popup window
|
|
1265
|
+
popupWindow.document.close();
|
|
1257
1266
|
}
|
|
1258
|
-
else if (image.detail !== undefined) {
|
|
1259
|
-
source = image.detail;
|
|
1260
|
-
}
|
|
1261
|
-
return this._domSanitizer.bypassSecurityTrustUrl(source);
|
|
1262
1267
|
}
|
|
1263
1268
|
_filterValidImages(value) {
|
|
1264
1269
|
if (!value) {
|
|
1265
1270
|
return [];
|
|
1266
1271
|
}
|
|
1267
|
-
return value.filter(doc => {
|
|
1272
|
+
return value.filter((doc) => {
|
|
1268
1273
|
const pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
|
|
1269
|
-
return pattern.test(doc.fileName) || !!doc.filePath;
|
|
1274
|
+
return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
|
|
1270
1275
|
});
|
|
1271
1276
|
}
|
|
1272
|
-
|
|
1277
|
+
_loadAndRescaleImages() {
|
|
1278
|
+
this.imageViewModels.length = 0;
|
|
1273
1279
|
if (this._images) {
|
|
1274
1280
|
this._images.forEach((i) => {
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
}
|
|
1280
|
-
});
|
|
1281
|
+
let imageViewModel = new ImageViewModel();
|
|
1282
|
+
imageViewModel.image = i;
|
|
1283
|
+
if (typeof i === 'string') { // is a rendered image coming from configurator
|
|
1284
|
+
this._resizeAndSanitizeSource(i, imageViewModel);
|
|
1281
1285
|
}
|
|
1286
|
+
else {
|
|
1287
|
+
if (i.filePath) {
|
|
1288
|
+
this._resizeAndSanitizeSource(i.filePath, imageViewModel);
|
|
1289
|
+
}
|
|
1290
|
+
else if (i.documentBody) {
|
|
1291
|
+
this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
1292
|
+
}
|
|
1293
|
+
else {
|
|
1294
|
+
this._ione.getDocumentContent(i.documentId, false).then((content) => {
|
|
1295
|
+
if (content) {
|
|
1296
|
+
i.documentBody = content.documentContent;
|
|
1297
|
+
this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
1298
|
+
this._changeDetector.detectChanges();
|
|
1299
|
+
}
|
|
1300
|
+
});
|
|
1301
|
+
}
|
|
1302
|
+
}
|
|
1303
|
+
this.imageViewModels.push(imageViewModel);
|
|
1304
|
+
this._changeDetector.detectChanges();
|
|
1282
1305
|
});
|
|
1283
1306
|
}
|
|
1284
1307
|
}
|
|
1308
|
+
_resizeAndSanitizeSource(source, imageViewModel) {
|
|
1309
|
+
const resizeCanvas = document.createElement('canvas');
|
|
1310
|
+
const resizeCanvasContext = resizeCanvas.getContext('2d');
|
|
1311
|
+
const resizeImage = document.createElement('img');
|
|
1312
|
+
resizeImage.onload = () => __awaiter(this, void 0, void 0, function* () {
|
|
1313
|
+
resizeCanvasContext.imageSmoothingEnabled = true;
|
|
1314
|
+
resizeCanvasContext.imageSmoothingQuality = 'high';
|
|
1315
|
+
// Get the original image dimensions
|
|
1316
|
+
const originalWidth = resizeImage.width;
|
|
1317
|
+
const originalHeight = resizeImage.height;
|
|
1318
|
+
// Calculate the aspect ratio
|
|
1319
|
+
const aspectRatio = originalWidth / originalHeight;
|
|
1320
|
+
// Calculate the new width and height while maintaining the aspect ratio
|
|
1321
|
+
let newWidth = this._resizeCanvasHeight;
|
|
1322
|
+
let newHeight = this._resizeCanvasHeight;
|
|
1323
|
+
if (originalWidth > originalHeight) {
|
|
1324
|
+
newHeight = this._resizeCanvasHeight / aspectRatio;
|
|
1325
|
+
}
|
|
1326
|
+
else {
|
|
1327
|
+
newWidth = this._resizeCanvasHeight * aspectRatio;
|
|
1328
|
+
}
|
|
1329
|
+
// Set the canvas size to the new width and height
|
|
1330
|
+
resizeCanvas.width = newWidth;
|
|
1331
|
+
resizeCanvas.height = newHeight;
|
|
1332
|
+
const imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
|
|
1333
|
+
resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
|
|
1334
|
+
const resizedSource = resizeCanvas.toDataURL('image/jpeg');
|
|
1335
|
+
imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
|
|
1336
|
+
imageViewModel.originalSource = source;
|
|
1337
|
+
});
|
|
1338
|
+
// @ts-ignore
|
|
1339
|
+
resizeImage.src = source;
|
|
1340
|
+
}
|
|
1285
1341
|
_scrollCarouselToIndex() {
|
|
1286
1342
|
if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
|
|
1287
1343
|
const movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
|
|
@@ -1299,45 +1355,47 @@ ImageCarouselComponent.decorators = [
|
|
|
1299
1355
|
{ type: Component, args: [{
|
|
1300
1356
|
selector: 'app-image-carousel',
|
|
1301
1357
|
template: `
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1358
|
+
<div id="product_page_carousel">
|
|
1359
|
+
<div id="product_page_carousel_items">
|
|
1360
|
+
<co-loader [isShown]="true" *ngIf="showLoader"></co-loader>
|
|
1361
|
+
<div #carousel class="inner-carousel">
|
|
1362
|
+
<!-- This has been taken out of the for loop to prevent flashing images when updating. -->
|
|
1363
|
+
<div *ngIf="imageViewModels[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
|
|
1364
|
+
<img [src]="imageViewModels[0].source">
|
|
1365
|
+
</div>
|
|
1366
|
+
<div *ngFor="let imageViewModel of imageViewModels.slice(1); let index = index" class="carousel-item"
|
|
1367
|
+
[id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
|
|
1368
|
+
<img [src]="imageViewModel.source">
|
|
1369
|
+
</div>
|
|
1370
|
+
<div class="carousel-scroller-layer" *ngIf="imageViewModels && imageViewModels.length > 1">
|
|
1371
|
+
<div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
|
|
1372
|
+
<div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
|
|
1373
|
+
</div>
|
|
1374
|
+
</div>
|
|
1375
|
+
<!--
|
|
1376
|
+
<co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
|
|
1377
|
+
-->
|
|
1316
1378
|
</div>
|
|
1317
|
-
</div>
|
|
1318
|
-
<!--
|
|
1319
|
-
<co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
|
|
1320
|
-
-->
|
|
1321
|
-
</div>
|
|
1322
1379
|
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1380
|
+
<div id="product_page_carousel_thumbs">
|
|
1381
|
+
<co-scroll-container class="scroll-container" *ngIf="imageViewModels && imageViewModels.length > 1">
|
|
1382
|
+
<div *ngFor="let imageViewModel of imageViewModels; let index = index" class="carousel-thumb"
|
|
1383
|
+
[class.active]="index === currentIndex">
|
|
1384
|
+
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
|
|
1385
|
+
</div>
|
|
1386
|
+
</co-scroll-container>
|
|
1327
1387
|
</div>
|
|
1328
|
-
</co-scroll-container>
|
|
1329
1388
|
</div>
|
|
1330
|
-
</div>
|
|
1331
1389
|
`,
|
|
1332
|
-
|
|
1390
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1391
|
+
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"]
|
|
1333
1392
|
},] }
|
|
1334
1393
|
];
|
|
1335
1394
|
ImageCarouselComponent.ctorParameters = () => [
|
|
1336
1395
|
{ type: ProductConnectorService },
|
|
1337
1396
|
{ type: ProductEventService },
|
|
1338
1397
|
{ type: ChangeDetectorRef },
|
|
1339
|
-
{ type: DomSanitizer }
|
|
1340
|
-
{ type: IconCacheService }
|
|
1398
|
+
{ type: DomSanitizer }
|
|
1341
1399
|
];
|
|
1342
1400
|
ImageCarouselComponent.propDecorators = {
|
|
1343
1401
|
carousel: [{ type: ViewChild, args: ['carousel', { read: ElementRef },] }],
|