@wizishop/img-manager 0.2.100 → 0.2.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/assets/i18n/fr.json +1 -1
  2. package/bundles/wizishop-img-manager.umd.js +27 -8
  3. package/bundles/wizishop-img-manager.umd.js.map +1 -1
  4. package/bundles/wizishop-img-manager.umd.min.js +1 -1
  5. package/bundles/wizishop-img-manager.umd.min.js.map +1 -1
  6. package/esm2015/lib/components/canva-btn/canva-btn.component.js +2 -2
  7. package/esm2015/lib/components/images-view/images-view.component.js +2 -2
  8. package/esm2015/lib/components/img-editor/img-editor.component.js +2 -2
  9. package/esm2015/lib/components/img-upload/img-upload.component.js +23 -4
  10. package/esm2015/lib/components/pexels-lib/pexels-lib.component.js +2 -2
  11. package/esm2015/lib/components/upload-list/upload-list.component.js +2 -2
  12. package/esm5/lib/components/canva-btn/canva-btn.component.js +2 -2
  13. package/esm5/lib/components/images-view/images-view.component.js +2 -2
  14. package/esm5/lib/components/img-editor/img-editor.component.js +2 -2
  15. package/esm5/lib/components/img-upload/img-upload.component.js +23 -4
  16. package/esm5/lib/components/pexels-lib/pexels-lib.component.js +2 -2
  17. package/esm5/lib/components/upload-list/upload-list.component.js +2 -2
  18. package/fesm2015/wizishop-img-manager.js +27 -8
  19. package/fesm2015/wizishop-img-manager.js.map +1 -1
  20. package/fesm5/wizishop-img-manager.js +27 -8
  21. package/fesm5/wizishop-img-manager.js.map +1 -1
  22. package/lib/components/img-upload/img-upload.component.d.ts +3 -0
  23. package/package.json +1 -1
  24. package/wizishop-img-manager-0.2.103.tgz +0 -0
  25. package/wizishop-img-manager.metadata.json +1 -1
  26. package/wz-img-manager.scss +193 -189
  27. package/wizishop-img-manager-0.2.100.tgz +0 -0
