@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,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.7";
|
|
34
|
+
this.publishDate = "18/03/2025, 10:19:43";
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -303,10 +303,43 @@ var LanguageCode;
|
|
|
303
303
|
class Dictionary {
|
|
304
304
|
constructor() {
|
|
305
305
|
this.strings = {
|
|
306
|
+
"en": {
|
|
307
|
+
"ADDITIONAL_DATA": "Additional information",
|
|
308
|
+
"ALTERNATIVE_PRODUCTS": "Alternative products",
|
|
309
|
+
"ARTICLE_NUMBER": "Productnumber",
|
|
310
|
+
"AS_CONFIGURED": "As configured",
|
|
311
|
+
"CATEGORY": "Category",
|
|
312
|
+
"CATEGORY_TYPE": "Category type",
|
|
313
|
+
"CONFIGURE": "Configure",
|
|
314
|
+
"DELIVERY_TIME_PERIOD": "Delivery time",
|
|
315
|
+
"DESCRIPTION": "Description",
|
|
316
|
+
"DOCUMENTS": "Documents",
|
|
317
|
+
"DOWNLOADS": "Downloads",
|
|
318
|
+
"FEATURES": "Features",
|
|
319
|
+
"HEIGHT": "Height",
|
|
320
|
+
"MATERIAL": "Material",
|
|
321
|
+
"PRODUCT_IN_STOCK": "In stock",
|
|
322
|
+
"PRODUCT_LIMITED_STOCK": "Limited stock",
|
|
323
|
+
"PRODUCT_NOT_IN_STOCK": "Not in stock",
|
|
324
|
+
"PROPERTIES": "Characteristics",
|
|
325
|
+
"QUOTATION": "Quotation",
|
|
326
|
+
"READ_MORE": "Read more",
|
|
327
|
+
"RELATED_PRODUCTS": "Related products",
|
|
328
|
+
"SHOPPING_CART_IN": "In Shopping Cart",
|
|
329
|
+
"SHOW_IN": "Show in",
|
|
330
|
+
"STOCK": "Stock",
|
|
331
|
+
"SYMBOLS": "Symbols",
|
|
332
|
+
"TITLE": "Title",
|
|
333
|
+
"TURNOVERGROUP": "Turnover group",
|
|
334
|
+
"VARIANTS": "Variations",
|
|
335
|
+
"WIDTH": "Width",
|
|
336
|
+
"SUGGESTION": "Suggestion",
|
|
337
|
+
},
|
|
306
338
|
"nl": {
|
|
307
339
|
"ADDITIONAL_DATA": "Extra informatie",
|
|
308
340
|
"ALTERNATIVE_PRODUCTS": "Alternatieve producten",
|
|
309
341
|
"ARTICLE_NUMBER": "Artikel nummer",
|
|
342
|
+
"AS_CONFIGURED": "Zoals samengesteld",
|
|
310
343
|
"CATEGORY": "Categorie",
|
|
311
344
|
"CATEGORY_TYPE": "Categorie type",
|
|
312
345
|
"CONFIGURE": "Configureren",
|
|
@@ -1036,7 +1069,7 @@ ProductPageComponent.decorators = [
|
|
|
1036
1069
|
transition('void => *', animate('200ms ease-in-out')),
|
|
1037
1070
|
])
|
|
1038
1071
|
],
|
|
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"]
|
|
1072
|
+
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
1073
|
},] }
|
|
1041
1074
|
];
|
|
1042
1075
|
ProductPageComponent.ctorParameters = () => [
|
|
@@ -1173,39 +1206,53 @@ ProductSelectorTypeModule.decorators = [
|
|
|
1173
1206
|
},] }
|
|
1174
1207
|
];
|
|
1175
1208
|
|
|
1209
|
+
class ImageViewModel {
|
|
1210
|
+
}
|
|
1176
1211
|
class ImageCarouselComponent {
|
|
1177
|
-
constructor(_ione, _appEventService, _changeDetector, _domSanitizer
|
|
1212
|
+
constructor(_ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
1178
1213
|
this._ione = _ione;
|
|
1179
1214
|
this._appEventService = _appEventService;
|
|
1180
1215
|
this._changeDetector = _changeDetector;
|
|
1181
1216
|
this._domSanitizer = _domSanitizer;
|
|
1182
|
-
this.iconCache = iconCache;
|
|
1183
|
-
this.icons = IconEnum;
|
|
1184
|
-
this.showLoader = false;
|
|
1185
1217
|
this.showRefresh = false;
|
|
1186
1218
|
this.resizing = false;
|
|
1219
|
+
this.imageViewModels = [];
|
|
1220
|
+
this.showLoader = false;
|
|
1187
1221
|
this._currentIndex = 0;
|
|
1188
1222
|
this._images = [];
|
|
1189
1223
|
this._subs = [];
|
|
1224
|
+
this._resizeCanvasHeight = 500;
|
|
1190
1225
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(() => {
|
|
1191
1226
|
this.showLoader = true;
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
this.
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1227
|
+
this._changeDetector.detectChanges();
|
|
1228
|
+
setTimeout(() => {
|
|
1229
|
+
this.showLoader = false;
|
|
1230
|
+
this._changeDetector.detectChanges();
|
|
1231
|
+
}, 10000);
|
|
1232
|
+
}), this._appEventService.onDraftRenderImageReceived.subscribe((event) => {
|
|
1233
|
+
if (event && event.detail) {
|
|
1234
|
+
if (this._images[0] instanceof CoDocument) {
|
|
1235
|
+
this._images.unshift(event.detail);
|
|
1236
|
+
}
|
|
1237
|
+
else {
|
|
1238
|
+
this._images[0] = event.detail;
|
|
1239
|
+
}
|
|
1240
|
+
this._loadAndRescaleImages();
|
|
1198
1241
|
}
|
|
1199
1242
|
this.showLoader = false;
|
|
1243
|
+
this._changeDetector.detectChanges();
|
|
1200
1244
|
}));
|
|
1201
1245
|
}
|
|
1202
1246
|
set images(value) {
|
|
1203
1247
|
if (value && value.length > 0) {
|
|
1204
1248
|
this._images = this._filterValidImages(value);
|
|
1205
|
-
this.
|
|
1249
|
+
this._loadAndRescaleImages();
|
|
1206
1250
|
this._changeDetector.detectChanges();
|
|
1207
1251
|
}
|
|
1208
1252
|
}
|
|
1253
|
+
get images() {
|
|
1254
|
+
return this._images;
|
|
1255
|
+
}
|
|
1209
1256
|
handleWindowResize() {
|
|
1210
1257
|
this.resizing = true;
|
|
1211
1258
|
this._scrollCarouselToIndex();
|
|
@@ -1230,11 +1277,6 @@ class ImageCarouselComponent {
|
|
|
1230
1277
|
this._currentIndex = value;
|
|
1231
1278
|
this._scrollCarouselToIndex();
|
|
1232
1279
|
}
|
|
1233
|
-
get images() {
|
|
1234
|
-
return this._images;
|
|
1235
|
-
}
|
|
1236
|
-
ngOnInit() {
|
|
1237
|
-
}
|
|
1238
1280
|
ngOnDestroy() {
|
|
1239
1281
|
this.carousel = undefined;
|
|
1240
1282
|
this._subs.forEach(s => s.unsubscribe());
|
|
@@ -1245,43 +1287,90 @@ class ImageCarouselComponent {
|
|
|
1245
1287
|
onForceRenderImage() {
|
|
1246
1288
|
this._appEventService.onForceRenderImage.next();
|
|
1247
1289
|
}
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
}
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
}
|
|
1258
|
-
else if (image.detail !== undefined) {
|
|
1259
|
-
source = image.detail;
|
|
1290
|
+
handleShowImage(imageViewModel) {
|
|
1291
|
+
if (imageViewModel && imageViewModel.originalSource) {
|
|
1292
|
+
let popupWindow = window.open('', 'Image zoom', 'width=600,height=400');
|
|
1293
|
+
// Set the content of the popup window
|
|
1294
|
+
popupWindow.document.write('<html><head><title>Image zoom</title></head><body>');
|
|
1295
|
+
popupWindow.document.write(`<img src=${imageViewModel.originalSource} alt="Image" style="width:100%; height:auto;">`);
|
|
1296
|
+
popupWindow.document.write('</body></html>');
|
|
1297
|
+
// Close the document to render the popup window
|
|
1298
|
+
popupWindow.document.close();
|
|
1260
1299
|
}
|
|
1261
|
-
return this._domSanitizer.bypassSecurityTrustUrl(source);
|
|
1262
1300
|
}
|
|
1263
1301
|
_filterValidImages(value) {
|
|
1264
1302
|
if (!value) {
|
|
1265
1303
|
return [];
|
|
1266
1304
|
}
|
|
1267
|
-
return value.filter(doc => {
|
|
1305
|
+
return value.filter((doc) => {
|
|
1268
1306
|
const pattern = /\.(jpg|jpeg|png|gif|bmp|tiff|webp)$/i;
|
|
1269
|
-
return pattern.test(doc.fileName) || !!doc.filePath;
|
|
1307
|
+
return typeof doc === 'string' || (pattern.test(doc.fileName) || !!doc.filePath);
|
|
1270
1308
|
});
|
|
1271
1309
|
}
|
|
1272
|
-
|
|
1310
|
+
_loadAndRescaleImages() {
|
|
1311
|
+
this.imageViewModels.length = 0;
|
|
1273
1312
|
if (this._images) {
|
|
1274
1313
|
this._images.forEach((i) => {
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1314
|
+
let imageViewModel = new ImageViewModel();
|
|
1315
|
+
imageViewModel.image = i;
|
|
1316
|
+
if (typeof i === 'string') { // is a rendered image coming from configurator
|
|
1317
|
+
this._resizeAndSanitizeSource(i, imageViewModel);
|
|
1318
|
+
}
|
|
1319
|
+
else {
|
|
1320
|
+
if (i.filePath) {
|
|
1321
|
+
this._resizeAndSanitizeSource(i.filePath, imageViewModel);
|
|
1322
|
+
}
|
|
1323
|
+
else if (i.documentBody) {
|
|
1324
|
+
this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
1325
|
+
}
|
|
1326
|
+
else {
|
|
1327
|
+
this._ione.getDocumentContent(i.documentId, false).then((content) => {
|
|
1328
|
+
if (content) {
|
|
1329
|
+
i.documentBody = content.documentContent;
|
|
1330
|
+
this._resizeAndSanitizeSource(i.documentBodyAsDataUri, imageViewModel);
|
|
1331
|
+
this._changeDetector.detectChanges();
|
|
1332
|
+
}
|
|
1333
|
+
});
|
|
1334
|
+
}
|
|
1281
1335
|
}
|
|
1336
|
+
this.imageViewModels.push(imageViewModel);
|
|
1337
|
+
this._changeDetector.detectChanges();
|
|
1282
1338
|
});
|
|
1283
1339
|
}
|
|
1284
1340
|
}
|
|
1341
|
+
_resizeAndSanitizeSource(source, imageViewModel) {
|
|
1342
|
+
const resizeCanvas = document.createElement('canvas');
|
|
1343
|
+
const resizeCanvasContext = resizeCanvas.getContext('2d');
|
|
1344
|
+
const resizeImage = document.createElement('img');
|
|
1345
|
+
resizeImage.onload = () => __awaiter(this, void 0, void 0, function* () {
|
|
1346
|
+
resizeCanvasContext.imageSmoothingEnabled = true;
|
|
1347
|
+
resizeCanvasContext.imageSmoothingQuality = 'high';
|
|
1348
|
+
// Get the original image dimensions
|
|
1349
|
+
const originalWidth = resizeImage.width;
|
|
1350
|
+
const originalHeight = resizeImage.height;
|
|
1351
|
+
// Calculate the aspect ratio
|
|
1352
|
+
const aspectRatio = originalWidth / originalHeight;
|
|
1353
|
+
// Calculate the new width and height while maintaining the aspect ratio
|
|
1354
|
+
let newWidth = this._resizeCanvasHeight;
|
|
1355
|
+
let newHeight = this._resizeCanvasHeight;
|
|
1356
|
+
if (originalWidth > originalHeight) {
|
|
1357
|
+
newHeight = this._resizeCanvasHeight / aspectRatio;
|
|
1358
|
+
}
|
|
1359
|
+
else {
|
|
1360
|
+
newWidth = this._resizeCanvasHeight * aspectRatio;
|
|
1361
|
+
}
|
|
1362
|
+
// Set the canvas size to the new width and height
|
|
1363
|
+
resizeCanvas.width = newWidth;
|
|
1364
|
+
resizeCanvas.height = newHeight;
|
|
1365
|
+
const imageWidth = this._resizeCanvasHeight * (resizeImage.height / resizeImage.width);
|
|
1366
|
+
resizeCanvasContext.drawImage(resizeImage, 0, 0, newWidth, newHeight);
|
|
1367
|
+
const resizedSource = resizeCanvas.toDataURL('image/jpeg');
|
|
1368
|
+
imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
|
|
1369
|
+
imageViewModel.originalSource = source;
|
|
1370
|
+
});
|
|
1371
|
+
// @ts-ignore
|
|
1372
|
+
resizeImage.src = source;
|
|
1373
|
+
}
|
|
1285
1374
|
_scrollCarouselToIndex() {
|
|
1286
1375
|
if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
|
|
1287
1376
|
const movePx = this.currentIndex * this.carousel.nativeElement.clientWidth;
|
|
@@ -1299,45 +1388,47 @@ ImageCarouselComponent.decorators = [
|
|
|
1299
1388
|
{ type: Component, args: [{
|
|
1300
1389
|
selector: 'app-image-carousel',
|
|
1301
1390
|
template: `
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1391
|
+
<div id="product_page_carousel">
|
|
1392
|
+
<div id="product_page_carousel_items">
|
|
1393
|
+
<co-loader [isShown]="true" *ngIf="showLoader"></co-loader>
|
|
1394
|
+
<div #carousel class="inner-carousel">
|
|
1395
|
+
<!-- This has been taken out of the for loop to prevent flashing images when updating. -->
|
|
1396
|
+
<div *ngIf="imageViewModels[0]" class="carousel-item" [id]="'slide-0'" [class.active]="isCurrentIndex(0)" (click)="handleShowImage(imageViewModels[0])">
|
|
1397
|
+
<img [src]="imageViewModels[0].source">
|
|
1398
|
+
</div>
|
|
1399
|
+
<div *ngFor="let imageViewModel of imageViewModels.slice(1); let index = index" class="carousel-item"
|
|
1400
|
+
[id]="'slide-' + (index + 1)" [class.active]="isCurrentIndex((index + 1))" (click)="handleShowImage(imageViewModel)">
|
|
1401
|
+
<img [src]="imageViewModel.source">
|
|
1402
|
+
</div>
|
|
1403
|
+
<div class="carousel-scroller-layer" *ngIf="imageViewModels && imageViewModels.length > 1">
|
|
1404
|
+
<div class="carousel-item-scroller prev" (click)="gotoPrevSlide()" *ngIf="currentIndex > 0"></div>
|
|
1405
|
+
<div class="carousel-item-scroller next" (click)="gotoNextSlide()" *ngIf="currentIndex < images.length - 1"></div>
|
|
1406
|
+
</div>
|
|
1407
|
+
</div>
|
|
1408
|
+
<!--
|
|
1409
|
+
<co-icon class="selector-type-icon refresh-button" [iconData]="iconCache.getIcon(icons.Refresh)" (click)="onForceRenderImage()" [class.loading]="showLoader" *ngIf="showRefresh"></co-icon>
|
|
1410
|
+
-->
|
|
1316
1411
|
</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
1412
|
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1413
|
+
<div id="product_page_carousel_thumbs">
|
|
1414
|
+
<co-scroll-container class="scroll-container" *ngIf="imageViewModels && imageViewModels.length > 1">
|
|
1415
|
+
<div *ngFor="let imageViewModel of imageViewModels; let index = index" class="carousel-thumb"
|
|
1416
|
+
[class.active]="index === currentIndex">
|
|
1417
|
+
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
|
|
1418
|
+
</div>
|
|
1419
|
+
</co-scroll-container>
|
|
1327
1420
|
</div>
|
|
1328
|
-
</co-scroll-container>
|
|
1329
1421
|
</div>
|
|
1330
|
-
</div>
|
|
1331
1422
|
`,
|
|
1332
|
-
|
|
1423
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1424
|
+
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
1425
|
},] }
|
|
1334
1426
|
];
|
|
1335
1427
|
ImageCarouselComponent.ctorParameters = () => [
|
|
1336
1428
|
{ type: ProductConnectorService },
|
|
1337
1429
|
{ type: ProductEventService },
|
|
1338
1430
|
{ type: ChangeDetectorRef },
|
|
1339
|
-
{ type: DomSanitizer }
|
|
1340
|
-
{ type: IconCacheService }
|
|
1431
|
+
{ type: DomSanitizer }
|
|
1341
1432
|
];
|
|
1342
1433
|
ImageCarouselComponent.propDecorators = {
|
|
1343
1434
|
carousel: [{ type: ViewChild, args: ['carousel', { read: ElementRef },] }],
|