@bsj/angular-image-picker
Version:
Angular image picker
1 lines • 4.98 kB
JSON
[{"__symbolic":"module","version":4,"metadata":{"ImageMetadata":{"__symbolic":"interface"},"AngularImagePickerImageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"tzd-image-picker-image","template":"<div class=\"angular-image-picker-image-wrapper\"> <div *ngIf=\"imageBeforeBase64\" title=\"image before effect\" class=\"angular-image-picker-image\"> <img [src]=\"imageBeforeBase64\"> </div> <div *ngIf=\"imageAfterBase64\" title=\"image after effect\" class=\"angular-image-picker-image\"> <img [src]=\"imageAfterBase64\"> </div> </div> <div *ngIf=\"debug\"> {{ReducedMemoryRepresentation(sizeBefore)}} -> {{ReducedMemoryRepresentation(sizeAfter)}} = {{(((sizeAfter / sizeBefore) * 100) - 100).toFixed(2)}}% </div> <div> <h3>Choose an effect</h3> <div style=\"display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch;\"> <button style=\"margin: 8px 2px;\" *ngFor=\"let effect of effects\" type=\"button\" mat-raised-button color=\"accent\" (click)=\"setEffect(effect)\"> {{effect}} </button> <button style=\"margin: 8px 2px;\" type=\"button\" mat-raised-button color=\"default\" (click)=\"setEffect(undefined)\"> Reset </button> </div> <form role=\"form\" [formGroup]=\"imageForm\" *ngIf=\"effectName\"> <div *ngIf=\"effectName == 'Manual'\"> <div> <p class=\"adjustment-label\">Redscalse</p> <mat-slider name=\"redScale\" formControlName=\"redScale\" placeholder=\"Redscalse\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> <div> <p class=\"adjustment-label\">Greenscalse</p> <mat-slider name=\"greenScale\" formControlName=\"greenScale\" placeholder=\"Greenscalse\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> <div> <p class=\"adjustment-label\">Bluescalse</p> <mat-slider name=\"blueScale\" formControlName=\"blueScale\" placeholder=\"Bluescalse\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> </div> <div *ngIf=\"effectName != 'Manual' && effectName != 'Grey' && effectName != 'Light-Grey'\"> <p class=\"adjustment-label\">Effect Scale</p> <mat-slider name=\"brightnessScale\" formControlName=\"brightnessScale\" placeholder=\"Effect Scale\" min=\"-255\" max=\"255\" step=\"5\" thumb-label=\"true\"></mat-slider> </div> </form> </div> ","styles":[".angular-image-picker-image-wrapper{display:flex;margin-top:24px}.angular-image-picker-image{flex:1}.angular-image-picker-image img{max-width:100%;max-height:100%}mat-slider{width:100%}.adjustment-label{text-align:center} "]}]}],"members":{"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":1}}]}],"imageAfterBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":1}}]}],"imageBeforeBase64":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":38,"character":1}}]}],"fileBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":1}}]}],"fileAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":1}}]}],"sizeAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":1}}]}],"sizeBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":1}}]}],"maxWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":1}}]}],"maxHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":1}}]}],"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":1}}]}],"_file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":1},"arguments":["file"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":74,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"startImageForm":[{"__symbolic":"method"}],"loadImages":[{"__symbolic":"method"}]}}}}]