@colijnit/product 257.1.11 → 257.1.13
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 +5 -0
- package/app/components/product-addtocart/product-addtocart.component.d.ts +2 -1
- package/app/components/product-page/product-page.component.d.ts +1 -0
- package/app/service/product-connector.service.d.ts +1 -0
- package/bundles/colijnit-product.umd.js +150 -90
- package/bundles/colijnit-product.umd.js.map +1 -1
- package/colijnit-product-257.1.12.tgz +0 -0
- package/colijnit-product.metadata.json +1 -1
- package/esm2015/app/components/image-carousel/image-carousel.component.js +82 -36
- package/esm2015/app/components/product-addtocart/product-addtocart.component.js +26 -14
- package/esm2015/app/components/product-info-tabs/product-info-tabs.component.js +2 -2
- package/esm2015/app/components/product-page/product-page.component.js +24 -11
- package/esm2015/app/product-version.js +3 -3
- package/esm2015/app/service/product-connector.service.js +2 -1
- package/fesm2015/colijnit-product.js +134 -62
- package/fesm2015/colijnit-product.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Directive, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, Renderer2, ChangeDetectorRef, 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
|
-
import { Subject, BehaviorSubject } from 'rxjs';
|
|
4
|
+
import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
|
|
5
5
|
import { Options } from '@colijnit/ioneconnector/build/model/options';
|
|
6
6
|
import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
|
|
7
7
|
import { SuperArticle } from '@colijnit/articleapi/build/model/super-article';
|
|
@@ -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 = "257.1.
|
|
34
|
-
this.publishDate = "
|
|
33
|
+
this.symVer = "257.1.13";
|
|
34
|
+
this.publishDate = "22-8-2025 16:12:09";
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -577,6 +577,7 @@ class ProductConnectorService {
|
|
|
577
577
|
this._adapterService = _adapterService;
|
|
578
578
|
this._settingsService = _settingsService;
|
|
579
579
|
this.controllerInitialized = new BehaviorSubject(false);
|
|
580
|
+
this.articleLoaded = new BehaviorSubject(false);
|
|
580
581
|
this._initializing = false;
|
|
581
582
|
this._initialized = false;
|
|
582
583
|
this.connectorOptions = new Options();
|
|
@@ -978,9 +979,18 @@ class ProductPageComponent {
|
|
|
978
979
|
if (this.selections.nativeElement) {
|
|
979
980
|
this.selections.nativeElement.forceRenderImage();
|
|
980
981
|
}
|
|
981
|
-
}), this.settingsService.settingsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this.
|
|
982
|
-
this.
|
|
983
|
-
|
|
982
|
+
}), this.settingsService.settingsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)), this._pageLoadedSubscription = combineLatest([
|
|
983
|
+
this._ione.controllerInitialized,
|
|
984
|
+
this._ione.articleLoaded
|
|
985
|
+
]).subscribe(([initialized, articleLoaded]) => {
|
|
986
|
+
if (initialized && articleLoaded) {
|
|
987
|
+
this.settingsLoaded = initialized;
|
|
988
|
+
}
|
|
989
|
+
}),
|
|
990
|
+
// this._ione.controllerInitialized.subscribe((initialized: boolean) => {
|
|
991
|
+
// this.settingsLoaded = initialized;
|
|
992
|
+
// }),
|
|
993
|
+
this.appEventService.onAnswersAvailable.subscribe((answers) => {
|
|
984
994
|
if (answers && this.configurable) {
|
|
985
995
|
this.showAddToCart = false;
|
|
986
996
|
}
|
|
@@ -1056,6 +1066,7 @@ class ProductPageComponent {
|
|
|
1056
1066
|
if (this._initializedSub) {
|
|
1057
1067
|
this._initializedSub.unsubscribe();
|
|
1058
1068
|
}
|
|
1069
|
+
this._pageLoadedSubscription.unsubscribe();
|
|
1059
1070
|
this.configurator = undefined;
|
|
1060
1071
|
this.selections = undefined;
|
|
1061
1072
|
this.fullscreenbutton = undefined;
|
|
@@ -1088,6 +1099,7 @@ class ProductPageComponent {
|
|
|
1088
1099
|
this.article = article;
|
|
1089
1100
|
if (this.article) {
|
|
1090
1101
|
this.configurable = this.article.goodType === 'B' && (this.article.isConfigurable || this.article.isConfigurable === undefined);
|
|
1102
|
+
// this.configurable = this.article.goodType === 'B';
|
|
1091
1103
|
if (this.configurable) {
|
|
1092
1104
|
this.showAddToCart = false;
|
|
1093
1105
|
this.currentView = SelectorType.TwoD;
|
|
@@ -1104,6 +1116,7 @@ class ProductPageComponent {
|
|
|
1104
1116
|
});
|
|
1105
1117
|
this._changeDetector.detectChanges();
|
|
1106
1118
|
}
|
|
1119
|
+
this._ione.articleLoaded.next(true);
|
|
1107
1120
|
});
|
|
1108
1121
|
}
|
|
1109
1122
|
}));
|
|
@@ -1120,37 +1133,37 @@ class ProductPageComponent {
|
|
|
1120
1133
|
ProductPageComponent.decorators = [
|
|
1121
1134
|
{ type: Component, args: [{
|
|
1122
1135
|
selector: 'app-product-page',
|
|
1123
|
-
template: "<ng-container *ngIf=\"settingsLoaded\">\r\n <div class=\"page-wrapper\">\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\">\r\n <div class=\"product-image-container\">\r\n <div class=\"product-page-block-selector-type\">\r\n <app-product-selector-type class=\"default-padding\"\r\n [(currentType)]=\"currentView\"\r\n [show2D]=\"configurable\"\r\n [show3D]=\"threeD\"\r\n ></app-product-selector-type>\r\n </div>\r\n <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n <ng-container
|
|
1136
|
+
template: "<ng-container *ngIf=\"settingsLoaded\">\r\n <div class=\"page-wrapper\">\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\">\r\n <div class=\"product-image-container\">\r\n <div class=\"product-page-block-selector-type\">\r\n <app-product-selector-type class=\"default-padding\"\r\n [(currentType)]=\"currentView\"\r\n [show2D]=\"configurable\"\r\n [show3D]=\"threeD\"\r\n ></app-product-selector-type>\r\n </div>\r\n <div class=\"product-page-block-image default-padding\" [class.full]=\"fullScreen\">\r\n <app-image-carousel [@toggleVisibilityByState]=\"show2D ? 'show' : 'hide'\" [images]=\"article?.images\" [showRefresh]=\"configurable && threeD\"></app-image-carousel>\r\n <ng-container *ngIf=\"settingsLoaded && this.configurable\">\r\n <threed-configurator #configurator class=\"threed-configurator\"\r\n [class.configurator-full-screen]=\"fullScreen\"\r\n [@toggleVisibilityByState]=\"show3D ? 'show' : 'hide'\"\r\n [@toggleFullScreen]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n ></threed-configurator>\r\n </ng-container>\r\n <co-icon #fullscreenbutton class=\"fullscreen-button\" *ngIf=\"show3D\"\r\n [@toggleTopLeft]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n [iconData]=\"iconCache.getIcon(fullScreenIcon)\"\r\n (click)=\"showFullScreen()\"></co-icon>\r\n <co-icon class=\"threed-watermark\" *ngIf=\"show3D && fullScreen\"\r\n [iconData]=\"iconCache.getIcon(icon.Logo)\"></co-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-right\">\r\n <div class=\"product-page-block-description\">\r\n <app-product-description class=\"default-padding\" [article]=\"article\"></app-product-description>\r\n </div>\r\n <div class=\"product-page-block-additional\">\r\n <div class=\"product-page-block-additional-description\">\r\n <app-product-additional-description class=\"default-padding\" [article]=\"article\"></app-product-additional-description>\r\n </div>\r\n <div class=\"product-page-block-price\" [class.full]=\"configuring\">\r\n <app-product-price class=\"s-padding\" *ngIf=\"!configuring\"\r\n [pricing]=\"article?.pricing\"\r\n [configurable]=\"configurable\"\r\n ></app-product-price>\r\n <ng-container *ngIf=\"settingsLoaded\">\r\n <threed-selections #selections class=\"threed-selections\" [class.show-selections]=\"configuring\" [@toggleFullScreenRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\"\r\n [class.default-padding]=\"!fullScreen\"\r\n [class.show-full-screen]=\"fullScreen\"\r\n [class.mini-scrollbar]=\"fullScreen\"\r\n [sku]=\"sku\"\r\n [settings]=\"settings\"\r\n (onUserActionFromThreeD)=\"configuring = true\"\r\n (instanceSet)=\"setInstance($event)\"\r\n (onImageReceived)=\"appEventService.onImageReceived.next($event)\"\r\n (onRenderStarted)=\"appEventService.onRenderStarted.next()\"\r\n (onDraftRenderImageReceived)=\"appEventService.onDraftRenderImageReceived.next($event)\"\r\n (onArticleReceived)=\"appEventService.onArticleReceived.next($event.detail)\"\r\n (onSelectionsReceived)=\"appEventService.onSelectionsReceived.next($event.detail)\"\r\n (onArticleInfoReceived)=\"appEventService.onArticleInfoReceived.next($event.detail)\"\r\n (onAnswersAvailable)=\"appEventService.onAnswersAvailable.next($event.detail)\"\r\n ></threed-selections>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-page-block-addtocart no-padding product-action-buttons\" *ngIf=\"!configuring\" [@toggleTopRight]=\"fullScreen ? 'fullscreen' : 'halfscreen'\">\r\n <app-product-addtocart\r\n [configurable]=\"configurable\"\r\n [createFrozenArticle]=\"createFrozenArticle\"\r\n [configuring]=\"configuring\"\r\n [showAddToCart]=\"showAddToCart\"\r\n [article]=\"article\"\r\n [externalSource]=\"externalSource\"\r\n [isReturn]=\"isReturn\"\r\n (startConfiguration)=\"handleStartConfiguration()\"\r\n (showRelatedPopup)=\"handlePopUpChange($event)\"\r\n ></app-product-addtocart>\r\n </div>\r\n <div class=\"addtocart-reserved product-action-buttons\" *ngIf=\"configuring\" [class.full-screen]=\"fullScreen\">\r\n <app-product-addtocart class=\"default-padding\"\r\n [configurable]=\"false\"\r\n [fullscreen]=\"fullScreen\"\r\n [showAddToCart]=\"showAddToCart\"\r\n [configuring]=\"configuring\"\r\n [article]=\"article\"\r\n [externalSource]=\"externalSource\"\r\n [isReturn]=\"isReturn\"\r\n (startConfiguration)=\"handleStartConfiguration()\"\r\n ></app-product-addtocart>\r\n </div>\r\n <div class=\"product-page-block-variants\">\r\n <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>\r\n </div>\r\n <div class=\"product-page-block-stock\">\r\n <app-product-stock class=\"no-padding\" [goodId]=\"article?.goodId\" (openStockEvent)=\"openStock()\"></app-product-stock>\r\n </div>\r\n <div class=\"product-page-block-delivery\">\r\n <app-product-delivery class=\"no-padding\" [stockAndDelivery]=\"stockAndDelivery\"></app-product-delivery>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-content\">\r\n <div class=\"page-wrapper-left\" *ngIf=\"article\">\r\n <app-product-info-tabs class=\"no-padding\" [article]=\"article\"></app-product-info-tabs>\r\n </div>\r\n <div class=\"page-wrapper-right\">\r\n <div class=\"product-page-block-related s-padding\">\r\n <app-product-related\r\n *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"1\"\r\n [label]=\"'RELATED_PRODUCTS' | localize\">\r\n </app-product-related>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"page-wrapper-content no-top-margin\">\r\n <div class=\"page-wrapper-full\">\r\n <div class=\"product-page-block-alternatives s-padding\">\r\n <app-product-related\r\n *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n [externalSource]=\"externalSource\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"4\"\r\n [isSmallModus]=\"false\"\r\n [label]=\"'ALTERNATIVE_PRODUCTS' | localize\">\r\n </app-product-related>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showRelatedProductsPopup\">\r\n <co-product-dialog\r\n [mainArticle]=\"article\"\r\n [articles]=\"article?.relatedArticles\"\r\n [refType]=\"1\"\r\n (closeRelatedPopup)=\"handlePopUpChange($event)\"\r\n >\r\n </co-product-dialog>\r\n\r\n<!-- <app-product-related class=\"no-padding\" *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"-->\r\n<!-- [articles]=\"article?.relatedArticles\" [refType]=\"64\" [label]=\"'VARIANTS' | localize\"></app-product-related>-->\r\n </div>\r\n\r\n\r\n </div>\r\n</ng-container>\r\n",
|
|
1124
1137
|
animations: [
|
|
1125
1138
|
trigger('toggleFullScreen', [
|
|
1126
1139
|
state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
|
|
1127
1140
|
state('halfscreen', style({ 'position': '*', 'top': '*', 'left': '*', 'width': '*', 'height': '*' })),
|
|
1128
|
-
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1141
|
+
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1129
1142
|
]),
|
|
1130
1143
|
trigger('toggleTopLeft', [
|
|
1131
1144
|
state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'left': '0' })),
|
|
1132
1145
|
state('halfscreen', style({ 'position': 'absolute', 'top': '*', 'left': '*' })),
|
|
1133
|
-
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1146
|
+
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1134
1147
|
]),
|
|
1135
1148
|
trigger('toggleTopRight', [
|
|
1136
1149
|
state('fullscreen', style({ 'position': 'fixed', 'top': '0', 'right': '0' })),
|
|
1137
1150
|
state('halfscreen', style({ 'position': '*', 'top': '*', 'right': '*' })),
|
|
1138
|
-
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1151
|
+
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1139
1152
|
]),
|
|
1140
1153
|
trigger('toggleFullScreenRight', [
|
|
1141
1154
|
state('fullscreen', style({ 'position': 'fixed', 'width': '400px', 'top': '0', 'right': '0' })),
|
|
1142
1155
|
state('halfscreen', style({ 'position': '*', 'width': '*', 'top': '*', 'right': '*' })),
|
|
1143
|
-
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1156
|
+
transition('halfscreen <=> fullscreen', animate('200ms ease-in-out'))
|
|
1144
1157
|
]),
|
|
1145
1158
|
trigger('toggleVisibilityByState', [
|
|
1146
1159
|
state('hide', style({ 'opacity': '0', 'display': 'none' })),
|
|
1147
1160
|
state('show', style({ 'display': 'block', 'opacity': '1' })),
|
|
1148
|
-
transition('hide <=> show', animate('200ms 100ms ease-in-out'))
|
|
1161
|
+
transition('hide <=> show', animate('200ms 100ms ease-in-out'))
|
|
1149
1162
|
]),
|
|
1150
1163
|
trigger('toggleVisibility', [
|
|
1151
1164
|
state('void', style({ 'opacity': '0' })),
|
|
1152
1165
|
state('*', style({ 'opacity': '1' })),
|
|
1153
|
-
transition('void => *', animate('200ms ease-in-out'))
|
|
1166
|
+
transition('void => *', animate('200ms ease-in-out'))
|
|
1154
1167
|
])
|
|
1155
1168
|
],
|
|
1156
1169
|
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"]
|
|
@@ -1298,6 +1311,7 @@ class ImageCarouselComponent {
|
|
|
1298
1311
|
this._appEventService = _appEventService;
|
|
1299
1312
|
this._changeDetector = _changeDetector;
|
|
1300
1313
|
this._domSanitizer = _domSanitizer;
|
|
1314
|
+
this.isPopupOpen = false;
|
|
1301
1315
|
this.showRefresh = false;
|
|
1302
1316
|
this.resizing = false;
|
|
1303
1317
|
this.imageViewModels = [];
|
|
@@ -1327,6 +1341,12 @@ class ImageCarouselComponent {
|
|
|
1327
1341
|
this._changeDetector.detectChanges();
|
|
1328
1342
|
}));
|
|
1329
1343
|
}
|
|
1344
|
+
// Close on ESC
|
|
1345
|
+
onEsc() {
|
|
1346
|
+
if (this.isPopupOpen) {
|
|
1347
|
+
this.closePopup();
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1330
1350
|
set images(value) {
|
|
1331
1351
|
if (value && value.length > 0) {
|
|
1332
1352
|
this._images = this._filterValidImages(value);
|
|
@@ -1373,15 +1393,16 @@ class ImageCarouselComponent {
|
|
|
1373
1393
|
}
|
|
1374
1394
|
handleShowImage(imageViewModel) {
|
|
1375
1395
|
if (imageViewModel && imageViewModel.originalSource) {
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
popupWindow.document.write(`<img src=${imageViewModel.originalSource} alt="Image" style="width:100%; height:auto;">`);
|
|
1380
|
-
popupWindow.document.write('</body></html>');
|
|
1381
|
-
// Close the document to render the popup window
|
|
1382
|
-
popupWindow.document.close();
|
|
1396
|
+
this.selectedImage = imageViewModel;
|
|
1397
|
+
this.isPopupOpen = true;
|
|
1398
|
+
this._changeDetector.markForCheck();
|
|
1383
1399
|
}
|
|
1384
1400
|
}
|
|
1401
|
+
closePopup() {
|
|
1402
|
+
this.isPopupOpen = false;
|
|
1403
|
+
this.selectedImage = undefined;
|
|
1404
|
+
this._changeDetector.markForCheck();
|
|
1405
|
+
}
|
|
1385
1406
|
_filterValidImages(value) {
|
|
1386
1407
|
if (!value) {
|
|
1387
1408
|
return [];
|
|
@@ -1424,38 +1445,54 @@ class ImageCarouselComponent {
|
|
|
1424
1445
|
}
|
|
1425
1446
|
_resizeAndSanitizeSource(source, imageViewModel) {
|
|
1426
1447
|
const resizeCanvas = document.createElement('canvas');
|
|
1427
|
-
const
|
|
1428
|
-
const
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
const
|
|
1435
|
-
const
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
let newHeight = this._resizeCanvasHeight;
|
|
1441
|
-
if (originalWidth > originalHeight) {
|
|
1442
|
-
newHeight = this._resizeCanvasHeight / aspectRatio;
|
|
1448
|
+
const ctx = resizeCanvas.getContext('2d');
|
|
1449
|
+
const img = document.createElement('img');
|
|
1450
|
+
img.crossOrigin = 'anonymous';
|
|
1451
|
+
img.onload = () => {
|
|
1452
|
+
ctx.imageSmoothingEnabled = true;
|
|
1453
|
+
ctx.imageSmoothingQuality = 'high';
|
|
1454
|
+
const ow = img.width;
|
|
1455
|
+
const oh = img.height;
|
|
1456
|
+
const aspect = ow / oh;
|
|
1457
|
+
let newW = this._resizeCanvasHeight;
|
|
1458
|
+
let newH = this._resizeCanvasHeight;
|
|
1459
|
+
if (ow > oh) {
|
|
1460
|
+
newH = this._resizeCanvasHeight / aspect;
|
|
1443
1461
|
}
|
|
1444
1462
|
else {
|
|
1445
|
-
|
|
1446
|
-
}
|
|
1447
|
-
|
|
1448
|
-
resizeCanvas.
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
const
|
|
1463
|
+
newW = this._resizeCanvasHeight * aspect;
|
|
1464
|
+
}
|
|
1465
|
+
resizeCanvas.width = Math.round(newW);
|
|
1466
|
+
resizeCanvas.height = Math.round(newH);
|
|
1467
|
+
// Ensure transparent background before drawing
|
|
1468
|
+
ctx.clearRect(0, 0, resizeCanvas.width, resizeCanvas.height);
|
|
1469
|
+
ctx.drawImage(img, 0, 0, resizeCanvas.width, resizeCanvas.height);
|
|
1470
|
+
const mime = this._detectPreferredMime(source);
|
|
1471
|
+
const resizedSource = mime === 'image/jpeg'
|
|
1472
|
+
? resizeCanvas.toDataURL('image/jpeg', 0.92) // only if original was JPEG
|
|
1473
|
+
: resizeCanvas.toDataURL(mime); // PNG/WebP keep alpha
|
|
1453
1474
|
imageViewModel.source = this._domSanitizer.bypassSecurityTrustUrl(resizedSource);
|
|
1454
1475
|
imageViewModel.originalSource = source;
|
|
1455
1476
|
this._changeDetector.detectChanges();
|
|
1456
|
-
}
|
|
1457
|
-
|
|
1458
|
-
|
|
1477
|
+
};
|
|
1478
|
+
img.src = source;
|
|
1479
|
+
}
|
|
1480
|
+
_detectPreferredMime(source) {
|
|
1481
|
+
// Data URI check
|
|
1482
|
+
const m = source.match(/^data:(image\/[a-zA-Z+.-]+);base64,/);
|
|
1483
|
+
if (m) {
|
|
1484
|
+
const t = m[1].toLowerCase();
|
|
1485
|
+
if (t === 'image/png' || t === 'image/webp' || t === 'image/jpeg')
|
|
1486
|
+
return t;
|
|
1487
|
+
}
|
|
1488
|
+
const lower = source.toLowerCase();
|
|
1489
|
+
if (lower.endsWith('.png'))
|
|
1490
|
+
return 'image/png';
|
|
1491
|
+
if (lower.endsWith('.webp'))
|
|
1492
|
+
return 'image/webp';
|
|
1493
|
+
if (lower.endsWith('.jpg') || lower.endsWith('.jpeg'))
|
|
1494
|
+
return 'image/jpeg';
|
|
1495
|
+
return 'image/png';
|
|
1459
1496
|
}
|
|
1460
1497
|
_scrollCarouselToIndex() {
|
|
1461
1498
|
if (this.currentIndex > -1 && this.currentIndex <= this.images.length) {
|
|
@@ -1504,10 +1541,32 @@ ImageCarouselComponent.decorators = [
|
|
|
1504
1541
|
</div>
|
|
1505
1542
|
</co-scroll-container>
|
|
1506
1543
|
</div>
|
|
1544
|
+
</div>
|
|
1545
|
+
<!-- Modal (real popup) -->
|
|
1546
|
+
<div
|
|
1547
|
+
class="image-modal"
|
|
1548
|
+
*ngIf="isPopupOpen"
|
|
1549
|
+
(click)="closePopup()"
|
|
1550
|
+
role="dialog"
|
|
1551
|
+
aria-modal="true"
|
|
1552
|
+
aria-label="Image preview"
|
|
1553
|
+
>
|
|
1554
|
+
<div class="image-modal__content" (click)="$event.stopPropagation()">
|
|
1555
|
+
<button
|
|
1556
|
+
class="image-modal__close"
|
|
1557
|
+
type="button"
|
|
1558
|
+
aria-label="Close"
|
|
1559
|
+
(click)="closePopup()"
|
|
1560
|
+
>
|
|
1561
|
+
×
|
|
1562
|
+
</button>
|
|
1563
|
+
|
|
1564
|
+
<img [src]="selectedImage?.originalSource" alt="Image preview" />
|
|
1565
|
+
</div>
|
|
1507
1566
|
</div>
|
|
1508
1567
|
`,
|
|
1509
1568
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1510
|
-
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"]
|
|
1569
|
+
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}.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000}.image-modal__content{position:relative;max-width:90vw;max-height:90vh}.image-modal__content img{max-width:90vw;max-height:90vh;-o-object-fit:contain;object-fit:contain;display:block}.image-modal__close{position:fixed;top:15px;right:30px;background:transparent;border:none;color:#fff;font-size:60px;line-height:1;cursor:pointer}@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"]
|
|
1511
1570
|
},] }
|
|
1512
1571
|
];
|
|
1513
1572
|
ImageCarouselComponent.ctorParameters = () => [
|
|
@@ -1518,6 +1577,7 @@ ImageCarouselComponent.ctorParameters = () => [
|
|
|
1518
1577
|
];
|
|
1519
1578
|
ImageCarouselComponent.propDecorators = {
|
|
1520
1579
|
carousel: [{ type: ViewChild, args: ['carousel', { read: ElementRef },] }],
|
|
1580
|
+
onEsc: [{ type: HostListener, args: ['document:keydown.escape',] }],
|
|
1521
1581
|
showRefresh: [{ type: Input }],
|
|
1522
1582
|
images: [{ type: Input }],
|
|
1523
1583
|
handleWindowResize: [{ type: HostListener, args: ['window:resize',] }],
|
|
@@ -1818,12 +1878,7 @@ class ProductAddtocartComponent {
|
|
|
1818
1878
|
}
|
|
1819
1879
|
}
|
|
1820
1880
|
else {
|
|
1821
|
-
|
|
1822
|
-
if (generatedGoodId) {
|
|
1823
|
-
const articleFull = yield this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true);
|
|
1824
|
-
const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
|
|
1825
|
-
this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
|
|
1826
|
-
}
|
|
1881
|
+
yield this._handleGeneratedArticleDirectly(quantity);
|
|
1827
1882
|
}
|
|
1828
1883
|
}
|
|
1829
1884
|
else {
|
|
@@ -1840,8 +1895,15 @@ class ProductAddtocartComponent {
|
|
|
1840
1895
|
}
|
|
1841
1896
|
}
|
|
1842
1897
|
else {
|
|
1843
|
-
|
|
1844
|
-
|
|
1898
|
+
if (this.article.goodType === 'B') {
|
|
1899
|
+
if (!this.article.isConfigurable) {
|
|
1900
|
+
yield this._handleGeneratedArticleDirectly(quantity);
|
|
1901
|
+
}
|
|
1902
|
+
}
|
|
1903
|
+
else {
|
|
1904
|
+
const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(this.article);
|
|
1905
|
+
this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
|
|
1906
|
+
}
|
|
1845
1907
|
}
|
|
1846
1908
|
});
|
|
1847
1909
|
}
|
|
@@ -1850,6 +1912,21 @@ class ProductAddtocartComponent {
|
|
|
1850
1912
|
this._appEventService.onAddToQuote.next(yield this._getJSONFromArticleObject({ article: this.article, quantity: quantity }));
|
|
1851
1913
|
});
|
|
1852
1914
|
}
|
|
1915
|
+
_handleGeneratedArticleDirectly(quantity) {
|
|
1916
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1917
|
+
const generatedGoodId = yield this._getGeneratedArtDirectly(this.article.goodId);
|
|
1918
|
+
if (generatedGoodId) {
|
|
1919
|
+
const articleFull = yield this._productConnectorAdapterService.getArticleFullObject(generatedGoodId, true);
|
|
1920
|
+
const article = this._ioneControllerService.convertArticleFullObjectToArticleExtended(articleFull);
|
|
1921
|
+
this._appEventService.onAddToCart.next({ article: article, quantity: quantity });
|
|
1922
|
+
}
|
|
1923
|
+
});
|
|
1924
|
+
}
|
|
1925
|
+
_getGeneratedArtDirectly(goodId) {
|
|
1926
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1927
|
+
return yield this._ioneControllerService.getGeneratedArtDirectly(goodId, true);
|
|
1928
|
+
});
|
|
1929
|
+
}
|
|
1853
1930
|
_getJSONFromArticleObject(article) {
|
|
1854
1931
|
return __awaiter(this, void 0, void 0, function* () {
|
|
1855
1932
|
const configuratorStatistics = new ConfiguratorStatisticsEnvironment();
|
|
@@ -1862,11 +1939,6 @@ class ProductAddtocartComponent {
|
|
|
1862
1939
|
return yield this._ioneControllerService.getJsonArticleFlatTree(article.article.goodId, article.article.goodType, article.quantity, !!this.externalSource, true, configuratorStatistics);
|
|
1863
1940
|
});
|
|
1864
1941
|
}
|
|
1865
|
-
_getGeneratedArtDirectly(goodId) {
|
|
1866
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
1867
|
-
return yield this._ioneControllerService.getGeneratedArtDirectly(goodId, true);
|
|
1868
|
-
});
|
|
1869
|
-
}
|
|
1870
1942
|
}
|
|
1871
1943
|
ProductAddtocartComponent.decorators = [
|
|
1872
1944
|
{ type: Component, args: [{
|
|
@@ -2301,7 +2373,7 @@ class ProductInfoTabsComponent {
|
|
|
2301
2373
|
this.updateHeight(tabIndex);
|
|
2302
2374
|
}
|
|
2303
2375
|
updateHeight(tabIndex) {
|
|
2304
|
-
if (this.tabContent.nativeElement.children.length > 0) {
|
|
2376
|
+
if (this.tabContent && this.tabContent.nativeElement.children.length > 0) {
|
|
2305
2377
|
if (this.tabContent.nativeElement.children[tabIndex] !== undefined) {
|
|
2306
2378
|
this.activeTabHeight = this.tabContent.nativeElement.children[tabIndex].offsetHeight;
|
|
2307
2379
|
}
|