@colijnit/product 259.1.3 → 259.1.4

package/app/components/product-related/product-related.component.d.ts

@@ -1,9 +1,14 @@
 import { ArticleListObject } from '@colijnit/articleapi/build/model/article-list-object';
 import { ProductConnectorService } from '../../service/product-connector.service';
 import { ProductEventService } from '../../service/product-event.service';
-import { ProductConnectorAdapterService } from "../../service/product-connector-adapter.service";
-import { ProductSettingsService } from "../../service/product-settings.service";
+import { ProductConnectorAdapterService } from '../../service/product-connector-adapter.service';
+import { ProductSettingsService } from '../../service/product-settings.service';
 import { ExternalSource } from '@colijnit/articleapi/build/model/external-source.bo';
+export declare class ArticleViewModel {
+    article: ArticleListObject;
+    imageData: string;
+    constructor(article: ArticleListObject, imageData?: string);
+}
 export declare class ProductRelatedComponent {
     private _iOne;
     private _appEventService;
@@ -16,7 +21,7 @@ export declare class ProductRelatedComponent {
     createFrozenArticle: boolean;
     set articles(value: ArticleListObject[]);
     get articles(): ArticleListObject[];
-    imageData: string;
+    articleViewModels: ArticleViewModel[];
     private _articles;
     constructor(_iOne: ProductConnectorService, _appEventService: ProductEventService, _productConnectorAdapterService: ProductConnectorAdapterService, _settingsService: ProductSettingsService);
     handleContentClick(article: ArticleListObject): void;

package/bundles/colijnit-product.umd.js

@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "259.1.3";
-            this.publishDate = "29-9-2025 15:45:45";
+            this.symVer = "259.1.4";
+            this.publishDate = "7-1-2026 17:40:44";
         }
         return Version;
     }());
@@ -2785,6 +2785,15 @@
                 },] }
     ];
 
+    var ArticleViewModel = /** @class */ (function () {
+        function ArticleViewModel(article, imageData) {
+            this.article = article;
+            if (imageData) {
+                this.imageData = imageData;
+            }
+        }
+        return ArticleViewModel;
+    }());
     var ProductRelatedComponent = /** @class */ (function () {
         function ProductRelatedComponent(_iOne, _appEventService, _productConnectorAdapterService, _settingsService) {
             this._iOne = _iOne;
@@ -2793,7 +2802,7 @@
             this._settingsService = _settingsService;
             this.isSmallModus = true;
             this.createFrozenArticle = true;
-            this.imageData = '';
+            this.articleViewModels = [];
             this._articles = [];
         }
         Object.defineProperty(ProductRelatedComponent.prototype, "articles", {
@@ -2815,6 +2824,8 @@
                     else {
                         this._articles = value;
                     }
+                    this.articleViewModels.length = 0;
+                    this._articles.forEach(function (a) { return _this.articleViewModels.push(new ArticleViewModel(a)); });
                     this._loadImages();
                 }
             },
@@ -2874,29 +2885,24 @@
             });
         };
         ProductRelatedComponent.prototype._loadImages = function () {
-            var _this = this;
-            this._articles.forEach(function (a) { return __awaiter(_this, void 0, void 0, function () {
-                var imageContent;
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
                 return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            if (!a.image) return [3 /*break*/, 2];
-                            return [4 /*yield*/, this._iOne.getImageForCoDocument(a.image, false)];
-                        case 1:
-                            imageContent = _a.sent();
-                            this.imageData = imageContent.image;
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
-                    }
+                    this.articleViewModels.forEach(function (avm) {
+                        if (avm.article.image) {
+                            _this._iOne.getImageForCoDocument(avm.article.image, false).then(function (imageContent) { return avm.imageData = imageContent.image; });
+                        }
+                    });
+                    return [2 /*return*/];
                 });
-            }); });
+            });
         };
         return ProductRelatedComponent;
     }());
     ProductRelatedComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-related',
