@wizishop/img-manager 0.2.75 → 0.2.79

package/bundles/wizishop-img-manager.umd.min.js

@@ -12,5 +12,5 @@
 
     See the Apache Version 2.0 License for specific language governing permissions
     and limitations under the License.
-    ***************************************************************************** */var f=function(e,t){return(f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function v(e,t){function n(){this.constructor=e}f(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var y=function(){return(y=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function b(e,t,n,i){var o,a=arguments.length,s=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,n,s):o(t,n))||s);return a>3&&s&&Object.defineProperty(t,n,s),s}function I(e,t){return function(n,i){t(n,i,e)}}function _(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function C(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function S(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,o,a=n.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(i=a.next()).done;)s.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return s}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(S(arguments[t]));return e}var x=function(){function e(){this.imgSelectedList=[],this.multipleImgMode=!1,this.imgSelectionSubscriber=[],this.imgListLoading=new n.ReplaySubject}return e.prototype.getImgSelection=function(){return this.imgSelectedList},e.prototype.setImgSelection=function(e){var t=this;this.imgSelectedList.length=0,e&&e.length&&e.forEach((function(e){return t.imgSelectedList.push(e)})),this.emitImgSelectionChange()},e.prototype.addImgSelected=function(e){this.multipleImgMode?this.imgSelectedList.push(e):this.imgSelectedList=[e],this.emitImgSelectionChange()},e.prototype.getImgSelectionChange=function(){var e=this;return new n.Observable((function(t){e.imgSelectionSubscriber.push(t)}))},e.prototype.emitImgSelectionChange=function(){var e=this;this.imgSelectionSubscriber.map((function(t){return t.next(JSON.parse(JSON.stringify(e.imgSelectedList)))}))},e.prototype.removeImgSelectedByIndex=function(e){this.imgSelectedList.splice(e,1),this.emitImgSelectionChange()},e.prototype.removeImgSelectedById=function(e){var t,n;if(this.multipleImgMode){var i=0;try{for(var o=C(this.imgSelectedList),a=o.next();!a.done;a=o.next()){if(a.value.id_file===e){this.removeImgSelectedByIndex(i);break}i++}}catch(e){t={error:e}}finally{try{a&&!a.done&&(n=o.return)&&n.call(o)}finally{if(t)throw t.error}}}else this.imgSelectedList=[]},e.prototype.removeImgSelectionByIds=function(e){if(this.multipleImgMode)for(var t=this.imgSelectedList.length-1;t>-1;t--){var n=this.imgSelectedList[t].id_file;-1!==e.indexOf(n)&&this.removeImgSelectedByIndex(t)}else this.imgSelectedList=[]},e.prototype.removeAllImgSelected=function(){this.imgSelectedList.length=0,this.emitImgSelectionChange()},e.prototype.setMultipleImgMode=function(e){this.multipleImgMode=e},e.prototype.initImgSelectedList=function(e){e?this.imgSelectedList=e:this.imgSelectedList&&this.imgSelectedList.length?this.imgSelectedList.splice(0,this.imgSelectedList.length):this.imgSelectedList=[]},e.prototype.emitImgListLoading=function(e){this.imgListLoading.next(e)},e.prototype.getImgListLoadingEventListner=function(){return this.imgListLoading.asObservable()},e.prototype.moveImgOrder=function(e){var t=e.previousIndex,n=e.currentIndex;this.imgSelectedList.splice(n,0,this.imgSelectedList.splice(t,1)[0]),this.emitImgSelectionChange()},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),L=function(){},D=function(){function e(e){this.http=e,this.params=(new i.HttpParams).set("limit","20").set("page","1"),this.pageFicheProductConfig={stateDisplayed:"closed",multipleImgMode:!0,showImgManagerModule:!0,showSelection:!0,displayBtn:!0,pageficheProduct:!0},this.wiziblockConfig={stateDisplayed:"closed",multipleImgMode:!1,showImgManagerModule:!0,showSelection:!1,displayBtn:!1},this.simpleWithButtonOpenerConfig={stateDisplayed:"closed",multipleImgMode:!1,showImgManagerModule:!0,showSelection:!1,displayBtn:!0},this.fullWindowConfig={stateDisplayed:"window",multipleImgMode:!1,showImgManagerModule:!0,showSelection:!1,displayBtn:!1}}return e.prototype.setApiConfig=function(e,t){this.imgManagerRoute=e,this.shopToken=t},e.prototype.getOptionsHeaders=function(e){var t={headers:new i.HttpHeaders({Authorization:"Bearer "+this.shopToken})};return e&&(this.getParams(e),t.params=this.params),t},e.prototype.getShopImgList=function(e){return this.http.get(this.imgManagerRoute+"/images",this.getOptionsHeaders(e))},e.prototype.getShopTotalImgList=function(e){return this.http.get(this.imgManagerRoute+"/total/image",this.getOptionsHeaders(e))},e.prototype.getShopImg=function(e){return this.http.get(this.imgManagerRoute+"/images/"+e,this.getOptionsHeaders())},e.prototype.getParams=function(e){for(var t in this.params=new i.HttpParams,this.params=this.params.set("id_file:sort","desc"),e)this.params=this.params.set(t,e[t])},e.prototype.uploadFile=function(e){return this.http.post(this.imgManagerRoute+"/images/template",e,this.getOptionsHeaders())},e.prototype.uploadFileByUrl=function(e,t){return this.http.post(this.imgManagerRoute+"/images/template",{url:e,fileName:t},this.getOptionsHeaders())},e.prototype.replaceImg=function(e,t){var n={imageBase64:e,type:"RAW"};return this.http.put(this.imgManagerRoute+"/images/"+t+"/replace",n,this.getOptionsHeaders())},e.prototype.changeImgName=function(e,t){return this.http.put(this.imgManagerRoute+"/images/"+t+"?file_name="+e,null,this.getOptionsHeaders())},e.prototype.removeImg=function(e){return this.http.delete(this.imgManagerRoute+"/images/"+e,this.getOptionsHeaders())},e.prototype.removeMultipleImg=function(e){return this.http.post(this.imgManagerRoute+"/images-multiple-delete",{id_array:e},this.getOptionsHeaders())},e.prototype.getImgManagerDisplayConfig=function(e){switch(e){case"window":return this.fullWindowConfig;case"wizi-block":return this.wiziblockConfig;case"fiche-product":return this.pageFicheProductConfig;case"simple-with-button":return this.simpleWithButtonOpenerConfig;default:return}},e.prototype.getAllImgManagerDisplayConfig=function(){return[this.fullWindowConfig,this.wiziblockConfig,this.pageFicheProductConfig,this.simpleWithButtonOpenerConfig]},e.ctorParameters=function(){return[{type:i.HttpClient}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](i.HttpClient))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[i.HttpClient])],e)}(),E=function(){function e(){this.imgCDNConfig=null}return e.prototype.setImgCDNConfig=function(e){this.imgCDNConfig=e},e.prototype.getUrlImg=function(e){var t=Object.keys(this.imgCDNConfig).filter((function(t){return new RegExp(e,"i").test(t)}))[0];return this.imgCDNConfig[t]},e.prototype.getAllSize=function(){return Object.keys(this.imgCDNConfig).map((function(e){return e.match(/_(\w+)_/)[1]}))},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),M=function(){function e(e,t){this.imgManagerService=e,this.imgCDNService=t}return e.prototype.setExternalConfig=function(e){this.externalConfig=e,this.imgManagerService.setApiConfig(e.api.image_manager_route,e.api.shop_token),this.imgCDNService.setImgCDNConfig(e.imgCDNConfig)},e.prototype.getCanvaApiURL=function(){return this.externalConfig.api.canva_url},e.prototype.getCanvaApiToken=function(){return this.externalConfig.api.canva_token},e.prototype.getRouteAssets=function(){return this.externalConfig.api.assets_route},e.prototype.getPexelsApiURL=function(){return this.externalConfig.api.pexels_route},e.prototype.getPexelsApiToken=function(){return this.externalConfig.api.pexels_token},e.prototype.getShopCategory=function(){return this.externalConfig.api.shop_category},e.ctorParameters=function(){return[{type:D},{type:E}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](D),t["ɵɵinject"](E))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[D,E])],e)}(),P=function(){function e(){this.userdisplayPreference="WzImgManagerListDisplayed"}return e.prototype.setUserDisplayPreference=function(e){localStorage.setItem(this.userdisplayPreference,""+e)},e.prototype.getUserDisplayPreference=function(){return"true"==localStorage.getItem(this.userdisplayPreference)},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),R=function(){function e(e){this.externalConfigService=e,this.bindExpectedImgSizeEvent=new n.BehaviorSubject(null),this.bindExpectedSizeDone=this.bindExpectedImgSizeEvent.asObservable()}return e.prototype.setCanvaApiConfig=function(){this.canvaApiURL=this.externalConfigService.getCanvaApiURL(),this.canvaApiKey=this.externalConfigService.getCanvaApiToken()},e.prototype.getCanvaLogo=function(){return this.externalConfigService.getRouteAssets()+"canva/icon_canva.svg"},e.prototype.bindEventExepectedImgSizeChange=function(){return this.bindExpectedSizeDone},e.prototype.expectedImgSizesChange=function(e){this.bindExpectedImgSizeEvent.next(e)},e.prototype.getCanvaApi=function(){var e=this;return this.canvaApiURL&&this.canvaApiKey||this.setCanvaApiConfig(),new n.Observable((function(t){e.loadCanva().subscribe({complete:function(){e.canvaApi&&Canva.DesignButton?(t.next(e.canvaApi),t.complete()):e.initializeCanva(t)}})}))},e.prototype.initializeCanva=function(e){var t=this;Canva.DesignButton&&Canva.DesignButton.initialize({apiKey:this.canvaApiKey}).then((function(n){t.canvaApi=n,e.next(t.canvaApi),e.complete()}))},e.prototype.loadCanva=function(){var e=this;return new n.Observable((function(t){e.canvaApi?t.complete():e.loadCanvaScript(t)}))},e.prototype.loadCanvaScript=function(e){var t=document.createElement("script");t.src=this.canvaApiURL,t.type="text/javascript",t.async=!1,t.charset="utf-8",t.onload=function(){e.complete()},document.getElementsByTagName("head")[0].appendChild(t)},e.ctorParameters=function(){return[{type:M}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](M))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[M])],e)}(),T=function(){function e(){this.imgToEditEvent=new n.Subject,this.imgRemoved=new n.Subject,this.imgAdded=new n.Subject,this.listDisplayedChange=new n.Subject}return e.prototype.emitImgRemoved=function(e){this.imgRemoved.next(e)},e.prototype.getImgRemovedEventListner=function(){return this.imgRemoved.asObservable()},e.prototype.emitImgToEdit=function(e){this.imgToEditEvent.next(e)},e.prototype.getImgToEditEventListner=function(){return this.imgToEditEvent.asObservable()},e.prototype.emitImgAdded=function(e){this.imgAdded.next(e)},e.prototype.getImgAddedEventListner=function(){return this.imgAdded.asObservable()},e.prototype.emitlistDisplayedChange=function(e){this.listDisplayedChange.next(e)},e.prototype.getlistDisplayedChange=function(){return this.listDisplayedChange.asObservable()},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),k=function(){function e(){this.documentEventSource=new n.Subject,this.documentEventDone=this.documentEventSource.asObservable(),this.documentScrollSource=new n.Subject,this.documentScrollDone=this.documentScrollSource.asObservable()}return e.prototype.documentEvent=function(){return this.documentEventDone},e.prototype.setDocumentEventListener=function(){var e=this;document.body.addEventListener("click",(function(t){e.documentEventSource.next(t.target)}))},e.prototype.documentScroll=function(){return this.documentScrollDone},e.prototype.setScrollEventListener=function(){var e=this;window.onscroll=function(){e.documentScrollSource.next(window)}},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"})],e)}(),O=function(){function e(e,n,i,o,a,s){this.imgSelectionService=e,this.externalConfigService=n,this.userSettingsService=i,this.canvaService=o,this.imgEventService=a,this.domService=s,this.showSelection=!1,this.imgManagerClosed=new t.EventEmitter,this._multipleImgMode=!1,this._showImgManagerModule=!1,this.close=!1,this.listDisplayed=!1,this.hideTab=!1}return Object.defineProperty(e.prototype,"multipleImgMode",{get:function(){return this._multipleImgMode},set:function(e){this._multipleImgMode=e,this.imgSelectionService.setMultipleImgMode(this._multipleImgMode)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"showImgManagerModule",{get:function(){return this._multipleImgMode},set:function(e){this._showImgManagerModule=e,e&&this.displaySmall()},enumerable:!0,configurable:!0}),e.prototype.onKeydownHandler=function(e){this.stateDisplayed&&"window"!==this.stateDisplayed&&this.onClose()},e.prototype.ngOnInit=function(){var e=this;this.externalConfigService.setExternalConfig(this.externalConfig),this.imgSelectionService.setMultipleImgMode(this._multipleImgMode),this.imgSelectionService.initImgSelectedList(null),this.selectImgEvent=this.imgSelectionService.getImgSelectionChange().subscribe((function(t){t&&t.length&&e.checkCloseImgManager()&&e.onClose()})),this.checkUserDisplayPreference(),this.listDisplayedEvent=this.imgEventService.getlistDisplayedChange().subscribe((function(t){return e.listDisplayed=t})),this.domService.setDocumentEventListener()},e.prototype.checkUserDisplayPreference=function(){"window"!==this.stateDisplayed&&"full"!==this.stateDisplayed||(this.listDisplayed=this.userSettingsService.getUserDisplayPreference())},e.prototype.setCurrentTab=function(e){this.hideTab="img-edition"===e},e.prototype.displaySmall=function(){var e=this;"window"!==this.stateDisplayed&&setTimeout((function(){e.stateDisplayed="small",e.addBodyBottomPaddingForModule()}),10)},e.prototype.openSmall=function(){this.stateDisplayed="small",this.setBodyMainScroll(),this.listDisplayed=!1},e.prototype.openFull=function(){this.stateDisplayed="full",this.checkUserDisplayPreference(),this.hideBodyMainScroll()},e.prototype.onClose=function(){var e=this;this.stateDisplayed="closed",this.hideTab=!1,this.setBodyMainScroll(),this.removeBodyBottomPaddingForModule(),setTimeout((function(){e.imgManagerClosed.emit()}),250)},e.prototype.onImgManagerClosed=function(){this.onClose()},e.prototype.checkCloseImgManager=function(){return!this.multipleImgMode&&"window"!==this.stateDisplayed},e.prototype.hideBodyMainScroll=function(){var e=document.getElementsByTagName("html")[0];this.overflowHTML||(this.overflowHTML=e.style.overflowY),e.style.overflowY="hidden"},e.prototype.setBodyMainScroll=function(){document.getElementsByTagName("html")[0].style.overflowY=this.overflowHTML?this.overflowHTML:"scroll"},e.prototype.addBodyBottomPaddingForModule=function(){var e=document.getElementsByTagName("body")[0];this.bodyPadding=this.bodyPadding?parseInt(e.style.paddingBottom):0,e.style.paddingBottom=this.bodyPadding+300+"px"},e.prototype.removeBodyBottomPaddingForModule=function(){void 0!==this.bodyPadding&&(document.getElementsByTagName("body")[0].style.paddingBottom=this.bodyPadding+"px",this.bodyPadding=0)},e.prototype.ngOnDestroy=function(){this.selectImgEvent.unsubscribe(),this.canvaService.expectedImgSizesChange(null),this.listDisplayedEvent.unsubscribe()},e.ctorParameters=function(){return[{type:x},{type:M},{type:P},{type:R},{type:T},{type:k}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"showSelection",void 0),b([t.Input(),_("design:type",L)],e.prototype,"externalConfig",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgManagerClosed",void 0),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"multipleImgMode",null),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"showImgManagerModule",null),b([t.HostListener("document:keydown.escape",["$event"]),_("design:type",Function),_("design:paramtypes",[KeyboardEvent]),_("design:returntype",void 0)],e.prototype,"onKeydownHandler",null),e=b([t.Component({selector:"wz-img-manager",template:'<div class="wz-img-manager">\n  \x3c!-- Img slection handler --\x3e\n  <div class="wz-img-manager__selectionHandler" *ngIf="showSelection">\n    <img-selection></img-selection>\n  </div>\n\n  \x3c!-- Img manager module --\x3e\n  <div\n    *ngIf="_showImgManagerModule"\n    class="wz-img-manager__module"\n    [ngClass]="{\n      \'wz-img-manager__module--small\': stateDisplayed === \'small\',\n      \'wz-img-manager__module--full\': stateDisplayed === \'full\',\n      \'wz-img-manager__module--window\': stateDisplayed === \'window\',\n      \'wz-img-manager__module--edit\': hideTab}"\n  >\n\n    <div class="wz-img-manager__module__header" *ngIf="stateDisplayed !== \'window\'">\n      <button (click)="openSmall()" *ngIf="stateDisplayed === \'full\'"><span>Expand</span><i class="fal fa-compress-alt"></i></button>\n      <button (click)="openSmall()" *ngIf="stateDisplayed === \'closed\'"><span>Expand</span><i class="fal fa-expand-alt"></i></button>\n      <button (click)="openFull()" *ngIf="stateDisplayed === \'small\'"><span>Expand</span><i class="fal fa-expand-alt"></i></button>\n      <button (click)="onClose()" *ngIf="stateDisplayed !== \'closed\'"><span>Close</span><i class="fal fa-times"></i></button>\n    </div>\n\n    <div\n      class="wz-img-manager__module__content wz-block"\n      [ngClass]="{\'wz-block--window\': stateDisplayed === \'window\'}">\n      <img-tabs\n        [stateDisplayed]="stateDisplayed"\n        [multipleImgMode]="multipleImgMode"\n        [listDisplayed]="listDisplayed"\n        (imgManagerClosed)="onImgManagerClosed()"\n        (currentTab)="setCurrentTab($event)">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n'}),_("design:paramtypes",[x,M,P,R,T,k])],e)}(),A=o.trigger("easeInOut",[o.state("in",o.style({opacity:1})),o.transition(":enter",[o.style({opacity:0}),o.animate("0.5s ease-in-out")])]),F=function(){function e(e,t){this.nwbAlertService=e,this.translateService=t,this.actionMsg="ImgManager.alert.action",this.alertConfig={message:"",duration:5e3}}return e.prototype.openAlert=function(e){var t=this;this.closePreviousAlert(),this.translateService.get(e).subscribe((function(n){t.alertConfig.message=n,t.setAlertColor(e),t.alertRefComponent=t.nwbAlertService.open(t.alertConfig),t.alertRefComponent.afterClosed().subscribe()}))},e.prototype.openAlertWithBackendRespons=function(e,t){var n=this;this.translateService.get(e).subscribe((function(e){n.alertConfig.message=e,n.alertConfig.message+="<br/>"+JSON.parse(t).message,n.closePreviousAlert(),n.alertRefComponent=n.nwbAlertService.open(n.alertConfig),n.alertRefComponent.afterClosed().subscribe()}))},e.prototype.closePreviousAlert=function(){this.alertRefComponent&&this.alertRefComponent.dismiss()},e.prototype.setAlertColor=function(e){var t=/error/i.test(e);this.alertConfig.color=t?"is-danger":"is-success"},e.ctorParameters=function(){return[{type:s.NwbAlertService},{type:a.TranslateService}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](s.NwbAlertService),t["ɵɵinject"](a.TranslateService))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[s.NwbAlertService,a.TranslateService])],e)}(),z=function(){function e(e,n,i){this.imgManager=e,this.alertService=n,this.externalConfigService=i,this.files=[],this.isLoading=!1,this.imgUploaded=new t.EventEmitter,this.loadingText="ImgManager.ImgUpload.loading",this.errorUploadingImg="ImgManager.ImgUpload.errorUploadingImg",this.errorNotImg="ImgManager.ImgUpload.errorNotImg"}return e.prototype.ngOnInit=function(){this.assetsIcon=this.getAssets()},e.prototype.filesChangeByClick=function(e){this.uploadFile(e.target.files)},e.prototype.getAssets=function(){return this.externalConfigService.getRouteAssets()+"img/icon_picture.svg"},e.prototype.filesChangeByDragAndDrop=function(e){this.removeDragAndDropStyle(),this.uploadFile(e)},e.prototype.uploadFile=function(e){var t,i,o=this;if(!e||e.length){this.isLoading=!0;var a=[];try{for(var s=C(e),r=s.next();!r.done;r=s.next()){var l=r.value,p=new FormData;p.append("image",l,l.name),this.isFileImage(l.type)?a.push(this.imgManager.uploadFile(p)):(this.alertService.openAlert(this.errorNotImg),this.isLoading=!1)}}catch(e){t={error:e}}finally{try{r&&!r.done&&(i=s.return)&&i.call(s)}finally{if(t)throw t.error}}n.forkJoin(a).subscribe((function(e){o.onImgUpload(e),o.isLoading=!1}),(function(e){o.alertService.openAlert(o.errorUploadingImg),o.isLoading=!1}))}},e.prototype.onImgUpload=function(e){this.imgUploaded.emit(e)},e.prototype.isFileImage=function(e){return"image"===e.split("/")[0]},e.prototype.removeDragAndDropStyle=function(){this.dragAndDropBox.nativeElement.style=""},e.ctorParameters=function(){return[{type:D},{type:F},{type:M}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgUploaded",void 0),b([t.ViewChild("dragAndDropBox"),_("design:type",t.ElementRef)],e.prototype,"dragAndDropBox",void 0),e=b([t.Component({selector:"img-upload",template:'<div\n  class="img-upload has-text-centered"\n  [ngClass]="{\'img-upload--small\': stateDisplayed === \'small\'}"\n  (click)="fileInput.click()"\n  appDragDrop\n  (onFileDropped)="filesChangeByDragAndDrop($event)"\n  #dragAndDropBox\n  [@easeInOut]="\'in\'"\n>\n  <input hidden type="file" #fileInput (change)="filesChangeByClick($event)" accept="image/*" multiple >\n  <div class="img-upload__container" [ngClass]="{\'img-upload__container--small\': stateDisplayed === \'small\'}">\n\n    <div class="img-upload__container__wrapper">\n\n      <div class="img-upload__container__loader" *ngIf="isLoading">\n        <wz-loader [small]="true" [position]="\'relative\'"></wz-loader>\n      </div>\n\n      <ng-container *ngIf="!isLoading">\n        <div class="blueColor img-upload__container__dropImgIconDiv">\n          <img *ngIf="assetsIcon" [src]="assetsIcon" alt="icon picture" />\n          <p>{{ \'ImgManager.ImgUpload.dropImg\' | translate }}</p>\n        </div>\n\n        <p class="img-upload__container__or">{{ \'ImgManager.ImgUpload.or\' | translate }}</p>\n\n        <div class="img-upload__container__text">\n          <i class="fal fa-file-upload"></i>{{ \'ImgManager.ImgUpload.selectImg\' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n',animations:[A]}),_("design:paramtypes",[D,F,M])],e)}(),N=function(){function e(e,t){this.imgManager=e,this.alertService=t,this.picturesList=[],this.pictureNameChanged=new n.Subject,this.errorRenameImg="ImgManager.ImgList.errorRenameImg",this.msgSavingImgName="ImgManager.ImgLib.savingImgName",this.msgImgNameSaved="ImgManager.ImgLib.imgNameSaved",this.setEvents()}return e.prototype.setPicturesList=function(e){this.picturesList=e},e.prototype.onRenamePicture=function(e){this.pictureNameChanged.next(e)},e.prototype.setEvents=function(){var e=this;this.pictureNameChanged.pipe(r.debounceTime(800)).subscribe((function(t){e.renamePicture(t)}))},e.prototype.renamePicture=function(e){var t=this,n=this.getPictureById(e.id);n?(this.alertService.openAlert(this.msgSavingImgName),this.imgManager.changeImgName(n.display_name,n.id_file).subscribe((function(e){n.display_name=e.display_name,t.alertService.openAlert(t.msgImgNameSaved)}),(function(i){n.display_name=e.previousName,t.alertService.openAlert(t.errorRenameImg)}))):this.alertService.openAlert(this.errorRenameImg)},e.prototype.getPictureById=function(e){var t,n;if(this.picturesList){try{for(var i=C(this.picturesList),o=i.next();!o.done;o=i.next()){var a=o.value;if(a.id_file===e)return a}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return null}},e.ctorParameters=function(){return[{type:D},{type:F}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](D),t["ɵɵinject"](F))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[D,F])],e)}(),B=function(){function e(e,t){this.imgSelectionService=e,this.renamePictureService=t,this.picturesList=[],this.multipleImgMode=!1}return e.prototype.ngOnInit=function(){this.setEvents()},e.prototype.onImgUploaded=function(e){var t=this;e.forEach((function(e){return t.picturesList.push(e)})),this.renamePictureService.setPicturesList(this.picturesList)},e.prototype.onToggleSelectImg=function(e){"window"!==this.stateDisplayed&&(this.picturesList[e].selected?(this.imgSelectionService.removeImgSelectedById(this.picturesList[e].id_file),this.picturesList[e].selected=!1):(this.imgSelectionService.addImgSelected(this.picturesList[e]),this.picturesList[e].selected=!0))},e.prototype.onRenamePicture=function(e){this.renamePictureService.onRenamePicture(e)},e.prototype.setEvents=function(){var e=this;this.imgSelectionChange=this.imgSelectionService.getImgSelectionChange().subscribe((function(t){var n,i,o=[];t.map((function(e){return o.push(e.id_file)}));try{for(var a=C(e.picturesList),s=a.next();!s.done;s=a.next()){var r=s.value;-1===o.indexOf(r.id_file)&&(r.selected=!1)}}catch(e){n={error:e}}finally{try{s&&!s.done&&(i=a.return)&&i.call(a)}finally{if(n)throw n.error}}}))},e.prototype.ngOnDestroy=function(){this.imgSelectionChange.unsubscribe()},e.ctorParameters=function(){return[{type:x},{type:N}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",String)],e.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"multipleImgMode",void 0),e=b([t.Component({selector:"upload-list",template:'<div class="upload-list" [ngClass]="{\'smallDisplay\': stateDisplayed === \'small\'}" [@easeInOut]="\'in\'">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]="\'native\'"\n        class="upload-list__scroll"\n        [ngClass]="{\n            \'upload-list__scroll--smallDisplay\': stateDisplayed === \'small\',\n            \'upload-list__scroll--window\': stateDisplayed === \'window\'}"\n    >\n        <div class="upload-list__box">\n            <div class="upload-list__box__container">\n                <div>\n                    <p class="mainColor">\n                        {{ picturesList? picturesList.length : \'\' }}\n                        <ng-container *ngIf="picturesList && picturesList.length > 1">{{ \'ImgManager.UploadList.imgSuccessImport\' | translate }}</ng-container>\n                        <ng-container *ngIf="picturesList && picturesList.length === 1">{{ \'ImgManager.UploadList.imgSuccessImportOne\' | translate }}</ng-container>\n                    </p>\n                    <div class="dropdown is-hoverable">\n                        <div class="dropdown-trigger">\n                            <i\n                                aria-haspopup="true" aria-controls="dropdown-menuInfoSeo"\n                                class="fas fa-info-circle">\n                            </i>\n                        </div>\n                        <div class="dropdown-menu dropDownShadow" id="dropdown-menuInfoSeo" role="menu">\n                          <div class="dropdown-content">\n                            <div class="dropdown-item">\n                              <p>{{ \'ImgManager.UploadList.seo.rezise\' | translate }}</p>\n                              <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                            <div class="dropdown-item">\n                                <p>{{ \'ImgManager.UploadList.seo.webp\' | translate }}</p>\n                                <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                            <div class="dropdown-item">\n                                <p>{{ \'ImgManager.UploadList.seo.cdn\' | translate }}</p>\n                                <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                            <div class="dropdown-item">\n                                <p>{{ \'ImgManager.UploadList.seo.lazyloading\' | translate }}</p>\n                                <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                          </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class="upload-list__box__cards">\n                <div class="upload-list__box__cards__card" *ngFor="let picture of picturesList; let index = index;">\n                    <img-card\n                        [picture]="picture"\n                        [stateDisplayed]="stateDisplayed"\n                        (toggleImgSelected)="onToggleSelectImg(index)"\n                        (pictureNameChange)="onRenamePicture($event)"\n                    ></img-card>\n                    <div class="upload-list__box__cards__card__btnBox">\n                        <button class="button success upload-list__box__cards__card__btnBox__btn"><i class="fal fa-check"></i></button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-scrollbar>\n</div>',animations:[A]}),_("design:paramtypes",[x,N])],e)}(),j=function(){function e(e,n){this.imgEventEditService=e,this.alertService=n,this.multipleImgMode=!1,this.listDisplayed=!1,this.imgManagerClosed=new t.EventEmitter,this.currentTab=new t.EventEmitter,this.tabActive="images-view",this.tabs=["img-upload","images-view","pexels-lib","img-edition"],this.editTab=!1,this.imgUpload=!1,this.snackBarNewVersionConfig={message:"",duration:3e3}}return e.prototype.ngOnInit=function(){var e=this;this.imgEventEditService.getImgToEditEventListner().subscribe((function(t){e.tabActive=e.tabs[3],e.imgToEdit=t,e.editTab=!0,e.currentTab.emit(e.tabs[3])}))},e.prototype.toggleTabs=function(e){this.imgUpload=!1,this.editTab=!1,this.tabActive=e},e.prototype.onImgUploaded=function(e){this.imgUpload=!0,this.imgUploadedComponent.onImgUploaded(e)},e.prototype.onEditClosed=function(e){this.editTab=!1,this.toggleTabs(this.tabs[1]),e&&this.alertService.openAlert(e),this.currentTab.emit("close")},e.prototype.onShowImgUploaded=function(){this.tabActive=this.tabs[1]},e.prototype.onImgManagerClosed=function(){this.imgManagerClosed.emit()},e.ctorParameters=function(){return[{type:T},{type:F}]},b([t.Input(),_("design:type",Boolean)],e.prototype,"multipleImgMode",void 0),b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"listDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgManagerClosed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"currentTab",void 0),b([t.ViewChild("imgUploadedImg"),_("design:type",B)],e.prototype,"imgUploadedComponent",void 0),e=b([t.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>\n\n  \x3c!-- Upload section --\x3e\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        [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  \x3c!-- Images section --\x3e\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        [fullSize]="true">\n      </images-view>\n\n    </div>\n  </div>\n\n  \x3c!-- Pexel img section --\x3e\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  \x3c!--Edition section --\x3e\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'}),_("design:paramtypes",[T,F])],e)}(),U=function(){function e(){this.onFileDropped=new t.EventEmitter,this.background="#fff",this.opacity="1"}return e.prototype.onDragOver=function(e){e.preventDefault(),e.stopPropagation(),this.background="#f5f5f5",this.opacity="0.8"},e.prototype.onDragLeave=function(e){e.preventDefault(),e.stopPropagation(),this.background="#fff",this.opacity="1"},e.prototype.ondrop=function(e){e.preventDefault(),e.stopPropagation(),this.background="#f5f5f5",this.opacity="1";var t=e.dataTransfer.files;t.length>0&&this.onFileDropped.emit(t)},b([t.Output(),_("design:type",Object)],e.prototype,"onFileDropped",void 0),b([t.HostBinding("style.background-color"),_("design:type",Object)],e.prototype,"background",void 0),b([t.HostBinding("style.opacity"),_("design:type",Object)],e.prototype,"opacity",void 0),b([t.HostListener("dragover",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],e.prototype,"onDragOver",null),b([t.HostListener("dragleave",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],e.prototype,"onDragLeave",null),b([t.HostListener("drop",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],e.prototype,"ondrop",null),e=b([t.Directive({selector:"[appDragDrop]"})],e)}(),V=function(){function e(e,t,n){var i=this;this.http=e,this.externalConfigService=t,this.translateService=n,this.languages={fr:"fr-FR",en:"en-US",it:"it-IT",es:"es-ES"},this.setLang(this.translateService.currentLang),this.translateService.onLangChange.subscribe((function(e){i.setLang(e.lang)}))}return e.prototype.setLang=function(e){this.lang=this.languages[e]?this.languages[e]:"fr-FR"},e.prototype.searchOnPexels=function(e,t,n){this.apiBaseUrl&&!this.apiKey||(this.apiBaseUrl=this.externalConfigService.getPexelsApiURL(),this.apiKey=this.externalConfigService.getPexelsApiToken());var o,a={headers:new i.HttpHeaders({Authorization:"Bearer "+this.apiKey})};if(e&&!/^\s*$/.test(e))o="/search?query="+e+"&per_page="+t+"&page="+n+"&locale="+this.lang;else{var s=this.externalConfigService.getShopCategory();o=s&&"other"!==s&&"btob"!==s?"/search?query="+s+"&per_page="+t+"&page="+n+"&locale=en-US":"/curated?per_page="+t+"&page="+n}return this.http.get(this.apiBaseUrl+o,a).pipe(r.map((function(e){return e})))},e.ctorParameters=function(){return[{type:i.HttpClient},{type:M},{type:a.TranslateService}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](i.HttpClient),t["ɵɵinject"](M),t["ɵɵinject"](a.TranslateService))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[i.HttpClient,M,a.TranslateService])],e)}(),H=o.trigger("listAnimation",[o.transition(":enter, * => 0, * => -1",[]),o.transition(":increment",[o.query(":enter",[o.style({opacity:0,transform:"translateY(100px)"}),o.stagger(50,[o.animate("500ms cubic-bezier(0.35, 0, 0.25, 1)",o.style({opacity:1,transform:"none"}))])],{optional:!0})])]),W=function(){function e(e,i,o,a){this.wzImgLibService=e,this.imgManager=i,this.alertService=o,this.translateService=a,this.searchValue="",this.disableSearch=!1,this.showImgUploaded=new t.EventEmitter,this.perPage=30,this.searchUpdated=new n.Subject,this.nbResult=0,this.currentPage=1,this.isLoading=!0,this.initComponent=!0,this.photosColumns=[],this.nbColumuns=6,this.responsiveColumns=[1250,1050,750,500],this.outerElement=null,this.uploadingImg="ImgManager.PexelLib.uploadingImg",this.untitled="ImgManager.PexelLib.untitled",this.successUploadPhoto="ImgManager.PexelLib.successImport",this.errorUploadPhoto="ImgManager.PexelLib.errorUploadPhoto",this.errorRetrievePhotos="ImgManager.PexelLib.errorRetrievePhotos",this.subs=[]}return Object.defineProperty(e.prototype,"content",{set:function(e){this.outerElement=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewInit=function(){this.oldSearchValue=this.searchValue,this.isLoading=!1,this.setNbColumnsToDisplayPhoto(),this.setPhotosColumns(),this.search()},e.prototype.setNbColumnsToDisplayPhoto=function(){var e=this,t=this.outerElement.nativeElement.offsetWidth;"window"!==this.stateDisplayed&&(this.nbColumuns=8),this.responsiveColumns.forEach((function(n){t<n&&e.nbColumuns--}))},e.prototype.onSearchNameChanged=function(){this.onSearchChange()},e.prototype.onBottomReached=function(){this.scrollHandler()},e.prototype.onSearchChange=function(){this.search()},e.prototype.search=function(){var e=this;if(!(this.isLoading||(this.searchValue!==this.oldSearchValue&&this.resetSearch(),this.nbResult&&this.nbResult<=(this.currentPage-1)*this.perPage))){this.isLoading=!0;var t=this.wzImgLibService.searchOnPexels(this.searchValue,this.perPage,this.currentPage).subscribe((function(t){e.wzImgLibDto=t,e.nbResult=e.wzImgLibDto.total_results,e.nbResult&&t.photos.forEach((function(t){var n=e.getBestColumn(),i=t.height/t.width*1e3;e.photosColumns[n].height+=i,e.photosColumns[n].photos.push(t)})),e.isLoading=!1,e.initComponent=!1}),(function(t){e.isLoading=!1,e.initComponent=!1,e.alertService.openAlert(e.errorRetrievePhotos)}));this.subs.push(t)}},e.prototype.scrollHandler=function(){if(!this.isLoading){var e=this.getBestColumn(),t=this.photosColumns[e].photos[this.photosColumns[e].photos.length-1];(t?document.querySelector('img[src="'+t.src.medium+'"]'):null)&&(this.isLoading||(this.currentPage+=1,this.search()))}},e.prototype.setPhotosColumns=function(){for(var e=0;e<this.nbColumuns;e++){this.photosColumns.push({height:0,photos:[]})}},e.prototype.getBestColumn=function(){var e={index:0,height:this.photosColumns[0].height};return this.photosColumns.forEach((function(t,n){e.height>t.height&&(e.index=n,e.height=t.height)})),e.index},e.prototype.resetSearch=function(){this.oldSearchValue=this.searchValue,this.photosColumns=[],this.currentPage=1,this.setPhotosColumns()},e.prototype.uploadPhoto=function(e,t){var n=this;e.uploading=!0;var i=this.imgManager.uploadFileByUrl(t,this.translateService.instant(this.untitled)).subscribe((function(t){e.uploading=!1,e.uploaded=!0,n.alertService.openAlert(n.successUploadPhoto)}),(function(t){e.uploading=!1,406===t.error.code&&t.error.message?n.alertService.openAlertWithBackendRespons(n.errorUploadPhoto,t.error.message):n.alertService.openAlert(n.errorUploadPhoto)}));this.alertService.openAlert(this.uploadingImg),this.subs.push(i)},e.prototype.ngOnDestroy=function(){this.subs.forEach((function(e){return e.unsubscribe()}))},e.ctorParameters=function(){return[{type:V},{type:D},{type:F},{type:a.TranslateService}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",String)],e.prototype,"searchValue",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disableSearch",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"showImgUploaded",void 0),b([t.ViewChild("outerElement"),_("design:type",t.ElementRef),_("design:paramtypes",[t.ElementRef])],e.prototype,"content",null),e=b([t.Component({selector:"pexels-lib",template:'<div class="pexels-lib" #outerElement [@easeInOut]="\'in\'">\n  <ng-scrollbar\n        #scrollable\n        reachedOffset="50"\n        [visibility]="\'hover\'"\n        class="pexels-lib__scroll"\n        [ngClass]="{\'pexels-lib__scroll--smallDisplay\': stateDisplayed === \'small\'}"\n        (reachedBottom)="onBottomReached()"\n  >\n      <div\n        *ngIf="!disableSearch"\n        class="pexels-lib__search"\n        [ngClass]="{\'pexels-lib__search--smallDisplay\': stateDisplayed === \'small\'}"\n        >\n        <wz-input-search\n          [(ngModel)]="searchValue"\n          [placeholder]="\'ImgManager.SearchBar.placeholder\' | translate"\n          (changeDebounced)="onSearchNameChanged()"\n          [smallPadding]="stateDisplayed === \'small\'">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf="!initComponent" class="pexels-lib__wrapper">\n        <p *ngIf="nbResult" class="pexels-lib__wrapper__result-nb">{{ \'ImgManager.PexelLib.nbImgFound\' | translate }} : {{ nbResult }}</p>\n\n        <div class="pexels-lib__wrapper__result">\n\n          <div *ngFor="let photosColumn of photosColumns; let indexCol = index;" class="pexels-lib__wrapper__result__column"  [@listAnimation]="photosColumn.photos.length">\n            <div *ngFor="let photo of photosColumn.photos; let indexPhoto = index;" class="pexels-lib__wrapper__result__column__element">\n\n              <img [alt]="photo.src.medium" [src]="photo.src.medium"\n                  class="pexels-lib__wrapper__result__column__element__img"/>\n\n              <div class="pexels-lib__wrapper__result__column__element__wrapper">\n                <span class="pexels-lib__wrapper__result__column__element__wrapper__infos">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class="dropdown is-up" [ngClass]="{\'is-hoverable\': !photo.uploading}">\n                  <div class="dropdown-trigger">\n                    <button\n                      class="button pexels-lib__wrapper__result__column__element__wrapper__button"\n                      aria-haspopup="true"\n                      aria-controls="dropdown-menu">\n\n                      <div *ngIf="!photo.uploading" (click)="uploadPhoto(photo, photo.src.large2x)">\n                        <span>{{ \'ImgManager.PexelLib.import\' | translate }}</span>\n                        <span class="icon is-small">\n                          <i class="fas fa-angle-up" aria-hidden="true"></i>\n                        </span>\n                        <ng-container *ngIf="photo.uploaded">\n                          &nbsp;<i class="fal fa-check"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf="photo.uploading">\n                        {{ \'ImgManager.PexelLib.importation\' | translate }}\n                        <span btnLoadingAnim class="btnLoadingAnnimation"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class="dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown" id="dropdown-menu" role="menu">\n                    <div class="dropdown-content">\n                      <div class="dropdown-content__wrapper">\n                        <div class="dropdown-item" (click)="uploadPhoto(photo, photo.src.portrait)">\n                          <p>{{ \'ImgManager.PexelLib.portrait\' | translate }}</p>\n                          <i class="fal fa-check iPortrait"></i>\n                        </div>\n                        <div class="dropdown-item" (click)="uploadPhoto(photo, photo.src.landscape)">\n                          <p>{{ \'ImgManager.PexelLib.landscape\' | translate }}</p>\n                          <i class="fal fa-check iLandscape"></i>\n                        </div>\n                        <div class="dropdown-item" (click)="uploadPhoto(photo, photo.src.large2x)">\n                          <p>{{ \'ImgManager.PexelLib.original\' | translate }}</p>\n                          <i class="fal fa-check iOriginal"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf="isLoading">\n        <wz-loader></wz-loader>\n      </ng-container>\n      <div\n        *ngIf="!isLoading && !nbResult"\n        class="pexels-lib__alert"\n        [@easeInOut]="\'in\'">\n          <wz-alert [warning]="true">\n            {{ \'ImgManager.PexelLib.noResult\' | translate }}\n          </wz-alert>\n      </div>\n\n  </ng-scrollbar>\n</div>\n',animations:[A,H]}),_("design:paramtypes",[V,D,F,a.TranslateService])],e)}(),G=function(){function e(e,n,i,o,a,s,r,l){this.imgManager=e,this.imgSelectionService=n,this.http=i,this.imgCDNService=o,this.imgEventCardService=a,this.alertService=s,this.translateService=r,this.externalService=l,this.picturesList=[],this.picturesListChange=new t.EventEmitter,this.tableFilters={sort:void 0,order:void 0,searchValue:"",totalItems:0,itemsPerPage:30,currentPage:1},this.displayPexelsResults=!1,this.disable=!1,this.disableChange=new t.EventEmitter,this.filtersChange=new t.EventEmitter,this.pictureNameChange=new t.EventEmitter,this.isLoading=!1,this.errorRemoveImg="ImgManager.ImgList.errorRemoveImg",this.errorAlreadyUsedImg="ImgManager.ImgList.errorAlreadyUsed",this.fakeImgRoute=this.externalService.getRouteAssets()+"img/fake.png"}return e.prototype.onToggleAllCheckBoxRow=function(e){this.picturesList.forEach((function(t){t.delSelected=e})),this._pictureListeChange()},e.prototype.onToggleDelSelection=function(e){this.disable||(this.picturesList[e].delSelected=!this.picturesList[e].delSelected,this._pictureListeChange())},e.prototype.onFiltersChange=function(){this.filtersChange.emit()},e.prototype.onEdit=function(e){this.imgEventCardService.emitImgToEdit(e)},e.prototype.onToggleSelectImg=function(e){this.disable||"window"===this.stateDisplayed||(this.picturesList[e].selected?(this.imgSelectionService.removeImgSelectedById(this.picturesList[e].id_file),this.picturesList[e].selected=!1):(this.imgSelectionService.addImgSelected(this.picturesList[e]),this.picturesList[e].selected=!0))},e.prototype.onRemoveImg=function(e){var t=this;e.deleted=!0,this.imgManager.removeImg(e.id_file).subscribe((function(n){t.imgEventCardService.emitImgRemoved(e.id_file),t.imgSelectionService.removeImgSelectedById(e.id_file)}),(function(n){var i=409===n.status?t.errorAlreadyUsedImg:t.errorRemoveImg;e.deleted=!1,t.alertService.openAlert(i)}))},e.prototype.onPictureNotLoading=function(e){e.target.src=this.fakeImgRoute},e.prototype.onDownloadImg=function(e,t){var n=this;this.http.get(this.getRAWImgRoute(t),{responseType:"blob"}).subscribe((function(t){var i=URL.createObjectURL(t);n.downloadUrl(i,e),URL.revokeObjectURL(i)}))},e.prototype.onNameChange=function(e){this.pictureNameChange.emit({id:e,previousName:this.previousName})},e.prototype.getRAWImgRoute=function(e){return this.imgCDNService.getUrlImg("raw")+e},e.prototype._pictureListeChange=function(){this.picturesListChange.emit()},e.prototype.downloadUrl=function(e,t){var n=document.createElement("a");n.href=e,n.download=t,n.click()},e.prototype.ngDestroy=function(){this.getDataAPISub&&this.getDataAPISub.unsubscribe()},e.ctorParameters=function(){return[{type:D},{type:x},{type:i.HttpClient},{type:E},{type:T},{type:F},{type:a.TranslateService},{type:M}]},b([t.Input(),_("design:type",Array)],e.prototype,"picturesList",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"picturesListChange",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"tableFilters",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"displayPexelsResults",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disable",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"disableChange",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"filtersChange",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"pictureNameChange",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"isLoading",void 0),b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),e=b([t.Directive(),_("design:paramtypes",[D,x,i.HttpClient,E,T,F,a.TranslateService,M])],e)}(),$=function(e){function n(n,i,o,a,s,r,l,p){var c=e.call(this,n,i,o,a,s,r,l,p)||this;return c.focusInput=!1,c.toggleImgSelected=new t.EventEmitter,c.isUploadSection=!1,c.activeConfirmDelete=!1,c}return v(n,e),n.prototype.ngOnInit=function(){this.isUploadSection="img-upload"===this.tabDisplayed},n.prototype.onToggleImgSelected=function(){this.toggleImgSelected.next()},n.ctorParameters=function(){return[{type:D},{type:x},{type:i.HttpClient},{type:E},{type:T},{type:F},{type:a.TranslateService},{type:M}]},b([t.Input(),_("design:type",String)],n.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],n.prototype,"fullSize",void 0),b([t.Input(),_("design:type",Object)],n.prototype,"picture",void 0),b([t.Input(),_("design:type",Number)],n.prototype,"index",void 0),b([t.Output(),_("design:type",t.EventEmitter)],n.prototype,"toggleImgSelected",void 0),n=b([t.Component({selector:"img-card",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 class="size"><i class="fal fa-image-polaroid"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <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 class="edit" (click)="onEdit(picture)"><i class="far fa-crop-alt"></i><span>{{ \'ImgManager.ImgCard.edit\' | translate }}</span></button>\n              <button class="deleted" (click)="activeConfirmDelete = true;"><i class="fal fa-times"></i><span>{{ \'ImgManager.ImgCard.del\' | translate }}</span></button>\n              <button class="selected" (click)="onToggleImgSelected()" *ngIf="stateDisplayed !== \'window\'">\n                  <i *ngIf="!picture.selected" class="fal fa-square"></i>\n                  <i *ngIf="picture.selected" class="fas fa-check-square checked"></i>\n                  <span>{{ \'ImgManager.ImgCard.select\' | translate }}</span>\n              </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          (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',animations:[A]}),_("design:paramtypes",[D,x,i.HttpClient,E,T,F,a.TranslateService,M])],n)}(G),q=function(){function e(e){this.imgManagerService=e,this.editClosed=new t.EventEmitter,this.isLoading=!1,this.isImgModified=!1,this.isNameModified=!1,this.currentCroppedImage="",this.msgFailSave="ImgManager.ImgEditor.msgFailSave",this.msgFailLoad="ImgManager.ImgEditor.msgFailLoad",this.msgSuccessEdit="Les modifications de l'image ont bien été enregistrées."}return e.prototype.ngOnInit=function(){this.previousName=this.imgToEdit.display_name},e.prototype.onSave=function(){var e=this;if(!this.isLoading){this.isLoading=!0;var t=this.imgManagerService.replaceImg(this.currentCroppedImage,this.imgToEdit.id_file),n=this.imgManagerService.changeImgName(this.imgToEdit.display_name,this.imgToEdit.id_file);this.isImgModified&&this.isNameModified?this.ranameAndReplaceImg(n,t):this.isImgModified?t.subscribe((function(t){e.isLoading=!1,e.onEditClosed(e.msgSuccessEdit)}),(function(t){e.isLoading=!1,e.currentCroppedImage="",e.onEditClosed(e.msgFailSave)})):(this.isNameModified&&n.subscribe((function(t){e.isLoading=!1,e.previousName=e.imgToEdit.display_name,e.onEditClosed(e.msgSuccessEdit)}),(function(t){e.isLoading=!1,e.imgToEdit.display_name=e.previousName,e.onEditClosed(e.msgFailSave)})),this.isNameModified=!1)}},e.prototype.onEditClosed=function(e){this.editClosed.emit(e)},e.prototype.onRestartEdit=function(){this.isImgModified=!1,this.isNameModified=!1,this.imgToEdit.display_name=this.previousName},e.prototype.onCancel=function(){this.onEditClosed("")},e.prototype.onImgCropped=function(e){this.currentCroppedImage=e},e.prototype.ranameAndReplaceImg=function(e,t){var n=this;e.subscribe((function(e){t.subscribe((function(e){n.onEditClosed(n.msgSuccessEdit)}),(function(e){n.onEditClosed(n.msgFailSave)}))}),(function(e){n.onEditClosed(n.msgFailSave)}))},e.ctorParameters=function(){return[{type:D}]},b([t.Input(),_("design:type",Object)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"imgToEdit",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"editClosed",void 0),e=b([t.Component({selector:"img-editor",template:'<div class="img-editor" [@easeInOut]="\'in\'">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]="\'native\'"\n        class="img-editor__scroll"\n        [ngClass]="{\n            \'img-editor__scroll--full\': stateDisplayed === \'full\',\n            \'img-editor__scroll--smallDisplay\': stateDisplayed === \'small\',\n            \'img-editor__scroll--window\': stateDisplayed === \'window\'\n        }"\n    >\n    <div class="columns">\n        \x3c!-- Left section --\x3e\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            \x3c!-- Button Action Section --\x3e\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"\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        \x3c!-- Right section --\x3e\n        <div class="column img-editor__container">\n            <cropper\n              [imgToEdit]="imgToEdit"\n              [(isImgModified)]="isImgModified"\n              (currentCroppedImageChange)="onImgCropped($event)"\n              (editClosed)="onEditClosed($event)">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n',animations:[A]}),_("design:paramtypes",[D])],e)}(),K=function(){function e(e,n,i,o,a,s){this.canvaService=e,this.imgManager=n,this.wzImgEventService=i,this.translateService=o,this.alertService=a,this.renderer=s,this.showImgUploaded=new t.EventEmitter,this.imgLoading=!1,this.availableFormat={"ImgManager.CanvaBtn.smallSquare":{width:500,height:500},"ImgManager.CanvaBtn.mediumSquare":{width:1e3,height:1e3},"ImgManager.CanvaBtn.bigSquare":{width:2500,height:2500}},this.openDropDownMenu=!1,this.subs=[],this.uploadingImg="ImgManager.CanvaBtn.uploadingImg",this.successUploadPhoto="ImgManager.CanvaBtn.successImport",this.errorUploadCanvaImg="ImgManager.CanvaBtn.errorUploadCanvaImg",this.errorRenameCanvaImg="ImgManager.CanvaBtn.errorRenameCanvaImg"}return e.prototype.ngOnInit=function(){this.canvaLogoRouteAssets=this.canvaService.getCanvaLogo(),this.listenCanvaExpectedSize()},e.prototype.listenCanvaExpectedSize=function(){var e=this,t=this.canvaService.bindEventExepectedImgSizeChange().subscribe((function(t){t?(e.expectedWidth=parseInt(t.image_width,10),e.expectedHeight=parseInt(t.image_height,10)):(e.expectedWidth=void 0,e.expectedHeight=void 0)}));this.subs.push(t)},e.prototype.onOpenCanva=function(e,t){var n=this;if(!this.imgLoading){var i=this.canvaService.getCanvaApi().subscribe((function(i){n.canvaApi=i,n.addOverflowBody(),n.createDesign(e,t)}));this.subs.push(i)}},e.prototype.createDesign=function(e,t){var n=this,i={type:"EtsyShopIcon",dimensions:{units:"px",width:e||void 0,height:t||void 0},publishLabel:this.translateService.instant("ImgManager.CanvaBtn.publish")};this.canvaApi.createDesign({design:i,onDesignPublish:function(e){var t=e.exportUrl,i=e.designTitle;return n.designPublished(t,i)},onDesignClose:function(){n.removeOverflowBody()}})},e.prototype.designPublished=function(e,t){var n=this;this.alertService.openAlert(this.uploadingImg),this.imgLoading=!0;var i=this.imgManager.uploadFileByUrl(e,t).subscribe((function(e){n.imgLoading=!1,n.removeOverflowBody(),n.wzImgEventService.emitImgAdded(e.id_file),n.alertService.openAlert(n.successUploadPhoto)}),(function(e){n.imgLoading=!1,n.removeOverflowBody(),406===e.error.code&&e.error.message?n.alertService.openAlertWithBackendRespons(n.errorUploadCanvaImg,e.error.message):n.alertService.openAlert(n.errorUploadCanvaImg)}));this.subs.push(i)},e.prototype.addOverflowBody=function(){this.renderer.addClass(document.body,"ovh-canva")},e.prototype.removeOverflowBody=function(){this.renderer.removeClass(document.body,"ovh-canva")},e.prototype.ngOnDestroy=function(){this.subs.forEach((function(e){return e.unsubscribe()}))},e.ctorParameters=function(){return[{type:R},{type:D},{type:T},{type:a.TranslateService},{type:F},{type:t.Renderer2}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"showImgUploaded",void 0),e=b([t.Component({selector:"canva-btn",template:'<div class="canva dropdown is-right is-hoverable"\n     wzAutoHide (clickOutside)="openDropDownMenu = false;"\n    [ngClass]="{\'is-up\': stateDisplayed === \'small\', \'noTooltip\': stateDisplayed !== \'small\'}"\n    >\n    <div class="dropdown-trigger">\n        <div\n          class="button canva-btn"\n          aria-controls="dropdown-menuCanva"\n          (click)="openDropDownMenu = true;"\n          >\n            <span>{{\'ImgManager.CanvaBtn.createImg\' | translate}}</span>\n            <img [src]="canvaLogoRouteAssets" class="canva-btn__logo">\n\n            <span btnLoadingAnim class="btnLoadingAnnimation" *ngIf="imgLoading"></span>\n        </div>\n    </div>\n    <div\n      class="dropdown-menu dropDownShadow"\n      [ngClass]="{\'displayDropDownMenu\': openDropDownMenu }"\n      id="dropdown-menuCanva"\n      role="menu">\n        <ng-scrollbar\n            #scrollable\n            [visibility]="\'hover\'"\n            class="smallScroll"\n            >\n            <div class="dropdown-content">\n                <div class="dropdownTitle">\n                    <p>{{\'ImgManager.CanvaBtn.createImg.title\' | translate}}</p>\n                </div>\n\n                <div class="infoItem">\n                    <p>{{\'ImgManager.CanvaBtn.info\' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf="expectedWidth && expectedHeight"\n                      class="dropdown-item-wrapper"\n                      >\n                        <div class="dropdown-item expectedSizes" (click)="onOpenCanva(expectedWidth, expectedHeight)">\n                            <p>{{\'ImgManager.CanvaBtn.recommanded\' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor="let format of availableFormat| keyvalue"\n                  class="dropdown-item-wrapper">\n                    <div\n                      (click)="onOpenCanva(format.value.width, format.value.height)"\n                      class="dropdown-item">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n'}),_("design:paramtypes",[R,D,T,a.TranslateService,F,t.Renderer2])],e)}(),Q=function(){function e(e){this.imgSelectionService=e,this.imgManagerClosed=new t.EventEmitter,this.imgSelectedList=[],this.removingAll=!1,this.cancellingAll=!1,this.importingAll=!1,this.dragStart=!1,this.isLoading=!1,this.trashPositionIndex=0,this.trashPositionLeft="-5px"}return e.prototype.ngOnInit=function(){var e=this;this.getImgSelected(),this.imgSelectionService.getImgListLoadingEventListner().subscribe((function(t){e.isLoading=t}))},e.prototype.init=function(){this.removingAll=!1,this.cancellingAll=!1,this.importingAll=!1},e.prototype.getImgSelected=function(){this.imgSelectedList=this.imgSelectionService.getImgSelection()},e.prototype.removeImg=function(e){this.imgSelectionService.removeImgSelectedByIndex(e)},e.prototype.drop=function(e){e.previousIndex!==e.currentIndex&&this.imgSelectionService.moveImgOrder(e)},e.prototype.removeImgFromSelection=function(e){this.imgSelectionService.removeImgSelectedByIndex(e.previousIndex)},e.ctorParameters=function(){return[{type:x}]},b([t.Input(),_("design:type",String)],e.prototype,"tabDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgManagerClosed",void 0),e=b([t.Component({selector:"img-selection",template:'<div\n  class="trash"\n  cdkDropList\n  #unSelectList="cdkDropList"\n  (cdkDropListDropped)="removeImgFromSelection($event)">\n    <p>{{\'ImgManager.ImgSelection.unselect\' | translate}}</p>\n</div>\n\n<div\n class="img-selection"\n [ngClass]="{\'img-selection--visible\' : imgSelectedList && imgSelectedList.length}"\n *ngIf="!isLoading">\n\n    <div\n      cdkDropList\n      #selectionList="cdkDropList"\n      cdkDropListOrientation="horizontal"\n      class="list_img_selection"\n      (cdkDropListDropped)="drop($event)"\n      [cdkDropListConnectedTo]="[unSelectList]"\n      >\n\n        <div\n          class="img_box"\n          *ngFor="let picture of imgSelectedList; let index = index"\n          cdkDrag\n          (cdkDragStarted)="dragStart = true;"\n          (cdkDragEnded)="dragStart = false;"\n          >\n\n          <img\n            *ngIf="index < 1"\n            class="drag__img"\n            [src]="picture.file_name | imgSrc : \'400\'"\n            [title]="picture.display_name"\n          />\n\n          <img\n            *ngIf="index > 0"\n            class="drag__img"\n            [src]="picture.file_name | imgSrc : \'200\'"\n            [title]="picture.display_name"\n          />\n\n          <div class="delete-btn" (click)="removeImg(index)">{{\'ImgManager.ImgSelection.deleteImg\' | translate}}</div>\n\n          <span class="drag__tooltips">{{\'ImgManager.ImgSelection.tooltips\' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n\x3c!-- Loader --\x3e\n<ng-container *ngIf="isLoading">\n  <wz-loader></wz-loader>\n</ng-container>\n'}),_("design:paramtypes",[x])],e)}(),J=function(){function e(e){this.currentLoading=0,this.interval=null,this.element=e,this.launchLoading()}return e.prototype.launchLoading=function(){var e=this;null===this.interval&&(this.currentLoading=10,this.element.nativeElement.style.width=this.currentLoading+"%",this.interval=setInterval((function(){e.currentLoading<80&&(e.currentLoading+=Math.floor(15*Math.random()),e.element.nativeElement.style.width=e.currentLoading+"%"),e.currentLoading>=80&&e.currentLoading<95&&(e.currentLoading+=Math.floor(2*Math.random()),e.element.nativeElement.style.width=e.currentLoading+"%")}),70))},e.prototype.ngOnDestroy=function(){this.interval&&(clearInterval(this.interval),this.interval=null)},e.ctorParameters=function(){return[{type:t.ElementRef}]},e=b([t.Directive({selector:"[btnLoadingAnim]"}),_("design:paramtypes",[t.ElementRef])],e)}(),Y=function(){function e(e,n){this._elementRef=e,this.domService=n,this.forceOn=null,this.clickOutside=new t.EventEmitter}return e.prototype.ngAfterViewInit=function(){var e=this;this.domService.documentEvent().subscribe((function(t){var n=e._elementRef.nativeElement.contains(t),i=t.getAttribute("class");if(n||null!==i&&i.includes(e.triggerElement)||e.clickOutside.emit(null),null!=e.forceOn&&null!==i){var o=!0;e.forceOn.forEach((function(e){i.includes(e)||(o=!1)})),o&&e.clickOutside.emit(null)}}))},e.ctorParameters=function(){return[{type:t.ElementRef},{type:k}]},b([t.Input(),_("design:type",String)],e.prototype,"triggerElement",void 0),b([t.Input(),_("design:type",Array)],e.prototype,"forceOn",void 0),b([t.Output("clickOutside"),_("design:type",t.EventEmitter)],e.prototype,"clickOutside",void 0),e=b([t.Directive({selector:"[wzAutoHide]"}),_("design:paramtypes",[t.ElementRef,k])],e)}(),Z=function(){function e(){this.copied=new t.EventEmitter}return e.prototype.onClick=function(e){var t=this;if(e.preventDefault(),this.payload){var n=function(e){(e.clipboardData||window.clipboardData).setData("text",t.payload.toString()),e.preventDefault(),t.copied.emit(t.payload)};document.addEventListener("copy",n,!1),document.execCommand("copy"),document.removeEventListener("copy",n,!1)}},b([t.Input("copy-clipboard"),_("design:type",String)],e.prototype,"payload",void 0),b([t.Output("copied"),_("design:type",t.EventEmitter)],e.prototype,"copied",void 0),b([t.HostListener("click",["$event"]),_("design:type",Function),_("design:paramtypes",[MouseEvent]),_("design:returntype",void 0)],e.prototype,"onClick",null),e=b([t.Directive({selector:"[copy-clipboard]"})],e)}(),X=function(){function e(){this.disable=!1}return e.prototype.ngOnInit=function(){},b([t.Input(),_("design:type",String)],e.prototype,"dropDownMenuClass",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disable",void 0),e=b([t.Component({selector:"dropdown",template:'<div class="dropdown dropdownWizi" [ngClass]="{\'is-hoverable\': !disable}">\n    <div class="dropdown-trigger">\n\n        \x3c!-- Label --\x3e\n        <ng-content select="[label]"></ng-content>\n\n    </div>\n    <div class="dropdown-menu" [ngClass]="dropDownMenuClass" role="menu">\n        <div class="dropdown-content">\n\n            \x3c!-- Content --\x3e\n            <ng-content select="[item]"></ng-content>\n\n        </div>\n    </div>\n</div>'}),_("design:paramtypes",[])],e)}(),ee=function(){function e(e){this.alertService=e,this._isNameModified=!1,this.isNameModifiedChange=new t.EventEmitter,this.msgCopyToClipBoard="ImgManager.ImgEditor.copytoClipBoard"}return Object.defineProperty(e.prototype,"isNameModified",{get:function(){return this._isNameModified},set:function(e){this._isNameModified=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.init()},e.prototype.init=function(){this.imgName=this.imgToEdit.display_name},e.prototype.getFileSize=function(){return this.imgToEdit?Math.round(parseInt(this.imgToEdit.size)/1e3):"-"},e.prototype.copyToClipBoard=function(e){this.alertService.openAlert(this.msgCopyToClipBoard)},e.prototype.onNameChange=function(){this.isNameModifiedChange.emit(!0)},e.ctorParameters=function(){return[{type:F}]},b([t.Input(),_("design:type",Object)],e.prototype,"imgToEdit",void 0),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"isNameModified",null),b([t.Output(),_("design:type",Object)],e.prototype,"isNameModifiedChange",void 0),e=b([t.Component({selector:"info-section",template:'\n\x3c!-- Img properties --\x3e\n<div class="img-editor__infoSection__propertyEditable">\n    <p class="mainColor">\n        {{ \'ImgManager.UploadList.properties.imgName\' | translate }}\n        <span class="img-editor__infoSection__propertyEditable__tooltips" [nwbToolTip]="\'ImgManager.ImgEditor.NameInfo\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></span>\n    </p>\n    <input\n      type="text"\n      class="img-editor__infoSection__propertyEditable__input"\n      placeholder="{{\'ImgManager.ImgEditor.nameEx\' | translate}} "\n      [(ngModel)]="imgToEdit.display_name"\n      debounceKeyUp\n      [debounceTime]="500"\n      (onEventChange)="onNameChange()">\n</div>\n<div class="img-editor__infoSection__propertyEditable">\n    <p class="mainColor">{{ \'ImgManager.UploadList.properties.imgURL\' | translate }}</p>\n    <button [copy-clipboard]="imgToEdit.file_name | imgSrc : \'raw\'" (copied)="copyToClipBoard($event)" ><span  class="img-editor__infoSection__propertyEditable__span">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class="far fa-copy"></i></button>\n</div>\n<div class="img-editor__infoSection__property">\n    <p class="mainColor">{{ \'ImgManager.UploadList.properties.imgSize\' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class="img-editor__infoSection__property">\n    <p class="mainColor">{{ \'ImgManager.UploadList.properties.imgWeight\' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n\x3c!-- SEO info --\x3e\n\n<span class="img-editor__infoSection__divider"></span>\n\n<div class="img-editor__infoSection__titleSEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.title\' | translate }}</p>\n</div>\n\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.rezise\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n    <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.reziseTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n</div>\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.webp\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n  <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.webpTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n</div>\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.cdn\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n  <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.cdnTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n\n</div>\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.lazyloading\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n    <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.lazyloadingTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n</div>\n'}),_("design:paramtypes",[F])],e)}(),te=o.trigger("insertRemoveAnnim",[o.transition(":enter",[o.style({opacity:0}),o.animate("0.5s ease-in-out",o.style({opacity:1}))])]),ne=function(){function e(e){this.imgCDNService=e,this._isImgModified=!1,this.isImgModifiedChange=new t.EventEmitter,this.editClosed=new t.EventEmitter,this.currentCroppedImageChange=new t.EventEmitter,this.msgFailLoad="ImgManager.ImgEditor.msgFailLoad",this.isNameModified=!1,this.isCropperReady=!1,this.currentCroppedImage="",this.isCropped=!1,this.isLoading=!1,this.isImgCropped=!1,this.isImgCroppedInitilized=!1,this.imageChangedEvent="",this.croppedImage="",this.canvasRotation=0,this.rotation=0,this.scale=1,this.showCropper=!1,this.containWithinAspectRatio=!1,this.transform={},this.resolutionConfig=[{label:"ImgManager.ImgEditor.config.origin",config:{maintainAspectRatio:!0}},{label:"ImgManager.ImgEditor.config.free",config:{maintainAspectRatio:!1},active:!0},{label:"ImgManager.ImgEditor.config.square",config:{maintainAspectRatio:!0,aspectRatio:1}},{label:"ImgManager.ImgEditor.config.Portrait",config:{maintainAspectRatio:!0,aspectRatio:.75}},{label:"ImgManager.ImgEditor.config.landscape",config:{maintainAspectRatio:!0,aspectRatio:5/3}}],this.rotationConfig=[{label:"ImgManager.ImgEditor.config.schedule",icon:"fal fa-redo-alt",method:"rotateRight",active:!0},{label:"ImgManager.ImgEditor.config.AntiSchedule",icon:"fal fa-undo-alt",method:"rotateLeft"},{label:"ImgManager.ImgEditor.config.flipVert",icon:"fal fa-sort-alt",method:"flipVertical"},{label:"ImgManager.ImgEditor.config.flipHoriz",icon:"fal fa-exchange-alt",method:"flipHorizontal"}],this.zoomConfig=[{label:"ImgManager.ImgEditor.config.zoom",icon:"fal fa-search-plus",method:"zoomIn",active:!0},{label:"ImgManager.ImgEditor.config.dezoom",icon:"fal fa-search-minus",method:"zoomOut"}],this.imgCropperConfig={maintainAspectRatio:!1,aspectRatio:void 0}}return Object.defineProperty(e.prototype,"isImgModified",{get:function(){return this._isImgModified},set:function(e){this._isImgModified=e,e||this.restartEdit()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.init()},e.prototype.init=function(){this.imgRoute=this.getRAWImgRoute(),this.imgType=this.getImgType(),this.croppedImage=null,this.setDefautAspectRatio()},e.prototype.getRAWImgRoute=function(){return this.imgCDNService.getUrlImg("raw")+this.imgToEdit.file_name},e.prototype.getImgType=function(){return this.imgToEdit.file_name?this.imgToEdit.file_name.split(".").pop():void 0},e.prototype.setDefautAspectRatio=function(){var e=parseInt(this.imgToEdit.raw_height),t=parseInt(this.imgToEdit.raw_width);this.defaultAspectRatio=e/t,this.resolutionConfig[0].config.aspectRatio=this.defaultAspectRatio,this.imgCropperConfig.aspectRatio=this.defaultAspectRatio},e.prototype.onEditClosed=function(e){this.editClosed.emit(e)},e.prototype.onRestart=function(){this.isImgModifiedChange.emit(!1)},e.prototype.restartEdit=function(){this.init(),this.resetConfCropper()},e.prototype.onImgModified=function(){this.isImgModified=!0,this.isImgModifiedChange.emit(!0)},e.prototype.fileChangeEvent=function(e){this.imageChangedEvent=e},e.prototype.imageCropped=function(e){this.detectImgCropperChange(),this.currentCroppedImage=e.base64,this.currentCroppedImageChange.emit(this.currentCroppedImage)},e.prototype.imageLoaded=function(){this.showCropper=!0},e.prototype.cropperReady=function(){this.isCropperReady=!0},e.prototype.loadImageFailed=function(){this.onEditClosed(this.msgFailLoad)},e.prototype.changeResolutionSize=function(e){this.setActiveItem(this.resolutionConfig,e);var t=this.resolutionConfig[e].config;this.setCropperProperties(t)},e.prototype.confirmCrop=function(){this.imgRoute=null,this.croppedImage=this.currentCroppedImage,this.isImgCropped=!1,this.isImgCroppedInitilized=!1,this.resetConfCropper(),this.onImgModified()},e.prototype.resetConfCropper=function(){this.scale=1,this.rotation=0,this.canvasRotation=0,this.transform={}},e.prototype.setActiveItem=function(e,t){e.forEach((function(e,n){e.active=n===t}))},e.prototype.setCropperProperties=function(e){for(var t in e)this.imgCropperConfig[t]=e[t]},e.prototype.detectImgCropperChange=function(){this.isImgCropped=this.isImgCroppedInitilized,this.isImgCroppedInitilized=!0},e.prototype.rotateLeft=function(){this.canvasRotation--,this.flipAfterRotate(),this.onImgModified()},e.prototype.rotateRight=function(){this.canvasRotation++,this.flipAfterRotate(),this.onImgModified()},e.prototype.flipHorizontal=function(){this.transform=y(y({},this.transform),{flipH:!this.transform.flipH}),this.onImgModified()},e.prototype.flipVertical=function(){this.transform=y(y({},this.transform),{flipV:!this.transform.flipV}),this.onImgModified()},e.prototype.flipAfterRotate=function(){var e=this.transform.flipH,t=this.transform.flipV;this.transform=y(y({},this.transform),{flipH:t,flipV:e})},e.prototype.zoomOut=function(){this.scale-=this.scale<.2?0:.1,this.transform=y(y({},this.transform),{scale:this.scale}),this.onImgModified()},e.prototype.zoomIn=function(){this.scale+=.1,this.transform=y(y({},this.transform),{scale:this.scale}),this.onImgModified()},e.prototype.applyMethod=function(e){this[e]()},e.ctorParameters=function(){return[{type:E}]},b([t.Input(),_("design:type",Object)],e.prototype,"imgToEdit",void 0),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"isImgModified",null),b([t.Output(),_("design:type",Object)],e.prototype,"isImgModifiedChange",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"editClosed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"currentCroppedImageChange",void 0),e=b([t.Component({selector:"cropper",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    \x3c!-- Resolution --\x3e\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    \x3c!-- Zoom --\x3e\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    \x3c!-- Rotation --\x3e\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',animations:[te]}),_("design:paramtypes",[E])],e)}(),ie=function(){function e(e,t,i,o,a,s){this.imgManager=e,this.imgEventService=t,this.imgSelectionService=i,this.alertService=o,this.userSettingsService=a,this.renamePictureService=s,this.listDisplayed=!1,this.multipleImgMode=!1,this.tableFilters={sort:void 0,order:void 0,searchValue:"",totalItems:0,itemsPerPage:0,currentPage:1},this.widthLargeCard=219,this.widthSmallCard=160,this.nbFakeImg=0,this.imgFullWidthConfig=[{max:419,largeImgWidthFactor:1,smallImgWidthFactor:.5},{max:499,largeImgWidthFactor:1,smallImgWidthFactor:.5},{max:719,largeImgWidthFactor:.5,smallImgWidthFactor:.3333},{max:1023,largeImgWidthFactor:.3333,smallImgWidthFactor:.2},{max:1399,largeImgWidthFactor:.25,smallImgWidthFactor:.125},{max:1599,largeImgWidthFactor:.2,smallImgWidthFactor:.1111},{largeImgWidthFactor:.1666,smallImgWidthFactor:.1}],this.imgWidthConfig=[{max:1024,largeImgWidthFactor:.25,smallImgWidthFactor:.125},{max:1199,largeImgWidthFactor:.3333,smallImgWidthFactor:.2},{max:1299,largeImgWidthFactor:.3333,smallImgWidthFactor:.1666},{max:1399,largeImgWidthFactor:.25,smallImgWidthFactor:.1666},{max:1599,largeImgWidthFactor:.25,smallImgWidthFactor:.14},{largeImgWidthFactor:.25,smallImgWidthFactor:.125}],this.searchQueryChanged=new n.Subject,this.filtersChanged=new n.Subject,this.picturesList=[],this.savePictureList=[],this.nbImgToDelSelected=0,this.disable=!1,this.isLoading=!0,this.isTotalRetieved=!1,this.delListImgLoader=!1,this.initComponent=!0,this.failLoaded=!1,this.displayPexelsResults=!1,this.confirmImgSup=!1,this.pageIndex=0,this.length=0,this.pageSize=30,this.pageSizeOptions=[25,50,100,250],this.errorGetAllImg="ImgManager.ImgLib.errorGetAllImg",this.errorGetTotalImg="ImgManager.ImgLib.errorGetTotalImg",this.errorGetImg="ImgManager.ImgLib.errorGetCanvaImg",this.msgNoImgFound="ImgManager.ImgLib.noImgFound",this.errorRemoveImg="ImgManager.ImgList.errorRemoveImg"}return e.prototype.ngOnInit=function(){this.maxLengthCardShow&&this.reducePictureListMaxLength(),this.setEvents(),this.imgSelectedList=this.imgSelectionService.getImgSelection()},e.prototype.ngAfterViewInit=function(){this.setNbImgToDisplay(),this._getImgList(),this.savePictureList||(this.savePictureList=this.picturesList)},e.prototype.reducePictureListMaxLength=function(){this.picturesList.splice(0,this.maxLengthCardShow)},e.prototype.getImgList=function(){this.filtersChanged.next()},e.prototype.onSwitchFormatDisplayed=function(e){this.listDisplayed=e,this.userSettingsService.setUserDisplayPreference(e),this.imgEventService.emitlistDisplayedChange(e)},e.prototype.onImgSelected=function(){this.setNbImgToDelSelected()},e.prototype.onShowImgUploaded=function(){this.searchText=null,this.searchedValue=null,this.getImgList()},e.prototype.onRenamePicture=function(e){this.renamePictureService.onRenamePicture(e)},e.prototype.removeListImg=function(){var e=this;if(!this.disable){this.disable=!0,this.delListImgLoader=!0,this.confirmImgSup=!1;var t=[];this.picturesList.forEach((function(e){e.delSelected&&(e.deleted=!0,t.push(e.id_file))})),this.imgManager.removeMultipleImg(t).subscribe((function(){e.getImgList(),e.imgSelectionService.removeImgSelectionByIds(t)}),(function(t){e.getImgList(),e.alertService.openAlert(e.errorRemoveImg)}))}},e.prototype.selectImgChosen=function(){if(!this.disable){var e=[];this.picturesList.map((function(t){t.delSelected&&(t.delSelected=!1,t.selected=!0),t.selected&&e.push(t)})),this.setNbImgToDelSelected(),this.imgSelectionService.setImgSelection(e)}},e.prototype.displayConfirmImgSup=function(){this.disable||(this.confirmImgSup=!0)},e.prototype.cancelSup=function(){this.confirmImgSup=!1},e.prototype.onPicturesListChange=function(){this.setNbImgToDelSelected()},e.prototype.onFiltersChange=function(){this.getImgList()},e.prototype.setNbImgToDisplay=function(){var e=this.imgLibContainer.nativeElement.offsetWidth+30,t=window.innerWidth-document.body.offsetWidth,n=S(this.getImgWidthFactors(),2),i=n[0],o=n[1],a=Math.floor(e*o),s=Math.ceil((e+t)*i);this.nbMaxImgPerLine=Math.floor(e/a),this.nbMinImgPerLine=Math.floor((e+t)/s),this.pageSize=this.getTotalImgPerPage()},e.prototype.getImgWidthFactors=function(){var e,t,n=window.innerWidth,i=0,o=[],a=this.fullSize?this.imgFullWidthConfig:this.imgWidthConfig;try{for(var s=C(a),r=s.next();!r.done;r=s.next()){var l=r.value;if(!l.max){o=[l.largeImgWidthFactor,l.smallImgWidthFactor];break}if(i<n&&n<=l.max){o=[l.largeImgWidthFactor,l.smallImgWidthFactor];break}i=l.max}}catch(t){e={error:t}}finally{try{r&&!r.done&&(t=s.return)&&t.call(s)}finally{if(e)throw e.error}}return o},e.prototype.getTotalImgPerPage=function(){for(var e=this.nbMinImgPerLine;e<30||e%this.nbMaxImgPerLine!=0||e%this.nbMinImgPerLine!=0;)e+=this.nbMinImgPerLine;return e},e.prototype.setParams=function(){this.params={limit:this.tableFilters.itemsPerPage?this.tableFilters.itemsPerPage.toString():this.pageSize.toString(),page:this.tableFilters.currentPage.toString()},this.tableFilters.searchValue&&(this.params["display_name:contains"]=this.tableFilters.searchValue.toString())},e.prototype.initVariables=function(e){this.nbImgToDelSelected=0,this.disable=!1,this.isLoading=!1,this.delListImgLoader=!1,this.initComponent=!1,this.displayPexelsResults=!1,this.failLoaded=!e,this.nbFakeImg=0},e.prototype.selectImgSelected=function(){if(this.imgSelectedList&&this.imgSelectedList.length){var e=[];this.imgSelectedList.forEach((function(t){return e.push(t.id_file)})),this.picturesList.forEach((function(t){-1!==e.indexOf(t.id_file)&&(t.selected=!0)}))}},e.prototype.displayPexelsLib=function(){this.displayPexelsResults=!0,this.alertService.openAlert(this.msgNoImgFound)},e.prototype.calculNbImgFake=function(e){var t="small"===this.stateDisplayed||"img-upload"===this.tabDisplayed?this.nbMaxImgPerLine:this.nbMinImgPerLine;e%t!=0&&(this.nbFakeImg=t-e%t)},e.prototype.getImg=function(e){var t=this;this.imgManager.getShopImg(e).pipe(r.take(1)).subscribe((function(e){t.imgAlreadyExist(e.id_file)||(t.picturesList.unshift(e),t.length+=1)}),(function(e){t.alertService.openAlert(t.errorGetImg)}))},e.prototype.imgAlreadyExist=function(e){var t,n;try{for(var i=C(this.picturesList),o=i.next();!o.done;o=i.next()){if(o.value.id_file===e)return!0}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return!1},e.prototype.setNbImgToDelSelected=function(){this.nbImgToDelSelected=this.picturesList.filter((function(e){return e.delSelected})).length,this.nbImgToDelSelected||(this.confirmImgSup=!1)},e.prototype.setEvents=function(){var e=this;this.searchQueryChanged.pipe(r.debounceTime(400)).subscribe((function(t){e.getImgList()})),this.filtersChanged.pipe(r.debounceTime(800)).subscribe((function(t){e._getImgList()})),this.imgRemovedEvent=this.imgEventService.getImgRemovedEventListner().subscribe((function(t){e.getImgList()})),this.imgAddedEvent=this.imgEventService.getImgAddedEventListner().subscribe((function(t){t&&!e.imgAlreadyExist(t)&&e.getImg(t)})),this.imgSelectionChange=this.imgSelectionService.getImgSelectionChange().subscribe((function(t){var n,i;if(!e.listDisplayed){var o=[];t.map((function(e){return o.push(e.id_file)}));try{for(var a=C(e.picturesList),s=a.next();!s.done;s=a.next()){var r=s.value;-1===o.indexOf(r.id_file)&&(r.selected=!1)}}catch(e){n={error:e}}finally{try{s&&!s.done&&(i=a.return)&&i.call(a)}finally{if(n)throw n.error}}}}))},e.prototype._getImgList=function(){var e=this;this.isLoading=!0,this.displayPexelsResults=!1,this.isTotalRetieved=!1,this.setParams(),this.imgManager.getShopImgList(this.params).pipe(r.take(1)).subscribe((function(t){e.initVariables(!0);var n=t.data.length;e.calculNbImgFake(n),e.picturesList=t.data,e.renamePictureService.setPicturesList(e.picturesList),e.selectImgSelected(),e.length=e.isTotalRetieved?e.length:t.totalRecords,e.tableFilters.totalItems=e.isTotalRetieved?e.tableFilters.totalItems:t.totalRecords,e.tableFilters.itemsPerPage=e.tableFilters.itemsPerPage?e.tableFilters.itemsPerPage:e.pageSize,e.maxLengthCardShow&&(e.picturesList=e.picturesList.splice(0,8)),0===t.totalRecords&&e.displayPexelsLib(),e.refreshTotalImgList()}),(function(t){e.alertService.openAlert(e.errorGetAllImg),e.initVariables(!1)}))},e.prototype.refreshTotalImgList=function(){var e=this;this.imgManager.getShopTotalImgList(this.params).pipe(r.take(1)).subscribe((function(t){e.isTotalRetieved=!0,e.length=t.totalRecords,e.tableFilters.totalItems=t.totalRecords}),(function(t){e.alertService.openAlert(e.errorGetTotalImg),e.initVariables(!1)}))},e.prototype.ngOnDestroy=function(){this.searchQueryChanged.unsubscribe(),this.imgRemovedEvent.unsubscribe(),this.imgAddedEvent.unsubscribe(),this.imgSelectionChange.unsubscribe()},e.ctorParameters=function(){return[{type:D},{type:T},{type:x},{type:F},{type:P},{type:N}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",String)],e.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"fullSize",void 0),b([t.Input(),_("design:type",Number)],e.prototype,"maxLengthCardShow",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"listDisplayed",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"multipleImgMode",void 0),b([t.ViewChild("imgLibContainer"),_("design:type",t.ElementRef)],e.prototype,"imgLibContainer",void 0),e=b([t.Component({selector:"images-view",template:'<div class="images-view" [ngClass]="{\'fullSize\': fullSize, \'small\': stateDisplayed === \'small\'}" [@easeInOut]="\'in\'">\n  \x3c!-- Subheader : Img number and actions btn (sup img list, switch forma display) --\x3e\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        \x3c!-- For listforma : Display btn del multiple img & Confirm action --\x3e\n        <div class="images-view__container__boxAction">\n\n\n            \x3c!-- Sélectionner --\x3e\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            \x3c!-- Display btn del multiple img --\x3e\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            \x3c!-- Confirm action --\x3e\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        \x3c!-- Swith mosaic/list forma --\x3e\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  \x3c!-- Images section --\x3e\n<ng-scrollbar\n  #scrollable\n  [visibility]="\'native\'"\n  class="images-view__scroll"\n  [ngClass]="{\n    \'images-view__scroll--hide--mosaic\': displayPexelsResults && !listDisplayed,\n    \'images-view__scroll--hide--mosaic--small\': displayPexelsResults && !listDisplayed && stateDisplayed === \'small\',\n    \'images-view__scroll--hide--table\': displayPexelsResults && listDisplayed,\n    \'images-view__scroll--full\': stateDisplayed === \'full\',\n    \'images-view__scroll--smallDisplay\' : stateDisplayed === \'small\' && tabDisplayed !== \'img-upload\',\n    \'images-view__scroll--smallUploadDisplay\' : stateDisplayed === \'small\' && tabDisplayed === \'img-upload\',\n    \'images-view__scroll--window\': stateDisplayed === \'window\'\n}"\n>\n  <div #imgLibContainer class="images-view__wrapper">\n    <div *ngIf="!listDisplayed || stateDisplayed === \'small\'" [@easeInOut]="\'in\'">\n      <mosaic-view\n        [picturesList]="picturesList"\n        (picturesListChange)="onPicturesListChange()"\n        [tableFilters]="tableFilters"\n        (filtersChange)="onFiltersChange()"\n        [(disable)]="disable"\n        (pictureNameChange)="onRenamePicture($event)"\n        [nbFakeImg]="nbFakeImg"\n        [stateDisplayed]="stateDisplayed"\n        [tabDisplayed]="tabDisplayed"\n        [displayPexelsResults]="displayPexelsResults"\n        [isLoading]="isLoading"\n        [fullSize]="fullSize"\n      >\n      </mosaic-view>\n    </div>\n\n    <div *ngIf="listDisplayed && stateDisplayed !== \'small\'" [@easeInOut]="\'in\'">\n      <table-view\n        [picturesList]="picturesList"\n        (picturesListChange)="onPicturesListChange()"\n        [tableFilters]="tableFilters"\n        (filtersChange)="onFiltersChange()"\n        [(disable)]="disable"\n        (pictureNameChange)="onRenamePicture($event)"\n        [displayPexelsResults]="displayPexelsResults"\n        [stateDisplayed]="stateDisplayed"\n        [isLoading]="isLoading"\n        >\n      </table-view>\n    </div>\n\n  </div>\n</ng-scrollbar>\n\n\x3c!-- Pexels Section - When no img found --\x3e\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',animations:[A,te]}),_("design:paramtypes",[D,T,x,F,P,N])],e)}(),oe=function(e){function n(t,n,i,o,a,s,r,l){var p=e.call(this,t,n,i,o,a,s,r,l)||this;return p.nbFakeImg=0,p}return v(n,e),n.prototype.ngOnInit=function(){},n.prototype.onSearchChange=function(e){this.tableFilters.sort=void 0,this.tableFilters.order=void 0,this.tableFilters.currentPage=1,this.filtersChange.emit(this.tableFilters)},n.prototype.onCardRenamePicture=function(e){this.pictureNameChange.next(e)},n.ctorParameters=function(){return[{type:D},{type:x},{type:i.HttpClient},{type:E},{type:T},{type:F},{type:a.TranslateService},{type:M}]},b([t.Input(),_("design:type",String)],n.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],n.prototype,"fullSize",void 0),b([t.Input(),_("design:type",Number)],n.prototype,"nbFakeImg",void 0),n=b([t.Component({selector:"mosaic-view",template:'<div class="mosaic" [ngClass]="{\'fullSize\': fullSize, \'small\': stateDisplayed === \'small\', \'mosaic--displayPexelsImg\': displayPexelsResults}">\n  \x3c!-- Search section --\x3e\n  <div\n    class="mosaic__search"\n    [ngClass]="{\'mosaic__search--small\': stateDisplayed === \'small\'}"\n    *ngIf="tabDisplayed !== \'img-upload\'">\n      <wz-input-search\n        [(ngModel)]="tableFilters.searchValue"\n        (changeDebounced)="onSearchChange($event)"\n        [placeholder]="\'ImgManager.SearchBar.placeholder\' | translate"\n        [smallPadding]="stateDisplayed === \'small\'"\n      ></wz-input-search>\n  </div>\n\n  \x3c!-- Cards section --\x3e\n  <div\n    class="mosaic__container__cards"\n    [ngClass]="{\'mosaic__container__cards--padding\': stateDisplayed !== \'window\'}"\n    [@listAnimation]="picturesList.length"\n    *ngIf="!isLoading && !displayPexelsResults"\n    >\n      <img-card\n        *ngFor="let picture of picturesList; let index = index;"\n        [picture]="picture"\n        [stateDisplayed]="stateDisplayed"\n        [tabDisplayed]="tabDisplayed"\n        [disable]="disable"\n        (toggleImgSelected)="onToggleSelectImg(index)"\n        (pictureNameChange)="onCardRenamePicture($event)"\n        [fullSize]="fullSize"\n      ></img-card>\n      <div\n        *ngFor="let fakeImg of nbFakeImg | numberToArray"\n        class="mosaic__container__cards__fakeImg"\n        [ngClass]="{\'mosaic__container__cards__fakeImg--smallFakeImg\': stateDisplayed === \'small\' || tabDisplayed === \'img-upload\'}">\n      </div>\n  </div>\n  \x3c!-- Loader section --\x3e\n  <div class="mosaic__container__loader"  *ngIf="isLoading">\n    <wz-loader [small]="true"></wz-loader>\n  </div>\n\n  \x3c!-- Pagination section --\x3e\n  <div class="mosaic__pagination" *ngIf="picturesList.length && tabDisplayed !== \'img-upload\' && !displayPexelsResults" >\n    <wz-pagination\n    [pagination]="tableFilters"\n    (pageChange)="onFiltersChange()"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n',animations:[H]}),_("design:paramtypes",[D,x,i.HttpClient,E,T,F,a.TranslateService,M])],n)}(G),ae=function(e){function n(t,n,i,o,a,s,r,l){var p=e.call(this,t,n,i,o,a,s,r,l)||this;return p.dataTableName="imgagesView",p}return v(n,e),n.prototype.ngOnInit=function(){},n.ctorParameters=function(){return[{type:D},{type:x},{type:i.HttpClient},{type:E},{type:T},{type:F},{type:a.TranslateService},{type:M}]},n=b([t.Component({selector:"table-view",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    \x3c!-- Header Section --\x3e\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    \x3c!-- Body Section --\x3e\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              \x3c!-- If the img is not loaded, or the link is broken, an icon is displayed --\x3e\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        \x3c!-- Dropdown --\x3e\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',animations:[H]}),_("design:paramtypes",[D,x,i.HttpClient,E,T,F,a.TranslateService,M])],n)}(G),se=function(){function e(e){this.filterRoutingBuilder=e,this.filterGroups=new Map,this.dataTableFilters={sort:void 0,order:void 0,searchValue:void 0,totalItems:0,itemsPerPage:0,currentPage:0},this.sortSubject=new n.Subject}return e.prototype.getTableFilterGroup=function(e){if(this.filterGroups.has(e))return this.filterGroups.get(e);var t=this.filterRoutingBuilder.group(this.dataTableFilters,e);return this.filterGroups.set(e,t),t},e.prototype.emitSortChange=function(e,t,n){this.sortSubject.next({dataTableName:e,sortName:t,order:n})},e.prototype.getSortChangeListner=function(){return this.sortSubject.asObservable()},e.prototype.setPaginationFilters=function(e,t,n,i){this.getTableFilterGroup(e).setValues({itemsPerPage:n,currentPage:i})},e.prototype.setInitialPaginationFiltersIfNotExist=function(e,t,n){var i=this.getTableFilterGroup(e);i.setValues({itemsPerPage:i.get("itemsPerPage")?parseInt(i.get("itemsPerPage")):t,currentPage:i.get("currentPage")?parseInt(i.get("currentPage")):n})},e.ctorParameters=function(){return[{type:s.NwbFilterRoutingBuilder}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](s.NwbFilterRoutingBuilder))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[s.NwbFilterRoutingBuilder])],e)}(),re=function(){function e(e){this.filtersTableService=e,this.tableFiltersChange=new t.EventEmitter,this.placeholder="",this.checkbox=!1,this.toggleAllCheckBox=new t.EventEmitter,this.disableSearch=!1,this.disablePagniation=!1,this.isLoading=!1}return e.prototype.ngOnInit=function(){var e=this;this.headerCheckBoxId=h.v4(),this.tableRoutingName&&(this._filterGroup=this.filtersTableService.getTableFilterGroup(this.tableRoutingName),this._filterGroup.valuesChange$.next([]),this.setTablesFilters(),this.filterGroupChangeSub=this._filterGroup.valuesChange$.subscribe((function(t){e.setTablesFilters()})))},e.prototype.onToggleAllCheckBox=function(e){this.toggleAllCheckBox.emit(e.target.checked)},e.prototype.searchChange=function(e){this.tableFilters.sort=void 0,this.tableFilters.order=void 0,this.tableFilters.currentPage=1,this.tableFiltersChange.emit(this.tableFilters),this._filterGroup&&this._filterGroup.setValues({searchValue:this.tableFilters.searchValue,sort:void 0,order:void 0,currentPage:1})},e.prototype.pageChange=function(){this.tableFiltersChange.emit(this.tableFilters),this._filterGroup&&this._filterGroup.setValues({itemsPerPage:this.tableFilters.itemsPerPage,currentPage:this.tableFilters.currentPage})},e.prototype.setTablesFilters=function(){this.tableFilters={sort:this._filterGroup.get("sort"),order:this._filterGroup.get("order"),searchValue:this._filterGroup.get("searchValue"),itemsPerPage:this._filterGroup.get("itemsPerPage")?parseInt(this._filterGroup.get("itemsPerPage")):0,currentPage:this._filterGroup.get("currentPage")?parseInt(this._filterGroup.get("currentPage")):0,totalItems:this.tableFilters.totalItems},this.tableFiltersChange.emit(this.tableFilters)},e.prototype.ngDestroy=function(){this.filterGroupChangeSub&&this.filterGroupChangeSub.unsubscribe()},e.ctorParameters=function(){return[{type:se}]},b([t.Input(),_("design:type",Object)],e.prototype,"tableFilters",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"tableFiltersChange",void 0),b([t.Input(),_("design:type",String)],e.prototype,"tableRoutingName",void 0),b([t.Input(),_("design:type",String)],e.prototype,"placeholder",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"checkbox",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"toggleAllCheckBox",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disableSearch",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disablePagniation",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"isLoading",void 0),e=b([t.Component({selector:"wz-table",template:'<div class="wz-table">\n  \x3c!-- Header section --\x3e\n  <div class="wz-table__head" id="headerTable">\n    <div *ngIf="checkbox" class="wz-table__head__cell wz-table__head__cell--checkbox">\n      <wz-checkbox [id]="headerCheckBoxId" (change)="onToggleAllCheckBox($event)" [alone]="true"></wz-checkbox>\n    </div>\n\n    \x3c!-- Header contents are added with the headerCell directive --\x3e\n    <ng-content select="[headerCell]"></ng-content>\n  </div>\n\n  \x3c!-- Search section --\x3e\n  <div *ngIf="!disableSearch" class="wz-table__search">\n    <wz-input-search\n      [(ngModel)]="tableFilters.searchValue"\n      (changeDebounced)="searchChange($event)"\n      [placeholder]="placeholder"\n      [smallPadding]="true"\n    ></wz-input-search>\n  </div>\n\n  \x3c!-- Body section --\x3e\n  <div class="wz-table__body">\n    \x3c!-- Loader on body --\x3e\n    <div class="wz-table__body__loader" *ngIf="isLoading">\n      <wz-loader [small]="true"></wz-loader>\n    </div>\n    \x3c!-- Body contents are added with the tableRow directive --\x3e\n    <ng-content select="[tableRow]" *ngIf="!isLoading"></ng-content>\n  </div>\n\n  \x3c!-- Pagination section --\x3e\n  <wz-pagination *ngIf="!disablePagniation" [pagination]="tableFilters" (pageChange)="pageChange()"></wz-pagination>\n</div>\n',encapsulation:t.ViewEncapsulation.None}),_("design:paramtypes",[se])],e)}(),le=function(){function e(){this.placeholder="",this.smallPadding=!1,this.innerValue="",this.changeDebounced=new t.EventEmitter,this.onTouchedCallback=function(){},this.onChangeCallback=function(){}}var n;return n=e,Object.defineProperty(e.prototype,"value",{get:function(){return this.innerValue},set:function(e){e!==this.innerValue&&(this.innerValue=e,this.onChangeCallback(e))},enumerable:!0,configurable:!0}),e.prototype.writeValue=function(e){e!==this.innerValue&&(this.innerValue=e)},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.handleDebouncedKeyUp=function(e){this.changeDebounced.emit(e.target.value)},b([t.Input(),_("design:type",Object)],e.prototype,"placeholder",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"smallPadding",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"id",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"changeDebounced",void 0),e=n=b([t.Component({selector:"wz-input-search",template:'<div class="input-search field" [ngClass]="smallPadding ? \'small-padding\' : \'\'">\n  <p class="control has-icons-left has-icons-right">\n    <input\n      [placeholder]="placeholder"\n      value=""\n      class="input"\n      type="text"\n      [attr.id]="id"\n      [(ngModel)]="value"\n      debounceKeyUp\n      [debounceTime]="1000"\n      (onEventChange)="handleDebouncedKeyUp($event)"\n    />\n    <i class="icon fal fa-search"></i>\n  </p>\n</div>\n',providers:[{provide:p.NG_VALUE_ACCESSOR,useExisting:n,multi:!0}]})],e)}(),pe=function(){function e(){}return e.prototype.transform=function(e,t,n){if(!(e>=0&&t>=0&&n>=0))throw new Error("currentPage or totalItems or itemsPerPage is/are missing in PagniationIsLastPage pipe.");return e===Math.ceil(t/n)},e=b([t.Pipe({name:"IsLastPage"})],e)}(),ce=function(){function e(){this.pageChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"pagination",{get:function(){return this._pagination},set:function(e){this._pagination=e},enumerable:!0,configurable:!0}),e.prototype.decrementPage=function(){this.pagination.currentPage<=1||(this.pagination.currentPage--,this.pageChange.emit(this.pagination))},e.prototype.incrementPage=function(){(new pe).transform(this.pagination.currentPage,this.pagination.totalItems,this.pagination.itemsPerPage)||(this.pagination.currentPage++,this.pageChange.emit(this.pagination))},e.prototype.onGotoPageChange=function(e){this.pagination.currentPage=parseInt(e.target.value),this.pageChange.emit(this.pagination)},b([t.Input(),_("design:type",Object),_("design:paramtypes",[Object])],e.prototype,"pagination",null),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"pageChange",void 0),e=b([t.Component({selector:"wz-pagination",template:'<div class="wz-pagination" *ngIf="pagination && pagination.itemsPerPage">\n  <div class="wz-pagination__wrapper">\n    <div class="wz-pagination__wrapper__page">\n      <p>{{ \'PaginationComponent.page\' | translate }}</p>\n\n      <select name="page" (change)="onGotoPageChange($event)" [ngStyle]="{\'width\': 40 + (10*pagination.currentPage.toString().length) + \'px\'}">\n        <ng-container *ngFor="let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage">\n          <option [selected]="pageIndex === pagination.currentPage" [value]="pageIndex">\n            {{ pageIndex }}\n          </option>\n        </ng-container>\n      </select>\n    </div>\n\n    <div class="wz-pagination__wrapper__elements">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class="wz-pagination__wrapper__arrows">\n      <div\n        (click)="decrementPage()"\n        class="wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left"\n        [ngClass]="{ \'wz-pagination__wrapper__arrows__arrow--disabled\': pagination.currentPage === 1 }"\n      >\n        <span class="wz-pagination__wrapper__arrows__arrow__icon"></span>\n      </div>\n      <div\n        (click)="incrementPage()"\n        class="wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right"\n        [ngClass]="{\n          \'wz-pagination__wrapper__arrows__arrow--disabled\':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }"\n      >\n        <span class="wz-pagination__wrapper__arrows__arrow__icon"></span>\n      </div>\n    </div>\n  </div>\n</div>\n'}),_("design:paramtypes",[])],e)}(),de=function(){function e(){}return e.prototype.transform=function(e,t){if(!(e>=0&&t>=0))throw new Error("totalItems or itemsPerPage missing in ArrayTotalPages pipe.");var n=Math.ceil(e/t);return Array.apply(null,{length:n}).map(Number.call,Number).map((function(e){return e+1}))},e=b([t.Pipe({name:"ArrayTotalPages"})],e)}(),ge=function(){function e(e){this.translateService=e}return e.prototype.transform=function(e,t,n){var i=0,o=0;return t&&(i=(e-1)*n+1,o=e*n),o>t&&(o=t),this.translateService.instant("PaginationComponent.on",{low:i,high:o,total:t})},e.ctorParameters=function(){return[{type:a.TranslateService}]},e=b([t.Pipe({name:"customPagniationText"}),_("design:paramtypes",[a.TranslateService])],e)}(),me=function(){function e(){this.label="",this.alone=!1,this.checked=!1,this.id="",this.disabled=!1}var n;return n=e,e.prototype.registerOnChange=function(e){this._onChange=e},e.prototype.registerOnTouched=function(e){this._onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.writeValue=function(e){this.value=e},e.prototype.onChange=function(e){this._onChange&&this._onChange(e)},b([t.Input(),_("design:type",Object)],e.prototype,"label",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"value",void 0),b([t.Input(),_("design:type",String)],e.prototype,"type",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"alone",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"checked",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"id",void 0),b([t.Input(),_("design:type",String)],e.prototype,"name",void 0),e=n=b([t.Component({selector:"wz-checkbox",template:'<div class="checkBoxField field" [ngClass]="{ \'field--nowrap\': type === \'column\', alone: alone }">\n  <div class="field__row">\n    <input\n      type="checkbox"\n      [id]="id"\n      class="is-checkradio"\n      [name]="name"\n      [value]="value"\n      [disabled]="disabled"\n      [(ngModel)]="value"\n      [checked]="checked"\n      (ngModelChange)="onChange($event)"\n    />\n    <label [attr.for]="id">{{ label }}</label>\n  </div>\n</div>\n',encapsulation:t.ViewEncapsulation.None,providers:[{provide:p.NG_VALUE_ACCESSOR,useExisting:n,multi:!0}]}),_("design:paramtypes",[])],e)}(),ue=function(){function e(e,n,i,o,a,s){this.currentRow=e,this.appRef=n,this.renderer=i,this.document=o,this.resolver=a,this.injector=s,this.checkBoxValueChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"checkBoxValue",{get:function(){return this._value},set:function(e){this._value=e,this.checkboxComponentRef&&this.setCheckBoxValue()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.createCheckBoxComponent(),this.handleChecboxInputs(),this.handleCheckboxOutputs()},e.prototype.createCheckBoxComponent=function(){var e=document.createElement("div");e.className="wz-table__body__line__cell wz-table__body__line__cell--checkbox",this.renderer.insertBefore(this.currentRow.nativeElement,e,this.currentRow.nativeElement.firstChild),this.htmlContainer=new he(e,this.appRef,this.resolver,this.injector),this.checkboxComponentRef=this.htmlContainer.attach(me)},e.prototype.handleChecboxInputs=function(){this.checkboxComponentRef.instance.id=this.checkBoxId?this.checkBoxId:h.v4(),this.checkboxComponentRef.instance.name=this.checkBoxName?this.checkBoxName:void 0,this.checkboxComponentRef.instance.alone=!0,this.setCheckBoxValue()},e.prototype.setCheckBoxValue=function(){this.checkboxComponentRef.instance.value=this.checkBoxValue},e.prototype.handleCheckboxOutputs=function(){var e=this;this.checkboxComponentRef.instance.registerOnChange((function(){e._toggleCheckbox()}))},e.prototype._toggleCheckbox=function(){this.checkBoxValue=!this.checkBoxValue,this.checkBoxValueChange.emit(this.checkBoxValue)},e.prototype.ngOnDestroy=function(){this.htmlContainer.dispose()},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ApplicationRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]},{type:t.ComponentFactoryResolver},{type:t.Injector}]},b([t.Input("checkBoxId"),_("design:type",Object)],e.prototype,"checkBoxId",void 0),b([t.Input("checkBoxName"),_("design:type",String)],e.prototype,"checkBoxName",void 0),b([t.Input("checkBoxValue"),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"checkBoxValue",null),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"checkBoxValueChange",void 0),e=b([t.Directive({selector:"[checkBoxRow]"}),I(3,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.ApplicationRef,t.Renderer2,Object,t.ComponentFactoryResolver,t.Injector])],e)}(),he=function(){function e(e,t,n,i){this.hostElement=e,this.appRef=t,this.componentFactoryResolver=n,this.injector=i,this.attached=!1}return e.prototype.attach=function(e){var t=this;if(this.attached)throw new Error("component has already been attached");this.attached=!0;var n=this.componentFactoryResolver.resolveComponentFactory(e).create(this.injector);return this.appRef.attachView(n.hostView),this.disposeFn=function(){t.appRef.detachView(n.hostView),n.destroy()},this.hostElement.appendChild(n.hostView.rootNodes[0]),n},e.prototype.dispose=function(){this.attached&&this.disposeFn()},e}(),fe=function(){function e(e,t,n){this.currentCell=e,this.renderer=t,this.document=n,this.centerCellValue=["left","center","right"]}return e.prototype.ngAfterViewInit=function(){this.applyCustomStylesOnCell()},e.prototype.applyCustomStylesOnCell=function(){if(this.currentCell.nativeElement.style.flexGrow=void 0!==this.columnSize?this.columnSize:"1",this.renderer.addClass(this.currentCell.nativeElement,"wz-table__body__line__cell"),this.centerCell){if(-1===this.centerCellValue.indexOf(this.centerCell))throw"Error : The centerCell directive has no matched value. The value must be one of the following : left, center, right.";var e="wz-table__body__line__cell--center--"+this.centerCell;this.renderer.addClass(this.currentCell.nativeElement,e)}},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]}]},b([t.Input("columnSize"),_("design:type",String)],e.prototype,"columnSize",void 0),b([t.Input("centerCell"),_("design:type",String)],e.prototype,"centerCell",void 0),e=b([t.Directive({selector:"[tableColumn]"}),I(2,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.Renderer2,Object])],e)}(),ve=function(){function e(e,n,i,o){this.currentCell=e,this.renderer=n,this.document=i,this.filtersTableService=o,this._headerName="",this.filterRouting=!1,this.onSortChange=new t.EventEmitter,this.tableFiltersChange=new t.EventEmitter,this.centerCellValue=["left","center","right"],this.subscriptions=[]}return Object.defineProperty(e.prototype,"headerName",{get:function(){return this._headerName},set:function(e){this._headerName=e,this.setHeaderName()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.tableName&&this.sortName&&(this.filterRouting?this.handleSortRouting():this.handleSortBasic())},e.prototype.ngAfterViewInit=function(){this.applyCustomStylesOnCell(),this.renderHeaderColumn()},e.prototype.handleSortRouting=function(){var e=this;this.filterGroup=this.filtersTableService.getTableFilterGroup(this.tableName);var t=this.filterGroup.valuesChange$.subscribe((function(t){var n=t.filter((function(e){return"sort"===e.key}))[0];e.sortName!==n.value&&e.resetSortIcon()}));this.subscriptions.push(t)},e.prototype.handleSortBasic=function(){var e=this,t=this.filtersTableService.getSortChangeListner().subscribe((function(t){e.tableName===t.dataTableName&&e.sortName!==t.sortName&&e.resetSortIcon()}));this.subscriptions.push(t)},e.prototype.resetSortIcon=function(){this.contentHeader.className=this.contentHeader.className.replace(this.getCurrentSortIcon(),"idle")},e.prototype.applyCustomStylesOnCell=function(){if(this.currentCell.nativeElement.style.flexGrow=void 0!==this.columnSize?this.columnSize:"1",this.renderer.addClass(this.currentCell.nativeElement,"wz-table__head__cell"),this.centerCell){if(-1===this.centerCellValue.indexOf(this.centerCell))throw"Error : The centerCell directive has no matched value. The value must be one of the following : left, center, right.";var e="wz-table__head__cell--center--"+this.centerCell;this.renderer.addClass(this.currentCell.nativeElement,e)}},e.prototype.renderHeaderColumn=function(){this.createHeaderContent(),this.renderer.appendChild(this.currentCell.nativeElement,this.contentHeader)},e.prototype.createHeaderContent=function(){this.contentHeader=document.createElement("a"),this.contentHeader.className="wz-table__head__cell__search",this.setHeaderName(),this.tableName&&this.sortName&&this.handleSort()},e.prototype.setHeaderName=function(){this.contentHeader&&(this.contentHeader.innerHTML=this.headerName)},e.prototype.handleSort=function(){var e=this;this.contentHeader.className+=" wz-table__head__cell__search--"+this.getInitialSortIcon(),this.renderer.listen(this.contentHeader,"click",(function(){var t,n,i,o=e.getCurrentSortIcon();switch(o){case"idle":t="up",n=e.sortName,i=!0;break;case"up":t="down",n=e.sortName,i=!1;break;case"down":default:t="idle"}e.contentHeader.className=e.contentHeader.className.replace(o,t),e.emitEvents(n,i)}))},e.prototype.getInitialSortIcon=function(){if(!this.filterRouting)return"idle";var e="idle";return this.filterGroup.get("sort")===this.sortName&&(e="true"==this.filterGroup.get("order")?"up":"down"),e},e.prototype.getCurrentSortIcon=function(){return/wz-table__head__cell__search--(?<icon>\w+)/.exec(this.contentHeader.className).groups.icon},e.prototype.emitEvents=function(e,t){this.filterRouting?this.filterGroup.setValues({sort:e,order:t,currentPage:1}):this.filtersTableService.emitSortChange(this.tableName,this.sortName,t),this.tableFilters&&(this.tableFilters.sort=this.sortName,this.tableFilters.order=t,this.tableFilters.currentPage=1,this.tableFiltersChange.emit(this.tableFilters)),this.onSortChange.emit(t)},e.prototype.ngOnDestroy=function(){this.subscriptions.forEach((function(e){e.unsubscribe()}))},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]},{type:se}]},b([t.Input("headerName"),_("design:type",String),_("design:paramtypes",[String])],e.prototype,"headerName",null),b([t.Input("columnSize"),_("design:type",String)],e.prototype,"columnSize",void 0),b([t.Input("filterRouting"),_("design:type",Boolean)],e.prototype,"filterRouting",void 0),b([t.Input("tableName"),_("design:type",String)],e.prototype,"tableName",void 0),b([t.Input("sortName"),_("design:type",String)],e.prototype,"sortName",void 0),b([t.Input("centerCell"),_("design:type",String)],e.prototype,"centerCell",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"onSortChange",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"tableFilters",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"tableFiltersChange",void 0),e=b([t.Directive({selector:"[headerCell]"}),I(2,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.Renderer2,Object,se])],e)}(),ye=function(){function e(e,t,n){this.currentCell=e,this.renderer=t,this.document=n}return e.prototype.ngAfterViewInit=function(){this.applyCustomStylesOnCell()},e.prototype.applyCustomStylesOnCell=function(){this.renderer.addClass(this.currentCell.nativeElement,"wz-table__body__line")},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]}]},e=b([t.Directive({selector:"[tableRow]"}),I(2,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.Renderer2,Object])],e)}(),be=function(){function e(e){this.imgCDNService=e}return e.prototype.transform=function(e,t){if(!t)throw"The size is undefined in ImageSrcPipe.";var n=this.imgCDNService.getUrlImg(t);if(!n)throw"The expected size is not defined in ImageSrcPipe.";return n+e},e.ctorParameters=function(){return[{type:E}]},e=b([t.Pipe({name:"imgSrc"}),_("design:paramtypes",[E])],e)}(),Ie=function(){function e(){this.debounceTime=500,this.onEventChange=new t.EventEmitter,this.emitEvent$=new n.Subject,this.subscription$=new n.Subject}return e.prototype.ngOnInit=function(){var e=this;this.emitEvent$.pipe(r.takeUntil(this.subscription$),r.debounceTime(this.debounceTime),r.distinctUntilChanged(),r.tap((function(t){return e.emitChange(t)}))).subscribe()},e.prototype.emitChange=function(e){this.onEventChange.emit(e)},e.prototype.ngOnDestroy=function(){this.subscription$.next(),this.subscription$.complete()},b([t.Input(),_("design:type",Number)],e.prototype,"debounceTime",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"onEventChange",void 0),e=b([t.Directive({selector:"AbstractDebounceDirective"}),_("design:paramtypes",[])],e)}(),_e=function(e){function n(){return e.call(this)||this}return v(n,e),n.prototype.onKeyUp=function(e){e.preventDefault(),this.emitEvent$.next(e)},b([t.HostListener("keyup",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],n.prototype,"onKeyUp",null),n=b([t.Directive({selector:"input[debounceKeyUp]"}),_("design:paramtypes",[])],n)}(Ie),Ce=function(){function e(){this.small=!1}return b([t.Input(),_("design:type",String)],e.prototype,"text",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"small",void 0),b([t.Input(),_("design:type",String)],e.prototype,"position",void 0),e=b([t.Component({selector:"wz-loader",template:'<div class="wz-loader" [ngClass]="{\'is-small\': small}" [ngStyle]="{\'position\': position}">\n  <div class=\'loader loader1\'>\n    <div>\n      <div>\n        <div>\n          <div>\n            <div>\n              <div></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class="is-textcentered" *ngIf="text" [innerHTML]="text"></p>\n</div>\n',encapsulation:t.ViewEncapsulation.None})],e)}(),Se=function(){function e(){this.icon=!0,this.warning=!1,this.success=!1,this.iconClass="fas fa-info"}return e.prototype.ngOnInit=function(){},b([t.Input(),_("design:type",Object)],e.prototype,"icon",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"warning",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"success",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"iconClass",void 0),e=b([t.Component({selector:"wz-alert",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',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)}"]}),_("design:paramtypes",[])],e)}(),we=function(){function e(){}return e.prototype.transform=function(e){return Array.from("x".repeat(e))},e=b([t.Pipe({name:"numberToArray"})],e)}(),xe=[O,j,z,W,$,B,q,ee,K,Q,Ce,X,ne,ie,oe,ae,re,le,ce,me,Se],Le=[U,J,Y,Z,fe,ue,ve,ye,Ie,_e],De=[de,pe,ge,be,we],Ee=function(){function e(){}return e=b([t.NgModule({declarations:w(xe,Le,De),imports:[l.CommonModule,i.HttpClientModule,p.FormsModule,c.NgScrollbarModule,d.NgScrollbarReachedModule,s.NwbAllModule,g.ImageCropperModule,m.CdkTableModule,u.DragDropModule,a.TranslateModule],providers:[],exports:[O]})],e)}(),Me=function(){},Pe=function(){this.image_manager_route="",this.pexels_route="",this.canva_url="",this.assets_route="assets/img-manager/"},Re=function(){this.url_raw_image="",this.url_100_image="",this.url_200_image="",this.url_400_image="",this.url_800_image=""};e.CanvaButtonApi=Me,e.CanvaService=R,e.ImgApiDto=Pe,e.ImgCDNConfigDTO=Re,e.ImgManagerConfigDto=L,e.ImgManagerService=D,e.ImgSelectionService=x,e.RenamePictureService=N,e.WzImgManagerComponent=O,e.WzImgManagerModule=Ee,e.ɵa=M,e.ɵb=E,e.ɵba=re,e.ɵbb=se,e.ɵbc=le,e.ɵbd=ce,e.ɵbe=me,e.ɵbf=Se,e.ɵbg=U,e.ɵbh=J,e.ɵbi=Y,e.ɵbj=Z,e.ɵbk=fe,e.ɵbl=ue,e.ɵbm=ve,e.ɵbn=ye,e.ɵbo=Ie,e.ɵbp=_e,e.ɵbq=de,e.ɵbr=pe,e.ɵbs=ge,e.ɵbt=be,e.ɵbu=we,e.ɵc=P,e.ɵd=T,e.ɵe=k,e.ɵf=j,e.ɵg=F,e.ɵh=z,e.ɵi=A,e.ɵj=W,e.ɵk=H,e.ɵl=V,e.ɵm=$,e.ɵn=G,e.ɵo=B,e.ɵp=q,e.ɵq=ee,e.ɵr=K,e.ɵs=Q,e.ɵt=Ce,e.ɵu=X,e.ɵv=ne,e.ɵw=te,e.ɵx=ie,e.ɵy=oe,e.ɵz=ae,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */var f=function(e,t){return(f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function v(e,t){function n(){this.constructor=e}f(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var y=function(){return(y=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function b(e,t,n,i){var o,a=arguments.length,s=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,n,s):o(t,n))||s);return a>3&&s&&Object.defineProperty(t,n,s),s}function I(e,t){return function(n,i){t(n,i,e)}}function _(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function C(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function S(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,o,a=n.call(e),s=[];try{for(;(void 0===t||t-- >0)&&!(i=a.next()).done;)s.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return s}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(S(arguments[t]));return e}var x=function(){function e(){this.imgSelectedList=[],this.multipleImgMode=!1,this.imgSelectionSubscriber=[],this.imgListLoading=new n.ReplaySubject}return e.prototype.getImgSelection=function(){return this.imgSelectedList},e.prototype.setImgSelection=function(e){var t=this;this.imgSelectedList.length=0,e&&e.length&&e.forEach((function(e){return t.imgSelectedList.push(e)})),this.emitImgSelectionChange()},e.prototype.addImgSelected=function(e){this.multipleImgMode?this.imgSelectedList.push(e):this.imgSelectedList=[e],this.emitImgSelectionChange()},e.prototype.getImgSelectionChange=function(){var e=this;return new n.Observable((function(t){e.imgSelectionSubscriber.push(t)}))},e.prototype.emitImgSelectionChange=function(){var e=this;this.imgSelectionSubscriber.map((function(t){return t.next(JSON.parse(JSON.stringify(e.imgSelectedList)))}))},e.prototype.removeImgSelectedByIndex=function(e){this.imgSelectedList.splice(e,1),this.emitImgSelectionChange()},e.prototype.removeImgSelectedById=function(e){var t,n;if(this.multipleImgMode){var i=0;try{for(var o=C(this.imgSelectedList),a=o.next();!a.done;a=o.next()){if(a.value.id_file===e){this.removeImgSelectedByIndex(i);break}i++}}catch(e){t={error:e}}finally{try{a&&!a.done&&(n=o.return)&&n.call(o)}finally{if(t)throw t.error}}}else this.imgSelectedList=[]},e.prototype.removeImgSelectionByIds=function(e){if(this.multipleImgMode)for(var t=this.imgSelectedList.length-1;t>-1;t--){var n=this.imgSelectedList[t].id_file;-1!==e.indexOf(n)&&this.removeImgSelectedByIndex(t)}else this.imgSelectedList=[]},e.prototype.removeAllImgSelected=function(){this.imgSelectedList.length=0,this.emitImgSelectionChange()},e.prototype.setMultipleImgMode=function(e){this.multipleImgMode=e},e.prototype.initImgSelectedList=function(e){e?this.imgSelectedList=e:this.imgSelectedList&&this.imgSelectedList.length?this.imgSelectedList.splice(0,this.imgSelectedList.length):this.imgSelectedList=[]},e.prototype.emitImgListLoading=function(e){this.imgListLoading.next(e)},e.prototype.getImgListLoadingEventListner=function(){return this.imgListLoading.asObservable()},e.prototype.moveImgOrder=function(e){var t=e.previousIndex,n=e.currentIndex;this.imgSelectedList.splice(n,0,this.imgSelectedList.splice(t,1)[0]),this.emitImgSelectionChange()},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),L=function(){},E=function(){function e(e){this.http=e,this.params=(new i.HttpParams).set("limit","20").set("page","1"),this.pageFicheProductConfig={stateDisplayed:"closed",multipleImgMode:!0,showImgManagerModule:!0,showSelection:!0,displayBtn:!0,pageficheProduct:!0},this.wiziblockConfig={stateDisplayed:"closed",multipleImgMode:!1,showImgManagerModule:!0,showSelection:!1,displayBtn:!1},this.simpleWithButtonOpenerConfig={stateDisplayed:"closed",multipleImgMode:!1,showImgManagerModule:!0,showSelection:!1,displayBtn:!0},this.fullWindowConfig={stateDisplayed:"window",multipleImgMode:!1,showImgManagerModule:!0,showSelection:!1,displayBtn:!1}}return e.prototype.setApiConfig=function(e,t){this.imgManagerRoute=e,this.shopToken=t},e.prototype.getOptionsHeaders=function(e){var t={headers:new i.HttpHeaders({Authorization:"Bearer "+this.shopToken})};return e&&(this.getParams(e),t.params=this.params),t},e.prototype.getShopImgList=function(e){return this.http.get(this.imgManagerRoute+"/images",this.getOptionsHeaders(e))},e.prototype.getShopTotalImgList=function(e){return this.http.get(this.imgManagerRoute+"/total/image",this.getOptionsHeaders(e))},e.prototype.getShopImg=function(e){return this.http.get(this.imgManagerRoute+"/images/"+e,this.getOptionsHeaders())},e.prototype.getParams=function(e){for(var t in this.params=new i.HttpParams,this.params=this.params.set("id_file:sort","desc"),e)this.params=this.params.set(t,e[t])},e.prototype.uploadFile=function(e){return this.http.post(this.imgManagerRoute+"/images/template",e,this.getOptionsHeaders())},e.prototype.uploadFileByUrl=function(e,t){return this.http.post(this.imgManagerRoute+"/images/template",{url:e,fileName:t},this.getOptionsHeaders())},e.prototype.replaceImg=function(e,t){var n={imageBase64:e,type:"RAW"};return this.http.put(this.imgManagerRoute+"/images/"+t+"/replace",n,this.getOptionsHeaders())},e.prototype.changeImgName=function(e,t){return this.http.put(this.imgManagerRoute+"/images/"+t+"?file_name="+e,null,this.getOptionsHeaders())},e.prototype.removeImg=function(e){return this.http.delete(this.imgManagerRoute+"/images/"+e,this.getOptionsHeaders())},e.prototype.removeMultipleImg=function(e){return this.http.post(this.imgManagerRoute+"/images-multiple-delete",{id_array:e},this.getOptionsHeaders())},e.prototype.getImgManagerDisplayConfig=function(e){switch(e){case"window":return this.fullWindowConfig;case"wizi-block":return this.wiziblockConfig;case"fiche-product":return this.pageFicheProductConfig;case"simple-with-button":return this.simpleWithButtonOpenerConfig;default:return}},e.prototype.getAllImgManagerDisplayConfig=function(){return[this.fullWindowConfig,this.wiziblockConfig,this.pageFicheProductConfig,this.simpleWithButtonOpenerConfig]},e.ctorParameters=function(){return[{type:i.HttpClient}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](i.HttpClient))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[i.HttpClient])],e)}(),D=function(){function e(){this.imgCDNConfig=null}return e.prototype.setImgCDNConfig=function(e){this.imgCDNConfig=e},e.prototype.getUrlImg=function(e){var t=Object.keys(this.imgCDNConfig).filter((function(t){return new RegExp(e,"i").test(t)}))[0];return this.imgCDNConfig[t]},e.prototype.getAllSize=function(){return Object.keys(this.imgCDNConfig).map((function(e){return e.match(/_(\w+)_/)[1]}))},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),P=function(){function e(e,t){this.imgManagerService=e,this.imgCDNService=t}return e.prototype.setExternalConfig=function(e){this.externalConfig=e,this.imgManagerService.setApiConfig(e.api.image_manager_route,e.api.shop_token),this.imgCDNService.setImgCDNConfig(e.imgCDNConfig)},e.prototype.getCanvaApiURL=function(){return this.externalConfig.api.canva_url},e.prototype.getCanvaApiToken=function(){return this.externalConfig.api.canva_token},e.prototype.getRouteAssets=function(){return this.externalConfig.api.assets_route},e.prototype.getPexelsApiURL=function(){return this.externalConfig.api.pexels_route},e.prototype.getPexelsApiToken=function(){return this.externalConfig.api.pexels_token},e.prototype.getShopCategory=function(){return this.externalConfig.api.shop_category},e.ctorParameters=function(){return[{type:E},{type:D}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](E),t["ɵɵinject"](D))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[E,D])],e)}(),M=function(){function e(){this.userdisplayPreference="WzImgManagerListDisplayed"}return e.prototype.setUserDisplayPreference=function(e){localStorage.setItem(this.userdisplayPreference,""+e)},e.prototype.getUserDisplayPreference=function(){return"true"==localStorage.getItem(this.userdisplayPreference)},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),R=function(){function e(e){this.externalConfigService=e,this.bindExpectedImgSizeEvent=new n.BehaviorSubject(null),this.bindExpectedSizeDone=this.bindExpectedImgSizeEvent.asObservable()}return e.prototype.setCanvaApiConfig=function(){this.canvaApiURL=this.externalConfigService.getCanvaApiURL(),this.canvaApiKey=this.externalConfigService.getCanvaApiToken()},e.prototype.getCanvaLogo=function(){return this.externalConfigService.getRouteAssets()+"canva/icon_canva.svg"},e.prototype.bindEventExepectedImgSizeChange=function(){return this.bindExpectedSizeDone},e.prototype.expectedImgSizesChange=function(e){this.bindExpectedImgSizeEvent.next(e)},e.prototype.getCanvaApi=function(){var e=this;return this.canvaApiURL&&this.canvaApiKey||this.setCanvaApiConfig(),new n.Observable((function(t){e.loadCanva().subscribe({complete:function(){e.canvaApi&&Canva.DesignButton?(t.next(e.canvaApi),t.complete()):e.initializeCanva(t)}})}))},e.prototype.initializeCanva=function(e){var t=this;Canva.DesignButton&&Canva.DesignButton.initialize({apiKey:this.canvaApiKey}).then((function(n){t.canvaApi=n,e.next(t.canvaApi),e.complete()}))},e.prototype.loadCanva=function(){var e=this;return new n.Observable((function(t){e.canvaApi?t.complete():e.loadCanvaScript(t)}))},e.prototype.loadCanvaScript=function(e){var t=document.createElement("script");t.src=this.canvaApiURL,t.type="text/javascript",t.async=!1,t.charset="utf-8",t.onload=function(){e.complete()},document.getElementsByTagName("head")[0].appendChild(t)},e.ctorParameters=function(){return[{type:P}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](P))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[P])],e)}(),T=function(){function e(){this.imgToEditEvent=new n.Subject,this.imgRemoved=new n.Subject,this.imgAdded=new n.Subject,this.listDisplayedChange=new n.Subject}return e.prototype.emitImgRemoved=function(e){this.imgRemoved.next(e)},e.prototype.getImgRemovedEventListner=function(){return this.imgRemoved.asObservable()},e.prototype.emitImgToEdit=function(e){this.imgToEditEvent.next(e)},e.prototype.getImgToEditEventListner=function(){return this.imgToEditEvent.asObservable()},e.prototype.emitImgAdded=function(e){this.imgAdded.next(e)},e.prototype.getImgAddedEventListner=function(){return this.imgAdded.asObservable()},e.prototype.emitlistDisplayedChange=function(e){this.listDisplayedChange.next(e)},e.prototype.getlistDisplayedChange=function(){return this.listDisplayedChange.asObservable()},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[])],e)}(),O=function(){function e(){this.documentEventSource=new n.Subject,this.documentEventDone=this.documentEventSource.asObservable(),this.documentScrollSource=new n.Subject,this.documentScrollDone=this.documentScrollSource.asObservable()}return e.prototype.documentEvent=function(){return this.documentEventDone},e.prototype.setDocumentEventListener=function(){var e=this;document.body.addEventListener("click",(function(t){e.documentEventSource.next(t.target)}))},e.prototype.documentScroll=function(){return this.documentScrollDone},e.prototype.setScrollEventListener=function(){var e=this;window.onscroll=function(){e.documentScrollSource.next(window)}},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"})],e)}(),k=function(){function e(e,n,i,o,a,s){this.imgSelectionService=e,this.externalConfigService=n,this.userSettingsService=i,this.canvaService=o,this.imgEventService=a,this.domService=s,this.showSelection=!1,this.imgManagerClosed=new t.EventEmitter,this._multipleImgMode=!1,this._showImgManagerModule=!1,this.close=!1,this.listDisplayed=!1,this.hideTab=!1}return Object.defineProperty(e.prototype,"multipleImgMode",{get:function(){return this._multipleImgMode},set:function(e){this._multipleImgMode=e,this.imgSelectionService.setMultipleImgMode(this._multipleImgMode)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"showImgManagerModule",{get:function(){return this._multipleImgMode},set:function(e){this._showImgManagerModule=e,e&&this.displaySmall()},enumerable:!0,configurable:!0}),e.prototype.onKeydownHandler=function(e){this.stateDisplayed&&"window"!==this.stateDisplayed&&this.onClose()},e.prototype.ngOnInit=function(){var e=this;this.externalConfigService.setExternalConfig(this.externalConfig),this.imgSelectionService.setMultipleImgMode(this._multipleImgMode),this.imgSelectionService.initImgSelectedList(null),this.selectImgEvent=this.imgSelectionService.getImgSelectionChange().subscribe((function(t){t&&t.length&&e.checkCloseImgManager()&&e.onClose()})),this.checkUserDisplayPreference(),this.listDisplayedEvent=this.imgEventService.getlistDisplayedChange().subscribe((function(t){return e.listDisplayed=t})),this.domService.setDocumentEventListener()},e.prototype.checkUserDisplayPreference=function(){"window"!==this.stateDisplayed&&"full"!==this.stateDisplayed||(this.listDisplayed=this.userSettingsService.getUserDisplayPreference())},e.prototype.setCurrentTab=function(e){this.hideTab="img-edition"===e},e.prototype.displaySmall=function(){var e=this;"window"!==this.stateDisplayed&&setTimeout((function(){e.stateDisplayed="small",e.addBodyBottomPaddingForModule()}),10)},e.prototype.openSmall=function(){this.stateDisplayed="small",this.setBodyMainScroll(),this.listDisplayed=!1},e.prototype.openFull=function(){this.stateDisplayed="full",this.checkUserDisplayPreference(),this.hideBodyMainScroll()},e.prototype.onClose=function(){var e=this;this.stateDisplayed="closed",this.hideTab=!1,this.setBodyMainScroll(),this.removeBodyBottomPaddingForModule(),setTimeout((function(){e.imgManagerClosed.emit()}),250)},e.prototype.onImgManagerClosed=function(){this.onClose()},e.prototype.checkCloseImgManager=function(){return!this.multipleImgMode&&"window"!==this.stateDisplayed},e.prototype.hideBodyMainScroll=function(){var e=document.getElementsByTagName("html")[0];this.overflowHTML||(this.overflowHTML=e.style.overflowY),e.style.overflowY="hidden"},e.prototype.setBodyMainScroll=function(){document.getElementsByTagName("html")[0].style.overflowY=this.overflowHTML?this.overflowHTML:"scroll"},e.prototype.addBodyBottomPaddingForModule=function(){var e=document.getElementsByTagName("body")[0];this.bodyPadding=this.bodyPadding?parseInt(e.style.paddingBottom):0,e.style.paddingBottom=this.bodyPadding+300+"px"},e.prototype.removeBodyBottomPaddingForModule=function(){void 0!==this.bodyPadding&&(document.getElementsByTagName("body")[0].style.paddingBottom=this.bodyPadding+"px",this.bodyPadding=0)},e.prototype.ngOnDestroy=function(){this.selectImgEvent.unsubscribe(),this.canvaService.expectedImgSizesChange(null),this.listDisplayedEvent.unsubscribe()},e.ctorParameters=function(){return[{type:x},{type:P},{type:M},{type:R},{type:T},{type:O}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"showSelection",void 0),b([t.Input(),_("design:type",L)],e.prototype,"externalConfig",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgManagerClosed",void 0),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"multipleImgMode",null),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"showImgManagerModule",null),b([t.HostListener("document:keydown.escape",["$event"]),_("design:type",Function),_("design:paramtypes",[KeyboardEvent]),_("design:returntype",void 0)],e.prototype,"onKeydownHandler",null),e=b([t.Component({selector:"wz-img-manager",template:'<div class="wz-img-manager">\n  \x3c!-- Img slection handler --\x3e\n  <div class="wz-img-manager__selectionHandler" *ngIf="showSelection">\n    <img-selection></img-selection>\n  </div>\n\n  \x3c!-- Img manager module --\x3e\n  <div\n    *ngIf="_showImgManagerModule"\n    class="wz-img-manager__module"\n    [ngClass]="{\n      \'wz-img-manager__module--small\': stateDisplayed === \'small\',\n      \'wz-img-manager__module--full\': stateDisplayed === \'full\',\n      \'wz-img-manager__module--window\': stateDisplayed === \'window\',\n      \'wz-img-manager__module--edit\': hideTab}"\n  >\n\n    <div class="wz-img-manager__module__header" *ngIf="stateDisplayed !== \'window\'">\n      <button (click)="openSmall()" *ngIf="stateDisplayed === \'full\'"><span>Expand</span><i class="fal fa-compress-alt"></i></button>\n      <button (click)="openSmall()" *ngIf="stateDisplayed === \'closed\'"><span>Expand</span><i class="fal fa-expand-alt"></i></button>\n      <button (click)="openFull()" *ngIf="stateDisplayed === \'small\'"><span>Expand</span><i class="fal fa-expand-alt"></i></button>\n      <button (click)="onClose()" *ngIf="stateDisplayed !== \'closed\'"><span>Close</span><i class="fal fa-times"></i></button>\n    </div>\n\n    <div\n      class="wz-img-manager__module__content wz-block"\n      [ngClass]="{\'wz-block--window\': stateDisplayed === \'window\'}">\n      <img-tabs\n        [stateDisplayed]="stateDisplayed"\n        [multipleImgMode]="multipleImgMode"\n        [listDisplayed]="listDisplayed"\n        (imgManagerClosed)="onImgManagerClosed()"\n        (currentTab)="setCurrentTab($event)">\n      </img-tabs>\n    </div>\n  </div>\n\n</div>\n'}),_("design:paramtypes",[x,P,M,R,T,O])],e)}(),A=o.trigger("easeInOut",[o.state("in",o.style({opacity:1})),o.transition(":enter",[o.style({opacity:0}),o.animate("0.5s ease-in-out")])]),z=function(){function e(e,t){this.nwbAlertService=e,this.translateService=t,this.actionMsg="ImgManager.alert.action",this.alertConfig={message:"",duration:5e3}}return e.prototype.openAlert=function(e){var t=this;this.closePreviousAlert(),this.translateService.get(e).subscribe((function(n){t.alertConfig.message=n,t.setAlertColor(e),t.alertRefComponent=t.nwbAlertService.open(t.alertConfig),t.alertRefComponent.afterClosed().subscribe()}))},e.prototype.openAlertWithBackendRespons=function(e,t){var n=this;this.translateService.get(e).subscribe((function(e){n.alertConfig.message=e,n.alertConfig.message+="<br/>"+JSON.parse(t).message,n.closePreviousAlert(),n.alertRefComponent=n.nwbAlertService.open(n.alertConfig),n.alertRefComponent.afterClosed().subscribe()}))},e.prototype.closePreviousAlert=function(){this.alertRefComponent&&this.alertRefComponent.dismiss()},e.prototype.setAlertColor=function(e){var t=/error/i.test(e);this.alertConfig.color=t?"is-danger":"is-success"},e.ctorParameters=function(){return[{type:s.NwbAlertService},{type:a.TranslateService}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](s.NwbAlertService),t["ɵɵinject"](a.TranslateService))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[s.NwbAlertService,a.TranslateService])],e)}(),F=function(){function e(e,n,i){this.imgManager=e,this.alertService=n,this.externalConfigService=i,this.files=[],this.isLoading=!1,this.imgUploaded=new t.EventEmitter,this.loadingText="ImgManager.ImgUpload.loading",this.errorUploadingImg="ImgManager.ImgUpload.errorUploadingImg",this.errorNotImg="ImgManager.ImgUpload.errorNotImg"}return e.prototype.ngOnInit=function(){this.assetsIcon=this.getAssets()},e.prototype.filesChangeByClick=function(e){this.uploadFile(e.target.files)},e.prototype.getAssets=function(){return this.externalConfigService.getRouteAssets()+"img/icon_picture.svg"},e.prototype.filesChangeByDragAndDrop=function(e){this.removeDragAndDropStyle(),this.uploadFile(e)},e.prototype.uploadFile=function(e){var t,i,o=this;if(!e||e.length){this.isLoading=!0;var a=[];try{for(var s=C(e),r=s.next();!r.done;r=s.next()){var l=r.value,p=new FormData;p.append("image",l,l.name),this.isFileImage(l.type)?a.push(this.imgManager.uploadFile(p)):(this.alertService.openAlert(this.errorNotImg),this.isLoading=!1)}}catch(e){t={error:e}}finally{try{r&&!r.done&&(i=s.return)&&i.call(s)}finally{if(t)throw t.error}}n.forkJoin(a).subscribe((function(e){o.onImgUpload(e),o.isLoading=!1}),(function(e){o.alertService.openAlert(o.errorUploadingImg),o.isLoading=!1}))}},e.prototype.onImgUpload=function(e){this.imgUploaded.emit(e)},e.prototype.isFileImage=function(e){return"image"===e.split("/")[0]},e.prototype.removeDragAndDropStyle=function(){this.dragAndDropBox.nativeElement.style=""},e.ctorParameters=function(){return[{type:E},{type:z},{type:P}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgUploaded",void 0),b([t.ViewChild("dragAndDropBox"),_("design:type",t.ElementRef)],e.prototype,"dragAndDropBox",void 0),e=b([t.Component({selector:"img-upload",template:'<div\n  class="img-upload has-text-centered"\n  [ngClass]="{\'img-upload--small\': stateDisplayed === \'small\'}"\n  (click)="fileInput.click()"\n  appDragDrop\n  (onFileDropped)="filesChangeByDragAndDrop($event)"\n  #dragAndDropBox\n  [@easeInOut]="\'in\'"\n>\n  <input hidden type="file" #fileInput (change)="filesChangeByClick($event)" accept="image/*" multiple >\n  <div class="img-upload__container" [ngClass]="{\'img-upload__container--small\': stateDisplayed === \'small\'}">\n\n    <div class="img-upload__container__wrapper">\n\n      <div class="img-upload__container__loader" *ngIf="isLoading">\n        <wz-loader [small]="true" [position]="\'relative\'"></wz-loader>\n      </div>\n\n      <ng-container *ngIf="!isLoading">\n        <div class="blueColor img-upload__container__dropImgIconDiv">\n          <img *ngIf="assetsIcon" [src]="assetsIcon" alt="icon picture" />\n          <p>{{ \'ImgManager.ImgUpload.dropImg\' | translate }}</p>\n        </div>\n\n        <p class="img-upload__container__or">{{ \'ImgManager.ImgUpload.or\' | translate }}</p>\n\n        <div class="img-upload__container__text">\n          <i class="fal fa-file-upload"></i>{{ \'ImgManager.ImgUpload.selectImg\' | translate }}\n        </div>\n      </ng-container>\n\n    </div>\n  </div>\n</div>\n',animations:[A]}),_("design:paramtypes",[E,z,P])],e)}(),N=function(){function e(e,t){this.imgManager=e,this.alertService=t,this.picturesList=[],this.pictureNameChanged=new n.Subject,this.errorRenameImg="ImgManager.ImgList.errorRenameImg",this.msgSavingImgName="ImgManager.ImgLib.savingImgName",this.msgImgNameSaved="ImgManager.ImgLib.imgNameSaved",this.setEvents()}return e.prototype.setPicturesList=function(e){this.picturesList=e},e.prototype.onRenamePicture=function(e){this.pictureNameChanged.next(e)},e.prototype.setEvents=function(){var e=this;this.pictureNameChanged.pipe(r.debounceTime(800)).subscribe((function(t){e.renamePicture(t)}))},e.prototype.renamePicture=function(e){var t=this,n=this.getPictureById(e.id);n?(this.alertService.openAlert(this.msgSavingImgName),this.imgManager.changeImgName(n.display_name,n.id_file).subscribe((function(e){n.display_name=e.display_name,t.alertService.openAlert(t.msgImgNameSaved)}),(function(i){n.display_name=e.previousName,t.alertService.openAlert(t.errorRenameImg)}))):this.alertService.openAlert(this.errorRenameImg)},e.prototype.getPictureById=function(e){var t,n;if(this.picturesList){try{for(var i=C(this.picturesList),o=i.next();!o.done;o=i.next()){var a=o.value;if(a.id_file===e)return a}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return null}},e.ctorParameters=function(){return[{type:E},{type:z}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](E),t["ɵɵinject"](z))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[E,z])],e)}(),B=function(){function e(e,t){this.imgSelectionService=e,this.renamePictureService=t,this.picturesList=[],this.multipleImgMode=!1}return e.prototype.ngOnInit=function(){this.setEvents()},e.prototype.onImgUploaded=function(e){var t=this;e.forEach((function(e){return t.picturesList.push(e)})),this.renamePictureService.setPicturesList(this.picturesList)},e.prototype.onToggleSelectImg=function(e){"window"!==this.stateDisplayed&&(this.picturesList[e].selected?(this.imgSelectionService.removeImgSelectedById(this.picturesList[e].id_file),this.picturesList[e].selected=!1):(this.imgSelectionService.addImgSelected(this.picturesList[e]),this.picturesList[e].selected=!0))},e.prototype.onRenamePicture=function(e){this.renamePictureService.onRenamePicture(e)},e.prototype.setEvents=function(){var e=this;this.imgSelectionChange=this.imgSelectionService.getImgSelectionChange().subscribe((function(t){var n,i,o=[];t.map((function(e){return o.push(e.id_file)}));try{for(var a=C(e.picturesList),s=a.next();!s.done;s=a.next()){var r=s.value;-1===o.indexOf(r.id_file)&&(r.selected=!1)}}catch(e){n={error:e}}finally{try{s&&!s.done&&(i=a.return)&&i.call(a)}finally{if(n)throw n.error}}}))},e.prototype.ngOnDestroy=function(){this.imgSelectionChange.unsubscribe()},e.ctorParameters=function(){return[{type:x},{type:N}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",String)],e.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"multipleImgMode",void 0),e=b([t.Component({selector:"upload-list",template:'<div class="upload-list" [ngClass]="{\'smallDisplay\': stateDisplayed === \'small\'}" [@easeInOut]="\'in\'">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]="\'native\'"\n        class="upload-list__scroll"\n        [ngClass]="{\n            \'upload-list__scroll--smallDisplay\': stateDisplayed === \'small\',\n            \'upload-list__scroll--window\': stateDisplayed === \'window\'}"\n    >\n        <div class="upload-list__box">\n            <div class="upload-list__box__container">\n                <div>\n                    <p class="mainColor">\n                        {{ picturesList? picturesList.length : \'\' }}\n                        <ng-container *ngIf="picturesList && picturesList.length > 1">{{ \'ImgManager.UploadList.imgSuccessImport\' | translate }}</ng-container>\n                        <ng-container *ngIf="picturesList && picturesList.length === 1">{{ \'ImgManager.UploadList.imgSuccessImportOne\' | translate }}</ng-container>\n                    </p>\n                    <div class="dropdown is-hoverable">\n                        <div class="dropdown-trigger">\n                            <i\n                                aria-haspopup="true" aria-controls="dropdown-menuInfoSeo"\n                                class="fas fa-info-circle">\n                            </i>\n                        </div>\n                        <div class="dropdown-menu dropDownShadow" id="dropdown-menuInfoSeo" role="menu">\n                          <div class="dropdown-content">\n                            <div class="dropdown-item">\n                              <p>{{ \'ImgManager.UploadList.seo.rezise\' | translate }}</p>\n                              <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                            <div class="dropdown-item">\n                                <p>{{ \'ImgManager.UploadList.seo.webp\' | translate }}</p>\n                                <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                            <div class="dropdown-item">\n                                <p>{{ \'ImgManager.UploadList.seo.cdn\' | translate }}</p>\n                                <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                            <div class="dropdown-item">\n                                <p>{{ \'ImgManager.UploadList.seo.lazyloading\' | translate }}</p>\n                                <p><i class="fal fa-check"></i> 100%</p>\n                            </div>\n                          </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div class="upload-list__box__cards">\n                <div class="upload-list__box__cards__card" *ngFor="let picture of picturesList; let index = index;">\n                    <img-card\n                        [picture]="picture"\n                        [stateDisplayed]="stateDisplayed"\n                        (toggleImgSelected)="onToggleSelectImg(index)"\n                        (pictureNameChange)="onRenamePicture($event)"\n                    ></img-card>\n                    <div class="upload-list__box__cards__card__btnBox">\n                        <button class="button success upload-list__box__cards__card__btnBox__btn"><i class="fal fa-check"></i></button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </ng-scrollbar>\n</div>',animations:[A]}),_("design:paramtypes",[x,N])],e)}(),j=function(){function e(e,n){this.imgEventEditService=e,this.alertService=n,this.multipleImgMode=!1,this.listDisplayed=!1,this.imgManagerClosed=new t.EventEmitter,this.currentTab=new t.EventEmitter,this.tabActive="images-view",this.tabs=["img-upload","images-view","pexels-lib","img-edition"],this.editTab=!1,this.imgUpload=!1,this.snackBarNewVersionConfig={message:"",duration:3e3}}return e.prototype.ngOnInit=function(){var e=this;this.imgEventEditService.getImgToEditEventListner().subscribe((function(t){e.tabActive=e.tabs[3],e.imgToEdit=t,e.editTab=!0,e.currentTab.emit(e.tabs[3])}))},e.prototype.toggleTabs=function(e){this.imgUpload=!1,this.editTab=!1,this.tabActive=e},e.prototype.onImgUploaded=function(e){this.imgUpload=!0,this.imgUploadedComponent.onImgUploaded(e)},e.prototype.onEditClosed=function(e){this.editTab=!1,this.toggleTabs(this.tabs[1]),e&&this.alertService.openAlert(e),this.currentTab.emit("close")},e.prototype.onShowImgUploaded=function(){this.tabActive=this.tabs[1]},e.prototype.onImgManagerClosed=function(){this.imgManagerClosed.emit()},e.ctorParameters=function(){return[{type:T},{type:z}]},b([t.Input(),_("design:type",Boolean)],e.prototype,"multipleImgMode",void 0),b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"listDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgManagerClosed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"currentTab",void 0),b([t.ViewChild("imgUploadedImg"),_("design:type",B)],e.prototype,"imgUploadedComponent",void 0),e=b([t.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>\n\n  \x3c!-- Upload section --\x3e\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        [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  \x3c!-- Images section --\x3e\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        [fullSize]="true">\n      </images-view>\n\n    </div>\n  </div>\n\n  \x3c!-- Pexel img section --\x3e\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  \x3c!--Edition section --\x3e\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'}),_("design:paramtypes",[T,z])],e)}(),U=function(){function e(){this.onFileDropped=new t.EventEmitter,this.background="#fff",this.opacity="1"}return e.prototype.onDragOver=function(e){e.preventDefault(),e.stopPropagation(),this.background="#f5f5f5",this.opacity="0.8"},e.prototype.onDragLeave=function(e){e.preventDefault(),e.stopPropagation(),this.background="#fff",this.opacity="1"},e.prototype.ondrop=function(e){e.preventDefault(),e.stopPropagation(),this.background="#f5f5f5",this.opacity="1";var t=e.dataTransfer.files;t.length>0&&this.onFileDropped.emit(t)},b([t.Output(),_("design:type",Object)],e.prototype,"onFileDropped",void 0),b([t.HostBinding("style.background-color"),_("design:type",Object)],e.prototype,"background",void 0),b([t.HostBinding("style.opacity"),_("design:type",Object)],e.prototype,"opacity",void 0),b([t.HostListener("dragover",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],e.prototype,"onDragOver",null),b([t.HostListener("dragleave",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],e.prototype,"onDragLeave",null),b([t.HostListener("drop",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],e.prototype,"ondrop",null),e=b([t.Directive({selector:"[appDragDrop]"})],e)}(),V=function(){function e(e,t,n){var i=this;this.http=e,this.externalConfigService=t,this.translateService=n,this.languages={fr:"fr-FR",en:"en-US",it:"it-IT",es:"es-ES"},this.setLang(this.translateService.currentLang),this.translateService.onLangChange.subscribe((function(e){i.setLang(e.lang)}))}return e.prototype.setLang=function(e){this.lang=this.languages[e]?this.languages[e]:"fr-FR"},e.prototype.searchOnPexels=function(e,t,n){this.apiBaseUrl&&!this.apiKey||(this.apiBaseUrl=this.externalConfigService.getPexelsApiURL(),this.apiKey=this.externalConfigService.getPexelsApiToken());var o,a={headers:new i.HttpHeaders({Authorization:"Bearer "+this.apiKey})};if(e&&!/^\s*$/.test(e))o="/search?query="+e+"&per_page="+t+"&page="+n+"&locale="+this.lang;else{var s=this.externalConfigService.getShopCategory();o=s&&"other"!==s&&"btob"!==s?"/search?query="+s+"&per_page="+t+"&page="+n+"&locale=en-US":"/curated?per_page="+t+"&page="+n}return this.http.get(this.apiBaseUrl+o,a).pipe(r.map((function(e){return e})))},e.ctorParameters=function(){return[{type:i.HttpClient},{type:P},{type:a.TranslateService}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](i.HttpClient),t["ɵɵinject"](P),t["ɵɵinject"](a.TranslateService))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[i.HttpClient,P,a.TranslateService])],e)}(),H=o.trigger("listAnimation",[o.transition(":enter, * => 0, * => -1",[]),o.transition(":increment",[o.query(":enter",[o.style({opacity:0,transform:"translateY(100px)"}),o.stagger(50,[o.animate("500ms cubic-bezier(0.35, 0, 0.25, 1)",o.style({opacity:1,transform:"none"}))])],{optional:!0})])]),W=function(){function e(e,i,o,a){this.wzImgLibService=e,this.imgManager=i,this.alertService=o,this.translateService=a,this.searchValue="",this.disableSearch=!1,this.showImgUploaded=new t.EventEmitter,this.perPage=30,this.searchUpdated=new n.Subject,this.nbResult=0,this.currentPage=1,this.isLoading=!0,this.initComponent=!0,this.photosColumns=[],this.nbColumuns=6,this.responsiveColumns=[1250,1050,750,500],this.outerElement=null,this.uploadingImg="ImgManager.PexelLib.uploadingImg",this.untitled="ImgManager.PexelLib.untitled",this.successUploadPhoto="ImgManager.PexelLib.successImport",this.errorUploadPhoto="ImgManager.PexelLib.errorUploadPhoto",this.errorRetrievePhotos="ImgManager.PexelLib.errorRetrievePhotos",this.subs=[]}return Object.defineProperty(e.prototype,"content",{set:function(e){this.outerElement=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.ngAfterViewInit=function(){this.oldSearchValue=this.searchValue,this.isLoading=!1,this.setNbColumnsToDisplayPhoto(),this.setPhotosColumns(),this.search()},e.prototype.setNbColumnsToDisplayPhoto=function(){var e=this,t=this.outerElement.nativeElement.offsetWidth;"window"!==this.stateDisplayed&&(this.nbColumuns=8),this.responsiveColumns.forEach((function(n){t<n&&e.nbColumuns--}))},e.prototype.onSearchNameChanged=function(){this.onSearchChange()},e.prototype.onBottomReached=function(){this.scrollHandler()},e.prototype.onSearchChange=function(){this.search()},e.prototype.search=function(){var e=this;if(!(this.isLoading||(this.searchValue!==this.oldSearchValue&&this.resetSearch(),this.nbResult&&this.nbResult<=(this.currentPage-1)*this.perPage))){this.isLoading=!0;var t=this.wzImgLibService.searchOnPexels(this.searchValue,this.perPage,this.currentPage).subscribe((function(t){e.wzImgLibDto=t,e.nbResult=e.wzImgLibDto.total_results,e.nbResult&&t.photos.forEach((function(t){var n=e.getBestColumn(),i=t.height/t.width*1e3;e.photosColumns[n].height+=i,e.photosColumns[n].photos.push(t)})),e.isLoading=!1,e.initComponent=!1}),(function(t){e.isLoading=!1,e.initComponent=!1,e.alertService.openAlert(e.errorRetrievePhotos)}));this.subs.push(t)}},e.prototype.scrollHandler=function(){if(!this.isLoading){var e=this.getBestColumn(),t=this.photosColumns[e].photos[this.photosColumns[e].photos.length-1];(t?document.querySelector('img[src="'+t.src.medium+'"]'):null)&&(this.isLoading||(this.currentPage+=1,this.search()))}},e.prototype.setPhotosColumns=function(){for(var e=0;e<this.nbColumuns;e++){this.photosColumns.push({height:0,photos:[]})}},e.prototype.getBestColumn=function(){var e={index:0,height:this.photosColumns[0].height};return this.photosColumns.forEach((function(t,n){e.height>t.height&&(e.index=n,e.height=t.height)})),e.index},e.prototype.resetSearch=function(){this.oldSearchValue=this.searchValue,this.photosColumns=[],this.currentPage=1,this.setPhotosColumns()},e.prototype.uploadPhoto=function(e,t){var n=this;e.uploading=!0;var i=this.imgManager.uploadFileByUrl(t,this.translateService.instant(this.untitled)).subscribe((function(t){e.uploading=!1,e.uploaded=!0,n.alertService.openAlert(n.successUploadPhoto)}),(function(t){e.uploading=!1,406===t.error.code&&t.error.message?n.alertService.openAlertWithBackendRespons(n.errorUploadPhoto,t.error.message):n.alertService.openAlert(n.errorUploadPhoto)}));this.alertService.openAlert(this.uploadingImg),this.subs.push(i)},e.prototype.ngOnDestroy=function(){this.subs.forEach((function(e){return e.unsubscribe()}))},e.ctorParameters=function(){return[{type:V},{type:E},{type:z},{type:a.TranslateService}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",String)],e.prototype,"searchValue",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disableSearch",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"showImgUploaded",void 0),b([t.ViewChild("outerElement"),_("design:type",t.ElementRef),_("design:paramtypes",[t.ElementRef])],e.prototype,"content",null),e=b([t.Component({selector:"pexels-lib",template:'<div class="pexels-lib" #outerElement [@easeInOut]="\'in\'">\n  <ng-scrollbar\n        #scrollable\n        reachedOffset="50"\n        [visibility]="\'hover\'"\n        class="pexels-lib__scroll"\n        [ngClass]="{\'pexels-lib__scroll--smallDisplay\': stateDisplayed === \'small\'}"\n        (reachedBottom)="onBottomReached()"\n  >\n      <div\n        *ngIf="!disableSearch"\n        class="pexels-lib__search"\n        [ngClass]="{\'pexels-lib__search--smallDisplay\': stateDisplayed === \'small\'}"\n        >\n        <wz-input-search\n          [(ngModel)]="searchValue"\n          [placeholder]="\'ImgManager.SearchBar.placeholder\' | translate"\n          (changeDebounced)="onSearchNameChanged()"\n          [smallPadding]="stateDisplayed === \'small\'">\n        </wz-input-search>\n      </div>\n\n      <div *ngIf="!initComponent" class="pexels-lib__wrapper">\n        <p *ngIf="nbResult" class="pexels-lib__wrapper__result-nb">{{ \'ImgManager.PexelLib.nbImgFound\' | translate }} : {{ nbResult }}</p>\n\n        <div class="pexels-lib__wrapper__result">\n\n          <div *ngFor="let photosColumn of photosColumns; let indexCol = index;" class="pexels-lib__wrapper__result__column"  [@listAnimation]="photosColumn.photos.length">\n            <div *ngFor="let photo of photosColumn.photos; let indexPhoto = index;" class="pexels-lib__wrapper__result__column__element">\n\n              <img [alt]="photo.src.medium" [src]="photo.src.medium"\n                  class="pexels-lib__wrapper__result__column__element__img"/>\n\n              <div class="pexels-lib__wrapper__result__column__element__wrapper">\n                <span class="pexels-lib__wrapper__result__column__element__wrapper__infos">\n                  {{ photo.width }} x {{ photo.height}}\n                </span>\n\n                <div class="dropdown is-up" [ngClass]="{\'is-hoverable\': !photo.uploading}">\n                  <div class="dropdown-trigger">\n                    <button\n                      class="button pexels-lib__wrapper__result__column__element__wrapper__button"\n                      aria-haspopup="true"\n                      aria-controls="dropdown-menu">\n\n                      <div *ngIf="!photo.uploading" (click)="uploadPhoto(photo, photo.src.large2x)">\n                        <span>{{ \'ImgManager.PexelLib.import\' | translate }}</span>\n                        <span class="icon is-small">\n                          <i class="fas fa-angle-up" aria-hidden="true"></i>\n                        </span>\n                        <ng-container *ngIf="photo.uploaded">\n                          &nbsp;<i class="fal fa-check"></i>\n                        </ng-container>\n                      </div>\n\n                      <ng-container *ngIf="photo.uploading">\n                        {{ \'ImgManager.PexelLib.importation\' | translate }}\n                        <span btnLoadingAnim class="btnLoadingAnnimation"></span>\n                      </ng-container>\n\n                    </button>\n                  </div>\n                  <div class="dropdown-menu pexels-lib__wrapper__result__column__element__wrapper__dropdown" id="dropdown-menu" role="menu">\n                    <div class="dropdown-content">\n                      <div class="dropdown-content__wrapper">\n                        <div class="dropdown-item" (click)="uploadPhoto(photo, photo.src.portrait)">\n                          <p>{{ \'ImgManager.PexelLib.portrait\' | translate }}</p>\n                          <i class="fal fa-check iPortrait"></i>\n                        </div>\n                        <div class="dropdown-item" (click)="uploadPhoto(photo, photo.src.landscape)">\n                          <p>{{ \'ImgManager.PexelLib.landscape\' | translate }}</p>\n                          <i class="fal fa-check iLandscape"></i>\n                        </div>\n                        <div class="dropdown-item" (click)="uploadPhoto(photo, photo.src.large2x)">\n                          <p>{{ \'ImgManager.PexelLib.original\' | translate }}</p>\n                          <i class="fal fa-check iOriginal"></i>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngIf="isLoading">\n        <wz-loader></wz-loader>\n      </ng-container>\n      <div\n        *ngIf="!isLoading && !nbResult"\n        class="pexels-lib__alert"\n        [@easeInOut]="\'in\'">\n          <wz-alert [warning]="true">\n            {{ \'ImgManager.PexelLib.noResult\' | translate }}\n          </wz-alert>\n      </div>\n\n  </ng-scrollbar>\n</div>\n',animations:[A,H]}),_("design:paramtypes",[V,E,z,a.TranslateService])],e)}(),G=function(){function e(e,n,i,o,a,s,r,l){this.imgManager=e,this.imgSelectionService=n,this.http=i,this.imgCDNService=o,this.imgEventCardService=a,this.alertService=s,this.translateService=r,this.externalService=l,this.picturesList=[],this.picturesListChange=new t.EventEmitter,this.tableFilters={sort:void 0,order:void 0,searchValue:"",totalItems:0,itemsPerPage:30,currentPage:1},this.displayPexelsResults=!1,this.disable=!1,this.disableChange=new t.EventEmitter,this.filtersChange=new t.EventEmitter,this.pictureNameChange=new t.EventEmitter,this.isLoading=!1,this.errorRemoveImg="ImgManager.ImgList.errorRemoveImg",this.errorAlreadyUsedImg="ImgManager.ImgList.errorAlreadyUsed",this.fakeImgRoute=this.externalService.getRouteAssets()+"img/fake.png"}return e.prototype.onToggleAllCheckBoxRow=function(e){this.picturesList.forEach((function(t){t.delSelected=e})),this._pictureListeChange()},e.prototype.onToggleDelSelection=function(e){this.disable||(this.picturesList[e].delSelected=!this.picturesList[e].delSelected,this._pictureListeChange())},e.prototype.onFiltersChange=function(){this.filtersChange.emit()},e.prototype.onEdit=function(e){this.imgEventCardService.emitImgToEdit(e)},e.prototype.onToggleSelectImg=function(e){this.disable||"window"===this.stateDisplayed||(this.picturesList[e].selected?(this.imgSelectionService.removeImgSelectedById(this.picturesList[e].id_file),this.picturesList[e].selected=!1):(this.imgSelectionService.addImgSelected(this.picturesList[e]),this.picturesList[e].selected=!0))},e.prototype.onRemoveImg=function(e){var t=this;e.deleted=!0,this.imgManager.removeImg(e.id_file).subscribe((function(n){t.imgEventCardService.emitImgRemoved(e.id_file),t.imgSelectionService.removeImgSelectedById(e.id_file)}),(function(n){var i=409===n.status?t.errorAlreadyUsedImg:t.errorRemoveImg;e.deleted=!1,t.alertService.openAlert(i)}))},e.prototype.onPictureNotLoading=function(e){e.target.src=this.fakeImgRoute},e.prototype.onDownloadImg=function(e,t){var n=this;this.http.get(this.getRAWImgRoute(t),{responseType:"blob"}).subscribe((function(t){var i=URL.createObjectURL(t);n.downloadUrl(i,e),URL.revokeObjectURL(i)}))},e.prototype.onNameChange=function(e){this.pictureNameChange.emit({id:e,previousName:this.previousName})},e.prototype.getRAWImgRoute=function(e){return this.imgCDNService.getUrlImg("raw")+e},e.prototype._pictureListeChange=function(){this.picturesListChange.emit()},e.prototype.downloadUrl=function(e,t){var n=document.createElement("a");n.href=e,n.download=t,n.click()},e.prototype.ngDestroy=function(){this.getDataAPISub&&this.getDataAPISub.unsubscribe()},e.ctorParameters=function(){return[{type:E},{type:x},{type:i.HttpClient},{type:D},{type:T},{type:z},{type:a.TranslateService},{type:P}]},b([t.Input(),_("design:type",Array)],e.prototype,"picturesList",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"picturesListChange",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"tableFilters",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"displayPexelsResults",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disable",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"disableChange",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"filtersChange",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"pictureNameChange",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"isLoading",void 0),b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),e=b([t.Directive(),_("design:paramtypes",[E,x,i.HttpClient,D,T,z,a.TranslateService,P])],e)}(),$=function(e){function n(n,i,o,a,s,r,l,p){var c=e.call(this,n,i,o,a,s,r,l,p)||this;return c.focusInput=!1,c.toggleImgSelected=new t.EventEmitter,c.isUploadSection=!1,c.activeConfirmDelete=!1,c}return v(n,e),n.prototype.ngOnInit=function(){this.isUploadSection="img-upload"===this.tabDisplayed},n.prototype.onToggleImgSelected=function(){this.toggleImgSelected.next()},n.ctorParameters=function(){return[{type:E},{type:x},{type:i.HttpClient},{type:D},{type:T},{type:z},{type:a.TranslateService},{type:P}]},b([t.Input(),_("design:type",String)],n.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],n.prototype,"fullSize",void 0),b([t.Input(),_("design:type",Object)],n.prototype,"picture",void 0),b([t.Input(),_("design:type",Number)],n.prototype,"index",void 0),b([t.Output(),_("design:type",t.EventEmitter)],n.prototype,"toggleImgSelected",void 0),n=b([t.Component({selector:"img-card",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 class="size"><i class="fal fa-image-polaroid"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n              <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 class="edit" (click)="onEdit(picture)"><i class="far fa-crop-alt"></i><span>{{ \'ImgManager.ImgCard.edit\' | translate }}</span></button>\n              <button class="deleted" (click)="activeConfirmDelete = true;"><i class="fal fa-times"></i><span>{{ \'ImgManager.ImgCard.del\' | translate }}</span></button>\n              <button class="selected" (click)="onToggleImgSelected()" *ngIf="stateDisplayed !== \'window\'">\n                  <i *ngIf="!picture.selected" class="fal fa-square"></i>\n                  <i *ngIf="picture.selected" class="fas fa-check-square checked"></i>\n                  <span>{{ \'ImgManager.ImgCard.select\' | translate }}</span>\n              </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          (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',animations:[A]}),_("design:paramtypes",[E,x,i.HttpClient,D,T,z,a.TranslateService,P])],n)}(G),q=function(){function e(e){this.imgManagerService=e,this.editClosed=new t.EventEmitter,this.isLoading=!1,this.isImgModified=!1,this.isNameModified=!1,this.currentCroppedImage="",this.msgFailSave="ImgManager.ImgEditor.msgFailSave",this.msgFailLoad="ImgManager.ImgEditor.msgFailLoad",this.msgSuccessEdit="Les modifications de l'image ont bien été enregistrées."}return e.prototype.ngOnInit=function(){this.previousName=this.imgToEdit.display_name},e.prototype.onSave=function(){var e=this;if(!this.isLoading){this.isLoading=!0,this.isImgModified||this.isNameModified||(this.isLoading=!1,this.onEditClosed());var t=this.imgManagerService.replaceImg(this.currentCroppedImage,this.imgToEdit.id_file),n=this.imgManagerService.changeImgName(this.imgToEdit.display_name,this.imgToEdit.id_file);this.isImgModified&&this.isNameModified?this.ranameAndReplaceImg(n,t):this.isImgModified?t.subscribe((function(t){e.isLoading=!1,e.onEditClosed(e.msgSuccessEdit)}),(function(t){e.isLoading=!1,e.currentCroppedImage="",e.onEditClosed(e.msgFailSave)})):(this.isNameModified&&n.subscribe((function(t){e.isLoading=!1,e.previousName=e.imgToEdit.display_name,e.onEditClosed(e.msgSuccessEdit)}),(function(t){e.isLoading=!1,e.imgToEdit.display_name=e.previousName,e.onEditClosed(e.msgFailSave)})),this.isNameModified=!1)}},e.prototype.onEditClosed=function(e){this.editClosed.emit(e)},e.prototype.onRestartEdit=function(){this.isImgModified=!1,this.isNameModified=!1,this.imgToEdit.display_name=this.previousName},e.prototype.onCancel=function(){this.onEditClosed("")},e.prototype.onImgCropped=function(e){this.currentCroppedImage=e},e.prototype.ranameAndReplaceImg=function(e,t){var n=this;e.subscribe((function(e){t.subscribe((function(e){n.onEditClosed(n.msgSuccessEdit)}),(function(e){n.onEditClosed(n.msgFailSave)}))}),(function(e){n.onEditClosed(n.msgFailSave)}))},e.ctorParameters=function(){return[{type:E}]},b([t.Input(),_("design:type",Object)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"imgToEdit",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"editClosed",void 0),e=b([t.Component({selector:"img-editor",template:'<div class="img-editor" [@easeInOut]="\'in\'">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]="\'native\'"\n        class="img-editor__scroll"\n        [ngClass]="{\n            \'img-editor__scroll--full\': stateDisplayed === \'full\',\n            \'img-editor__scroll--smallDisplay\': stateDisplayed === \'small\',\n            \'img-editor__scroll--window\': stateDisplayed === \'window\'\n        }"\n    >\n    <div class="columns">\n        \x3c!-- Left section --\x3e\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            \x3c!-- Button Action Section --\x3e\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        \x3c!-- Right section --\x3e\n        <div class="column img-editor__container">\n            <cropper\n              [imgToEdit]="imgToEdit"\n              [(isImgModified)]="isImgModified"\n              (currentCroppedImageChange)="onImgCropped($event)"\n              (editClosed)="onEditClosed($event)">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n',animations:[A]}),_("design:paramtypes",[E])],e)}(),K=function(){function e(e,n,i,o,a,s){this.canvaService=e,this.imgManager=n,this.wzImgEventService=i,this.translateService=o,this.alertService=a,this.renderer=s,this.showImgUploaded=new t.EventEmitter,this.imgLoading=!1,this.availableFormat={"ImgManager.CanvaBtn.smallSquare":{width:500,height:500},"ImgManager.CanvaBtn.mediumSquare":{width:1e3,height:1e3},"ImgManager.CanvaBtn.bigSquare":{width:2500,height:2500}},this.openDropDownMenu=!1,this.subs=[],this.uploadingImg="ImgManager.CanvaBtn.uploadingImg",this.successUploadPhoto="ImgManager.CanvaBtn.successImport",this.errorUploadCanvaImg="ImgManager.CanvaBtn.errorUploadCanvaImg",this.errorRenameCanvaImg="ImgManager.CanvaBtn.errorRenameCanvaImg"}return e.prototype.ngOnInit=function(){this.canvaLogoRouteAssets=this.canvaService.getCanvaLogo(),this.listenCanvaExpectedSize()},e.prototype.listenCanvaExpectedSize=function(){var e=this,t=this.canvaService.bindEventExepectedImgSizeChange().subscribe((function(t){t?(e.expectedWidth=parseInt(t.image_width,10),e.expectedHeight=parseInt(t.image_height,10)):(e.expectedWidth=void 0,e.expectedHeight=void 0)}));this.subs.push(t)},e.prototype.onOpenCanva=function(e,t){var n=this;if(!this.imgLoading){var i=this.canvaService.getCanvaApi().subscribe((function(i){n.canvaApi=i,n.addOverflowBody(),n.createDesign(e,t)}));this.subs.push(i)}},e.prototype.createDesign=function(e,t){var n=this,i={type:"EtsyShopIcon",dimensions:{units:"px",width:e||void 0,height:t||void 0},publishLabel:this.translateService.instant("ImgManager.CanvaBtn.publish")};this.canvaApi.createDesign({design:i,onDesignPublish:function(e){var t=e.exportUrl,i=e.designTitle;return n.designPublished(t,i)},onDesignClose:function(){n.removeOverflowBody()}})},e.prototype.designPublished=function(e,t){var n=this;this.alertService.openAlert(this.uploadingImg),this.imgLoading=!0;var i=this.imgManager.uploadFileByUrl(e,t).subscribe((function(e){n.imgLoading=!1,n.removeOverflowBody(),n.wzImgEventService.emitImgAdded(e.id_file),n.alertService.openAlert(n.successUploadPhoto)}),(function(e){n.imgLoading=!1,n.removeOverflowBody(),406===e.error.code&&e.error.message?n.alertService.openAlertWithBackendRespons(n.errorUploadCanvaImg,e.error.message):n.alertService.openAlert(n.errorUploadCanvaImg)}));this.subs.push(i)},e.prototype.addOverflowBody=function(){this.renderer.addClass(document.body,"ovh-canva")},e.prototype.removeOverflowBody=function(){this.renderer.removeClass(document.body,"ovh-canva")},e.prototype.ngOnDestroy=function(){this.subs.forEach((function(e){return e.unsubscribe()}))},e.ctorParameters=function(){return[{type:R},{type:E},{type:T},{type:a.TranslateService},{type:z},{type:t.Renderer2}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"showImgUploaded",void 0),e=b([t.Component({selector:"canva-btn",template:'<div class="canva dropdown is-right is-hoverable"\n     wzAutoHide (clickOutside)="openDropDownMenu = false;"\n    [ngClass]="{\'is-up\': stateDisplayed === \'small\', \'noTooltip\': stateDisplayed !== \'small\'}"\n    >\n    <div class="dropdown-trigger">\n        <div\n          class="button canva-btn"\n          aria-controls="dropdown-menuCanva"\n          (click)="openDropDownMenu = true;"\n          >\n            <span>{{\'ImgManager.CanvaBtn.createImg\' | translate}}</span>\n            <img [src]="canvaLogoRouteAssets" class="canva-btn__logo">\n\n            <span btnLoadingAnim class="btnLoadingAnnimation" *ngIf="imgLoading"></span>\n        </div>\n    </div>\n    <div\n      class="dropdown-menu dropDownShadow"\n      [ngClass]="{\'displayDropDownMenu\': openDropDownMenu }"\n      id="dropdown-menuCanva"\n      role="menu">\n        <ng-scrollbar\n            #scrollable\n            [visibility]="\'hover\'"\n            class="smallScroll"\n            >\n            <div class="dropdown-content">\n                <div class="dropdownTitle">\n                    <p>{{\'ImgManager.CanvaBtn.createImg.title\' | translate}}</p>\n                </div>\n\n                <div class="infoItem">\n                    <p>{{\'ImgManager.CanvaBtn.info\' | translate}}</p>\n                </div>\n\n                <ng-container >\n                    <div\n                      *ngIf="expectedWidth && expectedHeight"\n                      class="dropdown-item-wrapper"\n                      >\n                        <div class="dropdown-item expectedSizes" (click)="onOpenCanva(expectedWidth, expectedHeight)">\n                            <p>{{\'ImgManager.CanvaBtn.recommanded\' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div\n                  *ngFor="let format of availableFormat| keyvalue"\n                  class="dropdown-item-wrapper">\n                    <div\n                      (click)="onOpenCanva(format.value.width, format.value.height)"\n                      class="dropdown-item">\n                        <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n                    </div>\n                </div>\n            </div>\n        </ng-scrollbar>\n    </div>\n</div>\n'}),_("design:paramtypes",[R,E,T,a.TranslateService,z,t.Renderer2])],e)}(),Q=function(){function e(e){this.imgSelectionService=e,this.imgManagerClosed=new t.EventEmitter,this.imgSelectedList=[],this.removingAll=!1,this.cancellingAll=!1,this.importingAll=!1,this.dragStart=!1,this.isLoading=!1,this.trashPositionIndex=0,this.trashPositionLeft="-5px"}return e.prototype.ngOnInit=function(){var e=this;this.getImgSelected(),this.imgSelectionService.getImgListLoadingEventListner().subscribe((function(t){e.isLoading=t}))},e.prototype.init=function(){this.removingAll=!1,this.cancellingAll=!1,this.importingAll=!1},e.prototype.getImgSelected=function(){this.imgSelectedList=this.imgSelectionService.getImgSelection()},e.prototype.removeImg=function(e){this.imgSelectionService.removeImgSelectedByIndex(e)},e.prototype.drop=function(e){e.previousIndex!==e.currentIndex&&this.imgSelectionService.moveImgOrder(e)},e.prototype.removeImgFromSelection=function(e){this.imgSelectionService.removeImgSelectedByIndex(e.previousIndex)},e.ctorParameters=function(){return[{type:x}]},b([t.Input(),_("design:type",String)],e.prototype,"tabDisplayed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"imgManagerClosed",void 0),e=b([t.Component({selector:"img-selection",template:'<div\n  class="trash"\n  cdkDropList\n  #unSelectList="cdkDropList"\n  (cdkDropListDropped)="removeImgFromSelection($event)">\n    <p>{{\'ImgManager.ImgSelection.unselect\' | translate}}</p>\n</div>\n\n<div\n class="img-selection"\n [ngClass]="{\'img-selection--visible\' : imgSelectedList && imgSelectedList.length}"\n *ngIf="!isLoading">\n\n    <div\n      cdkDropList\n      #selectionList="cdkDropList"\n      cdkDropListOrientation="horizontal"\n      class="list_img_selection"\n      (cdkDropListDropped)="drop($event)"\n      [cdkDropListConnectedTo]="[unSelectList]"\n      >\n\n        <div\n          class="img_box"\n          *ngFor="let picture of imgSelectedList; let index = index"\n          cdkDrag\n          (cdkDragStarted)="dragStart = true;"\n          (cdkDragEnded)="dragStart = false;"\n          >\n\n          <img\n            *ngIf="index < 1"\n            class="drag__img"\n            [src]="picture.file_name | imgSrc : \'400\'"\n            [title]="picture.display_name"\n          />\n\n          <img\n            *ngIf="index > 0"\n            class="drag__img"\n            [src]="picture.file_name | imgSrc : \'200\'"\n            [title]="picture.display_name"\n          />\n\n          <div class="delete-btn" (click)="removeImg(index)">{{\'ImgManager.ImgSelection.deleteImg\' | translate}}</div>\n\n          <span class="drag__tooltips">{{\'ImgManager.ImgSelection.tooltips\' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n\x3c!-- Loader --\x3e\n<ng-container *ngIf="isLoading">\n  <wz-loader></wz-loader>\n</ng-container>\n'}),_("design:paramtypes",[x])],e)}(),J=function(){function e(e){this.currentLoading=0,this.interval=null,this.element=e,this.launchLoading()}return e.prototype.launchLoading=function(){var e=this;null===this.interval&&(this.currentLoading=10,this.element.nativeElement.style.width=this.currentLoading+"%",this.interval=setInterval((function(){e.currentLoading<80&&(e.currentLoading+=Math.floor(15*Math.random()),e.element.nativeElement.style.width=e.currentLoading+"%"),e.currentLoading>=80&&e.currentLoading<95&&(e.currentLoading+=Math.floor(2*Math.random()),e.element.nativeElement.style.width=e.currentLoading+"%")}),70))},e.prototype.ngOnDestroy=function(){this.interval&&(clearInterval(this.interval),this.interval=null)},e.ctorParameters=function(){return[{type:t.ElementRef}]},e=b([t.Directive({selector:"[btnLoadingAnim]"}),_("design:paramtypes",[t.ElementRef])],e)}(),Y=function(){function e(e,n){this._elementRef=e,this.domService=n,this.forceOn=null,this.clickOutside=new t.EventEmitter}return e.prototype.ngAfterViewInit=function(){var e=this;this.domService.documentEvent().subscribe((function(t){var n=e._elementRef.nativeElement.contains(t),i=t.getAttribute("class");if(n||null!==i&&i.includes(e.triggerElement)||e.clickOutside.emit(null),null!=e.forceOn&&null!==i){var o=!0;e.forceOn.forEach((function(e){i.includes(e)||(o=!1)})),o&&e.clickOutside.emit(null)}}))},e.ctorParameters=function(){return[{type:t.ElementRef},{type:O}]},b([t.Input(),_("design:type",String)],e.prototype,"triggerElement",void 0),b([t.Input(),_("design:type",Array)],e.prototype,"forceOn",void 0),b([t.Output("clickOutside"),_("design:type",t.EventEmitter)],e.prototype,"clickOutside",void 0),e=b([t.Directive({selector:"[wzAutoHide]"}),_("design:paramtypes",[t.ElementRef,O])],e)}(),Z=function(){function e(){this.copied=new t.EventEmitter}return e.prototype.onClick=function(e){var t=this;if(e.preventDefault(),this.payload){var n=function(e){(e.clipboardData||window.clipboardData).setData("text",t.payload.toString()),e.preventDefault(),t.copied.emit(t.payload)};document.addEventListener("copy",n,!1),document.execCommand("copy"),document.removeEventListener("copy",n,!1)}},b([t.Input("copy-clipboard"),_("design:type",String)],e.prototype,"payload",void 0),b([t.Output("copied"),_("design:type",t.EventEmitter)],e.prototype,"copied",void 0),b([t.HostListener("click",["$event"]),_("design:type",Function),_("design:paramtypes",[MouseEvent]),_("design:returntype",void 0)],e.prototype,"onClick",null),e=b([t.Directive({selector:"[copy-clipboard]"})],e)}(),X=function(){function e(){this.disable=!1}return e.prototype.ngOnInit=function(){},b([t.Input(),_("design:type",String)],e.prototype,"dropDownMenuClass",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disable",void 0),e=b([t.Component({selector:"dropdown",template:'<div class="dropdown dropdownWizi" [ngClass]="{\'is-hoverable\': !disable}">\n    <div class="dropdown-trigger">\n\n        \x3c!-- Label --\x3e\n        <ng-content select="[label]"></ng-content>\n\n    </div>\n    <div class="dropdown-menu" [ngClass]="dropDownMenuClass" role="menu">\n        <div class="dropdown-content">\n\n            \x3c!-- Content --\x3e\n            <ng-content select="[item]"></ng-content>\n\n        </div>\n    </div>\n</div>'}),_("design:paramtypes",[])],e)}(),ee=function(){function e(e){this.alertService=e,this._isNameModified=!1,this.isNameModifiedChange=new t.EventEmitter,this.msgCopyToClipBoard="ImgManager.ImgEditor.copytoClipBoard"}return Object.defineProperty(e.prototype,"isNameModified",{get:function(){return this._isNameModified},set:function(e){this._isNameModified=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.init()},e.prototype.init=function(){this.imgName=this.imgToEdit.display_name},e.prototype.getFileSize=function(){return this.imgToEdit?Math.round(parseInt(this.imgToEdit.size)/1e3):"-"},e.prototype.copyToClipBoard=function(e){this.alertService.openAlert(this.msgCopyToClipBoard)},e.prototype.onNameChange=function(){this.isNameModifiedChange.emit(!0)},e.ctorParameters=function(){return[{type:z}]},b([t.Input(),_("design:type",Object)],e.prototype,"imgToEdit",void 0),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"isNameModified",null),b([t.Output(),_("design:type",Object)],e.prototype,"isNameModifiedChange",void 0),e=b([t.Component({selector:"info-section",template:'\n\x3c!-- Img properties --\x3e\n<div class="img-editor__infoSection__propertyEditable">\n    <p class="mainColor">\n        {{ \'ImgManager.UploadList.properties.imgName\' | translate }}\n        <span class="img-editor__infoSection__propertyEditable__tooltips" [nwbToolTip]="\'ImgManager.ImgEditor.NameInfo\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></span>\n    </p>\n    <input\n      type="text"\n      class="img-editor__infoSection__propertyEditable__input"\n      placeholder="{{\'ImgManager.ImgEditor.nameEx\' | translate}} "\n      [(ngModel)]="imgToEdit.display_name"\n      debounceKeyUp\n      [debounceTime]="500"\n      (onEventChange)="onNameChange()">\n</div>\n<div class="img-editor__infoSection__propertyEditable">\n    <p class="mainColor">{{ \'ImgManager.UploadList.properties.imgURL\' | translate }}</p>\n    <button [copy-clipboard]="imgToEdit.file_name | imgSrc : \'raw\'" (copied)="copyToClipBoard($event)" ><span  class="img-editor__infoSection__propertyEditable__span">{{imgToEdit.file_name}}</span>&nbsp;&nbsp;<i class="far fa-copy"></i></button>\n</div>\n<div class="img-editor__infoSection__property">\n    <p class="mainColor">{{ \'ImgManager.UploadList.properties.imgSize\' | translate }}&nbsp;:</p>\n    <p>{{imgToEdit.raw_height}}*{{imgToEdit.raw_width}}px</p>\n</div>\n<div class="img-editor__infoSection__property">\n    <p class="mainColor">{{ \'ImgManager.UploadList.properties.imgWeight\' | translate }}&nbsp;:</p>\n    <p >{{getFileSize()}}&nbsp;ko</p>\n</div>\n\n\x3c!-- SEO info --\x3e\n\n<span class="img-editor__infoSection__divider"></span>\n\n<div class="img-editor__infoSection__titleSEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.title\' | translate }}</p>\n</div>\n\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.rezise\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n    <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.reziseTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n</div>\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.webp\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n  <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.webpTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n</div>\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.cdn\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n  <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.cdnTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n\n</div>\n<div class="img-editor__infoSection__propertySEO">\n    <p class="mainColor">{{ \'ImgManager.UploadList.seo.lazyloading\' | translate }}</p>\n    <p><i class="fal fa-check"></i>&nbsp;100%</p>\n    <p class="img-editor__infoSection__propertySEO__tooltips" [nwbToolTip]="\'ImgManager.UploadList.seo.lazyloadingTooltips\' | translate" [nwbToolTipIsMultiline]="true" nwbToolTipPosition="right"><i class="fas fa-info-circle"></i></p>\n</div>\n'}),_("design:paramtypes",[z])],e)}(),te=o.trigger("insertRemoveAnnim",[o.transition(":enter",[o.style({opacity:0}),o.animate("0.5s ease-in-out",o.style({opacity:1}))])]),ne=function(){function e(e){this.imgCDNService=e,this._isImgModified=!1,this.isImgModifiedChange=new t.EventEmitter,this.editClosed=new t.EventEmitter,this.currentCroppedImageChange=new t.EventEmitter,this.msgFailLoad="ImgManager.ImgEditor.msgFailLoad",this.isNameModified=!1,this.isCropperReady=!1,this.currentCroppedImage="",this.isCropped=!1,this.isLoading=!1,this.isImgCropped=!1,this.isImgCroppedInitilized=!1,this.imageChangedEvent="",this.croppedImage="",this.canvasRotation=0,this.rotation=0,this.scale=1,this.showCropper=!1,this.containWithinAspectRatio=!1,this.transform={},this.resolutionConfig=[{label:"ImgManager.ImgEditor.config.origin",config:{maintainAspectRatio:!0}},{label:"ImgManager.ImgEditor.config.free",config:{maintainAspectRatio:!1},active:!0},{label:"ImgManager.ImgEditor.config.square",config:{maintainAspectRatio:!0,aspectRatio:1}},{label:"ImgManager.ImgEditor.config.Portrait",config:{maintainAspectRatio:!0,aspectRatio:.75}},{label:"ImgManager.ImgEditor.config.landscape",config:{maintainAspectRatio:!0,aspectRatio:5/3}}],this.rotationConfig=[{label:"ImgManager.ImgEditor.config.schedule",icon:"fal fa-redo-alt",method:"rotateRight",active:!0},{label:"ImgManager.ImgEditor.config.AntiSchedule",icon:"fal fa-undo-alt",method:"rotateLeft"},{label:"ImgManager.ImgEditor.config.flipVert",icon:"fal fa-sort-alt",method:"flipVertical"},{label:"ImgManager.ImgEditor.config.flipHoriz",icon:"fal fa-exchange-alt",method:"flipHorizontal"}],this.zoomConfig=[{label:"ImgManager.ImgEditor.config.zoom",icon:"fal fa-search-plus",method:"zoomIn",active:!0},{label:"ImgManager.ImgEditor.config.dezoom",icon:"fal fa-search-minus",method:"zoomOut"}],this.imgCropperConfig={maintainAspectRatio:!1,aspectRatio:void 0}}return Object.defineProperty(e.prototype,"isImgModified",{get:function(){return this._isImgModified},set:function(e){this._isImgModified=e,e||this.restartEdit()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.init()},e.prototype.init=function(){this.imgRoute=this.getRAWImgRoute(),this.imgType=this.getImgType(),this.croppedImage=null,this.setDefautAspectRatio()},e.prototype.getRAWImgRoute=function(){return this.imgCDNService.getUrlImg("raw")+this.imgToEdit.file_name},e.prototype.getImgType=function(){return this.imgToEdit.file_name?this.imgToEdit.file_name.split(".").pop():void 0},e.prototype.setDefautAspectRatio=function(){var e=parseInt(this.imgToEdit.raw_height),t=parseInt(this.imgToEdit.raw_width);this.defaultAspectRatio=e/t,this.resolutionConfig[0].config.aspectRatio=this.defaultAspectRatio,this.imgCropperConfig.aspectRatio=this.defaultAspectRatio},e.prototype.onEditClosed=function(e){this.editClosed.emit(e)},e.prototype.onRestart=function(){this.isImgModifiedChange.emit(!1)},e.prototype.restartEdit=function(){this.init(),this.resetConfCropper()},e.prototype.onImgModified=function(){this.isImgModified=!0,this.isImgModifiedChange.emit(!0)},e.prototype.fileChangeEvent=function(e){this.imageChangedEvent=e},e.prototype.imageCropped=function(e){this.detectImgCropperChange(),this.currentCroppedImage=e.base64,this.currentCroppedImageChange.emit(this.currentCroppedImage)},e.prototype.imageLoaded=function(){this.showCropper=!0},e.prototype.cropperReady=function(){this.isCropperReady=!0},e.prototype.loadImageFailed=function(){this.onEditClosed(this.msgFailLoad)},e.prototype.changeResolutionSize=function(e){this.setActiveItem(this.resolutionConfig,e);var t=this.resolutionConfig[e].config;this.setCropperProperties(t)},e.prototype.confirmCrop=function(){this.imgRoute=null,this.croppedImage=this.currentCroppedImage,this.isImgCropped=!1,this.isImgCroppedInitilized=!1,this.resetConfCropper(),this.onImgModified()},e.prototype.resetConfCropper=function(){this.scale=1,this.rotation=0,this.canvasRotation=0,this.transform={}},e.prototype.setActiveItem=function(e,t){e.forEach((function(e,n){e.active=n===t}))},e.prototype.setCropperProperties=function(e){for(var t in e)this.imgCropperConfig[t]=e[t]},e.prototype.detectImgCropperChange=function(){this.isImgCropped=this.isImgCroppedInitilized,this.isImgCroppedInitilized=!0},e.prototype.rotateLeft=function(){this.canvasRotation--,this.flipAfterRotate(),this.onImgModified()},e.prototype.rotateRight=function(){this.canvasRotation++,this.flipAfterRotate(),this.onImgModified()},e.prototype.flipHorizontal=function(){this.transform=y(y({},this.transform),{flipH:!this.transform.flipH}),this.onImgModified()},e.prototype.flipVertical=function(){this.transform=y(y({},this.transform),{flipV:!this.transform.flipV}),this.onImgModified()},e.prototype.flipAfterRotate=function(){var e=this.transform.flipH,t=this.transform.flipV;this.transform=y(y({},this.transform),{flipH:t,flipV:e})},e.prototype.zoomOut=function(){this.scale-=this.scale<.2?0:.1,this.transform=y(y({},this.transform),{scale:this.scale}),this.onImgModified()},e.prototype.zoomIn=function(){this.scale+=.1,this.transform=y(y({},this.transform),{scale:this.scale}),this.onImgModified()},e.prototype.applyMethod=function(e){this[e]()},e.ctorParameters=function(){return[{type:D}]},b([t.Input(),_("design:type",Object)],e.prototype,"imgToEdit",void 0),b([t.Input(),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"isImgModified",null),b([t.Output(),_("design:type",Object)],e.prototype,"isImgModifiedChange",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"editClosed",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"currentCroppedImageChange",void 0),e=b([t.Component({selector:"cropper",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    \x3c!-- Resolution --\x3e\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    \x3c!-- Zoom --\x3e\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    \x3c!-- Rotation --\x3e\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',animations:[te]}),_("design:paramtypes",[D])],e)}(),ie=function(){function e(e,t,i,o,a,s){this.imgManager=e,this.imgEventService=t,this.imgSelectionService=i,this.alertService=o,this.userSettingsService=a,this.renamePictureService=s,this.listDisplayed=!1,this.multipleImgMode=!1,this.tableFilters={sort:void 0,order:void 0,searchValue:"",totalItems:0,itemsPerPage:0,currentPage:1},this.widthLargeCard=219,this.widthSmallCard=160,this.nbFakeImg=0,this.imgFullWidthConfig=[{max:419,largeImgWidthFactor:1,smallImgWidthFactor:.5},{max:499,largeImgWidthFactor:1,smallImgWidthFactor:.5},{max:719,largeImgWidthFactor:.5,smallImgWidthFactor:.3333},{max:1023,largeImgWidthFactor:.3333,smallImgWidthFactor:.2},{max:1399,largeImgWidthFactor:.25,smallImgWidthFactor:.125},{max:1599,largeImgWidthFactor:.2,smallImgWidthFactor:.1111},{largeImgWidthFactor:.1666,smallImgWidthFactor:.1}],this.imgWidthConfig=[{max:1024,largeImgWidthFactor:.25,smallImgWidthFactor:.125},{max:1199,largeImgWidthFactor:.3333,smallImgWidthFactor:.2},{max:1299,largeImgWidthFactor:.3333,smallImgWidthFactor:.1666},{max:1399,largeImgWidthFactor:.25,smallImgWidthFactor:.1666},{max:1599,largeImgWidthFactor:.25,smallImgWidthFactor:.14},{largeImgWidthFactor:.25,smallImgWidthFactor:.125}],this.searchQueryChanged=new n.Subject,this.filtersChanged=new n.Subject,this.picturesList=[],this.savePictureList=[],this.nbImgToDelSelected=0,this.disable=!1,this.isLoading=!0,this.isTotalRetieved=!1,this.delListImgLoader=!1,this.initComponent=!0,this.failLoaded=!1,this.displayPexelsResults=!1,this.confirmImgSup=!1,this.pageIndex=0,this.length=0,this.pageSize=30,this.pageSizeOptions=[25,50,100,250],this.errorGetAllImg="ImgManager.ImgLib.errorGetAllImg",this.errorGetTotalImg="ImgManager.ImgLib.errorGetTotalImg",this.errorGetImg="ImgManager.ImgLib.errorGetCanvaImg",this.msgNoImgFound="ImgManager.ImgLib.noImgFound",this.errorRemoveImg="ImgManager.ImgList.errorRemoveImg"}return e.prototype.ngOnInit=function(){this.maxLengthCardShow&&this.reducePictureListMaxLength(),this.setEvents(),this.imgSelectedList=this.imgSelectionService.getImgSelection()},e.prototype.ngAfterViewInit=function(){this.setNbImgToDisplay(),this._getImgList(),this.savePictureList||(this.savePictureList=this.picturesList)},e.prototype.reducePictureListMaxLength=function(){this.picturesList.splice(0,this.maxLengthCardShow)},e.prototype.getImgList=function(){this.filtersChanged.next()},e.prototype.onSwitchFormatDisplayed=function(e){this.listDisplayed=e,this.userSettingsService.setUserDisplayPreference(e),this.imgEventService.emitlistDisplayedChange(e)},e.prototype.onImgSelected=function(){this.setNbImgToDelSelected()},e.prototype.onShowImgUploaded=function(){this.searchText=null,this.searchedValue=null,this.getImgList()},e.prototype.onRenamePicture=function(e){this.renamePictureService.onRenamePicture(e)},e.prototype.removeListImg=function(){var e=this;if(!this.disable){this.disable=!0,this.delListImgLoader=!0,this.confirmImgSup=!1;var t=[];this.picturesList.forEach((function(e){e.delSelected&&(e.deleted=!0,t.push(e.id_file))})),this.imgManager.removeMultipleImg(t).subscribe((function(){e.getImgList(),e.imgSelectionService.removeImgSelectionByIds(t)}),(function(t){e.getImgList(),e.alertService.openAlert(e.errorRemoveImg)}))}},e.prototype.selectImgChosen=function(){if(!this.disable){var e=[];this.picturesList.map((function(t){t.delSelected&&(t.delSelected=!1,t.selected=!0),t.selected&&e.push(t)})),this.setNbImgToDelSelected(),this.imgSelectionService.setImgSelection(e)}},e.prototype.displayConfirmImgSup=function(){this.disable||(this.confirmImgSup=!0)},e.prototype.cancelSup=function(){this.confirmImgSup=!1},e.prototype.onPicturesListChange=function(){this.setNbImgToDelSelected()},e.prototype.onFiltersChange=function(){this.getImgList()},e.prototype.setNbImgToDisplay=function(){var e=this.imgLibContainer.nativeElement.offsetWidth+30,t=window.innerWidth-document.body.offsetWidth,n=S(this.getImgWidthFactors(),2),i=n[0],o=n[1],a=Math.floor(e*o),s=Math.ceil((e+t)*i);this.nbMaxImgPerLine=Math.floor(e/a),this.nbMinImgPerLine=Math.floor((e+t)/s),this.pageSize=this.getTotalImgPerPage()},e.prototype.getImgWidthFactors=function(){var e,t,n=window.innerWidth,i=0,o=[],a=this.fullSize?this.imgFullWidthConfig:this.imgWidthConfig;try{for(var s=C(a),r=s.next();!r.done;r=s.next()){var l=r.value;if(!l.max){o=[l.largeImgWidthFactor,l.smallImgWidthFactor];break}if(i<n&&n<=l.max){o=[l.largeImgWidthFactor,l.smallImgWidthFactor];break}i=l.max}}catch(t){e={error:t}}finally{try{r&&!r.done&&(t=s.return)&&t.call(s)}finally{if(e)throw e.error}}return o},e.prototype.getTotalImgPerPage=function(){for(var e=this.nbMinImgPerLine;e<30||e%this.nbMaxImgPerLine!=0||e%this.nbMinImgPerLine!=0;)e+=this.nbMinImgPerLine;return e},e.prototype.setParams=function(){this.params={limit:this.tableFilters.itemsPerPage?this.tableFilters.itemsPerPage.toString():this.pageSize.toString(),page:this.tableFilters.currentPage.toString()},this.tableFilters.searchValue&&(this.params["display_name:contains"]=this.tableFilters.searchValue.toString())},e.prototype.initVariables=function(e){this.nbImgToDelSelected=0,this.disable=!1,this.isLoading=!1,this.delListImgLoader=!1,this.initComponent=!1,this.displayPexelsResults=!1,this.failLoaded=!e,this.nbFakeImg=0},e.prototype.selectImgSelected=function(){if(this.imgSelectedList&&this.imgSelectedList.length){var e=[];this.imgSelectedList.forEach((function(t){return e.push(t.id_file)})),this.picturesList.forEach((function(t){-1!==e.indexOf(t.id_file)&&(t.selected=!0)}))}},e.prototype.displayPexelsLib=function(){this.displayPexelsResults=!0,this.alertService.openAlert(this.msgNoImgFound)},e.prototype.calculNbImgFake=function(e){var t="small"===this.stateDisplayed||"img-upload"===this.tabDisplayed?this.nbMaxImgPerLine:this.nbMinImgPerLine;e%t!=0&&(this.nbFakeImg=t-e%t)},e.prototype.getImg=function(e){var t=this;this.imgManager.getShopImg(e).pipe(r.take(1)).subscribe((function(e){t.imgAlreadyExist(e.id_file)||(t.picturesList.unshift(e),t.length+=1)}),(function(e){t.alertService.openAlert(t.errorGetImg)}))},e.prototype.imgAlreadyExist=function(e){var t,n;try{for(var i=C(this.picturesList),o=i.next();!o.done;o=i.next()){if(o.value.id_file===e)return!0}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return!1},e.prototype.setNbImgToDelSelected=function(){this.nbImgToDelSelected=this.picturesList.filter((function(e){return e.delSelected})).length,this.nbImgToDelSelected||(this.confirmImgSup=!1)},e.prototype.setEvents=function(){var e=this;this.searchQueryChanged.pipe(r.debounceTime(400)).subscribe((function(t){e.getImgList()})),this.filtersChanged.pipe(r.debounceTime(800)).subscribe((function(t){e._getImgList()})),this.imgRemovedEvent=this.imgEventService.getImgRemovedEventListner().subscribe((function(t){e.getImgList()})),this.imgAddedEvent=this.imgEventService.getImgAddedEventListner().subscribe((function(t){t&&!e.imgAlreadyExist(t)&&e.getImg(t)})),this.imgSelectionChange=this.imgSelectionService.getImgSelectionChange().subscribe((function(t){var n,i;if(!e.listDisplayed){var o=[];t.map((function(e){return o.push(e.id_file)}));try{for(var a=C(e.picturesList),s=a.next();!s.done;s=a.next()){var r=s.value;-1===o.indexOf(r.id_file)&&(r.selected=!1)}}catch(e){n={error:e}}finally{try{s&&!s.done&&(i=a.return)&&i.call(a)}finally{if(n)throw n.error}}}}))},e.prototype._getImgList=function(){var e=this;this.isLoading=!0,this.displayPexelsResults=!1,this.setParams(),this.refreshTotalImgList(),this.imgManager.getShopImgList(this.params).pipe(r.take(1)).subscribe((function(t){e.initVariables(!0);var n=t.data.length;e.calculNbImgFake(n),e.picturesList=t.data,e.renamePictureService.setPicturesList(e.picturesList),e.selectImgSelected(),e.length=e.isTotalRetieved?e.length:t.totalRecords,e.tableFilters.totalItems=e.isTotalRetieved?e.tableFilters.totalItems:t.totalRecords,e.tableFilters.itemsPerPage=e.tableFilters.itemsPerPage?e.tableFilters.itemsPerPage:e.pageSize,e.maxLengthCardShow&&(e.picturesList=e.picturesList.splice(0,8)),0===t.totalRecords&&e.displayPexelsLib()}),(function(t){e.alertService.openAlert(e.errorGetAllImg),e.initVariables(!1)}))},e.prototype.refreshTotalImgList=function(){var e=this,t=this.tableFilters.searchValue;this.isTotalRetieved&&t===this.previousSearchValue||(this.isTotalRetieved=!1,this.imgManager.getShopTotalImgList(this.params).pipe(r.take(1)).subscribe((function(n){e.previousSearchValue=t,e.isTotalRetieved=!0,e.length=n.totalRecords,e.tableFilters.totalItems=n.totalRecords}),(function(t){e.initVariables(!1)})))},e.prototype.ngOnDestroy=function(){this.searchQueryChanged.unsubscribe(),this.imgRemovedEvent.unsubscribe(),this.imgAddedEvent.unsubscribe(),this.imgSelectionChange.unsubscribe()},e.ctorParameters=function(){return[{type:E},{type:T},{type:x},{type:z},{type:M},{type:N}]},b([t.Input(),_("design:type",String)],e.prototype,"stateDisplayed",void 0),b([t.Input(),_("design:type",String)],e.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"fullSize",void 0),b([t.Input(),_("design:type",Number)],e.prototype,"maxLengthCardShow",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"listDisplayed",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"multipleImgMode",void 0),b([t.ViewChild("imgLibContainer"),_("design:type",t.ElementRef)],e.prototype,"imgLibContainer",void 0),e=b([t.Component({selector:"images-view",template:'<div class="images-view" [ngClass]="{\'fullSize\': fullSize, \'small\': stateDisplayed === \'small\'}" [@easeInOut]="\'in\'">\n  \x3c!-- Subheader : Img number and actions btn (sup img list, switch forma display) --\x3e\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        \x3c!-- For listforma : Display btn del multiple img & Confirm action --\x3e\n        <div class="images-view__container__boxAction">\n\n\n            \x3c!-- Sélectionner --\x3e\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            \x3c!-- Display btn del multiple img --\x3e\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            \x3c!-- Confirm action --\x3e\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        \x3c!-- Swith mosaic/list forma --\x3e\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  \x3c!-- Images section --\x3e\n<ng-scrollbar\n  #scrollable\n  [visibility]="\'native\'"\n  class="images-view__scroll"\n  [ngClass]="{\n    \'images-view__scroll--hide--mosaic\': displayPexelsResults && !listDisplayed,\n    \'images-view__scroll--hide--mosaic--small\': displayPexelsResults && !listDisplayed && stateDisplayed === \'small\',\n    \'images-view__scroll--hide--table\': displayPexelsResults && listDisplayed,\n    \'images-view__scroll--full\': stateDisplayed === \'full\',\n    \'images-view__scroll--smallDisplay\' : stateDisplayed === \'small\' && tabDisplayed !== \'img-upload\',\n    \'images-view__scroll--smallUploadDisplay\' : stateDisplayed === \'small\' && tabDisplayed === \'img-upload\',\n    \'images-view__scroll--window\': stateDisplayed === \'window\'\n}"\n>\n  <div #imgLibContainer class="images-view__wrapper">\n    <div *ngIf="!listDisplayed || stateDisplayed === \'small\'" [@easeInOut]="\'in\'">\n      <mosaic-view\n        [picturesList]="picturesList"\n        (picturesListChange)="onPicturesListChange()"\n        [tableFilters]="tableFilters"\n        (filtersChange)="onFiltersChange()"\n        [(disable)]="disable"\n        (pictureNameChange)="onRenamePicture($event)"\n        [nbFakeImg]="nbFakeImg"\n        [stateDisplayed]="stateDisplayed"\n        [tabDisplayed]="tabDisplayed"\n        [displayPexelsResults]="displayPexelsResults"\n        [isLoading]="isLoading"\n        [fullSize]="fullSize"\n      >\n      </mosaic-view>\n    </div>\n\n    <div *ngIf="listDisplayed && stateDisplayed !== \'small\'" [@easeInOut]="\'in\'">\n      <table-view\n        [picturesList]="picturesList"\n        (picturesListChange)="onPicturesListChange()"\n        [tableFilters]="tableFilters"\n        (filtersChange)="onFiltersChange()"\n        [(disable)]="disable"\n        (pictureNameChange)="onRenamePicture($event)"\n        [displayPexelsResults]="displayPexelsResults"\n        [stateDisplayed]="stateDisplayed"\n        [isLoading]="isLoading"\n        >\n      </table-view>\n    </div>\n\n  </div>\n</ng-scrollbar>\n\n\x3c!-- Pexels Section - When no img found --\x3e\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',animations:[A,te]}),_("design:paramtypes",[E,T,x,z,M,N])],e)}(),oe=function(e){function n(t,n,i,o,a,s,r,l){var p=e.call(this,t,n,i,o,a,s,r,l)||this;return p.nbFakeImg=0,p}return v(n,e),n.prototype.ngOnInit=function(){},n.prototype.onSearchChange=function(e){this.tableFilters.sort=void 0,this.tableFilters.order=void 0,this.tableFilters.currentPage=1,this.filtersChange.emit(this.tableFilters)},n.prototype.onCardRenamePicture=function(e){this.pictureNameChange.next(e)},n.ctorParameters=function(){return[{type:E},{type:x},{type:i.HttpClient},{type:D},{type:T},{type:z},{type:a.TranslateService},{type:P}]},b([t.Input(),_("design:type",String)],n.prototype,"tabDisplayed",void 0),b([t.Input(),_("design:type",Boolean)],n.prototype,"fullSize",void 0),b([t.Input(),_("design:type",Number)],n.prototype,"nbFakeImg",void 0),n=b([t.Component({selector:"mosaic-view",template:'<div class="mosaic" [ngClass]="{\'fullSize\': fullSize, \'small\': stateDisplayed === \'small\', \'mosaic--displayPexelsImg\': displayPexelsResults}">\n  \x3c!-- Search section --\x3e\n  <div\n    class="mosaic__search"\n    [ngClass]="{\'mosaic__search--small\': stateDisplayed === \'small\'}"\n    *ngIf="tabDisplayed !== \'img-upload\'">\n      <wz-input-search\n        [(ngModel)]="tableFilters.searchValue"\n        (changeDebounced)="onSearchChange($event)"\n        [placeholder]="\'ImgManager.SearchBar.placeholder\' | translate"\n        [smallPadding]="stateDisplayed === \'small\'"\n      ></wz-input-search>\n  </div>\n\n  \x3c!-- Cards section --\x3e\n  <div\n    class="mosaic__container__cards"\n    [ngClass]="{\'mosaic__container__cards--padding\': stateDisplayed !== \'window\'}"\n    [@listAnimation]="picturesList.length"\n    *ngIf="!isLoading && !displayPexelsResults"\n    >\n      <img-card\n        *ngFor="let picture of picturesList; let index = index;"\n        [picture]="picture"\n        [stateDisplayed]="stateDisplayed"\n        [tabDisplayed]="tabDisplayed"\n        [disable]="disable"\n        (toggleImgSelected)="onToggleSelectImg(index)"\n        (pictureNameChange)="onCardRenamePicture($event)"\n        [fullSize]="fullSize"\n      ></img-card>\n      <div\n        *ngFor="let fakeImg of nbFakeImg | numberToArray"\n        class="mosaic__container__cards__fakeImg"\n        [ngClass]="{\'mosaic__container__cards__fakeImg--smallFakeImg\': stateDisplayed === \'small\' || tabDisplayed === \'img-upload\'}">\n      </div>\n  </div>\n  \x3c!-- Loader section --\x3e\n  <div class="mosaic__container__loader"  *ngIf="isLoading">\n    <wz-loader [small]="true"></wz-loader>\n  </div>\n\n  \x3c!-- Pagination section --\x3e\n  <div class="mosaic__pagination" *ngIf="picturesList.length && tabDisplayed !== \'img-upload\' && !displayPexelsResults" >\n    <wz-pagination\n    [pagination]="tableFilters"\n    (pageChange)="onFiltersChange()"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n',animations:[H]}),_("design:paramtypes",[E,x,i.HttpClient,D,T,z,a.TranslateService,P])],n)}(G),ae=function(e){function n(t,n,i,o,a,s,r,l){var p=e.call(this,t,n,i,o,a,s,r,l)||this;return p.dataTableName="imgagesView",p}return v(n,e),n.prototype.ngOnInit=function(){},n.ctorParameters=function(){return[{type:E},{type:x},{type:i.HttpClient},{type:D},{type:T},{type:z},{type:a.TranslateService},{type:P}]},n=b([t.Component({selector:"table-view",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    \x3c!-- Header Section --\x3e\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    \x3c!-- Body Section --\x3e\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              \x3c!-- If the img is not loaded, or the link is broken, an icon is displayed --\x3e\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        \x3c!-- Dropdown --\x3e\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',animations:[H]}),_("design:paramtypes",[E,x,i.HttpClient,D,T,z,a.TranslateService,P])],n)}(G),se=function(){function e(e){this.filterRoutingBuilder=e,this.filterGroups=new Map,this.dataTableFilters={sort:void 0,order:void 0,searchValue:void 0,totalItems:0,itemsPerPage:0,currentPage:0},this.sortSubject=new n.Subject}return e.prototype.getTableFilterGroup=function(e){if(this.filterGroups.has(e))return this.filterGroups.get(e);var t=this.filterRoutingBuilder.group(this.dataTableFilters,e);return this.filterGroups.set(e,t),t},e.prototype.emitSortChange=function(e,t,n){this.sortSubject.next({dataTableName:e,sortName:t,order:n})},e.prototype.getSortChangeListner=function(){return this.sortSubject.asObservable()},e.prototype.setPaginationFilters=function(e,t,n,i){this.getTableFilterGroup(e).setValues({itemsPerPage:n,currentPage:i})},e.prototype.setInitialPaginationFiltersIfNotExist=function(e,t,n){var i=this.getTableFilterGroup(e);i.setValues({itemsPerPage:i.get("itemsPerPage")?parseInt(i.get("itemsPerPage")):t,currentPage:i.get("currentPage")?parseInt(i.get("currentPage")):n})},e.ctorParameters=function(){return[{type:s.NwbFilterRoutingBuilder}]},e.ɵprov=t["ɵɵdefineInjectable"]({factory:function(){return new e(t["ɵɵinject"](s.NwbFilterRoutingBuilder))},token:e,providedIn:"root"}),e=b([t.Injectable({providedIn:"root"}),_("design:paramtypes",[s.NwbFilterRoutingBuilder])],e)}(),re=function(){function e(e){this.filtersTableService=e,this.tableFiltersChange=new t.EventEmitter,this.placeholder="",this.checkbox=!1,this.toggleAllCheckBox=new t.EventEmitter,this.disableSearch=!1,this.disablePagniation=!1,this.isLoading=!1}return e.prototype.ngOnInit=function(){var e=this;this.headerCheckBoxId=h.v4(),this.tableRoutingName&&(this._filterGroup=this.filtersTableService.getTableFilterGroup(this.tableRoutingName),this._filterGroup.valuesChange$.next([]),this.setTablesFilters(),this.filterGroupChangeSub=this._filterGroup.valuesChange$.subscribe((function(t){e.setTablesFilters()})))},e.prototype.onToggleAllCheckBox=function(e){this.toggleAllCheckBox.emit(e.target.checked)},e.prototype.searchChange=function(e){this.tableFilters.sort=void 0,this.tableFilters.order=void 0,this.tableFilters.currentPage=1,this.tableFiltersChange.emit(this.tableFilters),this._filterGroup&&this._filterGroup.setValues({searchValue:this.tableFilters.searchValue,sort:void 0,order:void 0,currentPage:1})},e.prototype.pageChange=function(){this.tableFiltersChange.emit(this.tableFilters),this._filterGroup&&this._filterGroup.setValues({itemsPerPage:this.tableFilters.itemsPerPage,currentPage:this.tableFilters.currentPage})},e.prototype.setTablesFilters=function(){this.tableFilters={sort:this._filterGroup.get("sort"),order:this._filterGroup.get("order"),searchValue:this._filterGroup.get("searchValue"),itemsPerPage:this._filterGroup.get("itemsPerPage")?parseInt(this._filterGroup.get("itemsPerPage")):0,currentPage:this._filterGroup.get("currentPage")?parseInt(this._filterGroup.get("currentPage")):0,totalItems:this.tableFilters.totalItems},this.tableFiltersChange.emit(this.tableFilters)},e.prototype.ngDestroy=function(){this.filterGroupChangeSub&&this.filterGroupChangeSub.unsubscribe()},e.ctorParameters=function(){return[{type:se}]},b([t.Input(),_("design:type",Object)],e.prototype,"tableFilters",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"tableFiltersChange",void 0),b([t.Input(),_("design:type",String)],e.prototype,"tableRoutingName",void 0),b([t.Input(),_("design:type",String)],e.prototype,"placeholder",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"checkbox",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"toggleAllCheckBox",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disableSearch",void 0),b([t.Input(),_("design:type",Boolean)],e.prototype,"disablePagniation",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"isLoading",void 0),e=b([t.Component({selector:"wz-table",template:'<div class="wz-table">\n  \x3c!-- Header section --\x3e\n  <div class="wz-table__head" id="headerTable">\n    <div *ngIf="checkbox" class="wz-table__head__cell wz-table__head__cell--checkbox">\n      <wz-checkbox [id]="headerCheckBoxId" (change)="onToggleAllCheckBox($event)" [alone]="true"></wz-checkbox>\n    </div>\n\n    \x3c!-- Header contents are added with the headerCell directive --\x3e\n    <ng-content select="[headerCell]"></ng-content>\n  </div>\n\n  \x3c!-- Search section --\x3e\n  <div *ngIf="!disableSearch" class="wz-table__search">\n    <wz-input-search\n      [(ngModel)]="tableFilters.searchValue"\n      (changeDebounced)="searchChange($event)"\n      [placeholder]="placeholder"\n      [smallPadding]="true"\n    ></wz-input-search>\n  </div>\n\n  \x3c!-- Body section --\x3e\n  <div class="wz-table__body">\n    \x3c!-- Loader on body --\x3e\n    <div class="wz-table__body__loader" *ngIf="isLoading">\n      <wz-loader [small]="true"></wz-loader>\n    </div>\n    \x3c!-- Body contents are added with the tableRow directive --\x3e\n    <ng-content select="[tableRow]" *ngIf="!isLoading"></ng-content>\n  </div>\n\n  \x3c!-- Pagination section --\x3e\n  <wz-pagination *ngIf="!disablePagniation" [pagination]="tableFilters" (pageChange)="pageChange()"></wz-pagination>\n</div>\n',encapsulation:t.ViewEncapsulation.None}),_("design:paramtypes",[se])],e)}(),le=function(){function e(){this.placeholder="",this.smallPadding=!1,this.innerValue="",this.changeDebounced=new t.EventEmitter,this.onTouchedCallback=function(){},this.onChangeCallback=function(){}}var n;return n=e,Object.defineProperty(e.prototype,"value",{get:function(){return this.innerValue},set:function(e){e!==this.innerValue&&(this.innerValue=e,this.onChangeCallback(e))},enumerable:!0,configurable:!0}),e.prototype.writeValue=function(e){e!==this.innerValue&&(this.innerValue=e)},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.handleDebouncedKeyUp=function(e){this.changeDebounced.emit(e.target.value)},b([t.Input(),_("design:type",Object)],e.prototype,"placeholder",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"smallPadding",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"id",void 0),b([t.Output(),_("design:type",Object)],e.prototype,"changeDebounced",void 0),e=n=b([t.Component({selector:"wz-input-search",template:'<div class="input-search field" [ngClass]="smallPadding ? \'small-padding\' : \'\'">\n  <p class="control has-icons-left has-icons-right">\n    <input\n      [placeholder]="placeholder"\n      value=""\n      class="input"\n      type="text"\n      [attr.id]="id"\n      [(ngModel)]="value"\n      debounceKeyUp\n      [debounceTime]="1000"\n      (onEventChange)="handleDebouncedKeyUp($event)"\n    />\n    <i class="icon fal fa-search"></i>\n  </p>\n</div>\n',providers:[{provide:p.NG_VALUE_ACCESSOR,useExisting:n,multi:!0}]})],e)}(),pe=function(){function e(){}return e.prototype.transform=function(e,t,n){if(!(e>=0&&t>=0&&n>=0))throw new Error("currentPage or totalItems or itemsPerPage is/are missing in PagniationIsLastPage pipe.");return e===Math.ceil(t/n)},e=b([t.Pipe({name:"IsLastPage"})],e)}(),ce=function(){function e(){this.pageChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"pagination",{get:function(){return this._pagination},set:function(e){this._pagination=e},enumerable:!0,configurable:!0}),e.prototype.decrementPage=function(){this.pagination.currentPage<=1||(this.pagination.currentPage--,this.pageChange.emit(this.pagination))},e.prototype.incrementPage=function(){(new pe).transform(this.pagination.currentPage,this.pagination.totalItems,this.pagination.itemsPerPage)||(this.pagination.currentPage++,this.pageChange.emit(this.pagination))},e.prototype.onGotoPageChange=function(e){this.pagination.currentPage=parseInt(e),this.pageChange.emit(this.pagination)},b([t.Input(),_("design:type",Object),_("design:paramtypes",[Object])],e.prototype,"pagination",null),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"pageChange",void 0),e=b([t.Component({selector:"wz-pagination",template:'<div class="wz-pagination" *ngIf="pagination && pagination.itemsPerPage">\n  <div class="wz-pagination__wrapper">\n    <div class="wz-pagination__wrapper__page">\n      <p>{{ \'PaginationComponent.page\' | translate }}</p>\n\n      <wz-page-selector [pagination]="pagination" [totalItems]="pagination.totalItems" (pageChange)="onGotoPageChange($event)"></wz-page-selector>\n    </div>\n\n    <div class="wz-pagination__wrapper__elements">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class="wz-pagination__wrapper__arrows">\n      <div\n        (click)="decrementPage()"\n        class="wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left"\n        [ngClass]="{ \'wz-pagination__wrapper__arrows__arrow--disabled\': pagination.currentPage === 1 }"\n      >\n        <span class="wz-pagination__wrapper__arrows__arrow__icon"></span>\n      </div>\n      <div\n        (click)="incrementPage()"\n        class="wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right"\n        [ngClass]="{\n          \'wz-pagination__wrapper__arrows__arrow--disabled\':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }"\n      >\n        <span class="wz-pagination__wrapper__arrows__arrow__icon"></span>\n      </div>\n    </div>\n  </div>\n</div>\n'}),_("design:paramtypes",[])],e)}(),de=function(){function e(){}return e.prototype.transform=function(e,t){if(!(e>=0&&t>=0))throw new Error("totalItems or itemsPerPage missing in ArrayTotalPages pipe.");var n=Math.ceil(e/t);return Array.apply(null,{length:n}).map(Number.call,Number).map((function(e){return e+1}))},e=b([t.Pipe({name:"ArrayTotalPages"})],e)}(),ge=function(){function e(e){this.translateService=e}return e.prototype.transform=function(e,t,n){var i=0,o=0;return t&&(i=(e-1)*n+1,o=e*n),o>t&&(o=t),this.translateService.instant("PaginationComponent.on",{low:i,high:o,total:t})},e.ctorParameters=function(){return[{type:a.TranslateService}]},e=b([t.Pipe({name:"customPagniationText"}),_("design:paramtypes",[a.TranslateService])],e)}(),me=function(){function e(){this.label="",this.alone=!1,this.checked=!1,this.id="",this.disabled=!1}var n;return n=e,e.prototype.registerOnChange=function(e){this._onChange=e},e.prototype.registerOnTouched=function(e){this._onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.writeValue=function(e){this.value=e},e.prototype.onChange=function(e){this._onChange&&this._onChange(e)},b([t.Input(),_("design:type",Object)],e.prototype,"label",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"value",void 0),b([t.Input(),_("design:type",String)],e.prototype,"type",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"alone",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"checked",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"id",void 0),b([t.Input(),_("design:type",String)],e.prototype,"name",void 0),e=n=b([t.Component({selector:"wz-checkbox",template:'<div class="checkBoxField field" [ngClass]="{ \'field--nowrap\': type === \'column\', alone: alone }">\n  <div class="field__row">\n    <input\n      type="checkbox"\n      [id]="id"\n      class="is-checkradio"\n      [name]="name"\n      [value]="value"\n      [disabled]="disabled"\n      [(ngModel)]="value"\n      [checked]="checked"\n      (ngModelChange)="onChange($event)"\n    />\n    <label [attr.for]="id">{{ label }}</label>\n  </div>\n</div>\n',encapsulation:t.ViewEncapsulation.None,providers:[{provide:p.NG_VALUE_ACCESSOR,useExisting:n,multi:!0}]}),_("design:paramtypes",[])],e)}(),ue=function(){function e(e,n,i,o,a,s){this.currentRow=e,this.appRef=n,this.renderer=i,this.document=o,this.resolver=a,this.injector=s,this.checkBoxValueChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"checkBoxValue",{get:function(){return this._value},set:function(e){this._value=e,this.checkboxComponentRef&&this.setCheckBoxValue()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.createCheckBoxComponent(),this.handleChecboxInputs(),this.handleCheckboxOutputs()},e.prototype.createCheckBoxComponent=function(){var e=document.createElement("div");e.className="wz-table__body__line__cell wz-table__body__line__cell--checkbox",this.renderer.insertBefore(this.currentRow.nativeElement,e,this.currentRow.nativeElement.firstChild),this.htmlContainer=new he(e,this.appRef,this.resolver,this.injector),this.checkboxComponentRef=this.htmlContainer.attach(me)},e.prototype.handleChecboxInputs=function(){this.checkboxComponentRef.instance.id=this.checkBoxId?this.checkBoxId:h.v4(),this.checkboxComponentRef.instance.name=this.checkBoxName?this.checkBoxName:void 0,this.checkboxComponentRef.instance.alone=!0,this.setCheckBoxValue()},e.prototype.setCheckBoxValue=function(){this.checkboxComponentRef.instance.value=this.checkBoxValue},e.prototype.handleCheckboxOutputs=function(){var e=this;this.checkboxComponentRef.instance.registerOnChange((function(){e._toggleCheckbox()}))},e.prototype._toggleCheckbox=function(){this.checkBoxValue=!this.checkBoxValue,this.checkBoxValueChange.emit(this.checkBoxValue)},e.prototype.ngOnDestroy=function(){this.htmlContainer.dispose()},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.ApplicationRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]},{type:t.ComponentFactoryResolver},{type:t.Injector}]},b([t.Input("checkBoxId"),_("design:type",Object)],e.prototype,"checkBoxId",void 0),b([t.Input("checkBoxName"),_("design:type",String)],e.prototype,"checkBoxName",void 0),b([t.Input("checkBoxValue"),_("design:type",Boolean),_("design:paramtypes",[Boolean])],e.prototype,"checkBoxValue",null),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"checkBoxValueChange",void 0),e=b([t.Directive({selector:"[checkBoxRow]"}),I(3,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.ApplicationRef,t.Renderer2,Object,t.ComponentFactoryResolver,t.Injector])],e)}(),he=function(){function e(e,t,n,i){this.hostElement=e,this.appRef=t,this.componentFactoryResolver=n,this.injector=i,this.attached=!1}return e.prototype.attach=function(e){var t=this;if(this.attached)throw new Error("component has already been attached");this.attached=!0;var n=this.componentFactoryResolver.resolveComponentFactory(e).create(this.injector);return this.appRef.attachView(n.hostView),this.disposeFn=function(){t.appRef.detachView(n.hostView),n.destroy()},this.hostElement.appendChild(n.hostView.rootNodes[0]),n},e.prototype.dispose=function(){this.attached&&this.disposeFn()},e}(),fe=function(){function e(e,t,n){this.currentCell=e,this.renderer=t,this.document=n,this.centerCellValue=["left","center","right"]}return e.prototype.ngAfterViewInit=function(){this.applyCustomStylesOnCell()},e.prototype.applyCustomStylesOnCell=function(){if(this.currentCell.nativeElement.style.flexGrow=void 0!==this.columnSize?this.columnSize:"1",this.renderer.addClass(this.currentCell.nativeElement,"wz-table__body__line__cell"),this.centerCell){if(-1===this.centerCellValue.indexOf(this.centerCell))throw"Error : The centerCell directive has no matched value. The value must be one of the following : left, center, right.";var e="wz-table__body__line__cell--center--"+this.centerCell;this.renderer.addClass(this.currentCell.nativeElement,e)}},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]}]},b([t.Input("columnSize"),_("design:type",String)],e.prototype,"columnSize",void 0),b([t.Input("centerCell"),_("design:type",String)],e.prototype,"centerCell",void 0),e=b([t.Directive({selector:"[tableColumn]"}),I(2,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.Renderer2,Object])],e)}(),ve=function(){function e(e,n,i,o){this.currentCell=e,this.renderer=n,this.document=i,this.filtersTableService=o,this._headerName="",this.filterRouting=!1,this.onSortChange=new t.EventEmitter,this.tableFiltersChange=new t.EventEmitter,this.centerCellValue=["left","center","right"],this.subscriptions=[]}return Object.defineProperty(e.prototype,"headerName",{get:function(){return this._headerName},set:function(e){this._headerName=e,this.setHeaderName()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.tableName&&this.sortName&&(this.filterRouting?this.handleSortRouting():this.handleSortBasic())},e.prototype.ngAfterViewInit=function(){this.applyCustomStylesOnCell(),this.renderHeaderColumn()},e.prototype.handleSortRouting=function(){var e=this;this.filterGroup=this.filtersTableService.getTableFilterGroup(this.tableName);var t=this.filterGroup.valuesChange$.subscribe((function(t){var n=t.filter((function(e){return"sort"===e.key}))[0];e.sortName!==n.value&&e.resetSortIcon()}));this.subscriptions.push(t)},e.prototype.handleSortBasic=function(){var e=this,t=this.filtersTableService.getSortChangeListner().subscribe((function(t){e.tableName===t.dataTableName&&e.sortName!==t.sortName&&e.resetSortIcon()}));this.subscriptions.push(t)},e.prototype.resetSortIcon=function(){this.contentHeader.className=this.contentHeader.className.replace(this.getCurrentSortIcon(),"idle")},e.prototype.applyCustomStylesOnCell=function(){if(this.currentCell.nativeElement.style.flexGrow=void 0!==this.columnSize?this.columnSize:"1",this.renderer.addClass(this.currentCell.nativeElement,"wz-table__head__cell"),this.centerCell){if(-1===this.centerCellValue.indexOf(this.centerCell))throw"Error : The centerCell directive has no matched value. The value must be one of the following : left, center, right.";var e="wz-table__head__cell--center--"+this.centerCell;this.renderer.addClass(this.currentCell.nativeElement,e)}},e.prototype.renderHeaderColumn=function(){this.createHeaderContent(),this.renderer.appendChild(this.currentCell.nativeElement,this.contentHeader)},e.prototype.createHeaderContent=function(){this.contentHeader=document.createElement("a"),this.contentHeader.className="wz-table__head__cell__search",this.setHeaderName(),this.tableName&&this.sortName&&this.handleSort()},e.prototype.setHeaderName=function(){this.contentHeader&&(this.contentHeader.innerHTML=this.headerName)},e.prototype.handleSort=function(){var e=this;this.contentHeader.className+=" wz-table__head__cell__search--"+this.getInitialSortIcon(),this.renderer.listen(this.contentHeader,"click",(function(){var t,n,i,o=e.getCurrentSortIcon();switch(o){case"idle":t="up",n=e.sortName,i=!0;break;case"up":t="down",n=e.sortName,i=!1;break;case"down":default:t="idle"}e.contentHeader.className=e.contentHeader.className.replace(o,t),e.emitEvents(n,i)}))},e.prototype.getInitialSortIcon=function(){if(!this.filterRouting)return"idle";var e="idle";return this.filterGroup.get("sort")===this.sortName&&(e="true"==this.filterGroup.get("order")?"up":"down"),e},e.prototype.getCurrentSortIcon=function(){return/wz-table__head__cell__search--(?<icon>\w+)/.exec(this.contentHeader.className).groups.icon},e.prototype.emitEvents=function(e,t){this.filterRouting?this.filterGroup.setValues({sort:e,order:t,currentPage:1}):this.filtersTableService.emitSortChange(this.tableName,this.sortName,t),this.tableFilters&&(this.tableFilters.sort=this.sortName,this.tableFilters.order=t,this.tableFilters.currentPage=1,this.tableFiltersChange.emit(this.tableFilters)),this.onSortChange.emit(t)},e.prototype.ngOnDestroy=function(){this.subscriptions.forEach((function(e){e.unsubscribe()}))},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]},{type:se}]},b([t.Input("headerName"),_("design:type",String),_("design:paramtypes",[String])],e.prototype,"headerName",null),b([t.Input("columnSize"),_("design:type",String)],e.prototype,"columnSize",void 0),b([t.Input("filterRouting"),_("design:type",Boolean)],e.prototype,"filterRouting",void 0),b([t.Input("tableName"),_("design:type",String)],e.prototype,"tableName",void 0),b([t.Input("sortName"),_("design:type",String)],e.prototype,"sortName",void 0),b([t.Input("centerCell"),_("design:type",String)],e.prototype,"centerCell",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"onSortChange",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"tableFilters",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"tableFiltersChange",void 0),e=b([t.Directive({selector:"[headerCell]"}),I(2,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.Renderer2,Object,se])],e)}(),ye=function(){function e(e,t,n){this.currentCell=e,this.renderer=t,this.document=n}return e.prototype.ngAfterViewInit=function(){this.applyCustomStylesOnCell()},e.prototype.applyCustomStylesOnCell=function(){this.renderer.addClass(this.currentCell.nativeElement,"wz-table__body__line")},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:void 0,decorators:[{type:t.Inject,args:[l.DOCUMENT]}]}]},e=b([t.Directive({selector:"[tableRow]"}),I(2,t.Inject(l.DOCUMENT)),_("design:paramtypes",[t.ElementRef,t.Renderer2,Object])],e)}(),be=function(){function e(e){this.imgCDNService=e}return e.prototype.transform=function(e,t){if(!t)throw"The size is undefined in ImageSrcPipe.";var n=this.imgCDNService.getUrlImg(t);if(!n)throw"The expected size is not defined in ImageSrcPipe.";return n+e},e.ctorParameters=function(){return[{type:D}]},e=b([t.Pipe({name:"imgSrc"}),_("design:paramtypes",[D])],e)}(),Ie=function(){function e(){this.debounceTime=500,this.onEventChange=new t.EventEmitter,this.emitEvent$=new n.Subject,this.subscription$=new n.Subject}return e.prototype.ngOnInit=function(){var e=this;this.emitEvent$.pipe(r.takeUntil(this.subscription$),r.debounceTime(this.debounceTime),r.distinctUntilChanged(),r.tap((function(t){return e.emitChange(t)}))).subscribe()},e.prototype.emitChange=function(e){this.onEventChange.emit(e)},e.prototype.ngOnDestroy=function(){this.subscription$.next(),this.subscription$.complete()},b([t.Input(),_("design:type",Number)],e.prototype,"debounceTime",void 0),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"onEventChange",void 0),e=b([t.Directive({selector:"AbstractDebounceDirective"}),_("design:paramtypes",[])],e)}(),_e=function(e){function n(){return e.call(this)||this}return v(n,e),n.prototype.onKeyUp=function(e){e.preventDefault(),this.emitEvent$.next(e)},b([t.HostListener("keyup",["$event"]),_("design:type",Function),_("design:paramtypes",[Object]),_("design:returntype",void 0)],n.prototype,"onKeyUp",null),n=b([t.Directive({selector:"input[debounceKeyUp]"}),_("design:paramtypes",[])],n)}(Ie),Ce=function(){function e(){this.small=!1}return b([t.Input(),_("design:type",String)],e.prototype,"text",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"small",void 0),b([t.Input(),_("design:type",String)],e.prototype,"position",void 0),e=b([t.Component({selector:"wz-loader",template:'<div class="wz-loader" [ngClass]="{\'is-small\': small}" [ngStyle]="{\'position\': position}">\n  <div class=\'loader loader1\'>\n    <div>\n      <div>\n        <div>\n          <div>\n            <div>\n              <div></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <p class="is-textcentered" *ngIf="text" [innerHTML]="text"></p>\n</div>\n',encapsulation:t.ViewEncapsulation.None})],e)}(),Se=function(){function e(){this.icon=!0,this.warning=!1,this.success=!1,this.iconClass="fas fa-info"}return e.prototype.ngOnInit=function(){},b([t.Input(),_("design:type",Object)],e.prototype,"icon",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"warning",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"success",void 0),b([t.Input(),_("design:type",Object)],e.prototype,"iconClass",void 0),e=b([t.Component({selector:"wz-alert",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',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)}"]}),_("design:paramtypes",[])],e)}(),we=function(){function e(){}return e.prototype.transform=function(e){return Array.from("x".repeat(e))},e=b([t.Pipe({name:"numberToArray"})],e)}(),xe=function(){function e(){this.openAbsoluteSelect=!1,this.largeNumberOfPage=!1,this.numberOfPage=0,this.pageChange=new t.EventEmitter}return Object.defineProperty(e.prototype,"pagination",{get:function(){return this._pagination},set:function(e){this._pagination=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"totalItems",{get:function(){return this._totalItems},set:function(e){this.numberOfPage=Math.ceil(e/this.pagination.itemsPerPage),this.largeNumberOfPage=this.numberOfPage>30},enumerable:!0,configurable:!0}),e.prototype.onGotoPageChange=function(e,t){t?(this.pageChange.emit(e),this.openAbsoluteSelect=!1):this.pageChange.emit(parseInt(e.target.value))},b([t.Input(),_("design:type",Object),_("design:paramtypes",[Object])],e.prototype,"pagination",null),b([t.Input(),_("design:type",Number),_("design:paramtypes",[Number])],e.prototype,"totalItems",null),b([t.Output(),_("design:type",t.EventEmitter)],e.prototype,"pageChange",void 0),e=b([t.Component({selector:"wz-page-selector",template:'<div class="wz-selector">\n\n  <div class="wz-selector__default" [ngStyle]="{\'width\': 40 + (10*pagination.currentPage.toString().length) + \'px\'}">\n    <div class="wz-selector__default__base" *ngIf="largeNumberOfPage;" (click)="openAbsoluteSelect = !openAbsoluteSelect">\n      <input name="page-input" [value]="pagination.currentPage" (change)="onGotoPageChange($event, false);openAbsoluteSelect = false;" [ngStyle]="{\'width\': 40 + (10*pagination.currentPage.toString().length) + \'px\'}" />\n      <i class="fas fa-sort-down"></i>\n    </div>\n    <div class="wz-selector__default__absolute" *ngIf="openAbsoluteSelect">\n      <div class="wz-selector__default__absolute__wrapper" *ngFor="let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result">\n        <div class="wz-selector__default__absolute__wrapper__item" [ngClass]="{\'selected\': pageIndex.value === pagination.currentPage}" (click)="onGotoPageChange(pageIndex.value, true)">\n          <span>{{ pageIndex.display }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf="!largeNumberOfPage">\n    <select name="page" (change)="onGotoPageChange($event, false)" [ngStyle]="{\'width\': 40 + (10*pagination.currentPage.toString().length) + \'px\'}">\n      <ng-container *ngFor="let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage">\n        <option [selected]="pageIndex === pagination.currentPage" [value]="pageIndex">\n          {{ pageIndex }}\n        </option>\n      </ng-container>\n    </select>\n  </ng-container>\n</div>\n'}),_("design:paramtypes",[])],e)}(),Le=function(){function e(){}return e.prototype.transform=function(e,t,n){if(!(e>=0&&t>=0))throw new Error("totalItems or itemsPerPage missing in ArrayTotalPages pipe.");var i=n<=15?0:n-15,o=Math.ceil(e/t),a=Array.apply(null,{length:32}).map(Number.call,Number).map((function(e){var t={display:i+e+1,value:i+e+1};return 30===e&&(t.display="..."),31===e&&(t.display=o,t.value=o),t}));return i&&a.unshift({display:1,value:1},{display:"...",value:2}),a},e=b([t.Pipe({name:"LargeNumberOfPage"})],e)}(),Ee=[k,j,F,W,$,B,q,ee,K,Q,Ce,X,ne,ie,oe,ae,re,le,ce,me,Se,xe],De=[U,J,Y,Z,fe,ue,ve,ye,Ie,_e],Pe=[de,pe,ge,be,we,Le],Me=function(){function e(){}return e=b([t.NgModule({declarations:w(Ee,De,Pe),imports:[l.CommonModule,i.HttpClientModule,p.FormsModule,c.NgScrollbarModule,d.NgScrollbarReachedModule,s.NwbAllModule,g.ImageCropperModule,m.CdkTableModule,u.DragDropModule,a.TranslateModule],providers:[],exports:[k]})],e)}(),Re=function(){},Te=function(){this.image_manager_route="",this.pexels_route="",this.canva_url="",this.assets_route="assets/img-manager/"},Oe=function(){this.url_raw_image="",this.url_100_image="",this.url_200_image="",this.url_400_image="",this.url_800_image=""};e.CanvaButtonApi=Re,e.CanvaService=R,e.ImgApiDto=Te,e.ImgCDNConfigDTO=Oe,e.ImgManagerConfigDto=L,e.ImgManagerService=E,e.ImgSelectionService=x,e.RenamePictureService=N,e.WzImgManagerComponent=k,e.WzImgManagerModule=Me,e.ɵa=P,e.ɵb=D,e.ɵba=re,e.ɵbb=se,e.ɵbc=le,e.ɵbd=ce,e.ɵbe=me,e.ɵbf=Se,e.ɵbg=xe,e.ɵbh=U,e.ɵbi=J,e.ɵbj=Y,e.ɵbk=Z,e.ɵbl=fe,e.ɵbm=ue,e.ɵbn=ve,e.ɵbo=ye,e.ɵbp=Ie,e.ɵbq=_e,e.ɵbr=de,e.ɵbs=pe,e.ɵbt=ge,e.ɵbu=be,e.ɵbv=we,e.ɵbw=Le,e.ɵc=M,e.ɵd=T,e.ɵe=O,e.ɵf=j,e.ɵg=z,e.ɵh=F,e.ɵi=A,e.ɵj=W,e.ɵk=H,e.ɵl=V,e.ɵm=$,e.ɵn=G,e.ɵo=B,e.ɵp=q,e.ɵq=ee,e.ɵr=K,e.ɵs=Q,e.ɵt=Ce,e.ɵu=X,e.ɵv=ne,e.ɵw=te,e.ɵx=ie,e.ɵy=oe,e.ɵz=ae,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=wizishop-img-manager.umd.min.js.map