@colijnit/product 12.0.2 → 12.0.4

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

@@ -1,18 +1,20 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { ProductConnectorService } from '../../service/product-connector.service';
 import { IconCacheService } from '../../service/icon-cache.service';
 import { IconEnum } from '../../enum/icon.enum';
-import { StockAndDelivery } from '../../model/stock-and-delivery';
-export declare class ProductStockComponent implements OnInit {
+export declare class ProductStockComponent {
     private _iOne;
     private _iconCache;
     readonly icon: typeof IconEnum;
-    set stockAndDelivery(value: StockAndDelivery);
-    numberInStock: number;
-    iconData: SafeHtml;
+    set goodId(value: number);
+    get goodId(): number;
     openStockEvent: EventEmitter<void>;
+    inStock: boolean;
+    stockLabel: string;
+    iconData: SafeHtml;
+    private _goodId;
     constructor(_iOne: ProductConnectorService, _iconCache: IconCacheService);
-    ngOnInit(): void;
     openStock(): void;
+    private _getStockStatus;
 }

package/app/service/product-connector-adapter.service.d.ts

@@ -21,6 +21,7 @@ export declare class ProductConnectorAdapterService implements OnDestroy {
     getProductBundleSettings(url: string, upId: number): Promise<string>;
     getDeliveryPrognosis(goodId: number, branchNr?: string): Promise<any>;
     getSelectorDeliveryDate(): Promise<DeliveryPrognosis>;
+    getArtStockStatus(goodId: number): Promise<number>;
     getDeliveryDate2(goodId: number): Promise<DeliveryPrognosis>;
     getJsonConfiguredArticles(configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;
     getJsonArticleFlatTree(goodId: number, goodType: string, quantity: number, showLoader?: boolean, instanceId?: any, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;

package/app/service/product-connector.service.d.ts

@@ -28,6 +28,7 @@ export declare class ProductConnectorService implements OnDestroy {
     getDocumentContent(docId: number, thumbnail?: boolean): Promise<DocumentContent>;
     getDeliveryPrognosis(goodId: number): Promise<DeliveryPrognosis>;
     getSelectorDeliveryDate(): Promise<DeliveryPrognosis>;
+    getArtStockStatus(goodId: number): Promise<number>;
     getDeliveryDate2(goodId: number): Promise<DeliveryPrognosis>;
     getSuperArticle(id: string): Promise<SuperArticle>;
     getJsonArticleFlatTree(goodId: number, goodType: string, quantity: number, showLoader?: boolean, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<string>;

package/app/service/product-settings.service.d.ts

@@ -10,7 +10,7 @@ export declare class ProductSettingsService {
     settingsLoaded: BehaviorSubject<boolean>;
     private _settings;
     constructor(_jsonUtilsService: JsonUtilsService, _dictionaryService: DictionaryService);
-    initializeSettings(): Promise<void>;
+    initializeSettings(finish?: boolean): Promise<void>;
     createSettingsFromObject(obj: any): Promise<void>;
     settingsFinished(): Promise<void>;
 }

package/bundles/colijnit-product.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/platform-browser/animations'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
-    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/platform-browser/animations', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.platformBrowser.animations, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment));
-})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, i1, stringUtils, common, animations$1, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@colijnit/ioneconnector/build/model/options'), require('@colijnit/articleapi/build/model/article-full-object'), require('@colijnit/articleapi/build/model/super-article'), require('@colijnit/articleapi/build/articles'), require('@colijnit/articleapi/build/model/delivery-prognosis'), require('@colijnit/articleapi/build/model/document-content'), require('@colijnit/ioneconnector/build/service/business-object-factory'), require('@colijnit/transactionapi/build/transaction'), require('@colijnit/mainapi'), require('@angular/common/http'), require('@colijnit/ioneconnector/build/utils/string-utils'), require('@angular/common'), require('@angular/animations'), require('@angular/platform-browser'), require('@colijnit/corecomponents'), require('@colijnit/mainapi/build/model/co-document'), require('@colijnit/articleapi/build/model/configurator-statistics-environment')) :
+    typeof define === 'function' && define.amd ? define('@colijnit/product', ['exports', '@angular/core', 'rxjs', '@colijnit/ioneconnector/build/model/options', '@colijnit/articleapi/build/model/article-full-object', '@colijnit/articleapi/build/model/super-article', '@colijnit/articleapi/build/articles', '@colijnit/articleapi/build/model/delivery-prognosis', '@colijnit/articleapi/build/model/document-content', '@colijnit/ioneconnector/build/service/business-object-factory', '@colijnit/transactionapi/build/transaction', '@colijnit/mainapi', '@angular/common/http', '@colijnit/ioneconnector/build/utils/string-utils', '@angular/common', '@angular/animations', '@angular/platform-browser', '@colijnit/corecomponents', '@colijnit/mainapi/build/model/co-document', '@colijnit/articleapi/build/model/configurator-statistics-environment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.colijnit = global.colijnit || {}, global.colijnit.product = {}), global.ng.core, global.rxjs, global.options, global.articleFullObject, global.superArticle, global.articles, global.deliveryPrognosis, global.documentContent, global.businessObjectFactory, global.transaction, global.mainapi, global.ng.common.http, global.stringUtils, global.ng.common, global.ng.animations, global.ng.platformBrowser, global.corecomponents, global.coDocument, global.configuratorStatisticsEnvironment));
+})(this, (function (exports, i0, rxjs, options, articleFullObject, superArticle, articles, deliveryPrognosis, documentContent, businessObjectFactory, transaction, mainapi, i1, stringUtils, common, animations, i1$1, corecomponents, coDocument, configuratorStatisticsEnvironment) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -31,8 +31,8 @@
         function Version() {
             this.name = "@colijnit/product";
             this.description = "Product detail page project for iOne";
-            this.symVer = "12.0.2";
-            this.publishDate = "3-10-2023 14:44:54";
+            this.symVer = "12.0.4";
+            this.publishDate = "16-10-2023 12:31:14";
         }
         return Version;
     }());
@@ -671,6 +671,25 @@
                 });
             });
         };
