@colijnit/product 253.1.1 → 253.1.2

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

@@ -16,6 +16,7 @@ export declare class ProductAddtocartComponent implements OnInit, OnDestroy {
     createFrozenArticle: boolean;
     configurable: boolean;
     configuring: boolean;
+    isReturn: boolean;
     fullscreen: boolean;
     set quantity(value: number);
     get quantity(): number;

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

@@ -22,6 +22,7 @@ export declare class ProductPageComponent implements OnInit, OnDestroy, AfterVie
     get sku(): string;
     set settings(value: any);
     createFrozenArticle: boolean;
+    isReturn: boolean;
     openStockEvent: EventEmitter<void>;
     get settings(): any;
     set fullScreen(value: boolean);

package/app/ione-product.component.d.ts

@@ -16,6 +16,7 @@ export declare class IoneProductComponent implements OnInit, OnChanges, OnDestro
     private _appEventService;
     private _settingsService;
     sku: string;
+    isReturn: boolean;
     set settings(value: any);
     get settings(): any;
     handleAddArticleInternally: boolean;

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 = "253.1.1";
-            this.publishDate = "21-6-2024 11:00:59";
+            this.symVer = "253.1.2";
+            this.publishDate = "2-7-2024 10:15:01";
         }
         return Version;
     }());
@@ -1379,7 +1379,7 @@
     IoneProductComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-ione-product',
-                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        (openStockEvent)=\"openStock()\" [sku]=\"sku\"\n      ></app-product-page>\n  ",
+                    template: "\n      <app-product-page *ngIf=\"settingsLoaded\"\n                        [createFrozenArticle]=\"handleAddArticleInternally\"\n                        [isReturn]=\"isReturn\"\n                        (openStockEvent)=\"openStock()\" [sku]=\"sku\"\n      ></app-product-page>\n  ",
                     encapsulation: i0.ViewEncapsulation.Emulated,
                     styles: [""]
                 },] }
@@ -1394,6 +1394,7 @@
     ]; };
     IoneProductComponent.propDecorators = {
         sku: [{ type: i0.Input }],
+        isReturn: [{ type: i0.Input }],
         settings: [{ type: i0.Input }],
         handleAddArticleInternally: [{ type: i0.Input }],
         onAddToCart: [{ type: i0.Output }],
@@ -1510,6 +1511,7 @@
             this.appEventService = appEventService;
             this.icon = IconEnum;
             this.createFrozenArticle = true;
+            this.isReturn = false;
             this.openStockEvent = new i0.EventEmitter();
             this.configurable = false;
             this.threeD = false;
@@ -1680,7 +1682,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                                   [createFrozenArticle]=\"createFrozenArticle\"\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",
+                    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                                   [createFrozenArticle]=\"createFrozenArticle\"\r\n                                   [configuring]=\"configuring\"\r\n                                   [article]=\"article\"\r\n                                   [isReturn]=\"isReturn\"\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                                   [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                                 [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%' })),
@@ -1731,6 +1733,7 @@
         sku: [{ type: i0.Input }],
         settings: [{ type: i0.Input }],
         createFrozenArticle: [{ type: i0.Input }],
+        isReturn: [{ type: i0.Input }],
         openStockEvent: [{ type: i0.Output }]
     };
 
@@ -2250,6 +2253,7 @@
             this.createFrozenArticle = true;
             this.configurable = false;
             this.configuring = false;
+            this.isReturn = false;
             this.fullscreen = false;
             this.startConfiguration = new i0.EventEmitter();
             this.addToCartClick = new i0.EventEmitter();
@@ -2262,7 +2266,17 @@
                 return this._quantity;
             },
             set: function (value) {
-                this._quantity = Math.max(1, value);
+                if (this.isReturn) {
+                    if (this._quantity === 1) {
+                        this._quantity = -1;
+                    }
+                    else {
+                        this._quantity = value;
+                    }
+                }
+                else {
+                    this._quantity = Math.max(1, value);
+                }
             },
             enumerable: false,
             configurable: true
@@ -2333,7 +2347,7 @@
     ProductAddtocartComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-product-addtocart',
