@colijnit/product 261.20.7 → 261.20.8
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/fesm2022/colijnit-product.mjs +103 -21
- package/fesm2022/colijnit-product.mjs.map +1 -1
- package/index.d.ts +9 -1
- package/package.json +1 -1
|
@@ -34,8 +34,8 @@ class Version {
|
|
|
34
34
|
constructor() {
|
|
35
35
|
this.name = "@colijnit/product";
|
|
36
36
|
this.description = "Product detail page project for iOne";
|
|
37
|
-
this.symVer = "261.20.
|
|
38
|
-
this.publishDate = "29-5-2026,
|
|
37
|
+
this.symVer = "261.20.8";
|
|
38
|
+
this.publishDate = "29-5-2026, 14:34:57";
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -962,17 +962,21 @@ class ImageCarouselComponent {
|
|
|
962
962
|
return this._currentIndex;
|
|
963
963
|
}
|
|
964
964
|
set currentIndex(value) {
|
|
965
|
-
this._currentIndex = value;
|
|
965
|
+
this._currentIndex = Math.max(0, Math.min(value, this.images.length - 1));
|
|
966
966
|
this._scrollCarouselToIndex();
|
|
967
|
+
setTimeout(() => this.scrollActiveThumbIntoView(), 0);
|
|
967
968
|
}
|
|
968
|
-
constructor(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer) {
|
|
969
|
+
constructor(iconCacheService, _ione, _appEventService, _changeDetector, _domSanitizer, iconCache) {
|
|
969
970
|
this.iconCacheService = iconCacheService;
|
|
970
971
|
this._ione = _ione;
|
|
971
972
|
this._appEventService = _appEventService;
|
|
972
973
|
this._changeDetector = _changeDetector;
|
|
973
974
|
this._domSanitizer = _domSanitizer;
|
|
975
|
+
this.iconCache = iconCache;
|
|
974
976
|
this.icons = IconEnum;
|
|
975
977
|
this.isPopupOpen = false;
|
|
978
|
+
this.canScrollThumbsLeft = false;
|
|
979
|
+
this.canScrollThumbsRight = false;
|
|
976
980
|
this.showRefresh = false;
|
|
977
981
|
this.resizing = false;
|
|
978
982
|
this.imageViewModels = [];
|
|
@@ -981,6 +985,7 @@ class ImageCarouselComponent {
|
|
|
981
985
|
this._images = [];
|
|
982
986
|
this._subs = [];
|
|
983
987
|
this._resizeCanvasHeight = 500;
|
|
988
|
+
this.icon = IconEnum;
|
|
984
989
|
this._subs.push(this._appEventService.onRenderStarted.subscribe(() => {
|
|
985
990
|
this.showLoader = true;
|
|
986
991
|
this._changeDetector.detectChanges();
|
|
@@ -1008,6 +1013,7 @@ class ImageCarouselComponent {
|
|
|
1008
1013
|
}
|
|
1009
1014
|
handleThumbClick(index) {
|
|
1010
1015
|
this.currentIndex = index;
|
|
1016
|
+
setTimeout(() => this.scrollActiveThumbIntoView(), 0);
|
|
1011
1017
|
}
|
|
1012
1018
|
onForceRenderImage() {
|
|
1013
1019
|
this._appEventService.onForceRenderImage.next();
|
|
@@ -1024,6 +1030,41 @@ class ImageCarouselComponent {
|
|
|
1024
1030
|
this.selectedImage = undefined;
|
|
1025
1031
|
this._changeDetector.markForCheck();
|
|
1026
1032
|
}
|
|
1033
|
+
scrollThumbs(direction) {
|
|
1034
|
+
const element = this.thumbScroller?.nativeElement;
|
|
1035
|
+
if (!element) {
|
|
1036
|
+
return;
|
|
1037
|
+
}
|
|
1038
|
+
const firstThumb = element.querySelector('.carousel-thumb');
|
|
1039
|
+
const scrollAmount = firstThumb ? firstThumb.offsetWidth * 6 : element.clientWidth;
|
|
1040
|
+
element.scrollBy({
|
|
1041
|
+
left: direction * scrollAmount,
|
|
1042
|
+
behavior: 'smooth'
|
|
1043
|
+
});
|
|
1044
|
+
setTimeout(() => this.updateThumbScrollState(), 250);
|
|
1045
|
+
}
|
|
1046
|
+
scrollActiveThumbIntoView() {
|
|
1047
|
+
const element = this.thumbScroller?.nativeElement;
|
|
1048
|
+
const activeThumb = element?.querySelector('.carousel-thumb.active');
|
|
1049
|
+
activeThumb?.scrollIntoView({
|
|
1050
|
+
behavior: 'smooth',
|
|
1051
|
+
inline: 'nearest',
|
|
1052
|
+
block: 'nearest'
|
|
1053
|
+
});
|
|
1054
|
+
setTimeout(() => this.updateThumbScrollState(), 250);
|
|
1055
|
+
}
|
|
1056
|
+
updateThumbScrollState() {
|
|
1057
|
+
const element = this.thumbScroller?.nativeElement;
|
|
1058
|
+
if (!element) {
|
|
1059
|
+
this.canScrollThumbsLeft = false;
|
|
1060
|
+
this.canScrollThumbsRight = false;
|
|
1061
|
+
return;
|
|
1062
|
+
}
|
|
1063
|
+
this.canScrollThumbsLeft = element.scrollLeft > 0;
|
|
1064
|
+
this.canScrollThumbsRight =
|
|
1065
|
+
element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
|
|
1066
|
+
this._changeDetector.markForCheck();
|
|
1067
|
+
}
|
|
1027
1068
|
_filterValidImages(value) {
|
|
1028
1069
|
if (!value) {
|
|
1029
1070
|
return [];
|
|
@@ -1063,6 +1104,10 @@ class ImageCarouselComponent {
|
|
|
1063
1104
|
this._changeDetector.detectChanges();
|
|
1064
1105
|
});
|
|
1065
1106
|
}
|
|
1107
|
+
this._changeDetector.detectChanges();
|
|
1108
|
+
setTimeout(() => {
|
|
1109
|
+
this.updateThumbScrollState();
|
|
1110
|
+
});
|
|
1066
1111
|
}
|
|
1067
1112
|
_resizeAndSanitizeSource(source, imageViewModel) {
|
|
1068
1113
|
const resizeCanvas = document.createElement('canvas');
|
|
@@ -1139,8 +1184,8 @@ class ImageCarouselComponent {
|
|
|
1139
1184
|
}
|
|
1140
1185
|
}
|
|
1141
1186
|
}
|
|
1142
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: IconCacheService }, { token: ProductConnectorService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ImageCarouselComponent, isStandalone: false, selector: "app-image-carousel", inputs: { showRefresh: "showRefresh", images: "images" }, host: { listeners: { "document:keydown.escape": "onEsc()", "window:resize": "handleWindowResize()", "swipeleft": "gotoNextSlide()", "swiperight": "gotoPrevSlide()" }, properties: { "class.resizing": "this.resizing" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
1187
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: IconCacheService }, { token: ProductConnectorService }, { token: ProductEventService }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }, { token: IconCacheService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1188
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ImageCarouselComponent, isStandalone: false, selector: "app-image-carousel", inputs: { showRefresh: "showRefresh", images: "images" }, host: { listeners: { "document:keydown.escape": "onEsc()", "window:resize": "handleWindowResize()", "swipeleft": "gotoNextSlide()", "swiperight": "gotoPrevSlide()" }, properties: { "class.resizing": "this.resizing" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true, read: ElementRef }, { propertyName: "thumbScroller", first: true, predicate: ["thumbScroller"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
1144
1189
|
<div id="product_page_carousel">
|
|
1145
1190
|
<div id="product_page_carousel_items">
|
|
1146
1191
|
@if (showLoader) {
|
|
@@ -1174,18 +1219,35 @@ class ImageCarouselComponent {
|
|
|
1174
1219
|
|
|
1175
1220
|
<div id="product_page_carousel_thumbs">
|
|
1176
1221
|
@if (imageViewModels && imageViewModels.length > 1) {
|
|
1177
|
-
<
|
|
1222
|
+
<div class="thumbs-pointer left-point">
|
|
1223
|
+
<co-icon
|
|
1224
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointLeft)"
|
|
1225
|
+
class="thumb-scroller prev"
|
|
1226
|
+
[class.visible]="canScrollThumbsLeft"
|
|
1227
|
+
(click)="scrollThumbs(-1)">
|
|
1228
|
+
</co-icon>
|
|
1229
|
+
</div>
|
|
1230
|
+
|
|
1231
|
+
|
|
1232
|
+
<div #thumbScroller class="thumbs-scroll-container" (scroll)="updateThumbScrollState()">
|
|
1178
1233
|
@for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
|
|
1179
|
-
<div class="carousel-thumb"
|
|
1180
|
-
|
|
1181
|
-
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
|
|
1234
|
+
<div class="carousel-thumb" [class.active]="index === currentIndex">
|
|
1235
|
+
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)" />
|
|
1182
1236
|
</div>
|
|
1183
1237
|
}
|
|
1184
|
-
</
|
|
1238
|
+
</div>
|
|
1239
|
+
<div class="thumbs-pointer right-point">
|
|
1240
|
+
<co-icon
|
|
1241
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointRight)"
|
|
1242
|
+
class="thumb-scroller next"
|
|
1243
|
+
[class.visible]="canScrollThumbsRight"
|
|
1244
|
+
(click)="scrollThumbs(1)">
|
|
1245
|
+
</co-icon>
|
|
1246
|
+
</div>
|
|
1185
1247
|
}
|
|
1186
1248
|
</div>
|
|
1187
1249
|
</div>
|
|
1188
|
-
|
|
1250
|
+
|
|
1189
1251
|
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
|
|
1190
1252
|
<ng-template
|
|
1191
1253
|
cdkConnectedOverlay
|
|
@@ -1202,7 +1264,7 @@ class ImageCarouselComponent {
|
|
|
1202
1264
|
</div>
|
|
1203
1265
|
</div>
|
|
1204
1266
|
</ng-template>
|
|
1205
|
-
`, isInline: true, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;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:
|
|
1267
|
+
`, isInline: true, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;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;align-items:center;gap:8px}#product_page_carousel .thumbs-scroll-container{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;max-width:528px;scrollbar-width:none}#product_page_carousel .thumbs-scroll-container::-webkit-scrollbar{display:none}#product_page_carousel .carousel-thumb{flex:0 0 80px}#product_page_carousel .thumb-scroller{display:none;width:28px;height:28px;border:0;cursor:pointer}#product_page_carousel .thumb-scroller.visible{display:block}#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;width:80px;height:80px;align-items:center;display:flex}#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{max-height:100%;max-width:100%;object-fit:contain}.image-modal{position:fixed;inset:0;background:#000c;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;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"], dependencies: [{ kind: "component", type: i6.LoaderComponent, selector: "co-loader" }, { kind: "directive", type: i6$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1206
1268
|
}
|
|
1207
1269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageCarouselComponent, decorators: [{
|
|
1208
1270
|
type: Component,
|
|
@@ -1240,18 +1302,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1240
1302
|
|
|
1241
1303
|
<div id="product_page_carousel_thumbs">
|
|
1242
1304
|
@if (imageViewModels && imageViewModels.length > 1) {
|
|
1243
|
-
<
|
|
1305
|
+
<div class="thumbs-pointer left-point">
|
|
1306
|
+
<co-icon
|
|
1307
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointLeft)"
|
|
1308
|
+
class="thumb-scroller prev"
|
|
1309
|
+
[class.visible]="canScrollThumbsLeft"
|
|
1310
|
+
(click)="scrollThumbs(-1)">
|
|
1311
|
+
</co-icon>
|
|
1312
|
+
</div>
|
|
1313
|
+
|
|
1314
|
+
|
|
1315
|
+
<div #thumbScroller class="thumbs-scroll-container" (scroll)="updateThumbScrollState()">
|
|
1244
1316
|
@for (imageViewModel of imageViewModels; track imageViewModel; let index = $index) {
|
|
1245
|
-
<div class="carousel-thumb"
|
|
1246
|
-
|
|
1247
|
-
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)"/>
|
|
1317
|
+
<div class="carousel-thumb" [class.active]="index === currentIndex">
|
|
1318
|
+
<img [src]="imageViewModel.source" (click)="handleThumbClick(index)" />
|
|
1248
1319
|
</div>
|
|
1249
1320
|
}
|
|
1250
|
-
</
|
|
1321
|
+
</div>
|
|
1322
|
+
<div class="thumbs-pointer right-point">
|
|
1323
|
+
<co-icon
|
|
1324
|
+
[iconData]="iconCache.getIcon(icon.ArrowPointRight)"
|
|
1325
|
+
class="thumb-scroller next"
|
|
1326
|
+
[class.visible]="canScrollThumbsRight"
|
|
1327
|
+
(click)="scrollThumbs(1)">
|
|
1328
|
+
</co-icon>
|
|
1329
|
+
</div>
|
|
1251
1330
|
}
|
|
1252
1331
|
</div>
|
|
1253
1332
|
</div>
|
|
1254
|
-
|
|
1333
|
+
|
|
1255
1334
|
<div cdkOverlayOrigin #trigger="cdkOverlayOrigin"></div>
|
|
1256
1335
|
<ng-template
|
|
1257
1336
|
cdkConnectedOverlay
|
|
@@ -1268,10 +1347,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1268
1347
|
</div>
|
|
1269
1348
|
</div>
|
|
1270
1349
|
</ng-template>
|
|
1271
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;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:
|
|
1272
|
-
}], ctorParameters: () => [{ type: IconCacheService }, { type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }], propDecorators: { carousel: [{
|
|
1350
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{height:100%;position:relative;min-height:600px}: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:#4e9b7e;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:460px}#product_page_carousel .carousel-item{max-height:460px;width:100%;display:flex;cursor:zoom-in;flex-shrink:0;flex-grow:0}#product_page_carousel .carousel-item img{width:100%;height:auto;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;align-items:center;gap:8px}#product_page_carousel .thumbs-scroll-container{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;max-width:528px;scrollbar-width:none}#product_page_carousel .thumbs-scroll-container::-webkit-scrollbar{display:none}#product_page_carousel .carousel-thumb{flex:0 0 80px}#product_page_carousel .thumb-scroller{display:none;width:28px;height:28px;border:0;cursor:pointer}#product_page_carousel .thumb-scroller.visible{display:block}#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;width:80px;height:80px;align-items:center;display:flex}#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{max-height:100%;max-width:100%;object-fit:contain}.image-modal{position:fixed;inset:0;background:#000c;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;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"] }]
|
|
1351
|
+
}], ctorParameters: () => [{ type: IconCacheService }, { type: ProductConnectorService }, { type: ProductEventService }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }, { type: IconCacheService }], propDecorators: { carousel: [{
|
|
1273
1352
|
type: ViewChild,
|
|
1274
1353
|
args: ['carousel', { read: ElementRef }]
|
|
1354
|
+
}], thumbScroller: [{
|
|
1355
|
+
type: ViewChild,
|
|
1356
|
+
args: ['thumbScroller', { read: ElementRef }]
|
|
1275
1357
|
}], onEsc: [{
|
|
1276
1358
|
type: HostListener,
|
|
1277
1359
|
args: ['document:keydown.escape']
|