+        ProductConnectorAdapterService.prototype.getArtStockStatus = function (goodId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.articleConnector.getArtStockStatus(goodId)];
+                        case 1:
+                            response = _a.sent();
+                            if (response && response.validationResult && response.validationResult.success) {
+                                return [2 /*return*/, response.resultObject];
+                            }
+                            else {
+                                return [2 /*return*/, null];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         ProductConnectorAdapterService.prototype.getDeliveryDate2 = function (goodId) {
             return __awaiter(this, void 0, void 0, function () {
                 var response;
@@ -847,6 +866,7 @@
                     "HEIGHT": "Hoogte",
                     "MATERIAL": "Materiaal",
                     "PRODUCT_IN_STOCK": "Op voorraad",
+                    "PRODUCT_LIMITED_STOCK": "Beperkt op voorraad",
                     "PRODUCT_NOT_IN_STOCK": "Niet op voorraad",
                     "PROPERTIES": "Eigenschappen",
                     "QUOTATION": "Quotatie",
@@ -876,6 +896,7 @@
                     "HEIGHT": "Höhe",
                     "MATERIAL": "Material",
                     "PRODUCT_IN_STOCK": "Auf lager",
+                    "PRODUCT_LIMITED_STOCK": "Begrentzt auf lager",
                     "PRODUCT_NOT_IN_STOCK": "Nicht auf lager",
                     "PROPERTIES": "Eigenschaften",
                     "QUOTATION": "Angebot",
@@ -995,7 +1016,8 @@
             enumerable: false,
             configurable: true
         });
-        ProductSettingsService.prototype.initializeSettings = function () {
+        ProductSettingsService.prototype.initializeSettings = function (finish) {
+            if (finish === void 0) { finish = true; }
             return __awaiter(this, void 0, void 0, function () {
                 var jsonSettings;
                 return __generator(this, function (_a) {
@@ -1008,13 +1030,17 @@
                             if (jsonSettings) {
                                 this.settings = Object.assign(new ProductSettings(), jsonSettings);
                                 this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
-                                this.settingsFinished();
+                                if (finish) {
+                                    this.settingsFinished();
+                                }
                             }
                             return [3 /*break*/, 3];
                         case 2:
                             this.settings = Object.assign(new ProductSettings(), settings);
                             this.settings.options = Object.assign(new SettingsOptions(), this.settings.options);
-                            this.settingsFinished();
+                            if (finish) {
+                                this.settingsFinished();
+                            }
                             _a.label = 3;
                         case 3: return [2 /*return*/];
                     }
@@ -1174,6 +1200,9 @@
                 });
             });
         };
+        ProductConnectorService.prototype.getArtStockStatus = function (goodId) {
+            return this._adapterService.getArtStockStatus(goodId);
+        };
         ProductConnectorService.prototype.getDeliveryDate2 = function (goodId) {
             return this._adapterService.getDeliveryDate2(goodId);
         };
@@ -1243,6 +1272,18 @@
     var IoneProductComponent = /** @class */ (function () {
         function IoneProductComponent(_dictionary, _jsonUtils, _ione, _changeDetector, _appEventService, _settingsService) {
             var _this = this;
+            // this.sku = 'CF-HILL';
+            // this.sku = 'CF-ALMADA';
+            // this.sku = 'CF-39904ANT';
+            // this.sku = 'CF-22346001';
+            // this.sku = '104';
+            // this.sku = '1000561986';
+            // this.sku = '1000567768';
+            // this.sku = '1000234793';
+            // this.sku = '1066';
+            // this.sku = '104';
+            // this.sku = "70000107";
+            // this.sku = "grover";
             this._dictionary = _dictionary;
             this._jsonUtils = _jsonUtils;
             this._ione = _ione;
@@ -1259,17 +1300,6 @@
             this.openStockEvent = new i0.EventEmitter();
             this.settingsLoaded = false;
             this._subs = [];
-            // this.sku = 'CF-HILL';
-            // this.sku = 'CF-ALMADA';
-            // this.sku = 'CF-39904ANT';
-            // this.sku = 'CF-22346001';
-            // this.sku = '104';
-            // this.sku = '1000561986';
-            // this.sku = '1000567768';
-            this.sku = '1000234793';
-            // this.sku = '1066';
-            // this.sku = '104';
-            // this.sku = "70000107";
             this._subs.push(
             // this._dictionary.dictionaryLoaded.subscribe(d => this.upAndLoaded = true),
             this._appEventService.onAddToCart.subscribe(function (json) {
@@ -1284,15 +1314,12 @@
             },
             set: function (value) {
                 if (value) {
-                    var settings = void 0;
                     if (typeof value === 'string') {
-                        settings = JSON.parse(value);
+                        this._settings = JSON.parse(value);
                     }
                     else {
-                        settings = value;
+                        this._settings = value;
                     }
-                    this._settingsService.createSettingsFromObject(settings);
-                    // this._initConnection(settings);
                 }
             },
             enumerable: false,
@@ -1302,9 +1329,12 @@
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4 /*yield*/, this._settingsService.initializeSettings()];
+                        case 0: return [4 /*yield*/, this._settingsService.initializeSettings(this._settings === undefined)];
                         case 1:
                             _a.sent();
+                            if (this._settings) {
+                                this._settingsService.createSettingsFromObject(this._settings);
+                            }
                             return [2 /*return*/];
                     }
                 });
@@ -1385,7 +1415,6 @@
                     template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        (openStockEvent)=\"openStock()\" [sku]=\"sku\"\n      ></app-product-page>\n  ",
                     providers: [
                         ProductEventService,
-                        ProductSettingsService,
                         ProductConnectorAdapterService,
                         ProductConnectorService
                     ],
@@ -1687,7 +1716,7 @@
     ProductPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-page',
-                    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\">\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              ></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                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\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                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\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                                 [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\" (openStockEvent)=\"openStock()\" [stockAndDelivery]=\"stockAndDelivery\"></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\">\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 *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></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 *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
+                    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\">\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              ></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                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   (startConfiguration)=\"handleStartConfiguration()\"\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                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\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                                 [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\">\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 *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                                 [articles]=\"article?.relatedArticles\" [refType]=\"1\" [label]=\"'RELATED_PRODUCTS' | localize\"></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 *ngIf=\"article?.relatedArticles && article?.relatedArticles.length > 0\"\r\n                               [articles]=\"article?.relatedArticles\" [refType]=\"4\" [isSmallModus]=\"false\" [label]=\"'ALTERNATIVE_PRODUCTS' | localize\"></app-product-related>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n",
                     animations: [
                         animations.trigger('toggleFullScreen', [
                             animations.state('fullscreen', animations.style({ 'position': 'fixed', 'top': '0', 'left': '0', 'width': '100%', 'height': '100%' })),
@@ -2509,29 +2538,51 @@
             this._iconCache = _iconCache;
             this.icon = IconEnum;
             this.openStockEvent = new i0.EventEmitter();
+            this.inStock = false;
             this.iconData = this._iconCache.getIcon(this.icon.Warehouse);
         }
-        Object.defineProperty(ProductStockComponent.prototype, "stockAndDelivery", {
+        Object.defineProperty(ProductStockComponent.prototype, "goodId", {
+            get: function () {
+                return this._goodId;
+            },
             set: function (value) {
-                if (value) {
-                    this.numberInStock = value.stock;
-                }
+                this._goodId = value;
+                this._getStockStatus();
             },
             enumerable: false,
             configurable: true
         });
-        ProductStockComponent.prototype.ngOnInit = function () {
-        };
         ProductStockComponent.prototype.openStock = function () {
             this.openStockEvent.emit();
         };
+        ProductStockComponent.prototype._getStockStatus = function () {
+            var _this = this;
+            if (this.goodId) {
+                this._iOne.getArtStockStatus(this.goodId).then(function (result) {
+                    switch (result) {
+                        case 1: // niet op voorraad
+                            _this.stockLabel = 'PRODUCT_LIMITED_STOCK';
+                            _this.inStock = true;
+                            break;
+                        case 2:
+                            _this.stockLabel = 'PRODUCT_IN_STOCK';
+                            _this.inStock = true;
+                            break;
+                        default:
+                            _this.stockLabel = 'PRODUCT_NOT_IN_STOCK';
+                            _this.inStock = false;
+                            break;
+                    }
+                });
+            }
+        };
         return ProductStockComponent;
     }());
     ProductStockComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-stock',
-                    template: "\n    <!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n    <!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n    <div class=\"product-stock-wrapper\">\n      <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n      <div class=\"product-stock-fields\" (click)=\"openStock()\">\n        <div class=\"pp-default-label in-stock\" [textContent]=\"'PRODUCT_IN_STOCK' | localize\" *ngIf=\"numberInStock > 0\"></div>\n        <div class=\"pp-default-label not-in-stock\" [textContent]=\"'PRODUCT_NOT_IN_STOCK' | localize\" *ngIf=\"!(numberInStock > 0)\"></div>\n      </div>\n    </div>\n  ",
-                    styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#74B77F;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.not-in-stock:after{background:#f15152}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"]
+                    template: "\n    <!--<app-header [label]=\"'STOCK' | localize\"></app-header>-->\n    <!--<co-level-indicator [model]=\"'medium'\"></co-level-indicator>-->\n    <div class=\"product-stock-wrapper\">\n      <co-icon class=\"stock-icon\" [iconData]=\"iconData\"></co-icon>\n      <div class=\"product-stock-fields\" (click)=\"openStock()\">\n        <div class=\"pp-default-label\" [class.in-stock]=\"inStock\" [textContent]=\"stockLabel | localize\"></div>\n      </div>\n    </div>\n  ",
+                    styles: [":host{display:block}.product-stock-wrapper{display:flex;flex-direction:row;align-items:center;border-top:1px solid #f6f5f4;border-bottom:1px solid #f6f5f4;padding:20px 15px;cursor:pointer}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:40px;height:37px}.product-stock-wrapper .product-stock-fields{display:flex;flex-direction:row}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:14px;margin:0;color:#2b60a7;text-decoration:underline}.product-stock-wrapper .product-stock-fields .pp-default-label:after{content:\"\";width:10px;height:10px;border-radius:10px;background:#f15152;display:inline-block;margin:0 0 0 15px}.product-stock-wrapper .product-stock-fields .pp-default-label.in-stock:after{background:#74B77F}@media screen and (max-width: 400px){.product-stock-wrapper{padding:15px 0 15px 10px}.product-stock-wrapper .stock-icon{margin:0 15px 0 0;width:32px;height:28px}.product-stock-wrapper .product-stock-fields .pp-default-label{font-size:13px}}\n"]
                 },] }
     ];
     ProductStockComponent.ctorParameters = function () { return [
@@ -2539,7 +2590,7 @@
         { type: IconCacheService }
     ]; };
     ProductStockComponent.propDecorators = {
-        stockAndDelivery: [{ type: i0.Input }],
+        goodId: [{ type: i0.Input }],
         openStockEvent: [{ type: i0.Output }]
     };
 
@@ -3091,7 +3142,7 @@
     IoneProductModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [
-                        animations$1.BrowserAnimationsModule,
+                        // BrowserAnimationsModule,
                         common.CommonModule,
                         ProductPageModule
                     ],
@@ -3103,6 +3154,9 @@
                     ],
                     bootstrap: [
                         IoneProductComponent
+                    ],
+                    providers: [
+                        ProductSettingsService
                     ]
                 },] }
     ];