-                    template: "\n    <div class=\"atc-wrapper\">\n      <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n      <div class=\"button-wrapper\">\n        <co-button class=\"configure-button\" *ngIf=\"configurable\"\n                   [iconData]=\"iconCache.getIcon(icon.MagicWand)\"\n                   [label]=\"'CONFIGURE' | localize\"\n                   (onClick)=\"startConfiguration.emit()\"\n        ></co-button>\n        <co-button #addtocartbutton class=\"cart-button\" *ngIf=\"!configurable\"\n                   [iconData]=\"iconCache.getIcon(icon.AddToCartDrop)\"\n                   [label]=\"'SHOPPING_CART_IN' | localize\"\n                   (onClick)=\"handleAddToCartClick(quantity)\"\n        ></co-button>\n        <co-button class=\"cart-button quote\" *ngIf=\"!configurable && showQuoteButton\"\n                   [iconData]=\"iconCache.getIcon(icon.Quote)\"\n                   [label]=\"'QUOTATION' | localize\"\n                   (onClick)=\"handleAddToQuoteClick(quantity)\"\n        ></co-button>\n      </div>\n    </div>\n  ",
+                    template: "\n    <div class=\"atc-wrapper\">\n      <ng-container *ngIf=\"isReturn\">\n        <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"-100\" horizontal></co-number-picker>\n      </ng-container>\n\n      <ng-container *ngIf=\"!isReturn\">\n        <co-number-picker *ngIf=\"!configurable && !configuring\" class=\"quantity-select\" [(model)]=\"quantity\" [min]=\"1\" horizontal></co-number-picker>\n      </ng-container>\n      <div class=\"button-wrapper\">\n        <co-button class=\"configure-button\" *ngIf=\"configurable\"\n                   [iconData]=\"iconCache.getIcon(icon.MagicWand)\"\n                   [label]=\"'CONFIGURE' | localize\"\n                   (onClick)=\"startConfiguration.emit()\"\n        ></co-button>\n        <co-button #addtocartbutton class=\"cart-button\" *ngIf=\"!configurable\"\n                   [iconData]=\"iconCache.getIcon(icon.AddToCartDrop)\"\n                   [label]=\"'SHOPPING_CART_IN' | localize\"\n                   (onClick)=\"handleAddToCartClick(quantity)\"\n        ></co-button>\n        <co-button class=\"cart-button quote\" *ngIf=\"!configurable && showQuoteButton\"\n                   [iconData]=\"iconCache.getIcon(icon.Quote)\"\n                   [label]=\"'QUOTATION' | localize\"\n                   (onClick)=\"handleAddToQuoteClick(quantity)\"\n        ></co-button>\n      </div>\n    </div>\n  ",
                     styles: [":host{display:flex;flex-direction:column}:host *:not(:last-child){margin-bottom:5px}:host .atc-wrapper{display:flex;flex-direction:row;align-items:baseline}:host .atc-wrapper .quantity-select{margin-right:5px}:host.full-screen .cart-button{position:fixed;right:20px;bottom:20px;z-index:3}::ng-deep co-number-picker{max-width:100px;border:2px solid #f6f5f4;border-radius:5px}::ng-deep co-number-picker ::ng-deep co-input-text{height:50px!important;border:none!important;width:50px!important}::ng-deep co-number-picker ::ng-deep co-input-text:after{display:none}::ng-deep co-number-picker ::ng-deep co-input-text.focused{box-shadow:none!important;border:none!important;background:none!important}::ng-deep co-number-picker ::ng-deep co-input-text .clear-icon{display:none}::ng-deep co-number-picker ::ng-deep co-input-text input{width:100%;text-align:center}::ng-deep co-number-picker ::ng-deep co-button{justify-content:center;padding:0!important;margin:0!important;height:50px!important;background-color:transparent!important}::ng-deep co-number-picker ::ng-deep co-button ::ng-deep co-icon [fill]{fill:#22313c!important}.button-wrapper ::ng-deep co-button{height:50px;max-width:300px;justify-content:center;font-size:15px;border-radius:5px!important;cursor:pointer;padding:0 20px!important}.button-wrapper ::ng-deep co-button:hover{background:#74B77F}::ng-deep co-button.cart-button{border-radius:5px}::ng-deep co-button.cart-button.quote{background:#7292b6}\n"]
                 },] }
     ];
@@ -2349,6 +2363,7 @@
         createFrozenArticle: [{ type: i0.Input }],
         configurable: [{ type: i0.Input }],
         configuring: [{ type: i0.Input }],
+        isReturn: [{ type: i0.Input }],
         fullscreen: [{ type: i0.HostBinding, args: ['class.full-screen',] }, { type: i0.Input }],
         quantity: [{ type: i0.Input }],
         startConfiguration: [{ type: i0.Output }],