@wizishop/img-manager-webelement 1.0.3 → 14.0.5

package/fesm2020/wizishop-img-manager-webelement.mjs

@@ -0,0 +1,673 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, NgModule } from '@angular/core';
+import * as i2 from '@wizishop/img-manager';
+import { ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto } from '@wizishop/img-manager';
+import { fromEvent, Observable, forkJoin, Subject, from } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import * as i1$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { take } from 'rxjs/operators';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i8 from 'dist/@wizishop/img-manager';
+import { WzImgManagerModule } from 'dist/@wizishop/img-manager';
+
+// Use locally for this project
+const environmentWiziDevLocal = {
+    isWizishopcom: false,
+    production: false,
+    wizi_admin_api: "https://admin.wizilocal.com/",
+    wizi_api: "https://api.wizilocal.com/v3",
+    CDN_URL: "http://debugshop.wizilocal.com/_i/",
+    assets_route: "assets/img-manager/",
+    translations_route: "./assets/img-manager/i18n/",
+    wiziApiCredentialsKey: 'wizi_api_credentials_key',
+    local: {
+        shopId: 131,
+        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ1c2VyX2lkIjo2LCJ1c2VyX2xvY2FsZSI6ImZyX0ZSIiwiaXNVc2VyQ29ubmVjdGVkRnJvbVZwbiI6dHJ1ZSwiZXhwIjoxNjY3NTY3NDYwLCJpYXQiOjE2NjQ5NzU0NjB9.lapOlCngJBPszMTtwgjhYHu9et-Tcg-xCUBcu_h_lNfaAzYrG2EdSGAwJiF7_jJSuueO0pXpfBdNGVopVlEb9aR9gXai3IlKeM4h3VdhZIunNJ3niuZjXcMlQgeTkreYYBrulbSQZSToz2cDeGbCZpN_HVP4E2kLpDabtmcfrGE380zjF6wLRIAbWvj2z7UP509AW1A_JM-CrM99CVuZB0EoowPRk5nCKZoY9x4MYMGdW1rSgRvwuWjBn-y8J7wJfRHezx-7FkVIpulq4mmxOi6KAgLZTOFFKAxMCnTEeyW7kJOEmu5Lm3R9bKmjzQra1ikIYLT2-WCSFPbiEmaIzQ'
+    },
+    product_sheet_endpoint: "/products/ajax",
+    isPhotosTab: true
+};
+const environmentWiziDev = {
+    isWizishopcom: true,
+    production: false,
+    wizi_admin_api: "https://admin.wizilocal.com/",
+    wizi_api: "https://api.wizilocal.com/v3",
+    CDN_URL: "https://media.wizilocal.com/_i/",
+    assets_route: "https://js.wizilocal.com/a/libs/img-manager-webelement/assets/img-manager/",
+    translations_route: "https://js.wizilocal.com/a/libs/img-manager-webelement/assets/img-manager/i18n/",
+    wiziApiCredentialsKey: 'wizi_api_credentials_key',
+    local: {
+        shopId: null,
+        token: null
+    },
+    product_sheet_endpoint: "/products/ajax"
+};
+const environmentProd = {
+    isWizishopcom: true,
+    production: true,
+    wizi_admin_api: "https://admin.wizishop.com/",
+    wizi_api: "https://api.wizishop.com/v3",
+    CDN_URL: "https://media.cdnws.com/_i/",
+    assets_route: "https://js.wizishop.com/a/libs/img-manager-webelement/assets/img-manager/",
+    translations_route: "https://js.wizishop.com/a/libs/img-manager-webelement/assets/img-manager/i18n/",
+    wiziApiCredentialsKey: 'wizi_api_credentials_key',
+    local: {
+        shopId: null,
+        token: null
+    },
+    product_sheet_endpoint: "/products/ajax"
+};
+const environmentDropiziDev = {
+    isWizishopcom: true,
+    production: false,
+    wizi_admin_api: "https://admin.dropilocal.com/",
+    wizi_api: "https://api.dropilocal.com/v3",
+    CDN_URL: "https://media.dropilocal.com/_i/",
+    assets_route: "https://js.dropilocal.fr/a/libs/img-manager-webelement/assets/img-manager/",
+    translations_route: "https://js.dropilocal.com/a/libs/img-manager-webelement/assets/img-manager/i18n/",
+    wiziApiCredentialsKey: 'wizi_api_credentials_key',
+    local: {
+        shopId: null,
+        token: null
+    },
+    product_sheet_endpoint: "/products/ajax"
+};
+const environmentDropiziProd = {
+    isWizishopcom: true,
+    production: true,
+    wizi_admin_api: "https://admin.dropizi.fr/",
+    wizi_api: "https://api.wizishop.com/v3",
+    CDN_URL: "https://media.cdnws.com/_i/",
+    assets_route: "https://js.dropizi.fr/a/libs/img-manager-webelement/assets/img-manager/",
+    translations_route: "https://js.dropizi.fr/a/libs/img-manager-webelement/assets/img-manager/i18n/",
+    wiziApiCredentialsKey: 'wizi_api_credentials_key',
+    local: {
+        shopId: null,
+        token: null
+    },
+    product_sheet_endpoint: "/products/ajax"
+};
+function getCurrentEnv() {
+    const isDev = !!window.location.hostname.match(/local/);
+    const isWizi = !!window.location.hostname.match(/wizi/);
+    const serverLocal = !!window.location.port;
+    if (serverLocal) {
+        return environmentWiziDevLocal;
+    }
+    if (isDev) {
+        if (isWizi) {
+            return environmentWiziDev;
+        }
+        return environmentDropiziDev;
+    }
+    else {
+        if (isWizi) {
+            return environmentProd;
+        }
+        return environmentDropiziProd;
+    }
+}
+const environment = Object.assign({}, getCurrentEnv());
+
+class EventService {
+    constructor() { }
+    sendImgSelectedToPage(file) {
+        const sendedFile = {
+            ...file,
+            cdn_img_src: ''
+        };
+        if (sendedFile) {
+            sendedFile.cdn_img_src = `${environment.CDN_URL}${file.id_shop}/`;
+        }
+        const value = {
+            detail: {
+                sendedFile,
+                "from": this.emitter
+            }
+        };
+        const event = new CustomEvent('imgSelected', value);
+        const imgManagerModule = document.getElementById('imgManagerModule');
+        imgManagerModule?.dispatchEvent(event);
+    }
+    pageAskForImg() {
+        return fromEvent(document.getElementById('imgManagerModule'), "openImgManager");
+    }
+    setEmitter(emitter) {
+        this.emitter = emitter;
+    }
+}
+EventService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: EventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EventService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: EventService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: EventService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class FicheProductService {
+    constructor(http, imgSelectionService, eventService, canvaService) {
+        this.http = http;
+        this.imgSelectionService = imgSelectionService;
+        this.eventService = eventService;
+        this.canvaService = canvaService;
+        this.image_manager_api = environment.wizi_api + "/image-manager/shops/";
+        this.isPhotosTab = false; // State of the Photos tabs in fiche product page
+        this.isPreviousTabPhotos = false;
+        this.isVariantsTab = false;
+        this.loadProductImgSelection = false;
+        this.expectedMediaDto = {
+            id: '',
+            image_url: '',
+            image_width: '900',
+            image_height: '900',
+        };
+        this.subscriptions = [];
+    }
+    setApiConfig(shop_id, shop_token) {
+        this.shopToken = shop_token;
+        this.shopId = shop_id;
+        const matches = window.location.pathname.match(/\/(\w+)\/products\/(\d+)\/edit/);
+        const lang = matches && matches[1] ? matches[1] : 'fr';
+        this.productSheetApiRoute = environment.wizi_admin_api + lang + environment.product_sheet_endpoint;
+        this.productId = matches && matches[2] ? matches[2] : "0";
+        this.isProductCreation = /\/products\/create/.test(window.location.pathname);
+    }
+    /**
+     * There is only one instance of this img manager.
+     * But it is called with different config, by Photos tab and Variation tab, on fiche product page.
+     * The method handle the switch config between Photos and Variation tab.
+     * Return an observable : true => Photos tab / false => Variation tab.
+     *  */
+    handleTabs() {
+        return new Observable(observer => {
+            const switchTabsSub = this.switchTabs().subscribe(data => {
+                if (!data || !data["detail"] || !data["detail"]["currentTab"]) {
+                    return;
+                }
+                // Retrieve current tab
+                const currentTab = data["detail"]["currentTab"];
+                this.isPreviousTabPhotos = this.isPhotosTab;
+                this.isPhotosTab = currentTab === 'photos';
+                this.isVariantsTab = currentTab === 'variation';
+                // The user switch to Photos tab
+                if (this.isPhotosTab) {
+                    this.loadProductImgSelection = true;
+                    if (!this.currentProductImgSelection || !this.currentProductImgSelection.length) {
+                        this.initProductImgSelection();
+                    }
+                    else {
+                        this.applyCurrentImgSelection();
+                        this.loadProductImgSelection = false;
+                    }
+                }
+                else if (this.isPreviousTabPhotos) { // The user switch to another tab
+                    // Save current img selection, in order to not lose the img selection
+                    this.saveCurrentImgSelection();
+                }
+                observer.next(this.isPhotosTab);
+            });
+            this.subscriptions.push(switchTabsSub);
+        });
+    }
+    getShopImg(idFile) {
+        return this.http.get(`${this.image_manager_api}${this.shopId}/images/${idFile}`, this.getOptionsHeadersWithBearer());
+    }
+    initProductImgSelection() {
+        // Display the loader in img list selection
+        this.imgSelectionService.emitImgListLoading(true);
+        // retrieve img selection
+        const retrieveImgSelectionSub = this.retrieveImgSelection().subscribe(data => {
+            // No imgage selected
+            if (!data || !data["photos"] || !data["photos"]["infos"] || !data["photos"]["infos"]["files"] || !data["photos"]["infos"]["files"].length) {
+                this.loadProductImgSelection = false;
+                this.imgSelectionService.emitImgListLoading(false);
+                return;
+            }
+            const idImgSelectionList = data["photos"]["infos"]["files"];
+            const obsImg = [];
+            idImgSelectionList.forEach(idFile => obsImg.push(this.getShopImg(idFile.toString()).pipe(take(1))));
+            const allImgSub = forkJoin(obsImg).subscribe((photos) => {
+                // The img selection must be saved, otherwise it is lost when the user switch on variation tab
+                this.saveCurrentImgSelection(photos);
+                this.applyCurrentImgSelection();
+                this.loadProductImgSelection = false;
+            }, error => {
+                // Hide the loader in img list selection
+                this.loadProductImgSelection = false;
+                this.imgSelectionService.emitImgListLoading(false);
+            });
+            this.subscriptions.push(allImgSub);
+        });
+        this.subscriptions.push(retrieveImgSelectionSub);
+        this.canvaService.expectedImgSizesChange(this.expectedMediaDto);
+    }
+    retrieveInfoSelection() {
+        const formData = new FormData();
+        formData.append('rub', "main");
+        formData.append('action', "getInfos");
+        formData.append('prodId', this.productId);
+        formData.append('_token', '');
+        formData.append('_shid', this.shopId.toString());
+        return this.http.post(this.productSheetApiRoute, formData, this.getOptionsHeaders());
+    }
+    retrieveImgSelection() {
+        const formData = new FormData();
+        formData.append('rub', "main");
+        formData.append('action', "getAllInfos");
+        formData.append('prodId', this.productId);
+        formData.append('_token', '');
+        formData.append('_shid', this.shopId.toString());
+        return this.http.post(this.productSheetApiRoute, formData, this.getOptionsHeaders());
+    }
+    updateImgSelectionOnChange() {
+        // listen to the img manager change
+        const imgSelectionSub = this.imgSelectionService.getImgSelectionChange().subscribe(imgSelectionList => {
+            if (!imgSelectionList) {
+                return;
+            }
+            // Send the img selection
+            if (this.isPhotosTab && !this.loadProductImgSelection) {
+                // Retrieve only the img id
+                const idImgSelectedList = [];
+                imgSelectionList.forEach(img => {
+                    idImgSelectedList.push(parseInt(img.id_file));
+                });
+                this.updateProductImgSelection(idImgSelectedList);
+                // On variation tab, send event with img selected
+            }
+            else if (!this.isPhotosTab && imgSelectionList.length) {
+                this.eventService.sendImgSelectedToPage(imgSelectionList[0]);
+            }
+        });
+        this.subscriptions.push(imgSelectionSub);
+    }
+    updateProductImgSelection(idsImgList) {
+        if ((!this.productId || this.productId === "0") && Wizi._produit.global.PROD_ID) {
+            this.productId = Wizi._produit.global.PROD_ID.toString();
+        }
+        Wizi._produit._dataTmp['photos'].infos = {};
+        Wizi._produit._dataTmp['photos'].infos.files = idsImgList;
+        this.emitImgSelectionChange(idsImgList);
+        if (this.productId && this.productId !== "0") {
+            const submitProd1 = this.submitProductImg(idsImgList).subscribe();
+            this.subscriptions.push(submitProd1);
+            return;
+        }
+        const createProductSub = this.createProduct().subscribe((productId) => {
+            if (!productId) {
+                throw "No product id created. Can not link image(s) to the new product.";
+            }
+            Wizi._produit.global.PROD_ID = productId;
+            this.productId = productId.toString();
+            this.submitProductImg(idsImgList).subscribe();
+        });
+        this.subscriptions.push(createProductSub);
+    }
+    submitProductImg(idsImgList) {
+        const data = {
+            files: idsImgList,
+            couls: []
+        };
+        const formData = new FormData();
+        formData.append('rub', "photos");
+        formData.append('action', "save");
+        formData.append('newProd', this.isProductCreation ? "1" : "0");
+        formData.append('prodId', this.productId);
+        formData.append('_token', this.shopToken);
+        formData.append('_shid', this.shopId.toString());
+        formData.append('data', JSON.stringify(data));
+        return this.http.post(this.productSheetApiRoute, formData, this.getOptionsHeaders());
+    }
+    createProduct() {
+        const formData = new FormData();
+        formData.append('rub', "main");
+        formData.append('action', "createProd");
+        formData.append('_token', '');
+        formData.append('_shid', this.shopId.toString());
+        return this.http.post(this.productSheetApiRoute, formData, this.getOptionsHeaders());
+    }
+    /* Use to know where the img manager is displayed, and to close it when switching tab */
+    switchTabs() {
+        return fromEvent(document.getElementById('imgManagerModule'), "switchTab");
+    }
+    emitImgSelectionChange(idsImgList) {
+        const value = {
+            detail: {
+                idsImgList
+            }
+        };
+        const event = new CustomEvent('onImgSelectionChange', value);
+        const imgManagerModule = document.getElementById('imgManagerModule');
+        imgManagerModule?.dispatchEvent(event);
+    }
+    saveCurrentImgSelection(imgSelection) {
+        this.currentProductImgSelection = imgSelection ? imgSelection : JSON.parse(JSON.stringify(this.imgSelectionService.getImgSelection()));
+    }
+    applyCurrentImgSelection() {
+        this.imgSelectionService.setImgSelection(this.currentProductImgSelection);
+        // Hide the loader in img list selection
+        this.imgSelectionService.emitImgListLoading(false);
+    }
+    getOptionsHeaders() {
+        const header = { headers: new HttpHeaders({
+                'Access-Control-Allow-Origin': '*'
+            })
+        };
+        return header;
+    }
+    getOptionsHeadersWithBearer() {
+        const header = { headers: new HttpHeaders({
+                Authorization: 'Bearer ' + this.shopToken
+            })
+        };
+        return header;
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+}
+FicheProductService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FicheProductService, deps: [{ token: i1.HttpClient }, { token: i2.ImgSelectionService }, { token: EventService }, { token: i2.CanvaService }], target: i0.ɵɵFactoryTarget.Injectable });
+FicheProductService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FicheProductService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FicheProductService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ImgSelectionService }, { type: EventService }, { type: i2.CanvaService }]; } });
+
+class StorageService {
+    constructor() {
+        this.subscriptions = new Map();
+        window.addEventListener('storage', e => {
+            if (this.subscriptions.has(e.key || '')) {
+                this.subscriptions.get(e.key || '')?.next(this.unserialize(e.newValue));
+            }
+        });
+    }
+    unserialize(data) {
+        let d = null;
+        if (data) {
+            try {
+                d = JSON.parse(data).data;
+            }
+            catch (e) { }
+        }
+        return d;
+    }
+    serialize(data) {
+        const d = {
+            data: data
+        };
+        return JSON.stringify(d);
+    }
+    subscribe(key) {
+        if (!this.subscriptions.has(key)) {
+            this.subscriptions.set(key, new Subject());
+        }
+        return this.subscriptions.get(key);
+    }
+    get(key) {
+        const d = localStorage.getItem(key);
+        return Promise.resolve(this.unserialize(d));
+    }
+    set(key, data) {
+        localStorage.setItem(key, this.serialize(data));
+        return Promise.resolve(true);
+    }
+    remove(key) {
+        localStorage.removeItem(key);
+        return Promise.resolve(true);
+    }
+}
+StorageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: StorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+StorageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: StorageService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: StorageService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class AuthCredentialsService {
+    constructor(storage) {
+        this.storage = storage;
+        this.credentials = null;
+        this.credentials$ = this.storage.subscribe(environment.wiziApiCredentialsKey);
+    }
+    get() {
+        if (this.credentials) {
+            return Promise.resolve(this.credentials);
+        }
+        return this.storage.get(environment.wiziApiCredentialsKey).then(token => {
+            this.credentials = token;
+            return this.credentials;
+        });
+    }
+    set(credentials) {
+        return this.storage.set(environment.wiziApiCredentialsKey, credentials).then(set => {
+            if (set) {
+                this.credentials = credentials;
+            }
+            return set;
+        });
+    }
+    remove() {
+        return this.storage.remove(environment.wiziApiCredentialsKey).then(removed => {
+            if (removed) {
+                this.credentials = null;
+            }
+            return removed;
+        });
+    }
+}
+AuthCredentialsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AuthCredentialsService, deps: [{ token: StorageService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthCredentialsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AuthCredentialsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: AuthCredentialsService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: StorageService }]; } });
+;
+
+class ImgManagerWebElementComponent {
+    constructor(translateService, imgSelectionService, canvaService, ficheProductService, authCredentialsService, http, eventService, imgManagerService) {
+        this.translateService = translateService;
+        this.imgSelectionService = imgSelectionService;
+        this.canvaService = canvaService;
+        this.ficheProductService = ficheProductService;
+        this.authCredentialsService = authCredentialsService;
+        this.http = http;
+        this.eventService = eventService;
+        this.imgManagerService = imgManagerService;
+        // img manger config
+        this.openImgManager = false;
+        this.loading = true;
+        // fiche roduct config
+        this.isPhotosTab = !!environment.isPhotosTab;
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        this.loading = true;
+        this.pageficheProductConfig = this.imgManagerService.getImgManagerDisplayConfig("fiche-product");
+        this.pageEventConfig = this.imgManagerService.getImgManagerDisplayConfig("wizi-block");
+        this.setCurrentLanguage();
+        // Search on which page is display the img manger
+        this.setDisplayedPageConfig();
+        const subCredentials = this.getCredentials().subscribe(authCredentials => {
+            this.loading = false;
+            this.initVariables(authCredentials);
+            // Fiche product page
+            if (this.imgManagerDisplayConfig.pageficheProduct) {
+                this.setFicheProductPage();
+            }
+            else {
+                this.setPageWithEvents();
+            }
+        });
+        this.subscriptions.push(subCredentials);
+    }
+    initVariables(authCredentials) {
+        if (!authCredentials) {
+            if (environment.isWizishopcom) {
+                return;
+            }
+            // Run on local Server
+            this.setAppVars(null, environment.local.shopId, null, environment.local.token);
+            this.setImgManagerExtraConfig();
+            this.imgManagerDisplayConfig = this.pageficheProductConfig;
+            return;
+        }
+        this.setAppVars(authCredentials.user_id, authCredentials.shop_id, authCredentials.account_id, authCredentials.token);
+        this.setImgManagerExtraConfig();
+    }
+    setFicheProductPage() {
+        this.ficheProductService.setApiConfig(this.id_shop, this.token_shop);
+        this.handleFicheProductTab(); // Display different img manager config according to the tab
+        this.closeImgManagerOnSwitchingTab();
+        this.subscribePageAskForImg(); // Use for images in variations tab
+        this.ficheProductService.updateImgSelectionOnChange();
+    }
+    setPageWithEvents() {
+        this.subscribePageAskForImg();
+        // Send img selected
+        const subImgSelection = this.imgSelectionService.getImgSelectionChange().subscribe(imgSelectionList => {
+            if (imgSelectionList && imgSelectionList.length) {
+                this.eventService.sendImgSelectedToPage(imgSelectionList[0]);
+            }
+        });
+        this.subscriptions.push(subImgSelection);
+    }
+    subscribePageAskForImg() {
+        // Listen to page editor ask for img event
+        const subAskForImg = this.eventService.pageAskForImg().subscribe(data => {
+            // Retrieve which img manager send the event
+            const emitter = data && data["detail"] ? data["detail"]["from"] : null;
+            this.eventService.setEmitter(emitter);
+            this.imgSelectionService.setImgSelection([]);
+            this.open();
+        });
+        this.subscriptions.push(subAskForImg);
+    }
+    open() {
+        this.openImgManager = true;
+    }
+    onImgManagerClosed() {
+        // Close img manager
+        this.openImgManager = false;
+    }
+    setCurrentLanguage() {
+        const matches = window.location.pathname.match(/^\/(\w+)\//);
+        this.translateService.use(matches && matches[1] ? matches[1] : 'fr');
+    }
+    setDisplayedPageConfig() {
+        const isFicheProductPage = /\/products\/(\d+\/edit|create)/.test(window.location.pathname);
+        this.imgManagerDisplayConfig = isFicheProductPage ? this.pageficheProductConfig : this.pageEventConfig;
+    }
+    handleFicheProductTab() {
+        const tabsSub = this.ficheProductService.handleTabs().subscribe(isPhotosTab => {
+            this.imgManagerDisplayConfig = isPhotosTab ? this.pageficheProductConfig : this.pageEventConfig;
+            this.isPhotosTab = isPhotosTab;
+        });
+        this.subscriptions.push(tabsSub);
+    }
+    closeImgManagerOnSwitchingTab() {
+        const tabsCloseSub = this.ficheProductService.switchTabs().subscribe(data => {
+            this.openImgManager = false;
+        });
+        this.subscriptions.push(tabsCloseSub);
+    }
+    getCredentials() {
+        return from(this.authCredentialsService.get());
+    }
+    setAppVars(userId, shopId, accountId, token) {
+        this.userId = userId;
+        this.id_shop = shopId;
+        this.accountId = accountId;
+        this.token_shop = token;
+    }
+    setImgManagerExtraConfig() {
+        const apiDto = new ImgApiDto();
+        apiDto.shop_token = this.token_shop;
+        apiDto.image_manager_route = environment.wizi_api + "/image-manager/shops/" + this.id_shop;
+        apiDto.canva_token = 'wdByHayF5v57nj2ZSLvu055O';
+        apiDto.canva_url = 'https://sdk.canva.com/designbutton/v2/api.js';
+        apiDto.pexels_token = '563492ad6f91700001000001e39215727d8b42c1b08498a9ce1e6b94';
+        apiDto.pexels_route = 'https://api.pexels.com/v1';
+        apiDto.shop_category = 'other'; // The shop categorie is retrieve later with the getShopCategory methode
+        apiDto.assets_route = environment.assets_route;
+        const imgCDNConfigDTO = new ImgCDNConfigDTO();
+        imgCDNConfigDTO.url_raw_image = `${environment.CDN_URL}${this.id_shop}/RAW-`;
+        imgCDNConfigDTO.url_100_image = `${environment.CDN_URL}${this.id_shop}/m100-`;
+        imgCDNConfigDTO.url_200_image = `${environment.CDN_URL}${this.id_shop}/cs200-`;
+        imgCDNConfigDTO.url_400_image = `${environment.CDN_URL}${this.id_shop}/cs400-`;
+        imgCDNConfigDTO.url_800_image = `${environment.CDN_URL}${this.id_shop}/cs800-`;
+        this.imgExternalConfig = new ImgManagerConfigDto();
+        this.imgExternalConfig.api = apiDto;
+        this.imgExternalConfig.imgCDNConfig = imgCDNConfigDTO;
+        const subShopCategory = this.getShopCategory().subscribe(shop => {
+            if (shop && shop['category']) {
+                this.imgExternalConfig.api.shop_category = shop['category'];
+            }
+        });
+        this.subscriptions.push(subShopCategory);
+    }
+    getShopCategory() {
+        return this.http.get(`${environment.wizi_api}/shops/${this.id_shop}`, this.getOptionsHeadersWithBearer());
+    }
+    getOptionsHeadersWithBearer() {
+        const header = { headers: new HttpHeaders({
+                Authorization: 'Bearer ' + this.token_shop
+            })
+        };
+        return header;
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+}
+ImgManagerWebElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerWebElementComponent, deps: [{ token: i1$1.TranslateService }, { token: i2.ImgSelectionService }, { token: i2.CanvaService }, { token: FicheProductService }, { token: AuthCredentialsService }, { token: i1.HttpClient }, { token: EventService }, { token: i2.ImgManagerService }], target: i0.ɵɵFactoryTarget.Component });
+ImgManagerWebElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ImgManagerWebElementComponent, selector: "img-manager-webelement", ngImport: i0, template: "<div class=\"info-bulle\">\n  <p class=\"info-bulle-content\" [innerHTML]=\"'ImgManager.webElement.infoBulle' | translate\"></p>\n\n  <ng-container *ngIf=\"imgManagerDisplayConfig.pageficheProduct && isPhotosTab\">\n    <h3 class=\"wizicss-sous-titre\">{{'ImgManager.webElement.photosTitle' | translate }}</h3>\n  </ng-container>\n\n  <ng-container *ngIf=\"!loading && id_shop && imgManagerDisplayConfig\">\n\n    <p class=\"img-manager-open\" *ngIf=\"imgManagerDisplayConfig.displayBtn && isPhotosTab\">\n      <a (click)=\"open()\">{{'ImgManager.webElement.OpenBtn' | translate }}</a>\n    </p>\n\n    <div class=\"imgManagerBox\">\n      <wz-img-manager\n        #wzImgManager\n        [stateDisplayed]=\"imgManagerDisplayConfig.stateDisplayed\"\n        [multipleImgMode]=\"imgManagerDisplayConfig.multipleImgMode\"\n        [showImgManagerModule]=\"imgManagerDisplayConfig.showImgManagerModule && openImgManager\"\n        [showSelection]=\"imgManagerDisplayConfig.showSelection\"\n        [externalConfig]=\"imgExternalConfig\"\n        (imgManagerClosed)=\"onImgManagerClosed()\">\n      </wz-img-manager>\n    </div>\n  </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.WzImgManagerComponent, selector: "wz-img-manager", inputs: ["stateDisplayed", "showSelection", "externalConfig", "forceToOpenCanva", "multipleImgMode", "showImgManagerModule"], outputs: ["imgManagerClosed"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerWebElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img-manager-webelement', template: "<div class=\"info-bulle\">\n  <p class=\"info-bulle-content\" [innerHTML]=\"'ImgManager.webElement.infoBulle' | translate\"></p>\n\n  <ng-container *ngIf=\"imgManagerDisplayConfig.pageficheProduct && isPhotosTab\">\n    <h3 class=\"wizicss-sous-titre\">{{'ImgManager.webElement.photosTitle' | translate }}</h3>\n  </ng-container>\n\n  <ng-container *ngIf=\"!loading && id_shop && imgManagerDisplayConfig\">\n\n    <p class=\"img-manager-open\" *ngIf=\"imgManagerDisplayConfig.displayBtn && isPhotosTab\">\n      <a (click)=\"open()\">{{'ImgManager.webElement.OpenBtn' | translate }}</a>\n    </p>\n\n    <div class=\"imgManagerBox\">\n      <wz-img-manager\n        #wzImgManager\n        [stateDisplayed]=\"imgManagerDisplayConfig.stateDisplayed\"\n        [multipleImgMode]=\"imgManagerDisplayConfig.multipleImgMode\"\n        [showImgManagerModule]=\"imgManagerDisplayConfig.showImgManagerModule && openImgManager\"\n        [showSelection]=\"imgManagerDisplayConfig.showSelection\"\n        [externalConfig]=\"imgExternalConfig\"\n        (imgManagerClosed)=\"onImgManagerClosed()\">\n      </wz-img-manager>\n    </div>\n  </ng-container>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }, { type: i2.ImgSelectionService }, { type: i2.CanvaService }, { type: FicheProductService }, { type: AuthCredentialsService }, { type: i1.HttpClient }, { type: EventService }, { type: i2.ImgManagerService }]; } });
+
+class ImgManagerWebElementModule {
+}
+ImgManagerWebElementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerWebElementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ImgManagerWebElementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerWebElementModule, declarations: [ImgManagerWebElementComponent], imports: [CommonModule,
+        HttpClientModule,
+        WzImgManagerModule,
+        TranslateModule], exports: [ImgManagerWebElementComponent] });
+ImgManagerWebElementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerWebElementModule, providers: [
+        StorageService,
+        FicheProductService,
+        EventService,
+        AuthCredentialsService
+    ], imports: [CommonModule,
+        HttpClientModule,
+        WzImgManagerModule,
+        TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ImgManagerWebElementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ImgManagerWebElementComponent],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        WzImgManagerModule,
+                        TranslateModule,
+                    ],
+                    exports: [ImgManagerWebElementComponent],
+                    providers: [
+                        StorageService,
+                        FicheProductService,
+                        EventService,
+                        AuthCredentialsService
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of img-manager-web-element
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImgManagerWebElementComponent, ImgManagerWebElementModule };
+//# sourceMappingURL=wizishop-img-manager-webelement.mjs.map