[{"__symbolic":"module","version":4,"metadata":{"ImageFile":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}]}},"FsNgAlainImagePickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"fs-ng-alain-image-picker","template":"<ng-template #Upload>\r\n    <nz-upload\r\n        class=\"avatar-uploader\"\r\n        [nzListType]=\"uploadTemplate ? 'text' : 'picture'\"\r\n        [nzBeforeUpload]=\"beforeUpload\" \r\n        [nzMultiple]=\"true\"\r\n        >\r\n\r\n        <div *ngTemplateOutlet=\"uploadTemplate || UploadImage\"></div>\r\n        <ng-template #UploadImage>\r\n            <div class=\"divBorder divGridCenter\" [ngStyle]=\"{ 'width': imageWidth, 'height': imageHeight }\">\r\n                <div style=\"font-size: 18px; text-align: center;\">\r\n                    <i class=\"upload-icon\" nzType=\"plus\" nz-icon></i>\r\n                    <div class=\"ant-upload-text\">Upload</div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </nz-upload>\r\n</ng-template>\r\n\r\n<ng-template #Image let-item>\r\n    <div class=\"divBorder imgGrid\" \r\n        [ngStyle]=\"{ 'width': imageWidth, 'height': imageHeight }\"\r\n        (click)=\"controllModal(true, item)\">\r\n\r\n        <div class=\"imgGridClose\">\r\n            <i (click)=\"deleteFile(item.fileName)\" nz-icon nzType=\"close\" nzTheme=\"outline\"></i>\r\n        </div>\r\n\r\n        <img [src]=\"item.fileUrl | imageUrlTemp\" style=\"width: 100%; height: 100%;\" />\r\n    </div>\r\n</ng-template>\r\n\r\n<div [ngClass]=\"{ 'divGrid': inLine }\" [ngStyle]=\"{ 'grid-template-columns': inLine ? 'repeat(auto-fit, ' + imageWidth + ')' : 'unset' }\">\r\n    <!-- 上傳按鈕(前) -->\r\n    <ng-container *ngIf=\"canUpload && showFrontButton\">\r\n        <div *ngTemplateOutlet=\"Upload\"></div>\r\n    </ng-container>\r\n\r\n    <!-- 傳入的圖片 -->\r\n    <ng-container *ngFor=\"let item of existFiles\">\r\n        <div *ngTemplateOutlet=\"imageTemplate || Image; context: {$implicit: item}\"></div>\r\n    </ng-container>\r\n\r\n    <!-- 上傳的圖片 -->\r\n    <ng-container *ngFor=\"let item of showFiles\">\r\n        <div *ngTemplateOutlet=\"imageTemplate || Image; context: {$implicit: item}\"></div>\r\n    </ng-container>\r\n\r\n    <!-- 上傳按鈕(後) -->\r\n    <ng-container *ngIf=\"canUpload && showBackendButton\">\r\n        <div *ngTemplateOutlet=\"Upload\"></div>\r\n    </ng-container>\r\n    \r\n</div>\r\n\r\n<nz-modal [nzOkText]=\"null\" nzCancelText=\"關閉\"  [nzWidth]=\"1000\"\r\n        [nzTitle]=\"'預覽圖'\" \r\n        [(nzVisible)]=\"viewImage.isVisabled\" \r\n        (nzOnCancel)=\"controllModal(false, viewImage.image)\">\r\n    <div class=\"divGridCenter\">\r\n        <img [src]=\"viewImage.image.fileUrl\" style=\"max-width: 100%; max-height: 500px;\" />\r\n    </div>\r\n</nz-modal>","styles":[".divBorder{display:block;border:1px dashed #d9d9d9;background:#fafafa}.divGridCenter{display:grid!important;place-items:center}.divGrid{display:grid;grid-gap:1rem}.imgGrid{border:1px solid #ddd;background-color:#f9f9f9;position:relative;cursor:pointer}.imgGridClose{top:-7px;position:absolute;text-align:right;font-size:18px;color:rgba(0,0,0,.55);width:100%}.imgGridClose i{padding:3px;border-radius:2px;opacity:.8;z-index:10;background-color:#ddd}::ng-deep .ant-upload.ant-upload-select-picture-card{margin:unset!important}::ng-deep .ant-upload.ant-upload-select-picture-card>.ant-upload{padding:unset!important}"]}]}],"members":{"imageWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"imageHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"maxImageCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"imageTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"uploadTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"inLine":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"showFrontButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"showBackendButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"existFiles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@abp/ng.theme.shared","name":"ToasterService","line":79,"character":28},{"__symbolic":"reference","module":"@abp/ng.core","name":"EnvironmentService","line":80,"character":31},{"__symbolic":"reference","module":"@abp/ng.core","name":"ConfigStateService","line":81,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"getHttpUrl":[{"__symbolic":"method"}],"getBase64":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}],"controllModal":[{"__symbolic":"method"}],"getDeleteFileNames":[{"__symbolic":"method"}],"getUploadFiles":[{"__symbolic":"method"}],"getImageFiles":[{"__symbolic":"method"}]}}}}]