@wizishop/img-manager 0.2.102 → 0.2.106

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 (26) hide show
  1. package/bundles/wizishop-img-manager.umd.js +69 -41
  2. package/bundles/wizishop-img-manager.umd.js.map +1 -1
  3. package/bundles/wizishop-img-manager.umd.min.js +12 -12
  4. package/bundles/wizishop-img-manager.umd.min.js.map +1 -1
  5. package/esm2015/lib/components/images-view/images-view.component.js +2 -2
  6. package/esm2015/lib/components/img-editor/cropper/cropper.component.js +31 -11
  7. package/esm2015/lib/components/img-editor/img-editor.component.js +2 -2
  8. package/esm2015/lib/components/pexels-lib/pexels-lib.component.js +1 -4
  9. package/esm2015/lib/components/shared/alert/alert.component.js +1 -1
  10. package/esm2015/lib/components/upload-list/upload-list.component.js +2 -2
  11. package/esm5/lib/components/images-view/images-view.component.js +2 -2
  12. package/esm5/lib/components/img-editor/cropper/cropper.component.js +38 -11
  13. package/esm5/lib/components/img-editor/img-editor.component.js +2 -2
  14. package/esm5/lib/components/pexels-lib/pexels-lib.component.js +1 -4
  15. package/esm5/lib/components/shared/alert/alert.component.js +1 -1
  16. package/esm5/lib/components/upload-list/upload-list.component.js +2 -2
  17. package/fesm2015/wizishop-img-manager.js +33 -17
  18. package/fesm2015/wizishop-img-manager.js.map +1 -1
  19. package/fesm5/wizishop-img-manager.js +40 -17
  20. package/fesm5/wizishop-img-manager.js.map +1 -1
  21. package/lib/components/img-editor/cropper/cropper.component.d.ts +6 -2
  22. package/package.json +5 -3
  23. package/wizishop-img-manager-0.2.106.tgz +0 -0
  24. package/wizishop-img-manager.metadata.json +1 -1
  25. package/wz-img-manager.scss +2771 -2769
  26. package/wizishop-img-manager-0.2.102.tgz +0 -0