@@ -1 +1 @@
1
- {"ImgManager.CanvaBtn.bigSquare":"Grand","ImgManager.CanvaBtn.createImg":"Créer une image avec","ImgManager.CanvaBtn.createImg.title":"Créer une image avec Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Erreur : le titre de l'image provenant de Canva n'a pas pu être récupéré.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Erreur : l'image provenant de Canva n'a pas pu être téléchargée.","ImgManager.CanvaBtn.info":"Sélectionner un format","ImgManager.CanvaBtn.mediumSquare":"Moyen","ImgManager.CanvaBtn.publish":"Importer","ImgManager.CanvaBtn.recommanded":"Recommandé","ImgManager.CanvaBtn.smallSquare":"Petit","ImgManager.CanvaBtn.successImport":"Votre image a bien été importée.","ImgManager.CanvaBtn.uploadingImg":"Chargement de l'image en cours.","ImgManager.ImgCard.confirmDeleteImg":"Êtes-vous sûr de supprimer cette image ?","ImgManager.ImgCard.del":"Supprimer","ImgManager.ImgCard.download":"Télécharger","ImgManager.ImgCard.edit":"Éditer","ImgManager.ImgCard.select":"Sélectionner","ImgManager.ImgCard.validImgSmall":"Sélectionner","ImgManager.ImgEditor.config.AntiSchedule":"Sens anti-horaire","ImgManager.ImgEditor.config.dezoom":"Zoomer moins","ImgManager.ImgEditor.config.flipHoriz":"Retournement Horizontal","ImgManager.ImgEditor.config.flipVert":"Retournement Vertical","ImgManager.ImgEditor.config.free":"Format libre","ImgManager.ImgEditor.config.landscape":"Paysage","ImgManager.ImgEditor.config.origin":"Format d'origine","ImgManager.ImgEditor.config.Portrait":"Portrait","ImgManager.ImgEditor.config.schedule":"Sens horaire","ImgManager.ImgEditor.config.square":"Carré","ImgManager.ImgEditor.config.zoom":"Zoomer plus","ImgManager.ImgEditor.copytoClipBoard":"Copié !","ImgManager.ImgEditor.crop":"Recadrer","ImgManager.ImgEditor.display":"Affichage","ImgManager.ImgEditor.msgFailLoad":"Erreur : Veuillez recommencer.","ImgManager.ImgEditor.msgFailSave":"Erreur : L'image n'a pu être sauvegardée.<br/>Veuillez recommencer.","ImgManager.ImgEditor.nameEx":"Par ex: T-shirt noir","ImgManager.ImgEditor.NameInfo":"Le nom de l'image est utilisé pour définir l'attribut alt.","ImgManager.ImgEditor.restart":"Réinitialiser","ImgManager.ImgEditor.rotation":"Rotation","ImgManager.ImgEditor.saveBtn":"Enregistrer et Fermer","ImgManager.ImgEditor.Valid":"Valider","ImgManager.ImgEditor.ValidtToolTip":"Cliquez ici pour rogner l'image","ImgManager.ImgLib.cancel":"Annuler","ImgManager.ImgLib.confirm":"Confirmer","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.delMlt":"Supprimer","ImgManager.ImgLib.errorGetAllImg":"Erreur : Vos images n'ont pas pu être récupérées.","ImgManager.ImgLib.errorGetCanvaImg":"Erreur : Votre image Canva n'a pas pu être récupérée.","ImgManager.ImgLib.errorGetTotalImg":"Erreur : Le nombre total d'images n'a pas été récupéré.","ImgManager.ImgLib.imgNameSaved":"Nom de l'image sauvegardé.","ImgManager.ImgLib.lastImgs":"Vos dernières images","ImgManager.ImgLib.nbImg":"Nombre d'images","ImgManager.ImgLib.noImgFound":"Aucune image trouvée.<br/>Affichage d'images gratuites.","ImgManager.ImgLib.savingImgName":"Sauvegarde en cours...","ImgManager.ImgLib.select":"Sélectionner","ImgManager.ImgList.download":"Télécharger","ImgManager.ImgList.edit":"Éditer","ImgManager.ImgList.errorAlreadyUsed":"Cette image ne peut pas être supprimée, car elle est déjà utilisée.","ImgManager.ImgList.errorRemoveImg":"Erreur : Certaines images n'ont pas pu être supprimées.","ImgManager.ImgList.errorRenameImg":"Erreur : Certaines images n'ont pas pu être renommées.","ImgManager.ImgList.remove":"Supprimer","ImgManager.ImgList.titleImgName":"Nom de l'image","ImgManager.ImgList.titleResolution":"Résolution","ImgManager.ImgSelection.deleteImg":"Retirer","ImgManager.ImgSelection.tooltips":"Cliquez pour changer l'ordre de l'image","ImgManager.ImgSelection.unselect":"Glissez l'image ici pour la retirer de la sélection","ImgManager.ImgUpload.dropImg":"Glisser-déposer votre image ici","ImgManager.ImgUpload.errorNotImg":"Erreur : Seul les images peuvent être importées.","ImgManager.ImgUpload.errorUploadingImg":"Erreur : Une image n'a pas pu être importée.","ImgManager.ImgUpload.loading":"Chargement en cours.","ImgManager.ImgUpload.or":"ou","ImgManager.ImgUpload.selectImg":"Choisir les images à importer","ImgManager.PexelLib.errorRetrievePhotos":"Erreur : Les images Pexel n'ont pas été récupérées.","ImgManager.PexelLib.errorUploadPhoto":"Erreur : L'image n'a pas pu être importée.","ImgManager.PexelLib.import":"Importer","ImgManager.PexelLib.importation":"Importation","ImgManager.PexelLib.landscape":"Paysage","ImgManager.PexelLib.nbImgFound":"Nombre d'images gratuites trouvées","ImgManager.PexelLib.noResult":"Aucune image trouvée.","ImgManager.PexelLib.original":"Original","ImgManager.PexelLib.portrait":"Portrait","ImgManager.PexelLib.successImport":"Votre image a été importée avec succès !","ImgManager.PexelLib.untitled":"Sans titre","ImgManager.PexelLib.uploadingImg":"Chargement de l'image en cours.","ImgManager.SearchBar.placeholder":"Nom de l'image à rechercher","ImgManager.snackBar.action":"Voir l'image","ImgManager.Tabs.addImg":"Ajouter une image","ImgManager.Tabs.Editor":"Editeur d'image","ImgManager.Tabs.freeImgLib":"Bibliothèque d’images gratuites","ImgManager.Tabs.imgLib":"Vos images","ImgManager.UploadList.imgSuccessImport":"images importées et optimisées pour le SEO","ImgManager.UploadList.imgSuccessImportOne":"image importée et optimisée pour le SEO","ImgManager.UploadList.properties.imgName":"Nom de l'image","ImgManager.UploadList.properties.imgSize":"Taille de l'image originale","ImgManager.UploadList.properties.imgURL":"Url de l'image","ImgManager.UploadList.properties.imgWeight":"Taille du fichier original","ImgManager.UploadList.seo.cdn":"Ajout dans le CDN.","ImgManager.UploadList.seo.cdnTooltips":"Les images que vous ajoutez sur votre site marchand sont envoyées directement vers notre CDN (Content Delivery Network). Cela permet de charger les visuels depuis les serveurs les plus proches de l'utilisateur.","ImgManager.UploadList.seo.lazyloading":"Lazyloading automatique.","ImgManager.UploadList.seo.lazyloadingTooltips":"Avec le lazyloading, le contenu se charge au fur et à mesure que l’internaute descend (scroll) dans la page. Ceci permet de charger uniquement le contenu visible.","ImgManager.UploadList.seo.rezise":"Redimensionnement et compression.","ImgManager.UploadList.seo.reziseTooltips":"Lors de l’import de votre image sur WiziShop, ce sont plus de 22 formats qui sont créés pour s’adapter aux différentes tailles d’écran. Cette optimisation nous permet d’envoyer une taille de visuel différente et compressée selon le support de l’internaute.","ImgManager.UploadList.seo.title":"Optimisations SEO","ImgManager.UploadList.seo.webp":"Génération des Webp.","ImgManager.UploadList.seo.webpTooltips":"Dès lors que vous ajoutez une image sur votre site, elle va être accessible au format standard, mais aussi se convertir automatiquement au format WebP pour Google. Ce format permet de compresser, au maximum, les images présentes sur votre boutique pour les charger très rapidement.","ImgManager.webElement.infoBulle":"Le gestionnaire d'image vous permet de <strong>télécharger</strong> des images, les <strong>sélectionner </strong>et appliquer certains <strong>effets</strong>(recadrage, rotations...).\n<br/><br/>\nIl est conseillé d'avoir <strong>plusieurs photos</strong> du produit (3 ou 4) dans divers positions ou situations.","ImgManager.webElement.OpenBtn":"Ajouter des photos","ImgManager.webElement.photosTitle":"Photos","no":"non","PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","PaginationComponent.page":"Aller à la page","wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","yes":"oui"}
1
+ {"ImgManager.CanvaBtn.bigSquare":"Grand","ImgManager.CanvaBtn.createImg":"Créer une image avec","ImgManager.CanvaBtn.createImg.title":"Créer une image avec Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Erreur : le titre de l'image provenant de Canva n'a pas pu être récupéré.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Erreur : l'image provenant de Canva n'a pas pu être téléchargée.","ImgManager.CanvaBtn.info":"Sélectionner un format","ImgManager.CanvaBtn.mediumSquare":"Moyen","ImgManager.CanvaBtn.publish":"Importer","ImgManager.CanvaBtn.recommanded":"Recommandé","ImgManager.CanvaBtn.smallSquare":"Petit","ImgManager.CanvaBtn.successImport":"Votre image a bien été importée.","ImgManager.CanvaBtn.uploadingImg":"Chargement de l'image en cours.","ImgManager.ImgCard.confirmDeleteImg":"Êtes-vous sûr(e) de supprimer cette image ?","ImgManager.ImgCard.del":"Supprimer","ImgManager.ImgCard.download":"Télécharger","ImgManager.ImgCard.edit":"Éditer","ImgManager.ImgCard.select":"Sélectionner","ImgManager.ImgCard.validImgSmall":"Sélectionner","ImgManager.ImgEditor.config.AntiSchedule":"Sens anti-horaire","ImgManager.ImgEditor.config.dezoom":"Zoomer moins","ImgManager.ImgEditor.config.flipHoriz":"Retournement Horizontal","ImgManager.ImgEditor.config.flipVert":"Retournement Vertical","ImgManager.ImgEditor.config.free":"Format libre","ImgManager.ImgEditor.config.landscape":"Paysage","ImgManager.ImgEditor.config.origin":"Format d'origine","ImgManager.ImgEditor.config.Portrait":"Portrait","ImgManager.ImgEditor.config.schedule":"Sens horaire","ImgManager.ImgEditor.config.square":"Carré","ImgManager.ImgEditor.config.zoom":"Zoomer plus","ImgManager.ImgEditor.copytoClipBoard":"Copié !","ImgManager.ImgEditor.crop":"Recadrer","ImgManager.ImgEditor.display":"Affichage","ImgManager.ImgEditor.msgFailLoad":"Erreur : Veuillez recommencer.","ImgManager.ImgEditor.msgFailSave":"Erreur : L'image n'a pu être sauvegardée.<br/>Veuillez recommencer.","ImgManager.ImgEditor.nameEx":"Par ex: T-shirt noir","ImgManager.ImgEditor.NameInfo":"Le nom de l'image est utilisé pour définir l'attribut alt.","ImgManager.ImgEditor.restart":"Réinitialiser","ImgManager.ImgEditor.rotation":"Rotation","ImgManager.ImgEditor.saveBtn":"Enregistrer et Fermer","ImgManager.ImgEditor.Valid":"Valider","ImgManager.ImgEditor.ValidtToolTip":"Cliquez ici pour rogner l'image","ImgManager.ImgLib.cancel":"Annuler","ImgManager.ImgLib.confirm":"Confirmer","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images à supprimer : Confirmez-vous ce choix ?","ImgManager.ImgLib.delMlt":"Supprimer","ImgManager.ImgLib.errorGetAllImg":"Erreur : Vos images n'ont pas pu être récupérées.","ImgManager.ImgLib.errorGetCanvaImg":"Erreur : Votre image Canva n'a pas pu être récupérée.","ImgManager.ImgLib.errorGetTotalImg":"Erreur : Le nombre total d'images n'a pas été récupéré.","ImgManager.ImgLib.imgNameSaved":"Nom de l'image sauvegardé.","ImgManager.ImgLib.lastImgs":"Vos dernières images","ImgManager.ImgLib.nbImg":"Nombre d'images","ImgManager.ImgLib.noImgFound":"Aucune image trouvée.<br/>Affichage d'images gratuites.","ImgManager.ImgLib.savingImgName":"Sauvegarde en cours...","ImgManager.ImgLib.select":"Sélectionner","ImgManager.ImgList.download":"Télécharger","ImgManager.ImgList.edit":"Éditer","ImgManager.ImgList.errorAlreadyUsed":"Cette image ne peut pas être supprimée, car elle est déjà utilisée.","ImgManager.ImgList.errorRemoveImg":"Erreur : Certaines images n'ont pas pu être supprimées.","ImgManager.ImgList.errorRenameImg":"Erreur : Certaines images n'ont pas pu être renommées.","ImgManager.ImgList.remove":"Supprimer","ImgManager.ImgList.titleImgName":"Nom de l'image","ImgManager.ImgList.titleResolution":"Résolution","ImgManager.ImgSelection.deleteImg":"Retirer","ImgManager.ImgSelection.tooltips":"Cliquez pour changer l'ordre de l'image","ImgManager.ImgSelection.unselect":"Glissez l'image ici pour la retirer de la sélection","ImgManager.ImgUpload.dropImg":"Glisser-déposer votre image ici","ImgManager.ImgUpload.errorNotImg":"Erreur : Seul les images peuvent être importées.","ImgManager.ImgUpload.errorUploadingImg":"Erreur : Une image n'a pas pu être importée.","ImgManager.ImgUpload.loading":"Chargement en cours.","ImgManager.ImgUpload.or":"ou","ImgManager.ImgUpload.selectImg":"Choisir les images à importer","ImgManager.PexelLib.errorRetrievePhotos":"Erreur : Les images Pexel n'ont pas été récupérées.","ImgManager.PexelLib.errorUploadPhoto":"Erreur : L'image n'a pas pu être importée.","ImgManager.PexelLib.import":"Importer","ImgManager.PexelLib.importation":"Importation","ImgManager.PexelLib.landscape":"Paysage","ImgManager.PexelLib.nbImgFound":"Nombre d'images gratuites trouvées","ImgManager.PexelLib.noResult":"Aucune image trouvée.","ImgManager.PexelLib.original":"Original","ImgManager.PexelLib.portrait":"Portrait","ImgManager.PexelLib.successImport":"Votre image a été importée avec succès !","ImgManager.PexelLib.untitled":"Sans titre","ImgManager.PexelLib.uploadingImg":"Chargement de l'image en cours.","ImgManager.SearchBar.placeholder":"Nom de l'image à rechercher","ImgManager.snackBar.action":"Voir l'image","ImgManager.Tabs.addImg":"Ajouter une image","ImgManager.Tabs.Editor":"Editeur d'image","ImgManager.Tabs.freeImgLib":"Bibliothèque d’images gratuites","ImgManager.Tabs.imgLib":"Vos images","ImgManager.UploadList.imgSuccessImport":"images importées et optimisées pour le SEO","ImgManager.UploadList.imgSuccessImportOne":"image importée et optimisée pour le SEO","ImgManager.UploadList.properties.imgName":"Nom de l'image","ImgManager.UploadList.properties.imgSize":"Taille de l'image originale","ImgManager.UploadList.properties.imgURL":"Url de l'image","ImgManager.UploadList.properties.imgWeight":"Taille du fichier original","ImgManager.UploadList.seo.cdn":"Ajout dans le CDN.","ImgManager.UploadList.seo.cdnTooltips":"Les images que vous ajoutez sur votre site marchand sont envoyées directement vers notre CDN (Content Delivery Network). Cela permet de charger les visuels depuis les serveurs les plus proches de l'utilisateur.","ImgManager.UploadList.seo.lazyloading":"Lazyloading automatique.","ImgManager.UploadList.seo.lazyloadingTooltips":"Avec le lazyloading, le contenu se charge au fur et à mesure que l’internaute descend (scroll) dans la page. Ceci permet de charger uniquement le contenu visible.","ImgManager.UploadList.seo.rezise":"Redimensionnement et compression.","ImgManager.UploadList.seo.reziseTooltips":"Lors de l’import de votre image sur WiziShop, ce sont plus de 22 formats qui sont créés pour s’adapter aux différentes tailles d’écran. Cette optimisation nous permet d’envoyer une taille de visuel différente et compressée selon le support de l’internaute.","ImgManager.UploadList.seo.title":"Optimisations SEO","ImgManager.UploadList.seo.webp":"Génération des Webp.","ImgManager.UploadList.seo.webpTooltips":"Dès lors que vous ajoutez une image sur votre site, elle va être accessible au format standard, mais aussi se convertir automatiquement au format WebP pour Google. Ce format permet de compresser, au maximum, les images présentes sur votre boutique pour les charger très rapidement.","ImgManager.webElement.infoBulle":"Le gestionnaire d'image vous permet de <strong>télécharger</strong> des images, les <strong>sélectionner </strong>et appliquer certains <strong>effets</strong>(recadrage, rotations...).\n<br/><br/>\nIl est conseillé d'avoir <strong>plusieurs photos</strong> du produit (3 ou 4) dans divers positions ou situations.","ImgManager.webElement.OpenBtn":"Ajouter des photos","ImgManager.webElement.photosTitle":"Photos","no":"non","PaginationComponent.on":"{{low}}-{{high}} sur {{total}}","PaginationComponent.page":"Aller à la page","wac.datatable.noresult":"Il n'y a aucun résultat pour cette recherche","yes":"oui"}
@@ -1136,6 +1136,7 @@
1136
1136
  this.loadingText = 'ImgManager.ImgUpload.loading';
