@colijnit/product 261.20.3 → 262.1.1

package/fesm2022/colijnit-product.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Pipe, EventEmitter, Output, Input, Component, ElementRef, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, SecurityContext, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA, PLATFORM_ID, Inject, NO_ERRORS_SCHEMA } from '@angular/core';
-import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
+import { Subject, BehaviorSubject, ReplaySubject, combineLatest, from } from 'rxjs';
 import { Options } from '@colijnit/ioneconnector/build/model/options';
 import { ArticleFullObject } from '@colijnit/articleapi/build/model/article-full-object';
 import { SuperArticle } from '@colijnit/articleapi/build/model/super-article';
@@ -23,19 +23,19 @@ import { IconModule, LoaderModule, ScrollContainerModule, InputNumberPickerModul
 import { CoDocument } from '@colijnit/mainapi/build/model/co-document.bo';
 import * as i6$1 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { ConfiguratorStatisticsEnvironment } from '@colijnit/articleapi/build/model/configurator-statistics-environment';
 import * as i3 from '@colijnit/sharedcomponents';
 import { FilesUploadModule } from '@colijnit/sharedcomponents';
-import * as i5$1 from '@angular/common';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
 
 // this file is dynamically created, do not change this
 class Version {
     constructor() {
         this.name = "@colijnit/product";
         this.description = "Product detail page project for iOne";
-        this.symVer = "261.20.3";
-        this.publishDate = "2-4-2026, 17:07:12";
+        this.symVer = "262.1.1";
+        this.publishDate = "20-4-2026, 15:41:15";
     }
 }
 
@@ -261,6 +261,28 @@ class ProductConnectorAdapterService {
             return Promise.resolve(false);
         }
     }
+    async getGoogleTranslation(sourceLang, targetLang, list) {
+        const result = await this.mainConnector.getGoogleTranslation(sourceLang, targetLang, list);
+        if (result.validationResult && result.validationResult.success) {
+            return result.resultObject;
+        }
+    }
+    async googleTranslateEnabled() {
+        // this should always be fetched from the mainapi from the client
+        const response = await this.mainConnector.isGoogleTranslateEnabled();
+        if (response && response.validationResult && response.validationResult.success) {
+            return response.resultObject;
+        }
+        return false;
+    }
+    async getDefaultLanguage(upId) {
+        // this should always be fetched from the mainapi from the client
+        const response = await this.mainConnector.getPublicParams(upId);
+        if (response && response['defaultLanguage'] !== undefined) {
+            return response['defaultLanguage'];
+        }
+        return 'nl'; // just to be safe
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService, deps: [{ token: ProductEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductConnectorAdapterService }); }
 }
@@ -648,6 +670,15 @@ class ProductConnectorService {
     async savePreset() {
         return await this._adapterService.savePreset();
     }
+    async getGoogleTranslation(sourceLang, targetLang, list) {
+        return await this._adapterService.getGoogleTranslation(sourceLang, targetLang, list);
+    }
+    googleTranslateEnabled() {
+        return this._adapterService.googleTranslateEnabled();
+    }
+    async getDefaultLanguage(upId) {
+        return await this._adapterService.getDefaultLanguage(upId);
+    }
     onShowLoaderChange(showLoader) {
         this._shouldShowLoader = showLoader;
     }
@@ -658,6 +689,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: ProductConnectorAdapterService }, { type: ProductSettingsService }] });
 
+class GoogleTranslation {
+    constructor(label, translation, language) {
+        this.label = label;
+        this.translation = translation;
+        this.language = language;
+    }
+}
+class GoogleTranslateService {
+    constructor(_settingsService, _connectorService) {
+        this._settingsService = _settingsService;
+        this._connectorService = _connectorService;
+        this._translations = [];
+        this._initialized = false;
+        this._initializedSubject = new ReplaySubject(1);
+        this.googleApiEnabled = false;
+        this._connectionSubject = combineLatest([
+            this._settingsService.settingsLoaded,
+            this._connectorService.controllerInitialized
+        ]).subscribe(async ([settingsInitialized, controllerInitialized]) => {
+            if (settingsInitialized && controllerInitialized) {
+                this._clientLanguage = this._settingsService.settings.languageCode;
+                const googleTranslateEnabled = await this._connectorService.googleTranslateEnabled();
+                if (googleTranslateEnabled) {
+                    this.googleApiEnabled = true;
+                    this._defaultLanguage = await this._connectorService.getDefaultLanguage(+this._settingsService.settings.schema);
+                }
+                this._initialized = true;
+                this._initializedSubject.next();
+                this._initializedSubject.complete();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._connectionSubject.unsubscribe();
+    }
+    async getTranslation(input) {
+        if (!this._initialized) {
+            await this._initializedSubject.toPromise();
+        }
+        if (!this.googleApiEnabled) {
+            return input;
+        }
+        const sourceLang = this._defaultLanguage.toLowerCase();
+        const targetLang = this._clientLanguage.toLowerCase();
+        const translationList = [input];
+        // When we do not need a translation
+        if (!input || (sourceLang === targetLang)) {
+            return input;
+        }
+        // When we might have cache
+        const result = this._translations.find(item => item.label === input && item.language === targetLang);
+        if (result && result.translation) {
+            return result.translation;
+        }
+        // translate
+        const translation = await this._connectorService.getGoogleTranslation(sourceLang, targetLang, translationList);
+        const key = Object.keys(translation)[0];
+        const cache = new GoogleTranslation(input, translation[key], targetLang);
+        this._translations.push(cache);
+        return translation[key];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleTranslateService, deps: [{ token: ProductSettingsService }, { token: ProductConnectorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleTranslateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: ProductSettingsService }, { type: ProductConnectorService }] });
+
 class RootStorageObject {
 }
 class LocalStorageService {
@@ -1289,6 +1391,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['class.resizing']
             }] } });
 
