[{"__symbolic":"module","version":3,"metadata":{"ImageCrop":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"img-crop","template":"<!--\n    @Author: Alex Sorafumo <Yuion>\n    @Date:   19/09/2016 12:34 PM\n    @Email:  alex@yuion.net\n    @Filename: img-crop.template.html\n    @Last modified by:   Yuion\n    @Last modified time: 15/12/2016 11:30 AM\n    -->\n    \n    <div class=\"aca img-crop\">\n        <div class=\"img-space\">\n            <div class=\"drop-zone\" *ngIf=\"!image_data&&select\" drop-target [stream]=\"'img-crop' + (this.id !== '' ? '-' + this.id: '')\" indicate=\"hover\">\n                 <div class=\"loading drop\">\n                     Drag &amp; drop<br/><br/>\n                     <i class=\"material-icons\">system_update_alt</i>\n                 </div>\n            </div >\n            <img-cropper *ngIf=\"!saving&&image_data&&image_data!==''\" #cropper [image]=\"data\" [settings]=\"cropperSettings\"></img-cropper>\n            <div class=\"img-error\" *ngIf=\"error\"> File selected is not a valid image file</div>\n            <div class=\"loading img\" *ngIf=\"saving\">\n                <img [src]=\"data.image\" > <br/>\n            </div >\n            <div class=\"loading\" *ngIf=\"loading\">\n                <spinner type=\"dot-circle\"></spinner >\n            </div >\n        </div >\n        <br />\n        <div class=\"img-tools\">\n            <input *ngIf=\"select\" class=\"img-select\" type=\"file\" [file-stream]=\"'img-crop' + (this.id !== '' ? '-' + this.id: '')\" />\n            <btn btnType=\"raised-3d\" (onClick)=\"saveImage()\" [disabled]=\"saving\" >Save</btn>\n        </div>\n        <div class=\"loading save\" *ngIf=\"saving\" >Saving...</div>\n    </div>\n    ","styles":[".img-crop{font-size:16px;padding:.5em;position:relative;text-align:center}.loading{font-size:1em;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.loading.save{background-color:#fff;border-radius:.1em;box-shadow:0 0 1px 1px rgba(0,0,0,0.54);color:rgba(0,0,0,0.87);padding:.5em 1em;top:15%;white-space:nowrap}.drop-zone{background-color:rgba(0,0,0,0.2);border-radius:.2em;font-size:1.6em;height:100%;white-space:nowrap;width:100%}.drop-zone .material-icons{font-size:1.5em}.drop-zone.hover{background-color:rgba(0,0,0,0.54)}.img-space{background-color:rgba(255,255,255,0.54);border-radius:.2em;display:inline-block;height:300px;max-height:99vmin;max-width:99vmin;overflow:hidden;position:relative;width:300px}.img-space canvas{display:none;height:0;width:0}.img-space img-cropper{height:16em;left:0;max-height:99vmin;max-width:99vmin;position:absolute;top:0;width:16em}.img-space .image-error{left:50%;max-width:75%;position:absolute;text-align:center;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}\n    "]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ratio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"completed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"image_cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["cropper"]}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["image"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services","name":"DropService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setupSize":[{"__symbolic":"method"}],"loadImage":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"ImageCrop":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"img-crop","template":"<!--\n    @Author: Alex Sorafumo <Yuion>\n    @Date:   19/09/2016 12:34 PM\n    @Email:  alex@yuion.net\n    @Filename: img-crop.template.html\n    @Last modified by:   Yuion\n    @Last modified time: 15/12/2016 11:30 AM\n    -->\n    \n    <div class=\"aca img-crop\">\n        <div class=\"img-space\">\n            <div class=\"drop-zone\" *ngIf=\"!image_data&&select\" drop-target [stream]=\"'img-crop' + (this.id !== '' ? '-' + this.id: '')\" indicate=\"hover\">\n                 <div class=\"loading drop\">\n                     Drag &amp; drop<br/><br/>\n                     <i class=\"material-icons\">system_update_alt</i>\n                 </div>\n            </div >\n            <img-cropper *ngIf=\"!saving&&image_data&&image_data!==''\" #cropper [image]=\"data\" [settings]=\"cropperSettings\"></img-cropper>\n            <div class=\"img-error\" *ngIf=\"error\"> File selected is not a valid image file</div>\n            <div class=\"loading img\" *ngIf=\"saving\">\n                <img [src]=\"data.image\" > <br/>\n            </div >\n            <div class=\"loading\" *ngIf=\"loading\">\n                <spinner type=\"dot-circle\"></spinner >\n            </div >\n        </div >\n        <br />\n        <div class=\"img-tools\">\n            <input *ngIf=\"select\" class=\"img-select\" type=\"file\" [file-stream]=\"'img-crop' + (this.id !== '' ? '-' + this.id: '')\" />\n            <btn btnType=\"raised-3d\" (onClick)=\"saveImage()\" [disabled]=\"saving\" >Save</btn>\n        </div>\n        <div class=\"loading save\" *ngIf=\"saving\" >Saving...</div>\n    </div>\n    ","styles":[".img-crop{font-size:16px;padding:.5em;position:relative;text-align:center}.loading{font-size:1em;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.loading.save{background-color:#fff;border-radius:.1em;box-shadow:0 0 1px 1px rgba(0,0,0,0.54);color:rgba(0,0,0,0.87);padding:.5em 1em;top:15%;white-space:nowrap}.drop-zone{background-color:rgba(0,0,0,0.2);border-radius:.2em;font-size:1.6em;height:100%;white-space:nowrap;width:100%}.drop-zone .material-icons{font-size:1.5em}.drop-zone.hover{background-color:rgba(0,0,0,0.54)}.img-space{background-color:rgba(255,255,255,0.54);border-radius:.2em;display:inline-block;height:300px;max-height:99vmin;max-width:99vmin;overflow:hidden;position:relative;width:300px}.img-space canvas{display:none;height:0;width:0}.img-space img-cropper{height:16em;left:0;max-height:99vmin;max-width:99vmin;position:absolute;top:0;width:16em}.img-space .image-error{left:50%;max-width:75%;position:absolute;text-align:center;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}\n    "]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ratio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"completed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"image_cropper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["cropper"]}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["image"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../../services","name":"DropService"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"setupSize":[{"__symbolic":"method"}],"loadImage":[{"__symbolic":"method"}],"saveImage":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]