@colijnit/product 260.1.1 → 260.1.2

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

@@ -1,11 +1,16 @@
 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 {
-    _iOne: ProductConnectorService;
+    private _iOne;
     private _appEventService;
     private _productConnectorAdapterService;
     private _settingsService;
@@ -16,7 +21,7 @@ export declare class ProductRelatedComponent {
     createFrozenArticle: boolean;
     set articles(value: ArticleListObject[]);
     get articles(): ArticleListObject[];
-    imageDataMap: Map<number, 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 = "260.1.1";
-            this.publishDate = "15-12-2025 17:02:25";
+            this.symVer = "260.1.2";
+            this.publishDate = "5-1-2026 18:13:02";
         }
         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.imageDataMap = new Map();
+            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();
                 }
             },
@@ -2875,39 +2886,14 @@
         };
         ProductRelatedComponent.prototype._loadImages = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, _b, a, imageContent, e_1_1;
-                var e_1, _c;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0:
-                            _d.trys.push([0, 5, 6, 7]);
-                            _a = __values(this._articles), _b = _a.next();
-                            _d.label = 1;
-                        case 1:
-                            if (!!_b.done) return [3 /*break*/, 4];
-                            a = _b.value;
-                            if (!a.image) return [3 /*break*/, 3];
-                            return [4 /*yield*/, this._iOne.getImageForCoDocument(a.image, false)];
-                        case 2:
-                            imageContent = _d.sent();
-                            this.imageDataMap.set(a.goodId, imageContent.image);
-                            _d.label = 3;
-                        case 3:
-                            _b = _a.next();
-                            return [3 /*break*/, 1];
-                        case 4: return [3 /*break*/, 7];
-                        case 5:
-                            e_1_1 = _d.sent();
-                            e_1 = { error: e_1_1 };
-                            return [3 /*break*/, 7];
-                        case 6:
-                            try {
-                                if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                            return [7 /*endfinally*/];
-                        case 7: return [2 /*return*/];
-                    }
+                var _this = this;
+                return __generator(this, function (_a) {
+                    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*/];
                 });
             });
         };
@@ -2916,7 +2902,7 @@
     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]=\"imageDataMap.get(article.goodId)\"\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"]
                 },] }
     ];