@@ -1,22 +1,22 @@
1
1
  (function (global, factory) {
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@ngx-translate/core'), require('@wizishop/ng-wizi-bulma'), require('rxjs/operators'), require('@angular/animations'), require('@angular/router'), require('@angular/common'), require('@angular/forms'), require('ngx-scrollbar'), require('ngx-scrollbar/reached-event'), require('ngx-image-cropper'), require('@angular/cdk/table'), require('@angular/cdk/drag-drop'), require('uuid'), require('ngx-perfect-scrollbar')) :
3
3
  typeof define === 'function' && define.amd ? define('@wizishop/img-manager', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@ngx-translate/core', '@wizishop/ng-wizi-bulma', 'rxjs/operators', '@angular/animations', '@angular/router', '@angular/common', '@angular/forms', 'ngx-scrollbar', 'ngx-scrollbar/reached-event', 'ngx-image-cropper', '@angular/cdk/table', '@angular/cdk/drag-drop', 'uuid', 'ngx-perfect-scrollbar'], factory) :
4
- (global = global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['img-manager'] = {}), global['^9']['0']['3'], global['~6']['5']['4'], global.ng.common.http, global['^13']['0']['0'], global['^9']['1']['4'], global.rxjs.operators, global['~9']['0']['3'], global.ng.router, global['^9']['0']['3'], global['~9']['0']['3'], global['^7']['2']['3'], global.reachedEvent, global['^3']['1']['9'], global.ng.cdk.table, global.ng.cdk['drag-drop'], global.uuid, global['^10']['1']['1']));
4
+ (global = global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['img-manager'] = {}), global['^9']['0']['3'], global['~6']['5']['4'], global.ng.common.http, global['^13']['0']['0'], global['^9']['1']['4'], global.rxjs.operators, global['~9']['0']['3'], global.ng.router, global['^9']['0']['3'], global['~9']['0']['3'], global['^7']['2']['3'], global.reachedEvent, global['^3']['1']['9'], global.ng.cdk.table, global.ng.cdk.dragDrop, global.uuid, global['^10']['1']['1']));
5
5
  }(this, (function (exports, core, rxjs, http, core$1, ngWiziBulma, operators, animations, router, common, forms, ngxScrollbar, reachedEvent, ngxImageCropper, table, dragDrop, uuid, ngxPerfectScrollbar) { 'use strict';
6
6
 
7
7
  /*! *****************************************************************************
8
- Copyright (c) Microsoft Corporation. All rights reserved.
9
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
10
- this file except in compliance with the License. You may obtain a copy of the
11
- License at http://www.apache.org/licenses/LICENSE-2.0
8
+ Copyright (c) Microsoft Corporation.
12
9
 
13
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
15
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
16
- MERCHANTABLITY OR NON-INFRINGEMENT.
10
+ Permission to use, copy, modify, and/or distribute this software for any
11
+ purpose with or without fee is hereby granted.
17
12
 
18
- See the Apache Version 2.0 License for specific language governing permissions
19
- and limitations under the License.
13
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
+ PERFORMANCE OF THIS SOFTWARE.
20
20
  ***************************************************************************** */
21
21
  /* global Reflect, Promise */
22
22
 
@@ -109,8 +109,13 @@
109
109
  }
110
110
  }
111
111
 
112
+ function __createBinding(o, m, k, k2) {
113
+ if (k2 === undefined) k2 = k;
114
+ o[k2] = m[k];
115
+ }
116
+
112
117
  function __exportStar(m, exports) {
113
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
118
+ for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
114
119
  }
115
120
 
116
121
  function __values(o) {
@@ -346,7 +351,7 @@
346
351
  this.imgSelectedList.splice(toIndex, 0, this.imgSelectedList.splice(fromIndex, 1)[0]);
347
352
  this.emitImgSelectionChange();
348
353
  };
349
- ImgSelectionService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgSelectionService_Factory() { return new ImgSelectionService(); }, token: ImgSelectionService, providedIn: "root" });
354
+ ImgSelectionService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgSelectionService_Factory() { return new ImgSelectionService(); }, token: ImgSelectionService, providedIn: "root" });
350
355
  ImgSelectionService = __decorate([
351
356
  core.Injectable({
352
357
  providedIn: 'root'
@@ -489,7 +494,7 @@
489
494
  ImgManagerService.ctorParameters = function () { return [
490
495
  { type: http.HttpClient }
491
496
  ]; };
492
- ImgManagerService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgManagerService_Factory() { return new ImgManagerService(core["ɵɵinject"](http.HttpClient)); }, token: ImgManagerService, providedIn: "root" });
497
+ ImgManagerService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgManagerService_Factory() { return new ImgManagerService(core.ɵɵinject(http.HttpClient)); }, token: ImgManagerService, providedIn: "root" });
493
498
  ImgManagerService = __decorate([
494
499
  core.Injectable({
495
500
  providedIn: 'root'
@@ -519,7 +524,7 @@
519
524
  return elem.match(/_(\w+)_/)[1];
520
525
  });
521
526
  };
522
- ImgCDNService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgCDNService_Factory() { return new ImgCDNService(); }, token: ImgCDNService, providedIn: "root" });
527
+ ImgCDNService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgCDNService_Factory() { return new ImgCDNService(); }, token: ImgCDNService, providedIn: "root" });
523
528
  ImgCDNService = __decorate([
524
529
  core.Injectable({
525
530
  providedIn: 'root'
@@ -566,7 +571,7 @@
566
571
  { type: ImgManagerService },
567
572
  { type: ImgCDNService }
568
573
  ]; };
569
- ImgManagerConfigService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgManagerConfigService_Factory() { return new ImgManagerConfigService(core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](ImgCDNService)); }, token: ImgManagerConfigService, providedIn: "root" });
574
+ ImgManagerConfigService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgManagerConfigService_Factory() { return new ImgManagerConfigService(core.ɵɵinject(ImgManagerService), core.ɵɵinject(ImgCDNService)); }, token: ImgManagerConfigService, providedIn: "root" });
570
575
  ImgManagerConfigService = __decorate([
571
576
  core.Injectable({
572
577
  providedIn: 'root'
@@ -593,7 +598,7 @@
593
598
  var value = localStorage.getItem(this.userdisplayPreference);
594
599
  return value == 'true';
595
600
  };
596
- UserSettingsService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function UserSettingsService_Factory() { return new UserSettingsService(); }, token: UserSettingsService, providedIn: "root" });
601
+ UserSettingsService.ɵprov = core.ɵɵdefineInjectable({ factory: function UserSettingsService_Factory() { return new UserSettingsService(); }, token: UserSettingsService, providedIn: "root" });
597
602
  UserSettingsService = __decorate([
598
603
  core.Injectable({
599
604
  providedIn: 'root'
@@ -646,7 +651,7 @@
646
651
  { type: ngWiziBulma.NwbAlertService },
647
652
  { type: core$1.TranslateService }
648
653
  ]; };
649
- AlertService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function AlertService_Factory() { return new AlertService(core["ɵɵinject"](ngWiziBulma.NwbAlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: AlertService, providedIn: "root" });
654
+ AlertService.ɵprov = core.ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(core.ɵɵinject(ngWiziBulma.NwbAlertService), core.ɵɵinject(core$1.TranslateService)); }, token: AlertService, providedIn: "root" });
650
655
  AlertService = __decorate([
651
656
  core.Injectable({
652
657
  providedIn: 'root'
@@ -688,7 +693,7 @@
688
693
  ImgEventService.prototype.getlistDisplayedChange = function () {
689
694
  return this.listDisplayedChange.asObservable();
690
695
  };
691
- ImgEventService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
696
+ ImgEventService.ɵprov = core.ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
692
697
  ImgEventService = __decorate([
693
698
  core.Injectable({
694
699
  providedIn: 'root'
@@ -849,7 +854,7 @@
849
854
  { type: AlertService },
850
855
  { type: core$1.TranslateService }
851
856
  ]; };
852
- CanvaService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function CanvaService_Factory() { return new CanvaService(core["ɵɵinject"](ImgManagerConfigService), core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](ImgEventService), core["ɵɵinject"](AlertService), core["ɵɵinject"](core$1.TranslateService)); }, token: CanvaService, providedIn: "root" });
857
+ CanvaService.ɵprov = core.ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(core.ɵɵinject(ImgManagerConfigService), core.ɵɵinject(ImgManagerService), core.ɵɵinject(ImgEventService), core.ɵɵinject(AlertService), core.ɵɵinject(core$1.TranslateService)); }, token: CanvaService, providedIn: "root" });
853
858
  CanvaService = __decorate([
854
859
  core.Injectable({
855
860
  providedIn: 'root'
@@ -888,7 +893,7 @@
888
893
  _this.documentScrollSource.next(window);
889
894
  };
890
895
  };
891
- DomService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function DomService_Factory() { return new DomService(); }, token: DomService, providedIn: "root" });
896
+ DomService.ɵprov = core.ɵɵdefineInjectable({ factory: function DomService_Factory() { return new DomService(); }, token: DomService, providedIn: "root" });
892
897
  DomService = __decorate([
893
898
  core.Injectable({
894
899
  providedIn: 'root'
@@ -1324,7 +1329,7 @@
1324
1329
  { type: ImgManagerService },
1325
1330
  { type: AlertService }
1326
1331
  ]; };
1327
- RenamePictureService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function RenamePictureService_Factory() { return new RenamePictureService(core["ɵɵinject"](ImgManagerService), core["ɵɵinject"](AlertService)); }, token: RenamePictureService, providedIn: "root" });
1332
+ RenamePictureService.ɵprov = core.ɵɵdefineInjectable({ factory: function RenamePictureService_Factory() { return new RenamePictureService(core.ɵɵinject(ImgManagerService), core.ɵɵinject(AlertService)); }, token: RenamePictureService, providedIn: "root" });
1328
1333
  RenamePictureService = __decorate([
1329
1334
  core.Injectable({ providedIn: 'root' }),
1330
1335
  __metadata("design:paramtypes", [ImgManagerService,
@@ -1419,7 +1424,7 @@
1419
1424
  UploadListComponent = __decorate([
1420
1425
  core.Component({
1421
1426
  selector: 'upload-list',
1422
- template: "<div class=\"upload-list\" [ngClass]=\"{'smallDisplay': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n\n <perfect-scrollbar\n #scrollable\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",
1427
+ 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",
1423
1428
  animations: [
1424
1429
  easeInOut
1425
1430
  ]
@@ -1671,7 +1676,7 @@
1671
1676
  { type: ImgManagerConfigService },
1672
1677
  { type: core$1.TranslateService }
1673
1678
  ]; };
1674
- PexelsService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function PexelsService_Factory() { return new PexelsService(core["ɵɵinject"](http.HttpClient), core["ɵɵinject"](ImgManagerConfigService), core["ɵɵinject"](core$1.TranslateService)); }, token: PexelsService, providedIn: "root" });
1679
+ PexelsService.ɵprov = core.ɵɵdefineInjectable({ factory: function PexelsService_Factory() { return new PexelsService(core.ɵɵinject(http.HttpClient), core.ɵɵinject(ImgManagerConfigService), core.ɵɵinject(core$1.TranslateService)); }, token: PexelsService, providedIn: "root" });
1675
1680
  PexelsService = __decorate([
1676
1681
  core.Injectable({
1677
1682
  providedIn: 'root'
@@ -1762,7 +1767,6 @@
1762
1767
  };
1763
1768
  PexelLibComponent.prototype.search = function () {
1764
1769
  var _this = this;
1765
- console.log('search');
1766
1770
  if (this.isLoading) {
1767
1771
  return;
1768
1772
  }
@@ -1775,8 +1779,6 @@
1775
1779
  }
1776
1780
  this.isLoading = true;
1777
1781
  var searchSub = this.wzImgLibService.searchOnPexels(this.searchValue, this.perPage, this.currentPage).subscribe(function (data) {
1778
- console.log('search ended here');
1779
- console.log(data);
1780
1782
  _this.wzImgLibDto = data;
1781
1783
  _this.nbResult = _this.wzImgLibDto.total_results;
1782
1784
  if (_this.nbResult) {
@@ -2250,7 +2252,7 @@
2250
2252
  ImgEditorComponent = __decorate([
2251
2253
  core.Component({
2252
2254
  selector: 'img-editor',
2253
- 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",
2255
+ template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n <perfect-scrollbar\n [config]=\"{suppressScrollX: true}\"\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",
2254
2256
  animations: [
2255
2257
  easeInOut
2256
2258
  ]
@@ -2626,8 +2628,9 @@
2626
2628
  this.currentCroppedImage = ''; // Img modified return in base64
2627
2629
  this.isCropped = false;
2628
2630
  this.isLoading = false;
2629
- this.isImgCropped = false;
2630
- this.isImgCroppedInitilized = false;
2631
+ this._isImgCropped = false;
2632
+ this.imgCropperChange = new rxjs.Subject();
2633
+ this.skipNextImgCropped = 1;
2631
2634
  this.imageChangedEvent = '';
2632
2635
  this.croppedImage = '';
2633
2636
  this.canvasRotation = 0;
@@ -2728,8 +2731,22 @@
2728
2731
  enumerable: true,
2729
2732
  configurable: true
2730
2733
  });
2734
+ Object.defineProperty(CropperComponent.prototype, "isImgCropped", {
2735
+ get: function () {
2736
+ return this._isImgCropped;
2737
+ },
2738
+ set: function (isImgCropped) {
2739
+ var _this = this;
2740
+ setTimeout(function () {
2741
+ _this._isImgCropped = isImgCropped;
2742
+ }, 0);
2743
+ },
2744
+ enumerable: true,
2745
+ configurable: true
2746
+ });
2731
2747
  CropperComponent.prototype.ngOnInit = function () {
2732
2748
  this.init();
2749
+ this.detectImgCropperChange();
2733
2750
  };
2734
2751
  CropperComponent.prototype.init = function () {
2735
2752
  this.imgRoute = this.getRAWImgRoute();
@@ -2770,7 +2787,7 @@
2770
2787
  this.imageChangedEvent = event;
2771
2788
  };
2772
2789
  CropperComponent.prototype.imageCropped = function (event) {
2773
- this.detectImgCropperChange();
2790
+ this.imgCropperChange.next();
2774
2791
  this.currentCroppedImage = event.base64;
2775
2792
  this.currentCroppedImageChange.emit(this.currentCroppedImage);
2776
2793
  };
@@ -2790,10 +2807,13 @@
2790
2807
  this.setCropperProperties(config);
2791
2808
  };
2792
2809
  CropperComponent.prototype.confirmCrop = function () {
2793
- this.imgRoute = null;
2794
- this.croppedImage = this.currentCroppedImage;
2795
- this.isImgCropped = false;
2796
- this.isImgCroppedInitilized = false;
2810
+ var _this = this;
2811
+ setTimeout(function () {
2812
+ _this.imgRoute = null;
2813
+ _this.croppedImage = _this.currentCroppedImage;
2814
+ _this.skipNextImgCropped = 2;
2815
+ _this.isImgCropped = false;
2816
+ }, 0);
2797
2817
  this.resetConfCropper();
2798
2818
  this.onImgModified();
2799
2819
  };
@@ -2815,8 +2835,16 @@
2815
2835
  }
2816
2836
  };
2817
2837
  CropperComponent.prototype.detectImgCropperChange = function () {
2818
- this.isImgCropped = this.isImgCroppedInitilized;
2819
- this.isImgCroppedInitilized = true;
2838
+ var _this = this;
2839
+ this.imgCropperChange
2840
+ .subscribe(function () {
2841
+ _this.skipNextImgCropped--;
2842
+ if (_this.skipNextImgCropped >= 0) {
2843
+ return;
2844
+ }
2845
+ _this.skipNextImgCropped = 0;
2846
+ _this.isImgCropped = true;
2847
+ });
2820
2848
  };
2821
2849
  /* Rotations functions */
2822
2850
  CropperComponent.prototype.rotateLeft = function () {
@@ -2883,7 +2911,7 @@
2883
2911
  CropperComponent = __decorate([
2884
2912
  core.Component({
2885
2913
  selector: 'cropper',
2886
- template: "<div class=\"img-editor__container__toolsContainer\">\n\n <div *ngIf=\"isImgCropped\">\n <div\n class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n (click)=\"confirmCrop()\"\n [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n nwbToolTipPosition=\"left\"\n >\n <i class=\"far fa-check\"></i>\n <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n </div>\n </div>\n\n <!-- Resolution -->\n <dropdown dropdownId=\"dropdown-resolution\">\n <ng-container label>\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n >\n <i class=\"far fa-crop\"></i>\n <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"changeResolutionSize(index)\">\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Zoom -->\n <dropdown dropdownId=\"dropdown-rotation\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n <i class=\"far fa-expand-arrows-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Rotation -->\n <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n <i class=\"far fa-redo\"></i>\n <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n (click)=\"onRestart()\"\n @insertRemoveAnnim\n >\n <i class=\"far fa-retweet-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n <image-cropper\n [imageURL] = \"imgRoute\"\n [imageBase64] = \"croppedImage\"\n [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n [onlyScaleDown]=\"true\"\n [roundCropper]=\"false\"\n [canvasRotation]=\"canvasRotation\"\n [transform]=\"transform\"\n [alignImage]=\"'center'\"\n [style.display]=\"showCropper ? null : 'none'\"\n [format]=\"imgType\"\n [backgroundColor]=\"'white'\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded()\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n</div>\n",
2914
+ template: "<div class=\"img-editor__container__toolsContainer\">\n\n <div *ngIf=\"isImgCropped\">\n <div\n class=\"img-editor__container__toolsContainer__tool img-editor__container__toolsContainer__tool--button\"\n (click)=\"confirmCrop()\"\n [nwbToolTip]=\"'ImgManager.ImgEditor.ValidtToolTip' | translate\"\n nwbToolTipPosition=\"left\"\n >\n <i class=\"far fa-check\"></i>\n <p>{{ 'ImgManager.ImgEditor.Valid' | translate }}</p>\n </div>\n </div>\n\n <!-- Resolution -->\n <dropdown dropdownId=\"dropdown-resolution\">\n <ng-container label>\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n >\n <i class=\"far fa-crop\"></i>\n <p>{{ 'ImgManager.ImgEditor.crop' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of resolutionConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"changeResolutionSize(index)\">\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Zoom -->\n <dropdown dropdownId=\"dropdown-rotation\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"zoomIn()\">\n <i class=\"far fa-expand-arrows-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.display' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of zoomConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <!-- Rotation -->\n <dropdown dropdownId=\"dropdown-rotation\" dropDownMenuClass=\"img-editor__container__toolsContainer__RotationDropdown\">\n <ng-container label>\n <div class=\"img-editor__container__toolsContainer__tool\" (click)=\"rotateRight()\">\n <i class=\"far fa-redo\"></i>\n <p>{{ 'ImgManager.ImgEditor.rotation' | translate }}</p>\n </div>\n </ng-container>\n <ng-container item *ngFor=\"let item of rotationConfig; let index = index;\">\n <div\n class=\"dropdown-item\"\n [ngClass]=\"{'active-item': item.active}\"\n (click)=\"applyMethod(item.method)\">\n <i *ngIf=\"item.icon\" [ngClass]=\"item.icon\"></i>\n <p>{{item.label | translate}}</p>\n </div>\n </ng-container>\n </dropdown>\n\n <div\n class=\"img-editor__container__toolsContainer__tool\"\n (click)=\"onRestart()\"\n @insertRemoveAnnim\n >\n <i class=\"far fa-retweet-alt\"></i>\n <p>{{ 'ImgManager.ImgEditor.restart' | translate }}</p>\n </div>\n</div>\n\n<div class=\"img-editor__image-cropper\" >\n <image-cropper\n [imageURL]=\"imgRoute\"\n [imageBase64]=\"croppedImage\"\n [maintainAspectRatio]=\"imgCropperConfig.maintainAspectRatio\"\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\n [aspectRatio]=\"imgCropperConfig.aspectRatio\"\n [onlyScaleDown]=\"true\"\n [roundCropper]=\"false\"\n [canvasRotation]=\"canvasRotation\"\n [transform]=\"transform\"\n [alignImage]=\"'center'\"\n [style.display]=\"showCropper ? null : 'none'\"\n [format]=\"imgType\"\n [backgroundColor]=\"'white'\"\n (imageCropped)=\"imageCropped($event)\"\n (imageLoaded)=\"imageLoaded()\"\n (cropperReady)=\"cropperReady()\"\n (loadImageFailed)=\"loadImageFailed()\"\n ></image-cropper>\n</div>\n",
2887
2915
  animations: [
2888
2916
  insertRemove
2889
2917
  ]
@@ -3399,7 +3427,7 @@
3399
3427
  ImagesViewComponent = __decorate([
3400
3428
  core.Component({
3401
3429
  selector: 'images-view',
3402
- 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 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",
3430
+ 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",
3403
3431
  animations: [
3404
3432
  easeInOut,
3405
3433
  insertRemove
@@ -3574,7 +3602,7 @@
3574
3602
  FiltersTableService.ctorParameters = function () { return [
3575
3603
  { type: ngWiziBulma.NwbFilterRoutingBuilder }
3576
3604
  ]; };
3577
- FiltersTableService.ɵprov = core["ɵɵdefineInjectable"]({ factory: function FiltersTableService_Factory() { return new FiltersTableService(core["ɵɵinject"](ngWiziBulma.NwbFilterRoutingBuilder)); }, token: FiltersTableService, providedIn: "root" });
3605
+ FiltersTableService.ɵprov = core.ɵɵdefineInjectable({ factory: function FiltersTableService_Factory() { return new FiltersTableService(core.ɵɵinject(ngWiziBulma.NwbFilterRoutingBuilder)); }, token: FiltersTableService, providedIn: "root" });
3578
3606
  FiltersTableService = __decorate([
3579
3607
  core.Injectable({
3580
3608
  providedIn: 'root'
@@ -4544,7 +4572,7 @@
4544
4572
  core.Component({
4545
4573
  selector: 'wz-alert',
4546
4574
  template: "<div class=\"wz-alert\" [ngClass]=\"{ success: success, warning: warning }\">\n <i *ngIf=\"icon\" [ngClass]=\"iconClass\"></i>\n <p><ng-content></ng-content></p>\n</div>\n",
4547
- styles: [".wz-alert{width:100%;background-color:rgba(82,174,205,.15);color:#52aecd;border-radius:3px;display:-webkit-box;display:flex;flex-wrap:nowrap;-webkit-box-pack:justify;justify-content:space-between;padding:20px}.wz-alert.success{background-color:rgba(46,204,113,.15)}.wz-alert.success p,.wz-alert.success p>*{color:#11552e}.wz-alert.success i{color:#2ecc71}.wz-alert.warning{background-color:rgba(233,86,86,.15)}.wz-alert.warning p,.wz-alert.warning p>*{color:#3a0505}.wz-alert.warning i{color:#e95656}.wz-alert p{width:100%;font-size:rem(14);line-height:rem(25);margin:0;padding:0;color:#1e5568}.wz-alert p>*{color:#1e5568}.wz-alert i{width:auto;margin:0 10px 0 0;color:inherit;font-size:rem(14);line-height:rem(25)}"]
4575
+ styles: [".wz-alert{width:100%;background-color:rgba(82,174,205,.15);color:#52aecd;border-radius:3px;display:flex;flex-wrap:nowrap;justify-content:space-between;padding:20px}.wz-alert.success{background-color:rgba(46,204,113,.15)}.wz-alert.success p,.wz-alert.success p>*{color:#11552e}.wz-alert.success i{color:#2ecc71}.wz-alert.warning{background-color:rgba(233,86,86,.15)}.wz-alert.warning p,.wz-alert.warning p>*{color:#3a0505}.wz-alert.warning i{color:#e95656}.wz-alert p{width:100%;font-size:rem(14);line-height:rem(25);margin:0;padding:0;color:#1e5568}.wz-alert p>*{color:#1e5568}.wz-alert i{width:auto;margin:0 10px 0 0;color:inherit;font-size:rem(14);line-height:rem(25)}"]
4548
4576
  }),
4549
4577
  __metadata("design:paramtypes", [])
4550
4578
  ], AlertComponent);