@wizishop/img-manager 0.2.83 → 0.2.87

package/fesm5/wizishop-img-manager.js

@@ -15,6 +15,7 @@ import { ImageCropperModule } from 'ngx-image-cropper';
 import { CdkTableModule } from '@angular/cdk/table';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { v4 } from 'uuid';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 var ImgSelectionService = /** @class */ (function () {
     function ImgSelectionService() {
@@ -173,6 +174,14 @@ var ImgManagerService = /** @class */ (function () {
             displayBtn: true,
             pageficheProduct: true
         };
+        this.angularFicheProductConfig = {
+            stateDisplayed: 'closed',
+            multipleImgMode: true,
+            showImgManagerModule: true,
+            showSelection: true,
+            displayBtn: false,
+            pageficheProduct: true
+        };
         this.wiziblockConfig = {
             stateDisplayed: 'closed',
             multipleImgMode: false,
@@ -262,6 +271,8 @@ var ImgManagerService = /** @class */ (function () {
                 return this.pageFicheProductConfig;
             case "simple-with-button":
                 return this.simpleWithButtonOpenerConfig;
+            case 'angular-fiche-product':
+                return this.angularFicheProductConfig;
             default:
                 return;
         }
@@ -1103,8 +1114,33 @@ var ImgTabsComponent = /** @class */ (function () {
         this.imgManagerClosed = new EventEmitter();
         this.currentTab = new EventEmitter();
         this.switchDisplayWindow = new EventEmitter();
-        this.tabActive = 'images-view';
-        this.tabs = ['img-upload', 'images-view', 'pexels-lib', 'img-edition'];
+        this.tabs = [
+            {
+                name: 'ImgManager.Tabs.addImg',
+                value: 'img-upload',
+                id: 0
+            },
+            {
+                name: 'ImgManager.Tabs.imgLib',
+                value: 'images-view',
+                selected: true,
+                id: 1
+            },
+            {
+                name: 'ImgManager.Tabs.freeImgLib',
+                value: 'pexels-lib',
+                id: 2
+            },
+            {
+                name: 'ImgManager.Tabs.Editor',
+                value: 'img-edition',
+                hide: true,
+                id: 3
+            }
+        ];
+        this.tabActive = this.tabs[1];
+        /* tabActive = 'images-view';
+        tabs: string[] = ['img-upload', 'images-view', 'pexels-lib', 'img-edition']; */
         this.editTab = false;
         this.imgUpload = false;
         this.snackBarNewVersionConfig = {
@@ -1121,10 +1157,10 @@ var ImgTabsComponent = /** @class */ (function () {
             _this.currentTab.emit(_this.tabs[3]);
         });
     };
-    ImgTabsComponent.prototype.toggleTabs = function (value) {
+    ImgTabsComponent.prototype.toggleTabs = function (item) {
         this.imgUpload = false;
         this.editTab = false;
-        this.tabActive = value;
+        this.tabActive = item;
     };
     ImgTabsComponent.prototype.onImgUploaded = function (img) {
         this.imgUpload = true;
@@ -1185,7 +1221,7 @@ var ImgTabsComponent = /** @class */ (function () {
     ImgTabsComponent = __decorate([
         Component({
             selector: 'img-tabs',
-            template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive === tabs[3]\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive === tabs[0]}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ 'ImgManager.Tabs.addImg' | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive === tabs[1]}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ 'ImgManager.Tabs.imgLib' | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive === tabs[2]}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ 'ImgManager.Tabs.freeImgLib' | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive === tabs[3]}\" *ngIf=\"editTab\"><a>{{ 'ImgManager.Tabs.Editor' | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <select (change)=\"toggleTabs(tabs[$event.target['value']])\">\n        <option disabled selected value>{{ 'ImgManager.Tabs.switchTabs' | translate }}</option>\n        <option value=\"0\">{{ 'ImgManager.Tabs.addImg' | translate }}</option>\n        <option value=\"1\">{{ 'ImgManager.Tabs.imgLib' | translate }}</option>\n        <option value=\"2\">{{ 'ImgManager.Tabs.freeImgLib' | translate }}</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive === tabs[0]\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive\"\n        [maxLengthCardShow]=\"stateDisplayed === 'small' ? 16 : 8\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive\"\n          [multipleImgMode]=\"multipleImgMode\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive === tabs[1]\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexel img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive === tabs[2]\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive === tabs[3]\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n"
+            template: "<div\n  class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n  <div class=\"wrapper-tabs\">\n    <div\n      class=\"tabs\"\n      [ngClass]=\"\n        {\n          'tabs--notWindow': stateDisplayed !== 'window',\n          'tabs--notDisplayed': stateDisplayed === 'window' && tabActive.value === tabs[3].value\n        }\">\n\n      <ul>\n        <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive.value === tabs[0].value}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ tabs[0].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[1].value}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ tabs[1].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[2].value}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ tabs[2].name | translate }}</a></li>\n        <li [ngClass]=\"{'is-active': tabActive.value === tabs[3].value}\" *ngIf=\"editTab\"><a>{{ tabs[3].name | translate }}</a></li>\n      </ul>\n      <div\n        class=\"img-tabs__canva\"\n        [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n        <canva-btn\n          (showImgUploaded)=\"onShowImgUploaded()\"\n          [stateDisplayed]=\"stateDisplayed\">\n        </canva-btn>\n      </div>\n    </div>\n    <div class=\"select-mobile-page\">\n      <wac-select\n        [(ngModel)]=\"tabActive\"\n        name=\"tabs\"\n        [items]=\"tabs\"\n      ></wac-select>\n    </div>\n  </div>\n\n  <!-- Upload section -->\n  <div\n    class=\"columns img-tabs__tabsFirst\"\n    [ngClass]=\"{\n      'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n      'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n    }\"\n    *ngIf=\"tabActive.value === tabs[0].value\">\n    <div class=\"column img-tabs__tabsFirst__upload\">\n      <img-upload\n        [stateDisplayed]=\"stateDisplayed\"\n        (imgUploaded)=\"onImgUploaded($event)\"\n      ></img-upload>\n    </div>\n    <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n      'img-tabs__tabsFirst__list--upload': imgUpload\n    }\">\n      <images-view\n        *ngIf=\"!imgUpload\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"false\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        [maxLengthCardShow]=\"stateDisplayed === 'small' ? 16 : 8\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"false\">\n      </images-view>\n\n\n      <div [hidden]=\"!imgUpload\">\n        <upload-list\n          #imgUploadedImg\n          [stateDisplayed]=\"stateDisplayed\"\n          [tabDisplayed]=\"tabActive.value\"\n          [multipleImgMode]=\"multipleImgMode\"\n          >\n        </upload-list>\n      </div>\n    </div>\n  </div>\n\n  <!-- Images section -->\n  <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive.value === tabs[1].value\">\n    <div class=\"column\">\n\n      <images-view\n        [stateDisplayed]=\"stateDisplayed\"\n        [listDisplayed]=\"listDisplayed\"\n        [multipleImgMode]=\"multipleImgMode\"\n        [tabDisplayed]=\"tabActive.value\"\n        (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n        [fullSize]=\"true\">\n      </images-view>\n\n    </div>\n  </div>\n\n  <!-- Pexel img section -->\n  <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive.value === tabs[2].value\">\n    <div class=\"column\">\n      <pexels-lib\n        [stateDisplayed]=\"stateDisplayed\"\n        (showImgUploaded)=\"onShowImgUploaded()\">\n      </pexels-lib>\n    </div>\n  </div>\n\n  <!--Edition section -->\n  <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive.value === tabs[3].value\">\n    <div class=\"column\">\n      <img-editor\n        [stateDisplayed]=\"stateDisplayed\"\n        [imgToEdit]=\"imgToEdit\"\n        (editClosed)=\"onEditClosed($event)\">\n      </img-editor>\n    </div>\n  </div>\n\n</div>\n"
         }),
         __metadata("design:paramtypes", [ImgEventService,
             AlertService,
@@ -4382,6 +4418,205 @@ var LargeNumberOfPagePipe = /** @class */ (function () {
     return LargeNumberOfPagePipe;
 }());
 
+var SelectComponent = /** @class */ (function () {
+    function SelectComponent(translateService) {
+        this.translateService = translateService;
+        this.search = false;
+        this.type = 'default';
+        this.maxWidth = '100%';
+        this.disabled = false;
+        this.selectValue = new EventEmitter();
+        this.clickOnCallToAction = new EventEmitter();
+        this.openCategories = false;
+        this.searchValue = '';
+        this.indexItemSelected = -1;
+        // ControlValueAccessor methods
+        this.onChange = function () { };
+        this.onTouch = function () { };
+    }
+    SelectComponent_1 = SelectComponent;
+    SelectComponent.prototype.ngOnInit = function () {
+        this.indexItemSelected = this.items.findIndex(function (item) { return item.selected; });
+    };
+    SelectComponent.prototype.onClose = function () {
+        this.openCategories = false;
+    };
+    SelectComponent.prototype.customTB = function (item, index) {
+        return item.id + "-" + index;
+    };
+    SelectComponent.prototype.onSelectItem = function (id) {
+        this.unselectAll();
+        this.setIndexItemSelected(id);
+        var itemSelected = this.getItemSelected();
+        itemSelected.selected = true;
+        this.selectValue.emit(this.indexItemSelected);
+        this.onChange(itemSelected);
+    };
+    SelectComponent.prototype.onClickCallToAction = function () {
+        this.onClose();
+        this.clickOnCallToAction.emit(this.callToAction.value);
+    };
+    SelectComponent.prototype.getItemSelected = function () {
+        return this.items[this.indexItemSelected];
+    };
+    SelectComponent.prototype.showCategories = function () {
+        var _this = this;
+        this.openCategories = true;
+        setTimeout(function () {
+            _this.searchElement.nativeElement.focus();
+        }, 0);
+    };
+    SelectComponent.prototype.unselectAll = function () {
+        this.items.forEach(function (item) { return item.selected = false; });
+    };
+    SelectComponent.prototype.setIndexItemSelected = function (id) {
+        this.indexItemSelected = this.items.findIndex(function (item) { return item.id === id; });
+    };
+    SelectComponent.prototype.writeValue = function (selectItem) {
+        if (!selectItem) {
+            return;
+        }
+        this.unselectAll();
+        selectItem.selected = true;
+        this.setIndexItemSelected(selectItem.id);
+    };
+    SelectComponent.prototype.registerOnChange = function (fn) {
+        this.onChange = fn;
+    };
+    SelectComponent.prototype.registerOnTouched = function (fn) {
+        this.onTouch = fn;
+    };
+    var SelectComponent_1;
+    SelectComponent.ctorParameters = function () { return [
+        { type: TranslateService }
+    ]; };
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], SelectComponent.prototype, "items", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SelectComponent.prototype, "placeholder", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SelectComponent.prototype, "label", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SelectComponent.prototype, "maxWidthItems", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "search", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "type", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "callToAction", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "maxWidth", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "disabled", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "selectValue", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], SelectComponent.prototype, "clickOnCallToAction", void 0);
+    __decorate([
+        ViewChild('search'),
+        __metadata("design:type", ElementRef)
+    ], SelectComponent.prototype, "searchElement", void 0);
+    SelectComponent = SelectComponent_1 = __decorate([
+        Component({
+            selector: 'wac-select',
+            template: "<p *ngIf=\"label\" [innerHTML]=\"label\" class=\"wac-select__label\"></p>\n\n<div class=\"wac-select\" wzAutoHide (clickOutside)=\"onClose()\" [ngStyle]=\"{ 'max-width': maxWidth }\" [zIndexToggle]=\"openCategories\">\n\n  <div class=\"wac-select__current\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && openCategories = !openCategories\" *ngIf=\"!search\">\n    <span *ngIf=\"indexItemSelected !== -1\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span [innerHTML]=\"(indexItemSelected !== -1 ? items[indexItemSelected].name : placeholder) | translate\"></span><span><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__current wac-select__current--withSearch\" [ngClass]=\"{ 'select-disabled' : disabled, 'open-search': openCategories }\" *ngIf=\"search\">\n    <div class=\"wac-select__current__search\" *ngIf=\"openCategories && !disabled\">\n      <i class=\"far fa-search\"></i>\n      <input #search type=\"text\" [(ngModel)]=\"searchValue\" />\n    </div>\n    <span (click)=\"openCategories = !openCategories;\" *ngIf=\"items[indexItemSelected]?.icon && !openCategories\" class=\"icon\" [innerHTML]=\"items[indexItemSelected].icon\"></span>\n    <span (click)=\"showCategories()\" [innerHTML]=\"items[indexItemSelected]?.name ? items[indexItemSelected].name : placeholder\"></span>\n    <span (click)=\"openCategories = !openCategories;\"><i class=\"fas fa-chevron-down\"></i></span>\n  </div>\n\n  <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openCategories, open: type === 'open' }\" [ngStyle]=\"{ 'max-width': maxWidthItems }\">\n    <div [perfectScrollbar]=\"{ suppressScrollX: true }\" *ngIf=\"items.length\">\n\n      <div *ngIf=\"callToAction\" class=\"wac-select__content__cta\">\n        <div (click)=\"onClickCallToAction()\">\n          <i *ngIf=\"callToAction.icon\" [classList]=\"callToAction.icon\"></i><strong *ngIf=\"callToAction.boldText\">{{ callToAction.boldText }}</strong\n          ><span>{{ callToAction?.name }}</span>\n        </div>\n      </div>\n\n      <div\n        *ngFor=\"let item of items | selectFilters: searchValue; let index = index;\"\n        (click)=\"onClose()\"\n        class=\"wac-select__content__item\"\n        >\n          <div *ngIf=\"!item.hide\" [ngClass]=\"{ selected: item.selected }\" (click)=\"onSelectItem(item.id)\">\n            <span class=\"icon\" [innerHTML]=\"item.icon\" *ngIf=\"item.icon\"></span>{{ item.name | translate }}\n          </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"!(items | selectFilters: searchValue)?.length\" class=\"wac-select__content__empty\">\n      <span>{{'wac.datatable.noresult' | translate}}</span>\n    </div>\n\n  </div>\n</div>",
+            providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent_1, multi: true }]
+        }),
+        __metadata("design:paramtypes", [TranslateService])
+    ], SelectComponent);
+    return SelectComponent;
+}());
+
+var SelectFiltersPipe = /** @class */ (function () {
+    function SelectFiltersPipe() {
+    }
+    SelectFiltersPipe.prototype.transform = function (items, filterName) {
+        return items.filter(function (item) {
+            var regexp = new RegExp(filterName, 'i');
+            return regexp.test(item.name);
+        });
+    };
+    SelectFiltersPipe = __decorate([
+        Pipe({
+            name: 'selectFilters'
+        })
+    ], SelectFiltersPipe);
+    return SelectFiltersPipe;
+}());
+
+var ZindexToggleDirective = /** @class */ (function () {
+    function ZindexToggleDirective(currentElement, renderer) {
+        this.currentElement = currentElement;
+        this.renderer = renderer;
+        this.isActived = false;
+    }
+    Object.defineProperty(ZindexToggleDirective.prototype, "isActive", {
+        get: function () {
+            return this.isActived;
+        },
+        set: function (value) {
+            this.isActived = value;
+            this.switchToggle();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ZindexToggleDirective.prototype.ngOnInit = function () {
+    };
+    ZindexToggleDirective.prototype.switchToggle = function () {
+        if (this.isActived) {
+            this.renderer.addClass(this.currentElement.nativeElement.parentElement.parentNode, 'zindexToggle');
+        }
+        else {
+            this.renderer.removeClass(this.currentElement.nativeElement.parentElement.parentNode, 'zindexToggle');
+        }
+    };
+    ZindexToggleDirective.prototype.ngOnDestroy = function () {
+    };
+    ZindexToggleDirective.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: Renderer2 }
+    ]; };
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ZindexToggleDirective.prototype, "onEventChange", void 0);
+    __decorate([
+        Input('zIndexToggle'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [Boolean])
+    ], ZindexToggleDirective.prototype, "isActive", null);
+    ZindexToggleDirective = __decorate([
+        Directive({
+            selector: '[zIndexToggle]'
+        }),
+        __metadata("design:paramtypes", [ElementRef, Renderer2])
+    ], ZindexToggleDirective);
+    return ZindexToggleDirective;
+}());
+
 ;
 var components = [
     WzImgManagerComponent,
@@ -4406,6 +4641,7 @@ var components = [
     CheckboxComponent,
     AlertComponent,
     PageSelectorComponent,
+    SelectComponent
 ];
 var directives = [
     DragDropDirective,
@@ -4418,6 +4654,7 @@ var directives = [
     TableRow,
     AbstractDebounceDirective,
     DebounceKeyupDirective,
+    ZindexToggleDirective
 ];
 var pipes = [
     PagniationArrayTotalPages,
@@ -4425,7 +4662,8 @@ var pipes = [
     PagniationText,
     ImageSrcPipe,
     NumberToArray,
-    LargeNumberOfPagePipe
+    LargeNumberOfPagePipe,
+    SelectFiltersPipe
 ];
 var WzImgManagerModule = /** @class */ (function () {
     function WzImgManagerModule() {
@@ -4443,7 +4681,8 @@ var WzImgManagerModule = /** @class */ (function () {
                 ImageCropperModule,
                 CdkTableModule,
                 DragDropModule,
-                TranslateModule
+                TranslateModule,
+                PerfectScrollbarModule
             ],
             providers: [],
             exports: [
@@ -4490,5 +4729,5 @@ var ImgCDNConfigDTO = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, DragDropDirective as ɵbh, LoadingDirective as ɵbi, AutoHideDirective as ɵbj, CopyClipboardDirective as ɵbk, TableColumn as ɵbl, CheckBoxRow as ɵbm, TableColumnHeader as ɵbn, TableRow as ɵbo, AbstractDebounceDirective as ɵbp, DebounceKeyupDirective as ɵbq, PagniationArrayTotalPages as ɵbr, PagniationIsLastPage as ɵbs, PagniationText as ɵbt, ImageSrcPipe as ɵbu, NumberToArray as ɵbv, LargeNumberOfPagePipe as ɵbw, UserSettingsService as ɵc, ImgEventService as ɵd, DomService as ɵe, ImgTabsComponent as ɵf, AlertService as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
+export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd, DomService as ɵe, ImgTabsComponent as ɵf, AlertService as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
 //# sourceMappingURL=wizishop-img-manager.js.map