@bsj/angular-image-picker
Version:
Angular image picker
1 lines • 4.62 kB
JSON
[{"__symbolic":"module","version":4,"metadata":{"CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":13},"useExisting":{"__symbolic":"reference","name":"AngularImagePickerComponent"},"multi":true},"AngularImagePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"providers":[{"__symbolic":"reference","name":"CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR"}],"selector":"tzd-angular-image-picker","styles":[".image-picker-wrapper{padding:16px 0}.image-picker-wrapper .click{cursor:pointer}.image-picker-wrapper img{max-width:100%;max-height:100%;display:block;margin:auto;margin-bottom:16px}.image-picker-wrapper .multiple-images-container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.image-picker-wrapper .multiple-images-container .multiple-images-image{flex:1 auto;max-width:48%}.image-picker-wrapper .multiple-images-container .multiple-images-image:first-of-type{max-width:100%}.image-picker-wrapper .multiple-images-container .multiple-images-image img{width:100%} "],"template":"<div class=\"image-picker-wrapper\"> <div *ngIf=\"(initialModelImages && !changeImageMode) else pickImages\"> <div [ngSwitch]=\"multiple ? true : false\" class=\"click\" (click)=\"changeImageMode = true\"> <div *ngSwitchCase=\"true\" class=\"multiple-images-container\"> <div class=\"multiple-images-image\" *ngFor=\"let initialModelImage of initialModelImages\"> <img [src]=\"initialModelImage\"> </div> </div> <div *ngSwitchCase=\"false\"> <img [src]=\"initialModelImages\"> </div> </div> </div> <ng-template #pickImages> <div *ngIf=\"files\"> <button type=\"button\" mat-mini-fab color=\"default\" (click)=\"onClose()\"> <mat-icon>close</mat-icon> </button> <div *ngFor=\"let file of files; let i = index;\" class=\"tzd-image-picker-image\"> <tzd-image-picker-image maxWidth=\"1080\" maxHeight=\"1080\" [debug]=\"debug\" [file]=\"file\" ></tzd-image-picker-image> </div> </div> <form role=\"form\" enctype=\"multipart/form-data\"> <input id=\"files\" name=\"files\" type=\"file\" [multiple]=\"multiple\" #fileUpload hidden=\"true\" (change)=\"updateFilesToLoad($event)\"> </form> <div *ngIf=\"!files\" class=\"text-center\"> <button type=\"button\" mat-mini-fab color=\"accent\" (click)=\"fileUpload.click(); $event.stopPropagation();\"> <mat-icon>add</mat-icon> </button> <button type=\"button\" mat-mini-fab color=\"default\" (click)=\"onClose()\"> <mat-icon>close</mat-icon> </button> <div [ngSwitch]=\"multiple ? true : false\"> <p *ngSwitchCase=\"true\">Select one or more images</p> <p *ngSwitchCase=\"false\">Select one image</p> </div> </div> </ng-template> </div> "}]}],"members":{"debug":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"fileUpload":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":3},"arguments":["fileUpload"]}]}],"manipulatedImages":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":30,"character":3},"arguments":[{"__symbolic":"reference","module":"./angular-image-picker-image/angular-image-picker-image.component","name":"AngularImagePickerImageComponent","line":30,"character":16}]}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}],"onClose":[{"__symbolic":"method"}],"updateFilesToLoad":[{"__symbolic":"method"}],"resetComponent":[{"__symbolic":"method"}],"refreshManipulationLayerObserver":[{"__symbolic":"method"}]}}}}]