-                    template: "\n        <div *ngIf=\"articles && articles.length > 0\">\n            <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n            <co-scroll-container>\n                <div class=\"article-wrapper\" *ngFor=\"let article of articles\">\n                    <co-article-tile\n                        [imageData]=\"imageData\"\n                        [description]=\"article.description\"\n                        [price]=\"article.price\"\n                        [level]=\"article.stockStatus\"\n                        [hasCartButton]=\"true\"\n                        [isSmallModus]=\"isSmallModus\"\n                        [hasConfigureButton]=\"article.goodType === 'B'\"\n                        (contentClick)=\"handleContentClick(article)\"\n                        (cartButtonClick)=\"handleAddToCartClick(article)\"\n                        (configureButtonClick)=\"handleContentClick(article)\"\n                        (threeDButtonClick)=\"handleThreeDButtonClick(article)\"\n                    ></co-article-tile>\n                </div>\n            </co-scroll-container>\n        </div>\n    ",
+                    template: "\n        <div *ngIf=\"articles && articles.length > 0\">\n            <app-header [label]=\"label\" [amount]=\"articles?.length\" *ngIf=\"label\"></app-header>\n            <co-scroll-container>\n                <div class=\"article-wrapper\" *ngFor=\"let articleViewModel of articleViewModels\">\n                    <co-article-tile \n                        [imageData]=\"articleViewModel.imageData\"\n                        [description]=\"articleViewModel.article.description\"\n                        [price]=\"articleViewModel.article.price\"\n                        [level]=\"articleViewModel.article.stockStatus\"\n                        [hasCartButton]=\"true\"\n                        [isSmallModus]=\"isSmallModus\"\n                        [hasConfigureButton]=\"articleViewModel.article.goodType === 'B'\"\n                        (contentClick)=\"handleContentClick(articleViewModel.article)\"\n                        (cartButtonClick)=\"handleAddToCartClick(articleViewModel.article)\"\n                        (configureButtonClick)=\"handleContentClick(articleViewModel.article)\"\n                        (threeDButtonClick)=\"handleThreeDButtonClick(articleViewModel.article)\"\n                    ></co-article-tile>\n                </div>\n            </co-scroll-container>\n        </div>\n    ",
                     styles: [":host{display:block}.article-wrapper{display:flex;flex-direction:row;flex:1;min-width:25%}.article-wrapper ::ng-deep co-tile{transition:all .14s ease-out;border:1px solid transparent;padding:10px 20px;display:flex;flex-direction:column;color:#171721;justify-content:space-between}.article-wrapper ::ng-deep co-tile .price{display:block}.article-wrapper ::ng-deep co-tile .description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:30px}.article-wrapper ::ng-deep co-tile .tile-bottom{display:flex;flex-direction:column;grid-gap:5px;gap:5px}.article-wrapper ::ng-deep co-tile:hover{border:1px solid #DCE4EA}.article-wrapper ::ng-deep co-tile .tile-extra-bottom co-button co-icon{width:24px;height:24px}.article-wrapper ::ng-deep co-tile .tile-extra-bottom co-button co-icon svg [fill]{fill:#fff}.article-wrapper ::ng-deep co-tile.small{max-width:189px;width:100%;height:100%;cursor:pointer}.article-wrapper ::ng-deep co-tile.small:hover .tile-bottom .left-buttons{margin:0!important}.article-wrapper ::ng-deep co-tile.small .tile-wrapper{outline:none!important;padding-bottom:0;overflow:hidden;grid-gap:10px;gap:10px;display:flex;flex-direction:column}.article-wrapper ::ng-deep co-tile.small .tile-wrapper div.image{height:100px}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-extra-bottom ::ng-deep co-button.card-button.mini{pointer-events:all;padding:0!important;font-size:0;width:42px;height:42px;text-align:center;margin:0;border-radius:100%;background:#3E7EFF;cursor:pointer;place-content:center;color:#fff}.article-wrapper ::ng-deep co-tile.small .tile-wrapper .tile-extra-bottom ::ng-deep co-button.card-button.mini ::ng-deep co-icon{width:30px;height:30px}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom{outline:none!important;background:transparent!important}.article-wrapper ::ng-deep co-tile.small .tile-extra-bottom .price{color:#74b77f;margin:5px 0 0;font-weight:400;font-size:12px}\n"]
                 },] }
     ];