+class GoogleTranslatePipe {
+    constructor(_googleTranslateService) {
+        this._googleTranslateService = _googleTranslateService;
+    }
+    transform(value) {
+        return from(this._googleTranslateService.getTranslation(value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleTranslatePipe, deps: [{ token: GoogleTranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: GoogleTranslatePipe, isStandalone: false, name: "googleTranslate" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GoogleTranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'googleTranslate',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: GoogleTranslateService }] });
+
 class ProductDescriptionComponent {
     constructor() { }
     ngOnInit() {
@@ -1297,23 +1417,23 @@ class ProductDescriptionComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductDescriptionComponent, isStandalone: false, selector: "app-product-description", inputs: { article: "article" }, ngImport: i0, template: `
     <div class="pd-title-wrapper">
       @if (article?.descriptionRetail) {
-        <span class="pd-description" [textContent]="article?.descriptionRetail"></span>
+        <span class="pd-description" [textContent]="article?.descriptionRetail | googleTranslate | async"></span>
       }
       @if (article?.articleNr) {
-        <span class="pd-sku" [textContent]="article?.articleNr"></span>
+        <span class="pd-sku" [textContent]="article?.articleNr | googleTranslate | async"></span>
       }
     </div>
-    `, isInline: true, styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:700;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width: 650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}\n"] }); }
+    `, isInline: true, styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:700;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width: 650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}\n"], dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: GoogleTranslatePipe, name: "googleTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-description', template: `
     <div class="pd-title-wrapper">
       @if (article?.descriptionRetail) {
-        <span class="pd-description" [textContent]="article?.descriptionRetail"></span>
+        <span class="pd-description" [textContent]="article?.descriptionRetail | googleTranslate | async"></span>
       }
       @if (article?.articleNr) {
-        <span class="pd-sku" [textContent]="article?.articleNr"></span>
+        <span class="pd-sku" [textContent]="article?.articleNr | googleTranslate | async"></span>
       }
     </div>
     `, standalone: false, styles: [":host{display:block}.pd-title-wrapper{margin:20px 0 0}.pd-description{color:#22313c;font-size:25px;font-weight:700;width:100%;display:block}.pd-sku{color:#5b6875;font-size:16px}@media screen and (max-width: 650px){.pd-description{font-size:21px}.pd-sku{font-size:13px}}\n"] }]
@@ -1376,18 +1496,18 @@ class ProductAdditionalDescriptionComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ProductAdditionalDescriptionComponent, isStandalone: false, selector: "app-product-additional-description", inputs: { article: "article" }, ngImport: i0, template: `
     @if (description !== '') {
       <div class="pd-additional-description">
-        <p [innerHTML]="description"></p>
+        <p [innerHTML]="description | googleTranslate | async"></p>
         <button class="pd-read-more-btn" [textContent]="'READ_MORE' | localize" (click)="onReadMore()"></button>
       </div>
     }
-    `, isInline: true, styles: [":host{display:block;padding-top:0!important}:host *:focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:transparent;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width: 650px){:host .pd-additional-description{font-size:12px}}\n"], dependencies: [{ kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [":host{display:block;padding-top:0!important}:host *:focus{outline:0!important}:host .pd-additional-description{line-height:190%;color:#22313c;font-size:13px}:host .pd-read-more-btn{color:#2b60a7;border:none;background:transparent;cursor:pointer;text-decoration:underline;font-family:iOneMontserrat}:host .pd-read-more-btn:hover{color:#74b77f}@media screen and (max-width: 650px){:host .pd-additional-description{font-size:12px}}\n"], dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: GoogleTranslatePipe, name: "googleTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductAdditionalDescriptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-product-additional-description', template: `
     @if (description !== '') {
       <div class="pd-additional-description">
-        <p [innerHTML]="description"></p>
+        <p [innerHTML]="description | googleTranslate | async"></p>
         <button class="pd-read-more-btn" [textContent]="'READ_MORE' | localize" (click)="onReadMore()"></button>
       </div>
     }
@@ -2147,11 +2267,11 @@ class ProductPropertiesComponent {
       @for (property of properties; track property) {
         <div class="article-property">
           <div class="article-property-key" [textContent]="property.key | localize"></div>
-          <div class="article-property-value" [textContent]="property.value"></div>
+          <div class="article-property-value" [textContent]="property.value | googleTranslate | async"></div>
         </div>
       }
     </div>
-    `, isInline: true, styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width: 450px){.article-property-key{flex-basis:130px}}\n"], dependencies: [{ kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+    `, isInline: true, styles: [":host{display:block}.article-properties-wrapper{display:flex;flex-direction:column}.article-property{display:flex;flex-direction:row;border-bottom:1px solid #f6f5f4;padding:11px 0;font-size:13px}.article-property:first-child{border-top:1px solid #f6f5f4}.article-property-key{flex-basis:200px;flex-shrink:0;color:#5b6875}@media screen and (max-width: 450px){.article-property-key{flex-basis:130px}}\n"], dependencies: [{ kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: GoogleTranslatePipe, name: "googleTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductPropertiesComponent, decorators: [{
             type: Component,
@@ -2163,7 +2283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       @for (property of properties; track property) {
         <div class="article-property">
           <div class="article-property-key" [textContent]="property.key | localize"></div>
-          <div class="article-property-value" [textContent]="property.value"></div>
+          <div class="article-property-value" [textContent]="property.value | googleTranslate | async"></div>
         </div>
       }
     </div>
@@ -3671,7 +3791,8 @@ class IoneProductComponent {
             ProductSettingsService,
             ProductConnectorService,
             ProductEventService,
-            ProductConnectorAdapterService
+            ProductConnectorAdapterService,
+            GoogleTranslateService
         ], ngImport: i0, template: `
       @if (settingsLoaded) {
         <app-product-page
@@ -3702,7 +3823,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         ProductSettingsService,
                         ProductConnectorService,
                         ProductEventService,
-                        ProductConnectorAdapterService
+                        ProductConnectorAdapterService,
+                        GoogleTranslateService
                     ], encapsulation: ViewEncapsulation.Emulated, standalone: false }]
         }], ctorParameters: () => [{ type: ProductEventService }, { type: ProductSettingsService }, { type: ProductConnectorService }, { type: LocalStorageService }], propDecorators: { sku: [{
                 type: Input
@@ -3743,8 +3865,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class PipeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: PipeModule, declarations: [LocalizePipe,
-            PriceDisplayPipe], exports: [LocalizePipe,
-            PriceDisplayPipe] }); }
+            PriceDisplayPipe,
+            GoogleTranslatePipe], exports: [LocalizePipe,
+            PriceDisplayPipe,
+            GoogleTranslatePipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PipeModule, providers: [
             LocalizePipe
         ] }); }
@@ -3754,14 +3878,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     declarations: [
                         LocalizePipe,
-                        PriceDisplayPipe
+                        PriceDisplayPipe,
+                        GoogleTranslatePipe
                     ],
                     providers: [
                         LocalizePipe
                     ],
                     exports: [
                         LocalizePipe,
-                        PriceDisplayPipe
+                        PriceDisplayPipe,
+                        GoogleTranslatePipe
                     ]
                 }]
         }] });
@@ -3827,14 +3953,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class ProductDescriptionModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionModule, declarations: [ProductDescriptionComponent], imports: [CommonModule], exports: [ProductDescriptionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionModule, imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionModule, declarations: [ProductDescriptionComponent], imports: [CommonModule,
+            PipeModule], exports: [ProductDescriptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionModule, imports: [CommonModule,
+            PipeModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDescriptionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule
+                        CommonModule,
+                        PipeModule
                     ],
                     declarations: [
                         ProductDescriptionComponent
@@ -4026,7 +4155,7 @@ class ProductDeliveryComponent {
         <div class="pp-default-description" [textContent]="deliveryDescription | date:'dd MMMM yyyy'"></div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i5$1.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
+  `, isInline: true, styles: [":host{display:block}.product-delivery-wrapper{display:flex;flex-direction:row;align-items:center;border-bottom:1px solid #f6f5f4;padding:20px 15px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:40px;height:37px}.product-delivery-wrapper .product-delivery-fields{display:flex;flex-direction:column}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:14px;margin:0}@media screen and (max-width: 400px){.product-delivery-wrapper{padding:15px 0 15px 10px}.product-delivery-wrapper .delivery-icon{margin:0 15px 0 0;width:32px;height:28px}.product-delivery-wrapper .product-delivery-fields .pp-default-label{font-size:13px}}\n"], dependencies: [{ kind: "component", type: i6.IconComponent, selector: "co-icon", inputs: ["icon", "iconData"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: LocalizePipe, name: "localize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProductDeliveryComponent, decorators: [{
             type: Component,