angular-upcrop
Version:
Library with upload and crop feature for Angular 6+
2 lines • 23.7 kB
JavaScript
!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/material"),require("ng2-file-upload"),require("@angular/common"),require("angular-cropperjs"),require("@angular/flex-layout")):"function"==typeof define&&define.amd?define("angular-upcrop",["exports","@angular/core","@angular/material","ng2-file-upload","@angular/common","angular-cropperjs","@angular/flex-layout"],o):o(t["angular-upcrop"]={},t.ng.core,t.ng.material,null,t.ng.common,null,t.ng["flex-layout"])}(this,function(t,o,r,e,a,p,n){"use strict";var i=function(){function t(t,o){var r=this;this.dialogRef=t,this.data=o,this.cropData={},this.uploadedImages=[],this.uploader=null,this.steps={total:2,options:[{label:"Subir imagens",number:1,next:2,nextDisabled:function(){return r.step1NextDisabled()},nextAction:function(){r.goToStep2()}},{label:"Cortar imagens",number:2,previus:1,previusAction:function(){r.goToStep1()}}],current:{}}}return t.prototype.ngOnInit=function(){this.steps.current=this.steps.options[0]},t.prototype.goToStep1=function(){this.upcropCrop.unsetCropping(),this.steps.current=this.steps.options[0],this.upcropCrop.current=!1,this.upcropCrop.currentNumber=!1},t.prototype.goToStep2=function(){this.steps.current=this.steps.options[1],this.upcropCrop.setCropping(this.upcropUpload.uploader)},t.prototype.finish=function(){var t=this;this.upcropUpload.uploader.onCompleteAll=function(){t.upcropCrop.uploading=!1,t.dialogRef.close(t.uploadedImages)},this.upcropCrop.emitOnCropImage(),this.upcropUpload.uploader.options.additionalParameter.cropData=this.cropData,this.upcropCrop.uploading=!0,this.upcropUpload.uploader.uploadAll()},t.prototype.step1NextDisabled=function(){return!this.upcropUpload.uploader.queue.length},t.prototype.onCropImage=function(t){var o=this.createUrlParams(t.data);this.upcropUpload.uploader.queue[t.file].url=this.data.uploadConfig.url+o},t.prototype.onUploadImage=function(t){this.uploadedImages.push(t)},t.prototype.createUrlParams=function(o){if(!o)return"";return"?"+Object.keys(o).map(function(t){return t+"="+encodeURIComponent(o[t])}).join("&")},t.decorators=[{type:o.Component,args:[{selector:"upcrop-dialog",template:'<h2 mat-dialog-title class="has-text-danger">\n Upload de imagens\n <small>com corte</small>\n</h2>\n<mat-dialog-content>\n\n \x3c!-- STEPS --\x3e\n <div steps>\n <div steps-content fxLayout="row" fxLayoutAlign="start center">\n <button mat-icon-button fxHide.xs [disabled]="!steps.current.previus || (steps.current.previusDisabled && steps.current.previusDisabled())"\n (click)="steps.current.previusAction()">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n <span fxFlex></span>\n <h3>Passo\n <b>{{steps.current.number}}</b> de\n <b>{{steps.total}}</b> /\n <span class="has-text-primary">{{steps.current.label}}</span>\n </h3>\n <span fxFlex></span>\n <button mat-icon-button fxHide.xs [disabled]="!steps.current.next || (steps.current.nextDisabled && steps.current.nextDisabled())"\n (click)="steps.current.nextAction()">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n </div>\n </div>\n\n \x3c!-- STEP 1 / UPLOAD --\x3e\n <div class="step-1" [hidden]="steps.current.number != 1">\n <upcrop-upload #upcropUpload [config]="data.uploadConfig" (onUploadImage)="onUploadImage($event)"></upcrop-upload>\n </div>\n\n \x3c!-- STEP 2 / CROP --\x3e\n <div class="step-2" [hidden]="steps.current.number != 2">\n <upcrop-crop #upcropCrop [config]="data.cropConfig" (onCropImage)="onCropImage($event)"></upcrop-crop>\n </div>\n</mat-dialog-content>\n<mat-dialog-actions *ngIf="steps.current.number == 1">\n <button mat-button mat-dialog-close>Fechar</button>\n <button mat-button color="primary" [disabled]="!upcropUpload.uploader.queue.length" (click)="goToStep2()">Continuar</button>\n</mat-dialog-actions>\n<mat-dialog-actions *ngIf="steps.current.number == 2">\n <button mat-button (click)="goToStep1()">Voltar</button>\n <button mat-button color="primary" [fxHide]="upcropCrop.uploader?.queue?.length == (upcropCrop.currentNumber + 1)" (click)="upcropCrop.goToNextCrop()">Próxima imagem</button>\n <button mat-button color="primary" [fxHide]="upcropCrop.uploader?.queue?.length > (upcropCrop.currentNumber + 1)" [disabled]="upcropCrop.uploading"\n (click)="finish()">Concluir</button>\n</mat-dialog-actions>\n',styles:['[mat-dialog-title] small{color:#b5b5b5!important;font:400 16px/28px Roboto,"Helvetica Neue",sans-serif!important;margin:0 0 16px!important}[steps]{margin:0 -24px 16px;padding-top:16px;padding-bottom:16px;background-color:rgba(0,0,0,.04)}[steps] .has-text-primary{color:#3f51b5!important}[mat-dialog-title] .has-text-danger{color:#f44336!important}']}]}],t.ctorParameters=function(){return[{type:r.MatDialogRef},{type:undefined,decorators:[{type:o.Inject,args:[r.MAT_DIALOG_DATA]}]}]},t.propDecorators={upcropUpload:[{type:o.ViewChild,args:["upcropUpload"]}],upcropCrop:[{type:o.ViewChild,args:["upcropCrop"]}]},t}(),l=function(){function t(t){this.dialog=t,this.dialogConfig={width:"80%"},this.uploadConfig={url:null,authToken:null,autoUpload:!1,additionalParameter:{},withCredentials:!1},this.cropConfig={movable:!0,scalable:!0,zoomable:!0,viewMode:1,autoCrop:!0,autoCropArea:1}}return t.prototype.open=function(t,o,r){var e=this;return void 0===t&&(t=this.dialogConfig),void 0===o&&(o=this.uploadConfig),void 0===r&&(r=this.cropConfig),this.uploadConfig=Object.assign(this.uploadConfig,o),this.cropConfig=Object.assign(this.cropConfig,r),this.dialogConfig=Object.assign({},this.dialogConfig,t,{data:{uploadConfig:this.uploadConfig,cropConfig:this.cropConfig}}),new Promise(function(o,r){e.dialog.open(i,e.dialogConfig).afterClosed().subscribe(function(t){t?o(t):r()})})},t.decorators=[{type:o.Injectable}],t.ctorParameters=function(){return[{type:r.MatDialog}]},t}(),u=function(){function t(){}return t.prototype.ngOnInit=function(){},t.decorators=[{type:o.Component,args:[{selector:"angular-upcrop",template:"<p>\n upcrop works!\n</p>\n",styles:[""]}]}],t.ctorParameters=function(){return[]},t}(),d=function(){function t(){this.config={},this.uploader=[],this.onCropImage=new o.EventEmitter,this.uploading=!1,this.current=!1,this.currentNumber=!1}return t.prototype.ngOnInit=function(){},t.prototype.setCropping=function(t){this.current=!1,this.currentNumber=!1,this.uploader=t,this.uploader.queue,this.goToNextCrop()},t.prototype.unsetCropping=function(){this.angularCropper.cropper.destroy(),this.current=!1},t.prototype.goToNextCrop=function(){var o=this;if(this.uploader.queue.length){!1===this.currentNumber?this.currentNumber=0:(this.emitOnCropImage(),this.unsetCropping(),this.currentNumber++),this.current=this.uploader.queue[this.currentNumber];var r=new FileReader;r.onloadend=function(t){o.current._dataUrl=r.result},r.readAsDataURL(this.current._file)}},t.prototype.emitOnCropImage=function(){this.onCropImage.emit({data:this.angularCropper.cropper.getData(),file:this.currentNumber})},t.prototype.zoomIn=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.zoom(.1)},t.prototype.zoomOut=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.zoom(-.1)},t.prototype.goLeft=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.move(-10,0)},t.prototype.goRight=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.move(10,0)},t.prototype.goUp=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.move(0,-10)},t.prototype.goDown=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.move(0,10)},t.prototype.rotateLeft=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.rotate(-45)},t.prototype.rotateRight=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.rotate(45)},t.prototype.reset=function(){this.angularCropper&&this.angularCropper.cropper&&this.angularCropper.cropper.reset()},t.decorators=[{type:o.Component,args:[{selector:"upcrop-crop",template:'\x3c!-- MAIN LOAD --\x3e\n<div class="crop-loading" [fxHide]="!uploading">\n <div class="spinner"></div>\n</div>\n\n<div [hidden]="uploading" class="upcrop-crop">\n <h2 class="has-text-centered mat-subheading-2">Imagem {{currentNumber + 1}} de {{uploader?.queue?.length}}</h2>\n\n <div class="crop-image-container">\n <angular-cropper #angularCropper *ngIf="current && current._dataUrl" [cropperOptions]="config" [imageUrl]="current?._dataUrl"></angular-cropper>\n </div>\n\n \x3c!--CROPPER CONTROLS--\x3e\n <div class="crop-controls" fxLayout fxLayoutAlign="center center" fxLayoutWrap *ngIf="current && current._dataUrl">\n <button mat-button (click)="zoomIn()" class="mat-icon-button" aria-label="Aumentar zoom" mdTooltip="Aumentar zoom">\n <mat-icon>zoom_in</mat-icon>\n </button>\n\n <button mat-button (click)="zoomOut()" class="mat-icon-button" aria-label="Diminuir zoom" mdTooltip="Diminuir zoom">\n <mat-icon>zoom_out</mat-icon>\n </button>\n\n <button mat-button (click)="goLeft()" class="mat-icon-button" aria-label="Mover para esquerda" mdTooltip="Mover para esquerda">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button (click)="goRight()" class="mat-icon-button" aria-label="Mover para direita" mdTooltip="Mover para direita">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n\n <button mat-button (click)="goUp()" class="mat-icon-button" aria-label="Mover para cima" mdTooltip="Mover para cima">\n <mat-icon>keyboard_arrow_up</mat-icon>\n </button>\n\n <button mat-button (click)="goDown()" class="mat-icon-button" aria-label="Mover para baixo" mdTooltip="Mover para baixo">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n\n <button mat-button (click)="reset()" class="mat-icon-button mat-primary" aria-label="Restaurar imagem original" mdTooltip="Restaurar imagem original">\n <mat-icon>cached</mat-icon>\n </button>\n </div>\n</div>\n',styles:[".crop-image-container{max-height:500px;width:100%}.crop-image-container img{max-width:100%;max-height:100%}.crop-controls{padding-top:20px;padding-bottom:20px}.crop-loading{min-height:120px;padding-top:34px;margin:100px 24px;box-sizing:border-box;flex-direction:column;max-width:100%;place-content:center;align-items:center;display:flex}.crop-loading .spinner{margin-top:-20px;border:4px solid rgba(0,0,0,.06);border-top:4px solid #2196f3;border-radius:50%;width:50px;height:50px;-webkit-animation:1.1s linear infinite spin;animation:1.1s linear infinite spin}.upcrop-crop .has-text-centered{text-align:center!important}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={angularCropper:[{type:o.ViewChild,args:["angularCropper"]}],config:[{type:o.Input}],uploader:[{type:o.Input}],onCropImage:[{type:o.Output}]},t}(),c=function(){function t(){this.config={},this.uploadQueue=[],this.onUploadQueue=new o.EventEmitter,this.onUploadImage=new o.EventEmitter,this.uploader=new e.FileUploader({}),this.hasFileOver=!1}return t.prototype.ngOnInit=function(){this.setUploader()},t.prototype.setUploader=function(){var p=this;this.uploader.setOptions({url:this.config.url,authToken:this.config.authToken,autoUpload:this.config.autoUpload,additionalParameter:this.config.additionalParameter}),this.uploader.onAfterAddingFile=function(t){t.withCredentials=p.config.withCredentials,p.onUploadQueue.emit({file:t})},this.uploader.onSuccessItem=function(t,o,r,e){if(200==r){var a=JSON.parse(o);p.onUploadImage.emit({data:a})}}},t.prototype.onFileOver=function(t){this.hasFileOver=t},t.prototype.truncate=function(t,o){if(!t)return t;var r=t.substring(t.lastIndexOf(".")+1,t.length).toLowerCase(),e=t.replace("."+r,"");return e.length<=o?t:(e=e.substr(0,o)+(t.length>o?"[...]":""))+"."+r},t.decorators=[{type:o.Component,args:[{selector:"upcrop-upload",template:'<label ng2FileDrop multiple class="my-drop-zone" [ngClass]="{\'nv-file-over\': hasFileOver}" (fileOver)="onFileOver($event)"\n [uploader]="uploader" fxLayout fxLayoutAlign="center center">\n Área de upload\n <input type="file" ng2FileSelect multiple [uploader]="uploader" style="display: none" />\n</label>\n\n\x3c!-- FILES --\x3e\n<table class="table upcrop-upload-table">\n <thead>\n <tr>\n <th>Preview</th>\n <th>Arquivo</th>\n <th style="width:30px; text-align: center">\n <mat-icon class="is-pulled-right">settings</mat-icon>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor="let item of uploader.queue">\n <td class="image-preview" style="width:100px">\n <img upcropImagePreview [image]="item?._file" class="media-object" />\n </td>\n <td>{{ truncate(item?.file?.name, 16) }}</td>\n <td class="actions" style="width:30px">\n <button class="danger-btn" mat-icon-button color="warn" (click)="item.remove()">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </tr>\n <tr [hidden]="uploader.queue.length">\n <td colspan="3" class="has-text-danger">\n Nenhum arquivo, adicione acima.\n </td>\n </tr>\n </tbody>\n</table>\n',styles:[".my-drop-zone{border:2px dashed rgba(0,0,0,.04);width:100%;display:flex;padding:20px;background-color:rgba(0,0,0,.04);color:rgba(0,0,0,.7)}.nv-file-over{border:2px dashed rgba(244,67,54,.4)}[upcropImagePreview]{display:block}.upcrop-upload-table{background-color:#fff;color:#363636;border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:0}.upcrop-upload-table td,.upcrop-upload-table th{border:1px solid #dbdbdb;border-width:0 0 1px;padding:.5em .75em;vertical-align:top}.upcrop-upload-table td.is-white,.upcrop-upload-table th.is-white{background-color:#fff;border-color:#fff;color:#0a0a0a}.upcrop-upload-table td.is-black,.upcrop-upload-table th.is-black{background-color:#0a0a0a;border-color:#0a0a0a;color:#fff}.upcrop-upload-table td.is-light,.upcrop-upload-table th.is-light{background-color:#f5f5f5;border-color:#f5f5f5;color:#363636}.upcrop-upload-table td.is-dark,.upcrop-upload-table th.is-dark{background-color:#363636;border-color:#363636;color:#f5f5f5}.upcrop-upload-table td.is-primary,.upcrop-upload-table th.is-primary{background-color:#00d1b2;border-color:#00d1b2;color:#fff}.upcrop-upload-table td.is-info,.upcrop-upload-table th.is-info{background-color:#3273dc;border-color:#3273dc;color:#fff}.upcrop-upload-table td.is-success,.upcrop-upload-table th.is-success{background-color:#23d160;border-color:#23d160;color:#fff}.upcrop-upload-table td.is-warning,.upcrop-upload-table th.is-warning{background-color:#ffdd57;border-color:#ffdd57;color:rgba(0,0,0,.7)}.upcrop-upload-table td.is-danger,.upcrop-upload-table th.is-danger{background-color:#ff3860;border-color:#ff3860;color:#fff}.upcrop-upload-table td.is-narrow,.upcrop-upload-table th.is-narrow{white-space:nowrap;width:1%}.upcrop-upload-table th{color:#363636;text-align:left}.upcrop-upload-table tr:hover{background-color:#fafafa}.upcrop-upload-table tr.is-selected{background-color:#00d1b2;color:#fff}.upcrop-upload-table tr.is-selected a,.upcrop-upload-table tr.is-selected strong{color:currentColor}.upcrop-upload-table tr.is-selected td,.upcrop-upload-table tr.is-selected th{border-color:#fff;color:currentColor}.upcrop-upload-table tfoot td,.upcrop-upload-table tfoot th{border-width:2px 0 0;color:#363636}.upcrop-upload-table tbody tr:last-child td,.upcrop-upload-table tbody tr:last-child th{border-bottom-width:0}.upcrop-upload-table.is-bordered td,.upcrop-upload-table.is-bordered th{border-width:1px}.upcrop-upload-table.is-bordered tr:last-child td,.upcrop-upload-table.is-bordered tr:last-child th{border-bottom-width:1px}.upcrop-upload-table.is-fullwidth{width:100%}.upcrop-upload-table.is-narrow td,.upcrop-upload-table.is-narrow th{padding:.25em .5em}.upcrop-upload-table.is-striped tbody tr:not(.is-selected):nth-child(even){background-color:#fafafa}.upcrop-upload-table.is-striped tbody tr:not(.is-selected):nth-child(even):hover{background-color:#f5f5f5}td,th{padding:0;text-align:left}.upcrop-upload-table-search{display:flex;padding:1.3em 1.6em}.upcrop-upload-table-search input{font-size:14px;flex:1 1 100%;box-sizing:border-box;-webkit-box-flex:1;border:none;background-color:transparent;outline:-webkit-focus-ring-color auto 0!important}.upcrop-upload-table-search>mat-icon{margin-right:16px;margin-top:2px}[table-loading]{position:absolute;width:100%;margin-top:59px!important;background-color:rgba(255,255,255,.9);height:calc(100% - 59px);z-index:1}[table-no-entries]{padding:1.6em}.mat-card[has-table]{padding:0}.mat-card[has-table] .mat-card-actions{padding:8px!important;margin:0;border-top:1px solid #dbdbdb;border-color:rgba(0,0,0,.09)}.mat-card[has-table] .mat-card-actions .mat-icon-button{color:rgba(0,0,0,.54)}.mat-card[has-table] .mat-card-actions .mat-icon-button[disabled]{color:rgba(0,0,0,.18)}.mat-card[has-table] .mat-card-actions .mat-paginator-page-size-label{margin:0 15px;color:rgba(0,0,0,.54);font-size:12px;font-weight:400}.upcrop-upload-table .actions .mat-icon-button{height:30px!important;width:30px;line-height:30px;flex-direction:column;box-sizing:border-box;display:flex;max-width:100%;place-content:center;align-items:center}.upcrop-upload-table .actions .mat-icon-button .mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.upcrop-upload-table thead tr{background-color:rgba(0,0,0,.04)!important}.upcrop-upload-table thead td:first-of-type,.upcrop-upload-table thead th:first-of-type{padding-left:1.8em}.upcrop-upload-table thead td:last-of-type,.upcrop-upload-table thead th:last-of-type{padding-right:1.8em}.upcrop-upload-table thead td mat-icon,.upcrop-upload-table thead th mat-icon{height:16px;width:16px;line-height:16px;font-size:16px;vertical-align:bottom;margin-right:3px}.upcrop-upload-table tbody td,.upcrop-upload-table tbody th{border-color:rgba(0,0,0,.04)}.upcrop-upload-table tbody td:first-of-type,.upcrop-upload-table tbody th:first-of-type{padding-left:1.6em}.upcrop-upload-table tbody td:last-of-type,.upcrop-upload-table tbody th:last-of-type{padding-right:1.6em}.upcrop-upload-table thead td,.upcrop-upload-table thead th{color:rgba(0,0,0,.54);font-size:12px;font-weight:400;padding:1.3em .75em;border:0}.upcrop-upload-table tbody td{color:rgba(0,0,0,.87);padding:1em .75em;font-size:.9rem;font-weight:400}@media (max-width:800px){.upcrop-upload-table{display:inline-block;vertical-align:top;max-width:100%;overflow-x:auto;white-space:nowrap;border-collapse:collapse;border-spacing:0;display:flex;overflow:hidden;background:0 0}.upcrop-upload-table .actions a{margin-top:-.35em}.upcrop-upload-table .is-pulled-right{float:none!important}.upcrop-upload-table thead{display:flex;flex-shrink:0;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.upcrop-upload-table thead td,.upcrop-upload-table thead th{padding:1.3em 1.8em;text-align:right;width:100%!important}.upcrop-upload-table thead td mat-icon,.upcrop-upload-table thead th mat-icon{margin-right:0}.upcrop-upload-table tbody{flex:1 1 100%;box-sizing:border-box;-webkit-box-flex:1;-webkit-overflow-scrolling:touch;background:radial-gradient(left,ellipse,rgba(0,0,0,.2) 0,transparent 75%) 0 center,radial-gradient(right,ellipse,rgba(0,0,0,.2) 0,transparent 75%) 100% center;background-size:10px 100%,10px 100%;background-attachment:scroll,scroll;background-repeat:no-repeat;display:flex;position:relative;overflow-x:auto;overflow-y:hidden;margin-right:1.6em}.upcrop-upload-table tbody tr{flex:1 1 100%;box-sizing:border-box;-webkit-box-flex:1}.upcrop-upload-table tbody td,.upcrop-upload-table tbody th{padding:1.155em 1.6em;text-align:left!important}.upcrop-upload-table tbody td:first-of-type,.upcrop-upload-table tbody th:first-of-type{padding-left:1.6em}.upcrop-upload-table tbody td:last-of-type,.upcrop-upload-table tbody th:last-of-type{padding-right:1.6em}.upcrop-upload-table tr{display:flex;flex-direction:column;min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}.upcrop-upload-table td,.upcrop-upload-table th{display:block;background-image:none!important;border-left:0}.upcrop-upload-table td:first-child,.upcrop-upload-table th:first-child{background-image:linear-gradient(to right,#fff 50%,rgba(255,255,255,0) 100%);background-repeat:no-repeat;background-size:20px 100%}.upcrop-upload-table td:last-child,.upcrop-upload-table th:last-child{background-image:linear-gradient(to left,#fff 50%,rgba(255,255,255,0) 100%);background-repeat:no-repeat;background-position:100% 0;background-size:20px 100%}.upcrop-upload-table td:not(:last-child),.upcrop-upload-table th:not(:last-child){border-bottom:0}}.upcrop-upload-table ::-webkit-scrollbar{height:8px;overflow:visible;width:16px}.upcrop-upload-table ::-webkit-scrollbar-button{height:0;width:0}.upcrop-upload-table ::-webkit-scrollbar-corner{background:0 0}.upcrop-upload-table ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2);background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 6px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07)}.upcrop-upload-table ::-webkit-scrollbar-track{background-clip:padding-box;border:solid transparent;border-width:0 0 0 4px}[enterlist] [has-table]{margin-right:-24px;margin-left:-24px}[enterlist] [has-table] .upcrop-upload-table{background-color:transparent}[enterlist] [has-table] .upcrop-upload-table thead tr{background-color:rgba(0,0,0,.02)!important}[enterlist] [has-table] .upcrop-upload-table tr:hover{background-color:inherit}.image-preview img{max-width:100%}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={config:[{type:o.Input}],uploadQueue:[{type:o.Input}],onUploadQueue:[{type:o.Output}],onUploadImage:[{type:o.Output}]},t}(),s=function(){function t(t,o){this.el=t,this.renderer=o}return t.prototype.ngOnChanges=function(t){var o=new FileReader,r=this.el;if(o.onloadend=function(t){r.nativeElement.src=o.result},this.image)return o.readAsDataURL(this.image)},t.decorators=[{type:o.Directive,args:[{selector:"img[upcropImagePreview]"}]}],t.ctorParameters=function(){return[{type:o.ElementRef},{type:o.Renderer2}]},t.propDecorators={image:[{type:o.Input}]},t}(),b=function(){function t(){}return t.decorators=[{type:o.NgModule,args:[{imports:[a.CommonModule,e.FileUploadModule,n.FlexLayoutModule,r.MatDialogModule,r.MatIconModule,r.MatButtonModule,r.MatCardModule,r.MatTooltipModule,p.AngularCropperjsModule],declarations:[u,i,d,c,s],exports:[u,i,d,c,s],entryComponents:[i]}]}],t}();t.UpcropService=l,t.UpcropComponent=u,t.UpcropDialogComponent=i,t.UpcropCropComponent=d,t.UpcropUploadComponent=c,t.UpcropImagePreviewDirective=s,t.AngularUpcropModule=b,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=angular-upcrop.umd.min.js.map