1137
1137
  this.errorUploadingImg = 'ImgManager.ImgUpload.errorUploadingImg';
1138
1138
  this.errorNotImg = 'ImgManager.ImgUpload.errorNotImg';
1139
+ this.MAX_IMAGE_SIZE = 10000000; // In bytes
1139
1140
  }
1140
1141
  ImgUploadComponent.prototype.ngOnInit = function () {
1141
1142
  this.assetsIcon = this.getAssets();
@@ -1161,13 +1162,19 @@
1161
1162
  try {
1162
1163
  for (var files_1 = __values(files), files_1_1 = files_1.next(); !files_1_1.done; files_1_1 = files_1.next()) {
1163
1164
  var file = files_1_1.value;
1164
- var formData = new FormData();
1165
- formData.append('image', file, file.name);
1165
+ console.log('file', file.size);
1166
1166
  if (!this.isFileImage(file.type)) {
1167
1167
  this.alertService.openAlert(this.errorNotImg);
1168
1168
  this.isLoading = false;
1169
1169
  continue;
1170
1170
  }
1171
+ if (!this.isSizeValid(file.size)) {
1172
+ this.alertService.openAlert("L'image : " + file.name + " est trop grande (" + this.getImageSizeInKo(file.size) + "ko). Taille maximum accept\u00E9e: " + this.getImageSizeInKo(this.MAX_IMAGE_SIZE) + "ko");
1173
+ this.isLoading = false;
1174
+ continue;
1175
+ }
1176
+ var formData = new FormData();
1177
+ formData.append('image', file, file.name);
1171
1178
  imgToUploadList.push(this.imgManager.uploadFile(formData));
1172
1179
  }
1173
1180
  }
@@ -1182,7 +1189,13 @@
1182
1189
  _this.onImgUpload(img),
1183
1190
  _this.isLoading = false;
1184
1191
  }, function (error) {
1185
- _this.alertService.openAlert(_this.errorUploadingImg);
1192
+ var _a, _b;
1193
+ if (((_b = (_a = error) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message) && error.statusText !== 'Bad Request') {
1194
+ _this.alertService.openAlertWithBackendRespons(_this.errorUploadingImg, error.error.message);
1195
+ }
1196
+ else {
1197
+ _this.alertService.openAlert(_this.errorUploadingImg);
1198
+ }
1186
1199
  _this.isLoading = false;
1187
1200
  });
