@wizishop/img-manager 15.2.54 → 15.2.57

package/fesm2020/wizishop-img-manager.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
+import { Injectable, inject, NgZone, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, ChangeDetectionStrategy, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, tap, Observable, merge, debounceTime, distinctUntilChanged, switchMap, map, forkJoin, take as take$1, startWith, shareReplay, combineLatest } from 'rxjs';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -428,6 +428,7 @@ const easeInOut = // the fade-in/fade-out animation.
 class ImgManagerService {
     constructor() {
         this.uploadService = inject(UploadService);
+        this.ngZone = inject(NgZone); // Injecter NgZone
         this.params = new HttpParams().set("limit", "20").set("page", "1");
         // Display the img selection
         this.pageFicheProductConfig = {
@@ -548,6 +549,48 @@ class ImgManagerService {
         this.destroy$.next();
         this.destroy$.complete();
     }
+    copyToClipboard(url) {
+        return new Promise((resolve) => {
+            // Vérifier si l'API Clipboard est disponible
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                navigator.clipboard.writeText(url)
+                    .then(() => resolve(true))
+                    .catch((error) => {
+                    console.error('Failed to copy to clipboard:', error);
+                    resolve(this.fallbackCopyToClipboard(url));
+                });
+            }
+            else {
+                // Fallback pour les navigateurs qui ne supportent pas l'API Clipboard
+                resolve(this.fallbackCopyToClipboard(url));
+            }
+        });
+    }
+    fallbackCopyToClipboard(text) {
+        let success = false;
+        // Exécuter en dehors du cycle de détection d'Angular
+        this.ngZone.runOutsideAngular(() => {
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            textArea.style.position = 'fixed';
+            textArea.style.left = '-999999px';
+            textArea.style.top = '-999999px';
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            try {
+                success = document.execCommand('copy');
+            }
+            catch (error) {
+                console.error('Fallback: Failed to copy to clipboard:', error);
+                success = false;
+            }
+            finally {
+                document.body.removeChild(textArea);
+            }
+        });
+        return success;
+    }
 }
 ImgManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ImgManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgManagerService });
@@ -692,6 +735,17 @@ class ImagesActionHandler {
     onEdit(picture) {
         this.imgEventCardService.emitImgToEdit(picture);
     }
+    copyLink(file_name) {
+        const url = this.imgCDNService.getUrlImg('raw') + file_name;
+        this.imgManager.copyToClipboard(url).then(success => {
+            if (success) {
+                this.alertService.openAlert('ImgManager.ImgList.linkCopied');
+            }
+            else {
+                this.alertService.openAlert('ImgManager.ImgList.linkCopyFailed');
+            }
+        });
+    }
     onToggleSelectImg(index) {
         if (this.disable || this.stateDisplayed === 'window') {
             return;
@@ -739,7 +793,7 @@ class ImagesActionHandler {
     downloadUrl(url, fileName) {
         const a = document.createElement('a');
         a.href = url;
-        a.download = fileName;
+        a.download = fileName.replace(/[.]/g, "");
         a.click();
     }
     ngDestroy() {
@@ -858,14 +912,14 @@ class ImgCardComponent extends ImagesActionHandler {
     }
 }
 ImgCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+ImgCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ImgCardComponent, selector: "img-card", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", picture: "picture", index: "index" }, outputs: { toggleImgSelected: "toggleImgSelected", switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: LoadingDirective, selector: "[btnLoadingAnim]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
         easeInOut
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImgCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'img-card', animations: [
                         easeInOut
-                    ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n  <div class=\"img-card\">\n      <div class=\"img-card__container\"\n      [ngClass]=\"{\n          'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n          'imgSelected': picture.selected,\n          'deletion': picture.deleted}\">\n          <img\n            class=\"img-card__container__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [alt]=\"picture.display_name\"\n            (click)=\"onToggleImgSelected()\"\n            (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n          />\n          <div\n            class=\"img-card__container__config\"\n            *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n            >\n              <button type=\"button\" class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <button type=\"button\" class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n              <button type=\"button\" class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n              <button type=\"button\" class=\"copy\" (click)=\"copyLink(picture.file_name)\"><i class=\"fal fa-copy\"></i><span>{{ 'ImgManager.ImgCard.copyLink' | translate }}</span></button>\n              <button type=\"button\" class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n              <button type=\"button\" class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n                  <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n                  <i *ngIf=\"picture.selected\" class=\"fa-solid fa-check-square checked\"></i>\n                  <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n              </button>\n          </div>\n          <div\n            class=\"img-card__container__config img-card__container__config--small\"\n            *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n          >\n            <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fa-solid fa-edit\"></i></button>\n          </div>\n          <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' :  activeConfirmDelete}\">\n            <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n            <div>\n              <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n              <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n            </div>\n          </div>\n          <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n            <i class=\"far fa-check\"></i>\n            <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n          </div>\n          <div\n            *ngIf=\"picture.imgNotLoaded\"\n            class=\"img-card__container__overlay\"\n            [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n                <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n          </div>\n          <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n      </div>\n      <div\n        class=\"img-card__nameContainer\"\n        [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n        <input\n          type=\"text\"\n          class=\"wzImgMngInput img-card__nameContainer__name\"\n          [(ngModel)]=\"picture.display_name\"\n          (ngModelChange)=\"onNameChange(picture.id_file)\"\n          [ngModelOptions]=\"{standalone: true, updateOn: 'blur'}\"\n          (focus)=\"previousName=picture.display_name;focusInput = true;\"\n          (blur)=\"focusInput = false;\"\n        >\n        <span>{{picture.display_name}}</span>\n      </div>\n\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
@@ -2977,16 +3031,27 @@ class TableViewComponent extends ImagesActionHandler {
     }
     ngOnInit() {
     }
+    // Copy the image link to clipboard
+    async copyImageLink(file_name) {
+        const url = this.imgCDNService.getUrlImg('raw') + file_name;
+        const success = await this.imgManager.copyToClipboard(url);
+        if (success) {
+            this.alertService.openAlert('ImgManager.ImgList.linkCopied');
+        }
+        else {
+            this.alertService.openAlert('ImgManager.ImgList.linkCopyFailed');
+        }
+    }
 }
 TableViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3$1.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i3.TranslateService }, { token: ApiService }], target: i0.ɵɵFactoryTarget.Component });
-TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
+TableViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TableViewComponent, selector: "table-view", usesInheritance: true, ngImport: i0, template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"copyImageLink(picture.file_name)\"\n            >\n                <i class=\"far fa-copy copy\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownComponent, selector: "dropdown", inputs: ["dropDownMenuClass", "disable"] }, { kind: "component", type: TableComponent, selector: "wz-table", inputs: ["tableFilters", "tableRoutingName", "placeholder", "checkbox", "disableSearch", "disablePagniation", "isLoading"], outputs: ["tableFiltersChange", "toggleAllCheckBox"] }, { kind: "directive", type: TableColumn, selector: "[tableColumn]", inputs: ["columnSize", "centerCell"] }, { kind: "directive", type: CheckBoxRow, selector: "[checkBoxRow]", inputs: ["checkBoxId", "checkBoxName", "checkBoxValue"], outputs: ["checkBoxValueChange"] }, { kind: "directive", type: TableColumnHeader, selector: "[headerCell]", inputs: ["headerName", "columnSize", "filterRouting", "tableName", "sortName", "centerCell", "tableFilters"], outputs: ["onSortChange", "tableFiltersChange"] }, { kind: "directive", type: TableRow, selector: "[tableRow]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ImageSrcPipe, name: "imgSrc" }], animations: [
         listAnnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-view', animations: [
                         listAnnimation
-                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n" }]
+                    ], template: "<div class=\"table-view\" [@listAnimation]=\"picturesList.length\">\n  <wz-table\n    [checkbox]=\"true\"\n    (toggleAllCheckBox)=\"onToggleAllCheckBoxRow($event)\"\n    [(tableFilters)]=\"tableFilters\"\n    (tableFiltersChange)=\"onFiltersChange()\"\n    [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n    [disablePagniation]=\"displayPexelsResults\"\n    [isLoading]=\"isLoading\"\n  >\n    <!-- Header Section -->\n    <div\n      headerCell\n      [headerName]=\"'ImgManager.ImgList.titleImgName' | translate\"\n      columnSize=\"2\"\n      sortName=\"name\"\n    ></div>\n    <div\n      headerCell\n      centerCell=\"center\"\n      [headerName]=\"'ImgManager.ImgList.titleResolution' | translate\"\n    ></div>\n    <div headerCell columnSize=\"0\"></div>\n\n    <!-- Body Section -->\n    <div\n      tableRow\n      checkBoxRow\n      [checkBoxValue]=\"picture.delSelected\"\n      (checkBoxValueChange)=\"onToggleDelSelection(index)\"\n      *ngFor=\"let picture of picturesList; let index = index\"\n    >\n\n      <div tableColumn columnSize=\"2\">\n        <div class=\"table-view__row__container\">\n          <div\n            class=\"table-view__row__container__imgContainer\"\n            [ngClass]=\"{'imgSelected': picture.selected}\"\n            (click)=\"onToggleSelectImg(index)\">\n              <img\n                class=\"table-view__row__container__imgContainer__img\"\n                [src]=\"picture.file_name | imgSrc : '100'\"\n                alt=\"picture.display_name\"\n                [ngClass]=\"{'pictureDeletion': picture.deleted}\"\n                (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n              />\n              <!-- If the img is not loaded, or the link is broken, an icon is displayed -->\n              <div\n                *ngIf=\"picture.imgNotLoaded\"\n                class=\"table-view__row__container__imgContainer__overlay\"\n                >\n                    <i class=\"fad fa-folder-times\"></i>\n              </div>\n          </div>\n          <input\n              type=\"text\"\n              class=\"wzImgMngInput table-view__row__container__name\"\n              [(ngModel)]=\"picture.display_name\"\n              (focus)=\"previousName=picture.display_name\"\n              (blur)=\"onNameChange(picture.id_file)\"\n              (click)=\"onToggleDelSelection(index)\"\n              [ngClass]=\"{'desabled': picture.deleted}\"\n              [disabled]=\"picture.deleted\"\n          >\n        </div>\n      </div>\n\n      <div\n        tableColumn\n        centerCell=\"center\"\n        (click)=\"onToggleDelSelection(index)\"\n        >\n          <p class=\"grey\">{{picture.raw_height}}x{{picture.raw_width}}</p>\n      </div>\n\n      <div tableColumn centerCell=\"center\" columnSize=\"0\" class=\"table-view__dropdown-options\">\n        <!-- Dropdown -->\n        <dropdown dropdownId=\"dropdown-options\" [disable]=\"picture.deleted\">\n          <ng-container label>\n              <div class=\"table-view__dropdown-options__label rotate\">\n                <span> <i class=\"far fa-ellipsis-h is-size-4\" aria-haspopup=\"true\" aria-controls=\"dropdown-menu\"> </i> </span>\n              </div>\n          </ng-container>\n          <ng-container item>\n              <div\n                class=\"dropdown-item\"\n                (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"\n              >\n                  <i class=\"far fa-download download\"></i>&nbsp;\n                  <p>{{ 'ImgManager.ImgList.download' | translate }}</p>\n              </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onEdit(picture)\"\n            >\n                <i class=\"far fa-crop-alt edit\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.edit' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"copyImageLink(picture.file_name)\"\n            >\n                <i class=\"far fa-copy copy\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.Link' | translate }}</p>\n            </div>\n          </ng-container>\n          <ng-container item>\n            <div\n              class=\"dropdown-item\"\n              (click)=\"onRemoveImg(picture)\"\n            >\n                <i class=\"fal fa-times deleted\"></i>&nbsp;\n                <p>{{ 'ImgManager.ImgList.remove' | translate }}</p>\n            </div>\n          </ng-container>\n        </dropdown>\n      </div>\n    </div>\n  </wz-table>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3$1.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i3.TranslateService }, { type: ApiService }]; } });
 
 class ImagesViewComponent {