1188
1201
  };
@@ -1197,6 +1210,12 @@
1197
1210
  ImgUploadComponent.prototype.isFileImage = function (fileType) {
1198
1211
  return fileType.split('/')[0] === 'image';
1199
1212
  };
1213
+ ImgUploadComponent.prototype.isSizeValid = function (imageBytesSize) {
1214
+ return imageBytesSize < this.MAX_IMAGE_SIZE;
1215
+ };
1216
+ ImgUploadComponent.prototype.getImageSizeInKo = function (size) {
1217
+ return Math.round(size / 1024);
1218
+ };
1200
1219
  /**
1201
1220
  * Remove the style of the drag and drop box
1202
1221
  * After an img is droped, the box is still grey
@@ -1400,7 +1419,7 @@
1400
1419
  UploadListComponent = __decorate([
1401
1420
  core.Component({
1402
1421
  selector: 'upload-list',
1403
- template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"upload-list__scroll\"\n [ngClass]=\"{\n 'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n 'upload-list__scroll--window': stateDisplayed === 'window'}\"\n >\n <div class=\"upload-list__box\">\n <div class=\"upload-list__box__container\">\n <div>\n <p class=\"mainColor\">\n {{ picturesList? picturesList.length : '' }}\n <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n </p>\n <div class=\"dropdown is-hoverable\">\n <div class=\"dropdown-trigger\">\n <i\n aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n class=\"fas fa-info-circle\">\n </i>\n </div>\n <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"upload-list__box__cards\">\n <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n <img-card\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n ></img-card>\n <div class=\"upload-list__box__cards__card__btnBox\">\n <button class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n </div>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n",
1422
+ template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n <perfect-scrollbar\n #scrollable\n [config]=\"{ suppressScrollX: true }\"\n class=\"upload-list__scroll\"\n [ngClass]=\"{\n 'upload-list__scroll--smallDisplay': stateDisplayed === 'small',\n 'upload-list__scroll--window': stateDisplayed === 'window'}\"\n >\n <div class=\"upload-list__box\">\n <div class=\"upload-list__box__container\">\n <div>\n <p class=\"mainColor\">\n {{ picturesList? picturesList.length : '' }}\n <ng-container *ngIf=\"picturesList && picturesList.length > 1\">{{ 'ImgManager.UploadList.imgSuccessImport' | translate }}</ng-container>\n <ng-container *ngIf=\"picturesList && picturesList.length === 1\">{{ 'ImgManager.UploadList.imgSuccessImportOne' | translate }}</ng-container>\n </p>\n <div class=\"dropdown is-hoverable\">\n <div class=\"dropdown-trigger\">\n <i\n aria-haspopup=\"true\" aria-controls=\"dropdown-menuInfoSeo\"\n class=\"fas fa-info-circle\">\n </i>\n </div>\n <div class=\"dropdown-menu dropDownShadow\" id=\"dropdown-menuInfoSeo\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.rezise' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.webp' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.cdn' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n <div class=\"dropdown-item\">\n <p>{{ 'ImgManager.UploadList.seo.lazyloading' | translate }}</p>\n <p><i class=\"fal fa-check\"></i> 100%</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"upload-list__box__cards\">\n <div class=\"upload-list__box__cards__card\" *ngFor=\"let picture of picturesList; let index = index;\">\n <img-card\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n ></img-card>\n <div class=\"upload-list__box__cards__card__btnBox\">\n <button class=\"button success upload-list__box__cards__card__btnBox__btn\"><i class=\"fal fa-check\"></i></button>\n </div>\n </div>\n </div>\n </div>\n </perfect-scrollbar>\n</div>\n",
1404
1423
  animations: [
1405
1424
  easeInOut
1406
1425
  ]
@@ -1869,7 +1888,7 @@
1869
1888
  PexelLibComponent = __decorate([
1870
1889
  core.Component({
1871
1890
  selector: 'pexels-lib',
1872
- template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n <ng-scrollbar\n #scrollable\n reachedOffset=\"50\"\n [visibility]=\"'hover'\"\n class=\"pexels-lib__scroll\"\n [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n (reachedBottom)=\"onBottomReached()\"\n >\n <div\n *ngIf=\"!disableSearch\"\n class=\"pexels-lib__search\"\n [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n >\n <wz-input-search\n [(ngModel)]=\"searchValue\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n (changeDebounced)=\"onSearchNameChanged()\"\n [smallPadding]=\"stateDisplayed === 'small'\">\n </wz-input-search>\n </div>\n\n <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n <div class=\"pexels-lib__wrapper__result\">\n\n <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\" [@listAnimation]=\"photosColumn.photos.length\">\n <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n {{ photo.width }} x {{ photo.height}}\n </span>\n\n <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n <div class=\"dropdown-trigger\">\n <button\n class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\">\n\n <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n <span class=\"icon is-small\">\n <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n </span>\n <ng-container *ngIf=\"photo.uploaded\">\n &nbsp;<i class=\"fal fa-check\"></i>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"photo.uploading\">\n {{ 'ImgManager.PexelLib.importation' | translate }}\n <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n </ng-container>\n\n </button>\n </div>\n <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-content__wrapper\">\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n <i class=\"fal fa-check iPortrait\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n <i class=\"fal fa-check iLandscape\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n <i class=\"fal fa-check iOriginal\"></i>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"isLoading\">\n <wz-loader></wz-loader>\n </ng-container>\n <div\n *ngIf=\"!isLoading && !nbResult\"\n class=\"pexels-lib__alert\"\n [@easeInOut]=\"'in'\">\n <wz-alert [warning]=\"true\">\n {{ 'ImgManager.PexelLib.noResult' | translate }}\n </wz-alert>\n </div>\n\n </ng-scrollbar>\n</div>\n",
1891
+ template: "<div class=\"pexels-lib\" #outerElement [@easeInOut]=\"'in'\">\n <perfect-scrollbar\n scrollYMarginOffset=\"300\"\n class=\"pexels-lib__scroll\"\n [ngClass]=\"{'pexels-lib__scroll--smallDisplay': stateDisplayed === 'small'}\"\n (psYReachEnd)=\"onBottomReached()\"\n >\n <div\n *ngIf=\"!disableSearch\"\n class=\"pexels-lib__search\"\n [ngClass]=\"{'pexels-lib__search--smallDisplay': stateDisplayed === 'small'}\"\n >\n <wz-input-search\n [(ngModel)]=\"searchValue\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n (changeDebounced)=\"onSearchNameChanged()\"\n [smallPadding]=\"stateDisplayed === 'small'\">\n </wz-input-search>\n </div>\n\n <div *ngIf=\"!initComponent\" class=\"pexels-lib__wrapper\">\n <p *ngIf=\"nbResult\" class=\"pexels-lib__wrapper__result-nb\">{{ 'ImgManager.PexelLib.nbImgFound' | translate }} : {{ nbResult }}</p>\n\n <div class=\"pexels-lib__wrapper__result\">\n\n <div *ngFor=\"let photosColumn of photosColumns; let indexCol = index;\" class=\"pexels-lib__wrapper__result__column\" [@listAnimation]=\"photosColumn.photos.length\">\n <div *ngFor=\"let photo of photosColumn.photos; let indexPhoto = index;\" class=\"pexels-lib__wrapper__result__column__element\">\n\n <img [alt]=\"photo.src.medium\" [src]=\"photo.src.medium\"\n class=\"pexels-lib__wrapper__result__column__element__img\"/>\n\n <div class=\"pexels-lib__wrapper__result__column__element__wrapper\">\n <span class=\"pexels-lib__wrapper__result__column__element__wrapper__infos\">\n {{ photo.width }} x {{ photo.height}}\n </span>\n\n <div class=\"dropdown is-up\" [ngClass]=\"{'is-hoverable': !photo.uploading}\">\n <div class=\"dropdown-trigger\">\n <button\n class=\"button pexels-lib__wrapper__result__column__element__wrapper__button\"\n aria-haspopup=\"true\"\n aria-controls=\"dropdown-menu\">\n\n <div *ngIf=\"!photo.uploading\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <span>{{ 'ImgManager.PexelLib.import' | translate }}</span>\n <span class=\"icon is-small\">\n <i class=\"fas fa-angle-up\" aria-hidden=\"true\"></i>\n </span>\n <ng-container *ngIf=\"photo.uploaded\">\n &nbsp;<i class=\"fal fa-check\"></i>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"photo.uploading\">\n {{ 'ImgManager.PexelLib.importation' | translate }}\n <span btnLoadingAnim class=\"btnLoadingAnnimation\"></span>\n </ng-container>\n\n </button>\n </div>\n <div class=\"dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown\" id=\"dropdown-menu\" role=\"menu\">\n <div class=\"dropdown-content\">\n <div class=\"dropdown-content__wrapper\">\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.portrait)\">\n <p>{{ 'ImgManager.PexelLib.portrait' | translate }}</p>\n <i class=\"fal fa-check iPortrait\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.landscape)\">\n <p>{{ 'ImgManager.PexelLib.landscape' | translate }}</p>\n <i class=\"fal fa-check iLandscape\"></i>\n </div>\n <div class=\"dropdown-item\" (click)=\"uploadPhoto(photo, photo.src.large2x)\">\n <p>{{ 'ImgManager.PexelLib.original' | translate }}</p>\n <i class=\"fal fa-check iOriginal\"></i>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"isLoading\">\n <wz-loader></wz-loader>\n </ng-container>\n <div\n *ngIf=\"!isLoading && !nbResult\"\n class=\"pexels-lib__alert\"\n [@easeInOut]=\"'in'\">\n <wz-alert [warning]=\"true\">\n {{ 'ImgManager.PexelLib.noResult' | translate }}\n </wz-alert>\n </div>\n\n </perfect-scrollbar>\n</div>\n",
1873
1892
  animations: [
1874
1893
  easeInOut,
1875
1894
  listAnnimation
@@ -2228,7 +2247,7 @@
2228
2247
  ImgEditorComponent = __decorate([
2229
2248
  core.Component({
2230
2249
  selector: 'img-editor',
2231
- template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n <ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"img-editor__scroll\"\n [ngClass]=\"{\n 'img-editor__scroll--full': stateDisplayed === 'full',\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n 'img-editor__scroll--window': stateDisplayed === 'window'\n }\"\n >\n <div class=\"columns\">\n <!-- Left section -->\n <div class=\"column is-one-third img-editor__infoSection\">\n\n <info-section\n [imgToEdit]=\"imgToEdit\"\n [(isNameModified)]=\"isNameModified\"\n >\n </info-section>\n\n <!-- Button Action Section -->\n\n <div class=\"img-editor__infoSection__actions\">\n <div>\n <button\n class=\"button img-editor__infoSection__actions__cancel\"\n (click)=\"onCancel()\"\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <div\n class=\"button danger button img-editor__infoSection__actions__save\"\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n (click)=\"onSave()\"\n >\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n\n <!-- Right section -->\n <div class=\"column img-editor__container\">\n <cropper\n [imgToEdit]=\"imgToEdit\"\n [(isImgModified)]=\"isImgModified\"\n (currentCroppedImageChange)=\"onImgCropped($event)\"\n (editClosed)=\"onEditClosed($event)\">\n </cropper>\n </div>\n </div>\n </ng-scrollbar>\n</div>\n",
2250
+ template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n <perfect-scrollbar\n class=\"img-editor__scroll\"\n [ngClass]=\"{\n 'img-editor__scroll--full': stateDisplayed === 'full',\n 'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n 'img-editor__scroll--window': stateDisplayed === 'window'\n }\"\n >\n <div class=\"columns\">\n <!-- Left section -->\n <div class=\"column is-one-third img-editor__infoSection\">\n\n <info-section\n [imgToEdit]=\"imgToEdit\"\n [(isNameModified)]=\"isNameModified\"\n >\n </info-section>\n\n <!-- Button Action Section -->\n\n <div class=\"img-editor__infoSection__actions\">\n <div>\n <button\n class=\"button img-editor__infoSection__actions__cancel\"\n (click)=\"onCancel()\"\n [disabled]=\"isLoading || (!isImgModified && !isNameModified)\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <div\n class=\"button danger button img-editor__infoSection__actions__save\"\n [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n (click)=\"onSave()\"\n >\n {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n\n <!-- Right section -->\n <div class=\"column img-editor__container\">\n <cropper\n [imgToEdit]=\"imgToEdit\"\n [(isImgModified)]=\"isImgModified\"\n (currentCroppedImageChange)=\"onImgCropped($event)\"\n (editClosed)=\"onEditClosed($event)\">\n </cropper>\n </div>\n </div>\n </perfect-scrollbar>\n</div>\n",
2232
2251
  animations: [
2233
2252
  easeInOut
2234
2253
  ]
@@ -2299,7 +2318,7 @@
2299
2318
  CanvaBtnComponent = __decorate([
2300
2319
  core.Component({
2301
2320
  selector: 'canva-btn',
2302
- template: "<div class=\"canva dropdown is-right is-hoverable\"\n wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n >\n <div class=\"dropdown-trigger\">\n <div\n class=\"button canva-btn\"\n aria-controls=\"dropdown-menuCanva\"\n (click)=\"openDropDownMenu = true;\"\n >\n <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropDownShadow\"\n [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n id=\"dropdown-menuCanva\"\n role=\"menu\">\n <ng-scrollbar\n #scrollable\n [visibility]=\"'hover'\"\n class=\"smallScroll\"\n >\n <div class=\"dropdown-content\">\n <div class=\"dropdownTitle\">\n <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n </div>\n\n <div class=\"infoItem\">\n <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n </div>\n\n <ng-container >\n <div\n *ngIf=\"expectedWidth && expectedHeight\"\n class=\"dropdown-item-wrapper\"\n >\n <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngFor=\"let format of availableFormat| keyvalue\"\n class=\"dropdown-item-wrapper\">\n <div\n (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n class=\"dropdown-item\">\n <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n</div>\n"
2321
+ template: "<div class=\"canva dropdown is-right is-hoverable\"\n wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n >\n <div class=\"dropdown-trigger\">\n <div\n class=\"button canva-btn\"\n aria-controls=\"dropdown-menuCanva\"\n (click)=\"openDropDownMenu = true;\"\n >\n <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropDownShadow\"\n [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n id=\"dropdown-menuCanva\"\n role=\"menu\">\n <perfect-scrollbar\n class=\"smallScroll\"\n >\n <div class=\"dropdown-content\">\n <div class=\"dropdownTitle\">\n <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n </div>\n\n <div class=\"infoItem\">\n <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n </div>\n\n <ng-container >\n <div\n *ngIf=\"expectedWidth && expectedHeight\"\n class=\"dropdown-item-wrapper\"\n >\n <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngFor=\"let format of availableFormat| keyvalue\"\n class=\"dropdown-item-wrapper\">\n <div\n (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n class=\"dropdown-item\">\n <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n </div>\n </div>\n </div>\n </perfect-scrollbar>\n </div>\n</div>\n"
2303
2322
  }),
2304
2323
  __metadata("design:paramtypes", [CanvaService])
2305
2324
  ], CanvaBtnComponent);
@@ -3377,7 +3396,7 @@
3377
3396
  ImagesViewComponent = __decorate([
3378
3397
  core.Component({
3379
3398
  selector: 'images-view',
3380
- template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- S\u00E9lectionner -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen()\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg()\"\n class=\"button images-view__container__delBtn danger\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <div class=\"control\">\n <div\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"far fa-th\"></i>\n </span>\n </div>\n </div>\n\n <div class=\"control\">\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fas fa-bars\"></i>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n <!-- Images section -->\n<ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n 'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n <div #imgLibContainer class=\"images-view__wrapper\">\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"isLoading\"\n >\n </table-view>\n </div>\n\n </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n *ngIf=\"displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"tableFilters.searchValue\"\n (showImgUploaded)=\"onShowImgUploaded()\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n</div>\n",
3399
+ template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- S\u00E9lectionner -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen()\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg()\"\n class=\"button images-view__container__delBtn danger\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <div class=\"control\">\n <div\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"far fa-th\"></i>\n </span>\n </div>\n </div>\n\n <div class=\"control\">\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fas fa-bars\"></i>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n <!-- Images section -->\n<perfect-scrollbar\n [config]=\"{ suppressScrollX: true }\"\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n 'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n <div #imgLibContainer class=\"images-view__wrapper\">\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"isLoading\"\n >\n </table-view>\n </div>\n\n </div>\n</perfect-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n *ngIf=\"displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"tableFilters.searchValue\"\n (showImgUploaded)=\"onShowImgUploaded()\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n</div>\n",
3381
3400
  animations: [
3382
3401
  easeInOut,
3383
3402
  insertRemove