ngx-image-uploader
Version:
Angular2 asynchronous image uploader with preview
883 lines (873 loc) • 93.6 kB
JavaScript
import { Observable } from 'rxjs';
import { Injectable, Component, ViewChild, Renderer, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, HostListener, NgModule, defineInjectable, inject } from '@angular/core';
import { HttpClient, HttpRequest, HttpEventType, HttpResponse, HttpHeaders, HttpClientModule } from '@angular/common/http';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import Cropper from 'cropperjs';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/** @enum {number} */
var FileQueueStatus = {
Pending: 0,
Success: 1,
Error: 2,
Progress: 3,
};
FileQueueStatus[FileQueueStatus.Pending] = "Pending";
FileQueueStatus[FileQueueStatus.Success] = "Success";
FileQueueStatus[FileQueueStatus.Error] = "Error";
FileQueueStatus[FileQueueStatus.Progress] = "Progress";
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var FileQueueObject = /** @class */ (function () {
function FileQueueObject(file) {
var _this = this;
this.status = FileQueueStatus.Pending;
this.progress = 0;
this.request = null;
this.response = null;
this.isPending = function () { return _this.status === FileQueueStatus.Pending; };
this.isSuccess = function () { return _this.status === FileQueueStatus.Success; };
this.isError = function () { return _this.status === FileQueueStatus.Error; };
this.inProgress = function () { return _this.status === FileQueueStatus.Progress; };
this.isUploadable = function () { return _this.status === FileQueueStatus.Pending || _this.status === FileQueueStatus.Error; };
this.file = file;
}
return FileQueueObject;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ImageUploaderService = /** @class */ (function () {
function ImageUploaderService(http) {
this.http = http;
}
/**
* @param {?} file
* @param {?} options
* @param {?=} cropOptions
* @return {?}
*/
ImageUploaderService.prototype.uploadFile = /**
* @param {?} file
* @param {?} options
* @param {?=} cropOptions
* @return {?}
*/
function (file, options, cropOptions) {
var _this = this;
this.setDefaults(options);
var /** @type {?} */ form = new FormData();
form.append(options.fieldName, file, file.name);
if (cropOptions) {
form.append('X', cropOptions.x.toString());
form.append('Y', cropOptions.y.toString());
form.append('Width', cropOptions.width.toString());
form.append('Height', cropOptions.height.toString());
}
// upload file and report progress
var /** @type {?} */ req = new HttpRequest('POST', options.uploadUrl, form, {
reportProgress: true,
withCredentials: options.withCredentials,
headers: this._buildHeaders(options)
});
return Observable.create(function (obs) {
var /** @type {?} */ queueObj = new FileQueueObject(file);
queueObj.request = _this.http.request(req).subscribe(function (event) {
if (event.type === HttpEventType.UploadProgress) {
_this._uploadProgress(queueObj, event);
obs.next(queueObj);
}
else if (event instanceof HttpResponse) {
_this._uploadComplete(queueObj, event);
obs.next(queueObj);
obs.complete();
}
}, function (err) {
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
// A client-side or network error occurred. Handle it accordingly.
_this._uploadFailed(queueObj, err);
obs.next(queueObj);
obs.complete();
}
else {
// The backend returned an unsuccessful response code.
// The backend returned an unsuccessful response code.
_this._uploadFailed(queueObj, err);
obs.next(queueObj);
obs.complete();
}
});
});
};
/**
* @param {?} url
* @param {?} options
* @return {?}
*/
ImageUploaderService.prototype.getFile = /**
* @param {?} url
* @param {?} options
* @return {?}
*/
function (url, options) {
var _this = this;
return Observable.create(function (observer) {
var /** @type {?} */ headers = new HttpHeaders();
if (options.authToken) {
headers = headers.append('Authorization', options.authTokenPrefix + " " + options.authToken);
}
_this.http.get(url, { responseType: 'blob', headers: headers }).subscribe(function (res) {
var /** @type {?} */ file = new File([res], 'filename', { type: res.type });
observer.next(file);
observer.complete();
}, function (err) {
observer.error(err.status);
observer.complete();
});
});
};
/**
* @param {?} options
* @return {?}
*/
ImageUploaderService.prototype._buildHeaders = /**
* @param {?} options
* @return {?}
*/
function (options) {
var /** @type {?} */ headers = new HttpHeaders();
if (options.authToken) {
headers = headers.append('Authorization', options.authTokenPrefix + " " + options.authToken);
}
if (options.customHeaders) {
Object.keys(options.customHeaders).forEach(function (key) {
headers = headers.append(key, options.customHeaders[key]);
});
}
return headers;
};
/**
* @param {?} queueObj
* @param {?} event
* @return {?}
*/
ImageUploaderService.prototype._uploadProgress = /**
* @param {?} queueObj
* @param {?} event
* @return {?}
*/
function (queueObj, event) {
// update the FileQueueObject with the current progress
var /** @type {?} */ progress = Math.round(100 * event.loaded / event.total);
queueObj.progress = progress;
queueObj.status = FileQueueStatus.Progress;
// this._queue.next(this._files);
};
/**
* @param {?} queueObj
* @param {?} response
* @return {?}
*/
ImageUploaderService.prototype._uploadComplete = /**
* @param {?} queueObj
* @param {?} response
* @return {?}
*/
function (queueObj, response) {
// update the FileQueueObject as completed
queueObj.progress = 100;
queueObj.status = FileQueueStatus.Success;
queueObj.response = response;
// this._queue.next(this._files);
// this.onCompleteItem(queueObj, response.body);
};
/**
* @param {?} queueObj
* @param {?} response
* @return {?}
*/
ImageUploaderService.prototype._uploadFailed = /**
* @param {?} queueObj
* @param {?} response
* @return {?}
*/
function (queueObj, response) {
// update the FileQueueObject as errored
queueObj.progress = 0;
queueObj.status = FileQueueStatus.Error;
queueObj.response = response;
// this._queue.next(this._files);
};
/**
* @param {?} options
* @return {?}
*/
ImageUploaderService.prototype.setDefaults = /**
* @param {?} options
* @return {?}
*/
function (options) {
options.withCredentials = options.withCredentials || false;
options.httpMethod = options.httpMethod || 'POST';
options.authTokenPrefix = options.authTokenPrefix || 'Bearer';
options.fieldName = options.fieldName || 'file';
};
ImageUploaderService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] },
];
/** @nocollapse */
ImageUploaderService.ctorParameters = function () { return [
{ type: HttpClient, },
]; };
/** @nocollapse */ ImageUploaderService.ngInjectableDef = defineInjectable({ factory: function ImageUploaderService_Factory() { return new ImageUploaderService(inject(HttpClient)); }, token: ImageUploaderService, providedIn: "root" });
return ImageUploaderService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @param {?} url
* @param {?} cb
* @return {?}
*/
function createImage(url, cb) {
var /** @type {?} */ image = new Image();
image.onload = function () {
cb(image);
};
image.src = url;
}
var /** @type {?} */ resizeAreaId = 'imageupload-resize-area';
/**
* @return {?}
*/
function getResizeArea() {
var /** @type {?} */ resizeArea = document.getElementById(resizeAreaId);
if (!resizeArea) {
resizeArea = document.createElement('canvas');
resizeArea.id = resizeAreaId;
resizeArea.style.display = 'none';
document.body.appendChild(resizeArea);
}
return /** @type {?} */ (resizeArea);
}
/**
* @param {?} origImage
* @param {?=} __1
* @return {?}
*/
function resizeImage(origImage, _a) {
var _b = _a === void 0 ? {} : _a, resizeHeight = _b.resizeHeight, resizeWidth = _b.resizeWidth, _c = _b.resizeQuality, resizeQuality = _c === void 0 ? 0.7 : _c, _d = _b.resizeType, resizeType = _d === void 0 ? 'image/jpeg' : _d, _e = _b.resizeMode, resizeMode = _e === void 0 ? 'fill' : _e;
var /** @type {?} */ canvas = getResizeArea();
var /** @type {?} */ height = origImage.height;
var /** @type {?} */ width = origImage.width;
var /** @type {?} */ offsetX = 0;
var /** @type {?} */ offsetY = 0;
if (resizeMode === 'fill') {
// calculate the width and height, constraining the proportions
if (width / height > resizeWidth / resizeHeight) {
width = Math.round(height * resizeWidth / resizeHeight);
}
else {
height = Math.round(width * resizeHeight / resizeWidth);
}
canvas.width = resizeWidth <= width ? resizeWidth : width;
canvas.height = resizeHeight <= height ? resizeHeight : height;
offsetX = origImage.width / 2 - width / 2;
offsetY = origImage.height / 2 - height / 2;
// draw image on canvas
var /** @type {?} */ ctx = canvas.getContext('2d');
ctx.drawImage(origImage, offsetX, offsetY, width, height, 0, 0, canvas.width, canvas.height);
}
else if (resizeMode === 'fit') {
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > resizeWidth) {
height = Math.round(height *= resizeWidth / width);
width = resizeWidth;
}
}
else {
if (height > resizeHeight) {
width = Math.round(width *= resizeHeight / height);
height = resizeHeight;
}
}
canvas.width = width;
canvas.height = height;
// draw image on canvas
var /** @type {?} */ ctx = canvas.getContext('2d');
ctx.drawImage(origImage, 0, 0, width, height);
}
else {
throw new Error('Unknown resizeMode: ' + resizeMode);
}
// get the data from canvas as 70% jpg (or specified type).
return canvas.toDataURL(resizeType, resizeQuality);
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/** @enum {number} */
var Status = {
NotSelected: 0,
Selected: 1,
Uploading: 2,
Loading: 3,
Loaded: 4,
Error: 5,
};
Status[Status.NotSelected] = "NotSelected";
Status[Status.Selected] = "Selected";
Status[Status.Uploading] = "Uploading";
Status[Status.Loading] = "Loading";
Status[Status.Loaded] = "Loaded";
Status[Status.Error] = "Error";
var ImageUploaderComponent = /** @class */ (function () {
function ImageUploaderComponent(renderer, uploader, changeDetector) {
this.renderer = renderer;
this.uploader = uploader;
this.changeDetector = changeDetector;
this.statusEnum = Status;
this._status = Status.NotSelected;
this.thumbnailWidth = 150;
this.thumbnailHeight = 150;
this.cropper = undefined;
this.upload = new EventEmitter();
this.statusChange = new EventEmitter();
this.propagateChange = function (_) { };
}
Object.defineProperty(ImageUploaderComponent.prototype, "imageThumbnail", {
get: /**
* @return {?}
*/
function () {
return this._imageThumbnail;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._imageThumbnail = value;
this.propagateChange(this._imageThumbnail);
if (value !== undefined) {
this.status = Status.Selected;
}
else {
this.status = Status.NotSelected;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageUploaderComponent.prototype, "errorMessage", {
get: /**
* @return {?}
*/
function () {
return this._errorMessage;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._errorMessage = value;
if (value) {
this.status = Status.Error;
}
else {
this.status = Status.NotSelected;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageUploaderComponent.prototype, "status", {
get: /**
* @return {?}
*/
function () {
return this._status;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._status = value;
this.statusChange.emit(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} value
* @return {?}
*/
ImageUploaderComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
this.loadAndResize(value);
}
else {
this._imageThumbnail = undefined;
this.status = Status.NotSelected;
}
};
/**
* @param {?} fn
* @return {?}
*/
ImageUploaderComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.propagateChange = fn;
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.registerOnTouched = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
ImageUploaderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.options) {
if (this.options.thumbnailWidth) {
this.thumbnailWidth = this.options.thumbnailWidth;
}
if (this.options.thumbnailHeight) {
this.thumbnailHeight = this.options.thumbnailHeight;
}
if (this.options.resizeOnLoad === undefined) {
this.options.resizeOnLoad = true;
}
if (this.options.autoUpload === undefined) {
this.options.autoUpload = true;
}
if (this.options.cropEnabled === undefined) {
this.options.cropEnabled = false;
}
if (this.options.autoUpload && this.options.cropEnabled) {
throw new Error('autoUpload and cropEnabled cannot be enabled simultaneously');
}
}
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.ngAfterViewChecked = /**
* @return {?}
*/
function () {
if (this.options && this.options.cropEnabled && this.imageElement && this.fileToUpload && !this.cropper) {
this.cropper = new Cropper(this.imageElement.nativeElement, {
viewMode: 1,
aspectRatio: this.options.cropAspectRatio ? this.options.cropAspectRatio : null
});
}
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.cropper) {
this.cropper.destroy();
this.cropper = null;
}
};
/**
* @param {?} url
* @return {?}
*/
ImageUploaderComponent.prototype.loadAndResize = /**
* @param {?} url
* @return {?}
*/
function (url) {
var _this = this;
this.status = Status.Loading;
this.uploader.getFile(url, this.options).subscribe(function (file) {
if (_this.options.resizeOnLoad) {
// thumbnail
var /** @type {?} */ result = {
file: file,
url: URL.createObjectURL(file)
};
_this.resize(result).then(function (r) {
_this._imageThumbnail = r.resized.dataURL;
_this.status = Status.Loaded;
});
}
else {
var /** @type {?} */ result = {
file: null,
url: null
};
_this.fileToDataURL(file, result).then(function (r) {
_this._imageThumbnail = r.dataURL;
_this.status = Status.Loaded;
});
}
}, function (error) {
_this.errorMessage = error || 'Error while getting an image';
});
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.onImageClicked = /**
* @return {?}
*/
function () {
this.renderer.invokeElementMethod(this.fileInputElement.nativeElement, 'click');
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.onFileChanged = /**
* @return {?}
*/
function () {
var /** @type {?} */ file = this.fileInputElement.nativeElement.files[0];
if (!file) {
return;
}
this.validateAndUpload(file);
};
/**
* @param {?} file
* @return {?}
*/
ImageUploaderComponent.prototype.validateAndUpload = /**
* @param {?} file
* @return {?}
*/
function (file) {
var _this = this;
this.propagateChange(null);
if (this.options && this.options.allowedImageTypes) {
if (!this.options.allowedImageTypes.some(function (allowedType) { return file.type === allowedType; })) {
this.errorMessage = 'Only these image types are allowed: ' + this.options.allowedImageTypes.join(', ');
return;
}
}
if (this.options && this.options.maxImageSize) {
if (file.size > this.options.maxImageSize * 1024 * 1024) {
this.errorMessage = "Image must not be larger than " + this.options.maxImageSize + " MB";
return;
}
}
this.fileToUpload = file;
if (this.options && this.options.autoUpload) {
this.uploadImage();
}
// thumbnail
var /** @type {?} */ result = {
file: file,
url: URL.createObjectURL(file)
};
this.resize(result).then(function (r) {
_this._imageThumbnail = r.resized.dataURL;
_this.origImageWidth = r.width;
_this.orgiImageHeight = r.height;
if (_this.options && !_this.options.autoUpload) {
_this.status = Status.Selected;
}
});
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.uploadImage = /**
* @return {?}
*/
function () {
var _this = this;
this.progress = 0;
this.status = Status.Uploading;
var /** @type {?} */ cropOptions;
if (this.cropper) {
var /** @type {?} */ scale = this.origImageWidth / this.cropper.getImageData().naturalWidth;
var /** @type {?} */ cropData = this.cropper.getData();
cropOptions = {
x: Math.round(cropData.x * scale),
y: Math.round(cropData.y * scale),
width: Math.round(cropData.width * scale),
height: Math.round(cropData.height * scale)
};
}
// const queueObj = this.uploader.uploadFile(this.fileToUpload, this.options, cropOptions);
// file progress
this.uploader.uploadFile(this.fileToUpload, this.options, cropOptions).subscribe(function (file) {
_this.progress = file.progress;
if (file.isError()) {
if (file.response.status || file.response.statusText) {
_this.errorMessage = file.response.status + ": " + file.response.statusText;
}
else {
_this.errorMessage = 'Error while uploading';
}
// on some upload errors change detection does not work, so we are forcing manually
// on some upload errors change detection does not work, so we are forcing manually
_this.changeDetector.detectChanges();
}
if (!file.inProgress()) {
// notify that value was changed only when image was uploaded and no error
if (file.isSuccess()) {
_this.propagateChange(_this._imageThumbnail);
_this.status = Status.Selected;
_this.fileToUpload = undefined;
}
_this.upload.emit(file);
}
});
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.removeImage = /**
* @return {?}
*/
function () {
this.fileInputElement.nativeElement.value = null;
this.imageThumbnail = undefined;
if (this.cropper) {
this.cropper.destroy();
this.cropper = null;
}
};
/**
* @return {?}
*/
ImageUploaderComponent.prototype.dismissError = /**
* @return {?}
*/
function () {
this.errorMessage = undefined;
this.removeImage();
};
/**
* @param {?} e
* @return {?}
*/
ImageUploaderComponent.prototype.drop = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
e.stopPropagation();
if (!e.dataTransfer || !e.dataTransfer.files.length) {
return;
}
this.validateAndUpload(e.dataTransfer.files[0]);
this.updateDragOverlayStyles(false);
};
/**
* @param {?} e
* @return {?}
*/
ImageUploaderComponent.prototype.dragenter = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
e.stopPropagation();
};
/**
* @param {?} e
* @return {?}
*/
ImageUploaderComponent.prototype.dragover = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
e.stopPropagation();
this.updateDragOverlayStyles(true);
};
/**
* @param {?} e
* @return {?}
*/
ImageUploaderComponent.prototype.dragleave = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
e.stopPropagation();
this.updateDragOverlayStyles(false);
};
/**
* @param {?} isDragOver
* @return {?}
*/
ImageUploaderComponent.prototype.updateDragOverlayStyles = /**
* @param {?} isDragOver
* @return {?}
*/
function (isDragOver) {
// TODO: find a way that does not trigger dragleave when displaying overlay
// if (isDragOver) {
// this.renderer.setElementStyle(this.dragOverlayElement.nativeElement, 'display', 'block');
// } else {
// this.renderer.setElementStyle(this.dragOverlayElement.nativeElement, 'display', 'none');
// }
};
/**
* @param {?} result
* @return {?}
*/
ImageUploaderComponent.prototype.resize = /**
* @param {?} result
* @return {?}
*/
function (result) {
var _this = this;
var /** @type {?} */ resizeOptions = {
resizeHeight: this.thumbnailHeight,
resizeWidth: this.thumbnailWidth,
resizeType: result.file.type,
resizeMode: this.options.thumbnailResizeMode
};
return new Promise(function (resolve) {
createImage(result.url, function (image) {
var /** @type {?} */ dataUrl = resizeImage(image, resizeOptions);
result.width = image.width;
result.height = image.height;
result.resized = {
dataURL: dataUrl,
type: _this.getType(dataUrl)
};
resolve(result);
});
});
};
/**
* @param {?} dataUrl
* @return {?}
*/
ImageUploaderComponent.prototype.getType = /**
* @param {?} dataUrl
* @return {?}
*/
function (dataUrl) {
return dataUrl.match(/:(.+\/.+;)/)[1];
};
/**
* @param {?} file
* @param {?} result
* @return {?}
*/
ImageUploaderComponent.prototype.fileToDataURL = /**
* @param {?} file
* @param {?} result
* @return {?}
*/
function (file, result) {
return new Promise(function (resolve) {
var /** @type {?} */ reader = new FileReader();
reader.onload = function (e) {
result.dataURL = reader.result;
resolve(result);
};
reader.readAsDataURL(file);
});
};
ImageUploaderComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-image-uploader',
template: "<div class=\"image-container\">\n <div class=\"match-parent\" [ngSwitch]=\"status\">\n\n <div class=\"match-parent\" *ngSwitchCase=\"statusEnum.NotSelected\">\n <button type=\"button\" class=\"add-image-btn\" (click)=\"onImageClicked()\">\n <div>\n <p class=\"plus\">+</p>\n <p>Click here to add image</p>\n <p>Or drop image here</p>\n </div>\n </button>\n </div>\n\n <div class=\"selected-status-wrapper match-parent\" *ngSwitchCase=\"statusEnum.Loaded\">\n <img [src]=\"imageThumbnail\" #imageElement>\n\n <button type=\"button\" class=\"remove\" (click)=\"removeImage()\">\u00D7</button>\n </div>\n\n <div class=\"selected-status-wrapper match-parent\" *ngSwitchCase=\"statusEnum.Selected\">\n <img [src]=\"imageThumbnail\" #imageElement>\n\n <button type=\"button\" class=\"remove\" (click)=\"removeImage()\">\u00D7</button>\n </div>\n\n <div *ngSwitchCase=\"statusEnum.Uploading\">\n <img [attr.src]=\"imageThumbnail ? imageThumbnail : null\" (click)=\"onImageClicked()\">\n\n <div class=\"progress-bar\">\n <div class=\"bar\" [style.width]=\"progress+'%'\"></div>\n </div>\n </div>\n\n <div class=\"match-parent\" *ngSwitchCase=\"statusEnum.Loading\">\n <div class=\"sk-fading-circle\">\n <div class=\"sk-circle1 sk-circle\"></div>\n <div class=\"sk-circle2 sk-circle\"></div>\n <div class=\"sk-circle3 sk-circle\"></div>\n <div class=\"sk-circle4 sk-circle\"></div>\n <div class=\"sk-circle5 sk-circle\"></div>\n <div class=\"sk-circle6 sk-circle\"></div>\n <div class=\"sk-circle7 sk-circle\"></div>\n <div class=\"sk-circle8 sk-circle\"></div>\n <div class=\"sk-circle9 sk-circle\"></div>\n <div class=\"sk-circle10 sk-circle\"></div>\n <div class=\"sk-circle11 sk-circle\"></div>\n <div class=\"sk-circle12 sk-circle\"></div>\n </div>\n </div>\n\n <div class=\"match-parent\" *ngSwitchCase=\"statusEnum.Error\">\n <div class=\"error\">\n <div class=\"error-message\">\n <p>{{errorMessage}}</p>\n </div>\n <button type=\"button\" class=\"remove\" (click)=\"dismissError()\">\u00D7</button>\n </div>\n </div>\n </div>\n\n <input type=\"file\" #fileInput (change)=\"onFileChanged()\">\n <div class=\"drag-overlay\" [hidden]=\"true\" #dragOverlay></div>\n</div>\n",
styles: [":host{display:block}.match-parent{width:100%;height:100%}.add-image-btn{width:100%;height:100%;font-weight:700;opacity:.5;border:0}.add-image-btn:hover{opacity:.7;cursor:pointer;background-color:#ddd;box-shadow:inset 0 0 5px rgba(0,0,0,.3)}.add-image-btn .plus{font-size:30px;font-weight:400;margin-bottom:5px;margin-top:5px}img{cursor:pointer;position:absolute;top:50%;left:50%;margin-right:-50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:100%}.image-container{width:100%;height:100%;position:relative;display:inline-block;background-color:#f1f1f1;box-shadow:inset 0 0 5px rgba(0,0,0,.2)}.remove{position:absolute;top:0;right:0;width:40px;height:40px;font-size:25px;text-align:center;opacity:.8;border:0;cursor:pointer}.selected-status-wrapper>.remove:hover{opacity:.7;background-color:#fff}.error .remove{opacity:.5}.error .remove:hover{opacity:.7}input{display:none}.error{width:100%;height:100%;border:1px solid #e3a5a2;color:#d2706b;background-color:#fbf1f0;position:relative;text-align:center;display:flex;align-items:center}.error-message{width:100%;line-height:18px}.progress-bar{position:absolute;bottom:10%;left:10%;width:80%;height:5px;background-color:grey;opacity:.9;overflow:hidden}.bar{position:absolute;height:100%;background-color:#a4c639}.drag-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ff0;opacity:.3}.sk-fading-circle{width:40px;height:40px;position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:1.2s ease-in-out infinite both sk-circleFadeDelay;animation:1.2s ease-in-out infinite both sk-circleFadeDelay}.sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,100%,39%{opacity:0}40%{opacity:1}}"],
host: {
'[style.width]': 'thumbnailWidth + "px"',
'[style.height]': 'thumbnailHeight + "px"'
},
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return ImageUploaderComponent; }),
multi: true
}
]
},] },
];
/** @nocollapse */
ImageUploaderComponent.ctorParameters = function () { return [
{ type: Renderer, },
{ type: ImageUploaderService, },
{ type: ChangeDetectorRef, },
]; };
ImageUploaderComponent.propDecorators = {
"imageElement": [{ type: ViewChild, args: ['imageElement',] },],
"fileInputElement": [{ type: ViewChild, args: ['fileInput',] },],
"dragOverlayElement": [{ type: ViewChild, args: ['dragOverlay',] },],
"options": [{ type: Input },],
"upload": [{ type: Output },],
"statusChange": [{ type: Output },],
"drop": [{ type: HostListener, args: ['drop', ['$event'],] },],
"dragenter": [{ type: HostListener, args: ['dragenter', ['$event'],] },],
"dragover": [{ type: HostListener, args: ['dragover', ['$event'],] },],
"dragleave": [{ type: HostListener, args: ['dragleave', ['$event'],] },],
};
return ImageUploaderComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ImageUploaderModule = /** @class */ (function () {
function ImageUploaderModule() {
}
ImageUploaderModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
HttpClientModule
],
declarations: [ImageUploaderComponent],
exports: [ImageUploaderComponent]
},] },
];
return ImageUploaderModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { ImageUploaderService, Status, ImageUploaderComponent, ImageUploaderModule, FileQueueObject };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWltYWdlLXVwbG9hZGVyLmpzLm1hcCIsInNvdXJjZXMiOlsibmc6Ly9uZ3gtaW1hZ2UtdXBsb2FkZXIvbGliL2ZpbGUtcXVldWUtb2JqZWN0LnRzIiwibmc6Ly9uZ3gtaW1hZ2UtdXBsb2FkZXIvbGliL2ltYWdlLXVwbG9hZGVyLnNlcnZpY2UudHMiLCJuZzovL25neC1pbWFnZS11cGxvYWRlci9saWIvdXRpbHMudHMiLCJuZzovL25neC1pbWFnZS11cGxvYWRlci9saWIvaW1hZ2UtdXBsb2FkZXIuY29tcG9uZW50LnRzIiwibmc6Ly9uZ3gtaW1hZ2UtdXBsb2FkZXIvbGliL2ltYWdlLXVwbG9hZGVyLm1vZHVsZS50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBIdHRwUmVzcG9uc2UsIEh0dHBFcnJvclJlc3BvbnNlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uL2h0dHAnO1xyXG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcclxuXHJcbmltcG9ydCB7IEZpbGVRdWV1ZVN0YXR1cyB9IGZyb20gJy4vZmlsZS1xdWV1ZS1zdGF0dXMnO1xyXG5cclxuZXhwb3J0IGNsYXNzIEZpbGVRdWV1ZU9iamVjdCB7XHJcbiAgcHVibGljIGZpbGU6IGFueTtcclxuICBwdWJsaWMgc3RhdHVzOiBGaWxlUXVldWVTdGF0dXMgPSBGaWxlUXVldWVTdGF0dXMuUGVuZGluZztcclxuICBwdWJsaWMgcHJvZ3Jlc3M6IG51bWJlciA9IDA7XHJcbiAgcHVibGljIHJlcXVlc3Q6IFN1YnNjcmlwdGlvbiA9IG51bGw7XHJcbiAgcHVibGljIHJlc3BvbnNlOiBIdHRwUmVzcG9uc2U8YW55PiB8IEh0dHBFcnJvclJlc3BvbnNlID0gbnVsbDtcclxuXHJcbiAgY29uc3RydWN0b3IoZmlsZTogYW55KSB7XHJcbiAgICB0aGlzLmZpbGUgPSBmaWxlO1xyXG4gIH1cclxuXHJcbiAgLy8gYWN0aW9uc1xyXG4gIC8vIHB1YmxpYyB1cGxvYWQgPSAoKSA9PiB7IC8qIHNldCBpbiBzZXJ2aWNlICovIH07XHJcbiAgLy8gcHVibGljIGNhbmNlbCA9ICgpID0+IHsgLyogc2V0IGluIHNlcnZpY2UgKi8gfTtcclxuICAvLyBwdWJsaWMgcmVtb3ZlID0gKCkgPT4geyAvKiBzZXQgaW4gc2VydmljZSAqLyB9O1xyXG5cclxuICAvLyBzdGF0dXNlc1xyXG4gIHB1YmxpYyBpc1BlbmRpbmcgPSAoKSA9PiB0aGlzLnN0YXR1cyA9PT0gRmlsZVF1ZXVlU3RhdHVzLlBlbmRpbmc7XHJcbiAgcHVibGljIGlzU3VjY2VzcyA9ICgpID0+IHRoaXMuc3RhdHVzID09PSBGaWxlUXVldWVTdGF0dXMuU3VjY2VzcztcclxuICBwdWJsaWMgaXNFcnJvciA9ICgpID0+IHRoaXMuc3RhdHVzID09PSBGaWxlUXVldWVTdGF0dXMuRXJyb3I7XHJcbiAgcHVibGljIGluUHJvZ3Jlc3MgPSAoKSA9PiB0aGlzLnN0YXR1cyA9PT0gRmlsZVF1ZXVlU3RhdHVzLlByb2dyZXNzO1xyXG4gIHB1YmxpYyBpc1VwbG9hZGFibGUgPSAoKSA9PiB0aGlzLnN0YXR1cyA9PT0gRmlsZVF1ZXVlU3RhdHVzLlBlbmRpbmcgfHwgdGhpcy5zdGF0dXMgPT09IEZpbGVRdWV1ZVN0YXR1cy5FcnJvcjtcclxufVxyXG4iLCJpbXBvcnQgeyBPYnNlcnZlciwgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEh0dHBDbGllbnQsIEh0dHBSZXF1ZXN0LCBIdHRwRXZlbnRUeXBlLCBIdHRwUmVzcG9uc2UsIEh0dHBFcnJvclJlc3BvbnNlLCBIdHRwSGVhZGVycyB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuXHJcbmltcG9ydCB7IEZpbGVRdWV1ZU9iamVjdCB9IGZyb20gJy4vZmlsZS1xdWV1ZS1vYmplY3QnO1xyXG5pbXBvcnQgeyBGaWxlUXVldWVTdGF0dXMgfSBmcm9tICcuL2ZpbGUtcXVldWUtc3RhdHVzJztcclxuaW1wb3J0IHsgRmlsZVVwbG9hZGVyT3B0aW9ucywgQ3JvcE9wdGlvbnMgfSBmcm9tICcuL2ludGVyZmFjZXMnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgSW1hZ2VVcGxvYWRlclNlcnZpY2Uge1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGh0dHA6IEh0dHBDbGllbnQpIHt9XHJcblxyXG4gIHVwbG9hZEZpbGUoZmlsZTogRmlsZSwgb3B0aW9uczogRmlsZVVwbG9hZGVyT3B0aW9ucywgY3JvcE9wdGlvbnM/OiBDcm9wT3B0aW9ucyk6IE9ic2VydmFibGU8RmlsZVF1ZXVlT2JqZWN0PiB7XHJcbiAgICB0aGlzLnNldERlZmF1bHRzKG9wdGlvbnMpO1xyXG5cclxuICAgIGNvbnN0IGZvcm0gPSBuZXcgRm9ybURhdGEoKTtcclxuICAgIGZvcm0uYXBwZW5kKG9wdGlvbnMuZmllbGROYW1lLCBmaWxlLCBmaWxlLm5hbWUpO1xyXG5cclxuICAgIGlmIChjcm9wT3B0aW9ucykge1xyXG4gICAgICBmb3JtLmFwcGVuZCgnWCcsIGNyb3BPcHRpb25zLngudG9TdHJpbmcoKSk7XHJcbiAgICAgIGZvcm0uYXBwZW5kKCdZJywgY3JvcE9wdGlvbnMueS50b1N0cmluZygpKTtcclxuICAgICAgZm9ybS5hcHBlbmQoJ1dpZHRoJywgY3JvcE9wdGlvbnMud2lkdGgudG9TdHJpbmcoKSk7XHJcbiAgICAgIGZvcm0uYXBwZW5kKCdIZWlnaHQnLCBjcm9wT3B0aW9ucy5oZWlnaHQudG9TdHJpbmcoKSk7XHJcbiAgICB9XHJcblxyXG4gICAgLy8gdXBsb2FkIGZpbGUgYW5kIHJlcG9ydCBwcm9ncmVzc1xyXG4gICAgY29uc3QgcmVxID0gbmV3IEh0dHBSZXF1ZXN0KCdQT1NUJywgb3B0aW9ucy51cGxvYWRVcmwsIGZvcm0sIHtcclxuICAgICAgcmVwb3J0UHJvZ3Jlc3M6IHRydWUsXHJcbiAgICAgIHdpdGhDcmVkZW50aWFsczogb3B0aW9ucy53aXRoQ3JlZGVudGlhbHMsXHJcbiAgICAgIGhlYWRlcnM6IHRoaXMuX2J1aWxkSGVhZGVycyhvcHRpb25zKVxyXG4gICAgfSk7XHJcblxyXG4gICAgcmV0dXJuIE9ic2VydmFibGUuY3JlYXRlKG9icyA9PiB7XHJcbiAgICAgIGNvbnN0IHF1ZXVlT2JqID0gbmV3IEZpbGVRdWV1ZU9iamVjdChmaWxlKTtcclxuXHJcbiAgICAgIHF1ZXVlT2JqLnJlcXVlc3QgPSB0aGlzLmh0dHAucmVxdWVzdChyZXEpLnN1YnNjcmliZShcclxuICAgICAgICAoZXZlbnQ6IGFueSkgPT4ge1xyXG4gICAgICAgICAgaWYgKGV2ZW50LnR5cGUgPT09IEh0dHBFdmVudFR5cGUuVXBsb2FkUHJvZ3Jlc3MpIHtcclxuICAgICAgICAgICAgdGhpcy5fdXBsb2FkUHJvZ3Jlc3MocXVldWVPYmosIGV2ZW50KTtcclxuICAgICAgICAgICAgb2JzLm5leHQocXVldWVPYmopO1xyXG4gICAgICAgICAgfSBlbHNlIGlmIChldmVudCBpbnN0YW5jZW9mIEh0dHBSZXNwb25zZSkge1xyXG4gICAgICAgICAgICB0aGlzLl91cGxvYWRDb21wbGV0ZShxdWV1ZU9iaiwgZXZlbnQpO1xyXG4gICAgICAgICAgICBvYnMubmV4dChxdWV1ZU9iaik7XHJcbiAgICAgICAgICAgIG9icy5jb21wbGV0ZSgpO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH0sXHJcbiAgICAgICAgKGVycjogSHR0cEVycm9yUmVzcG9uc2UpID0+IHtcclxuICAgICAgICAgIGlmIChlcnIuZXJyb3IgaW5zdGFuY2VvZiBFcnJvcikge1xyXG4gICAgICAgICAgICAvLyBBIGNsaWVudC1zaWRlIG9yIG5ldHdvcmsgZXJyb3Igb2NjdXJyZWQuIEhhbmRsZSBpdCBhY2NvcmRpbmdseS5cclxuICAgICAgICAgICAgdGhpcy5fdXBsb2FkRmFpbGVkKHF1ZXVlT2JqLCBlcnIpO1xyXG4gICAgICAgICAgICBvYnMubmV4dChxdWV1ZU9iaik7XHJcbiAgICAgICAgICAgIG9icy5jb21wbGV0ZSgpO1xyXG4gICAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgLy8gVGhlIGJhY2tlbmQgcmV0dXJuZWQgYW4gdW5zdWNjZXNzZnVsIHJlc3BvbnNlIGNvZGUuXHJcbiAgICAgICAgICAgIHRoaXMuX3VwbG9hZEZhaWxlZChxdWV1ZU9iaiwgZXJyKTtcclxuICAgICAgICAgICAgb2JzLm5leHQocXVldWVPYmopO1xyXG4gICAgICAgICAgICBvYnMuY29tcGxldGUoKTtcclxuICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgICk7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIGdldEZpbGUodXJsOiBzdHJpbmcsIG9wdGlvbnM6IHsgYXV0aFRva2VuPzogc3RyaW5nLCBhdXRoVG9rZW5QcmVmaXg/OiBzdHJpbmcgfSk6IE9ic2VydmFibGU8RmlsZT4ge1xyXG4gICAgcmV0dXJuIE9ic2VydmFibGUuY3JlYXRlKChvYnNlcnZlcjogT2JzZXJ2ZXI8RmlsZT4pID0+IHtcclxuICAgICAgbGV0IGhlYWRlcnMgPSBuZXcgSHR0cEhlYWRlcnMoKTtcclxuXHJcbiAgICAgIGlmIChvcHRpb25zLmF1dGhUb2tlbikge1xyXG4gICAgICAgIGhlYWRlcnMgPSBoZWFkZXJzLmFwcGVuZCgnQXV0aG9yaXphdGlvbicsIGAke29wdGlvbnMuYXV0aFRva2VuUHJlZml4fSAke29wdGlvbnMuYXV0aFRva2VufWApO1xyXG4gICAgICB9XHJcblxyXG4gICAgICB0aGlzLmh0dHAuZ2V0KHVybCwgeyByZXNwb25zZVR5cGU6ICdibG9iJywgaGVhZGVyczogaGVhZGVyc30pLnN1YnNjcmliZShyZXMgPT4ge1xyXG4gICAgICAgIGNvbnN0IGZpbGUgPSBuZXcgRmlsZShbcmVzXSwgJ2ZpbGVuYW1lJywgeyB0eXBlOiByZXMudHlwZSB9KTtcclxuICAgICAgICBvYnNlcnZlci5uZXh0KGZpbGUpO1xyXG4gICAgICAgIG9ic2VydmVyLmNvbXBsZXRlKCk7XHJcbiAgICAgIH0sIGVyciA9PiB7XHJcbiAgICAgICAgb2JzZXJ2ZXIuZXJyb3IoZXJyLnN0YXR1cyk7XHJcbiAgICAgICAgb2JzZXJ2ZXIuY29tcGxldGUoKTtcclxuICAgICAgfSk7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgX2J1aWxkSGVhZGVycyhvcHRpb25zOiBGaWxlVXBsb2FkZXJPcHRpb25zKTogSHR0cEhlYWRlcnMge1xyXG4gICAgbGV0IGhlYWRlcnMgPSBuZXcgSHR0cEhlYWRlcnMoKTtcclxuXHJcbiAgICBpZiAob3B0aW9ucy5hdXRoVG9rZW4pIHtcclxuICAgICAgaGVhZGVycyA9IGhlYWRlcnMuYXBwZW5kKCdBdXRob3JpemF0aW9uJywgYCR7b3B0aW9ucy5hdXRoVG9rZW5QcmVmaXh9ICR7b3B0aW9ucy5hdXRoVG9rZW59YCk7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKG9wdGlvbnMuY3VzdG9tSGVhZGVycykge1xyXG4gICAgICBPYmplY3Qua2V5cyhvcHRpb25zLmN1c3RvbUhlYWRlcnMpLmZvckVhY2goKGtleSkgPT4ge1xyXG4gICAgICAgIGhlYWRlcnMgPSBoZWFkZXJzLmFwcGVuZChrZXksIG9wdGlvbnMuY3VzdG9tSGVhZGVyc1trZXldKTtcclxuICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIGhlYWRlcnM7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIF91cGxvYWRQcm9ncmVzcyhxdWV1ZU9iajogRmlsZVF1ZXVlT2JqZWN0LCBldmVudDogYW55KSB7XHJcbiAgICAvLyB1cGRhdGUgdGhlIEZpbGVRdWV1ZU9iamVjdCB3aXRoIHRoZSBjdXJyZW50IHByb2dyZXNzXHJcbiAgICBjb25zdCBwcm9ncmVzcyA9IE1hdGgucm91bmQoMTAwICogZXZlbnQubG9hZGVkIC8gZXZlbnQudG90YWwpO1xyXG4gICAgcXVldWVPYmoucHJvZ3Jlc3MgPSBwcm9ncmVzcztcclxuICAgIHF1ZXVlT2JqLnN0YXR1cyA9IEZpbGVRdWV1ZVN0YXR1cy5Qcm9ncmVzcztcclxuICAgIC8vIHRoaXMuX3F1ZXVlLm5leHQodGhpcy5fZmlsZXMpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBfdXBsb2FkQ29tcGxldGUocXVldWVPYmo6IEZpbGVRdWV1ZU9iamVjdCwgcmVzcG9uc2U6IEh0dHBSZXNwb25zZTxhbnk+KSB7XHJcbiAgICAvLyB1cGRhdGUgdGhlIEZpbGVRdWV1ZU9iamVjdCBhcyBjb21wbGV0ZWRcclxuICAgIHF1ZXVlT2JqLnByb2dyZXNzID0gMTAwO1xyXG4gICAgcXVldWVPYmouc3RhdHVzID0gRmlsZVF1ZXVlU3RhdHVzLlN1Y2Nlc3M7XHJcbiAgICBxdWV1ZU9iai5yZXNwb25zZSA9IHJlc3BvbnNlO1xyXG4gICAgLy8gdGhpcy5fcXVldWUubmV4dCh0aGlzLl9maWxlcyk7XHJcbiAgICAvLyB0aGlzLm9uQ29tcGxldGVJdGVtKHF1ZXVlT2JqLCByZXNwb25zZS5ib2R5KTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgX3VwbG9hZEZhaWxlZChxdWV1ZU9iajogRmlsZVF1ZXVlT2JqZWN0LCByZXNwb25zZTogSHR0cEVycm9yUmVzcG9uc2UpIHtcclxuICAgIC8vIHVwZGF0ZSB0aGUgRmlsZVF1ZXVlT2JqZWN0IGFzIGVycm9yZWRcclxuICAgIHF1ZXVlT2JqLnByb2dyZXNzID0gMDtcclxuICAgIHF1ZXVlT2JqLnN0YXR1cyA9IEZpbGVRdWV1ZVN0YXR1cy5FcnJvcjtcclxuICAgIHF1ZXVlT2JqLnJlc3BvbnNlID0gcmVzcG9uc2U7XHJcbiAgICAvLyB0aGlzLl9xdWV1ZS5uZXh0KHRoaXMuX2ZpbGVzKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgc2V0RGVmYXVsdHMob3B0aW9uczogRmlsZVVwbG9hZGVyT3B0aW9ucykge1xyXG4gICAgb3B0aW9ucy53aXRoQ3JlZGVudGlhbHMgPSBvcHRpb25zLndpdGhDcmVkZW50aWFscyB8fCBmYWxzZTtcclxuICAgIG9wdGlvbnMuaHR0cE1ldGhvZCA9IG9wdGlvbnMuaHR0cE1ldGhvZCB8fCAnUE9TVCc7XHJcbiAgICBvcHRpb25zLmF1dGhUb2tlblByZWZpeCA9IG9wdGlvbnMuYXV0aFRva2VuUHJlZml4IHx8ICdCZWFyZXInO1xyXG4gICAgb3B0aW9ucy5maWVsZE5hbWUgPSBvcHRpb25zLmZpZWxkTmFtZSB8fCAnZmlsZSc7XHJcbiAgfVxyXG59XHJcbiIsImltcG9ydCB7UmVzaXplT3B0aW9uc30gZnJvbSAnLi9pbnRlcmZhY2VzJztcclxuXHJcbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVJbWFnZSh1cmw6IHN0cmluZywgY2I6IChpOiBIVE1MSW1hZ2VFbGVtZW50KSA9PiB2b2lkKSB7XHJcbiAgY29uc3QgaW1hZ2UgPSBuZXcgSW1hZ2UoKTtcclxuICBpbWFnZS5vbmxvYWQgPSBmdW5jdGlvbiAoKSB7XHJcbiAgICBjYihpbWFnZSk7XHJcbiAgfTtcclxuICBpbWFnZS5zcmMgPSB1cmw7XHJcbn1cclxuXHJcbmNvbnN0IHJlc2l6ZUFyZWFJZCA9ICdpbWFnZXVwbG9hZC1yZXNpemUtYXJlYSc7XHJcblxyXG5mdW5jdGlvbiBnZXRSZXNpemVBcmVhKCkge1xyXG4gIGxldCByZXNpemVBcmVhID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQocmVzaXplQXJlYUlkKTtcclxuICBpZiAoIXJlc2l6ZUFyZWEpIHtcclxuICAgIHJlc2l6ZUFyZWEgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKTtcclxuICAgIHJlc2l6ZUFyZWEuaWQgPSByZXNpemVBcmVhSWQ7XHJcbiAgICByZXNpemVBcmVhLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7XHJcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHJlc2l6ZUFyZWEpO1xyXG4gIH1cclxuXHJcbiAgcmV0dXJuIDxIVE1MQ2FudmFzRWxlbWVudD5yZXNpemVBcmVhO1xyXG59XHJcblxyXG5leHBvcnQgZnVuY3Rpb24gcmVzaXplSW1hZ2Uob3JpZ0ltYWdlOiBIVE1MSW1hZ2VFbGVtZW50LCB7XHJcbiAgcmVzaXplSGVpZ2h0LFxyXG4gIHJlc2l6ZVdpZHRoLFxyXG4gIHJlc2l6ZVF1YWxpdHkgPSAwLjcsXHJcbiAgcmVzaXplVHlwZSA9ICdpbWFnZS9qcGVnJyxcclxuICByZXNpemVNb2RlID0gJ2ZpbGwnXHJcbn06IFJlc2l6ZU9wdGlvbnMgPSB7fSkge1xyXG5cclxuICBjb25zdCBjYW52YXMgPSBnZXRSZXNpemVBcmVhKCk7XHJcblxyXG4gIGxldCBoZWlnaHQgPSBvcmlnSW1hZ2UuaGVpZ2h0O1xyXG4gIGxldCB3aWR0aCA9IG9yaWdJbWFnZS53aWR0aDtcclxuICBsZXQgb2Zmc2V0WCA9IDA7XHJcbiAgbGV0IG9mZnNldFkgPSAwO1xyXG5cclxuICBpZiAocmVzaXplTW9kZSA9PT0gJ2ZpbGwnKSB7XHJcbiAgICAvLyBjYWxjdWxhdGUgdGhlIHdpZHRoIGFuZCBoZWlnaHQsIGNvbnN0cmFpbmluZyB0aGUgcHJvcG9ydGlvbnNcclxuICAgIGlmICh3aWR0aCAvIGhlaWdodCA+IHJlc2l6ZVdpZHRoIC8gcmVzaXplSGVpZ2h0KSB7XHJcbiAgICAgIHdpZHRoID0gTWF0aC5yb3VuZChoZWlnaHQgKiByZXNpemVXaWR0aCAvIHJlc2l6ZUhlaWdodCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICBoZWlnaHQgPSBNYXRoLnJvdW5kKHdpZHRoICogcmVzaXplSGVpZ2h0IC8gcmVzaXplV2lkdGgpO1xyXG4gICAgfVxyXG5cclxuICAgIGNhbnZhcy53aWR0aCA9IHJlc2l6ZVdpZHRoIDw9IHdpZHRoID8gcmVzaXplV2lkdGggOiB3aWR0aDtcclxuICAgIGNhbnZhcy5oZWlnaHQgPSByZXNpemVIZWlnaHQgPD0gaGVpZ2h0ID8gcmVzaXplSGVpZ2h0IDogaGVpZ2h0O1xyXG5cclxuICAgIG9mZnNldFggPSBvcmlnSW1hZ2Uud2lkdGggLyAyIC0gd2lkdGggLyAyO1xyXG4gICAgb2Zmc2V0WSA9IG9yaWdJbWFnZS5oZWlnaHQgLyAyIC0gaGVpZ2h0IC8gMjtcclxuXHJcbiAgICAvLyBkcmF3IGltYWdlIG9uIGNhbnZhc1xyXG4gICAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XHJcbiAgICBjdHguZHJhd0ltYWdlKG9yaWdJbWFnZSwgb2Zmc2V0WCwgb2Zmc2V0WSwgd2lkdGgsIGhlaWdodCwgMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTtcclxuICB9IGVsc2UgaWYgKHJlc2l6ZU1vZGUgPT09ICdmaXQnKSB7XHJcbiAgICAgIC8vIGNhbGN1bGF0ZSB0aGUgd2lkdGggYW5kIGhlaWdodCwgY29uc3RyYWluaW5nIHRoZSBwcm9wb3J0aW9uc1xyXG4gICAgICBpZiAod2lkdGggPiBoZWlnaHQpIHtcclxuICAgICAgICAgIGlmICh3aWR0aCA+IHJlc2l6ZVdpZHRoKSB7XHJcbiAgICAgICAgICAgICAgaGVpZ2h0ID0gTWF0aC5yb3VuZChoZWlnaHQgKj0gcmVzaXplV2lkdGggLyB3aWR0aCk7XHJcbiAgICAgICAgICAgICAgd2lkdGggPSByZXNpemVXaWR0aDtcclxuICAgICAgICAgIH1cclxuICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgIGlmIChoZWlnaHQgPiByZXNpemVIZWlnaHQpIHtcclxuICAgICAgICAgICAgICB3aWR0aCA9IE1hdGgucm91bmQod2lkdGggKj0gcmVzaXplSGVpZ2h0IC8gaGVpZ2h0KTtcclxuICAgICAgICAgICAgICBoZWlnaHQgPSByZXNpemVIZWlnaHQ7XHJcbiAgICAgICAgICB9XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIGNhbnZhcy53aWR0aCA9IHdpZHRoO1xyXG4gICAgICBjYW52YXMuaGVpZ2h0ID0gaGVpZ2h0O1xyXG5cclxuICAgICAgLy8gZHJhdyBpbWFnZSBvbiBjYW52YXNcclxuICAgICAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XHJcbiAgICAgIGN0eC5kcmF3SW1hZ2Uob3JpZ0ltYWdlLCAwLCAwLCB3aWR0aCwgaGVpZ2h0KTtcclxuICB9IGVsc2Uge1xyXG4gICAgdGhyb3cgbmV3IEVycm9yKCdVbmtub3duIHJlc2l6ZU1vZGU6ICcgKyByZXNpemVNb2RlKTtcclxuICB9XHJcblxyXG4gIC8vIGdldCB0aGUgZGF0YSBmcm9tIGNhbnZhcyBhcyA3MCUganBnIChvciBzcGVjaWZpZWQgdHlwZSkuXHJcbiAgcmV0dXJuIGNhbnZhcy50b0RhdGFVUkwocmVzaXplVHlwZSwgcmVzaXplUXVhbGl0eSk7XHJcbn1cclxuXHJcblxyXG4iLCJpbXBvcnQge1xyXG4gIENvbXBvbmVudCwgT25Jbml0LCBPbkRlc3Ryb3ksIEFmdGVyVmlld0NoZWNrZWQsIFZpZXdDaGlsZCwgRWxlbWVudFJlZixcclxuICBSZW5kZXJlciwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBDaGFuZ2VEZXRlY3RvclJlZiwgZm9yd2FyZFJlZiwgSG9zdExpc3RlbmVyXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuaW1wb3J0IENyb3BwZXIgZnJvbSAnY3JvcHBlcmpzJztcclxuXHJcbmltcG9ydCB7IEltYWdlVXBsb2FkZXJTZXJ2aWNlIH0gZnJvbSAnLi9pbWFnZS11cGxvYWRlci5zZXJ2aWNlJztcclxuaW1wb3J0IHsgSW1hZ2VVcGxvYWRlck9wdGlvbnMsIEltYWdlUmVzdWx0LCBSZXNpemVPcHRpb25zLCBDcm9wT3B0aW9ucyB9IGZyb20gJy4vaW50ZXJmYWNlcyc7XHJcbmltcG9ydCB7IGNyZWF0ZUltYWdlLCByZXNpemVJbWFnZSB9IGZyb20gJy4vdXRpbHMnO1xyXG5pbXBvcnQgeyBGaWxlUXVldWVPYmplY3QgfSBmcm9tICcuL2ZpbGUtcXVldWUtb2JqZWN0JztcclxuXHJcbmV4cG9ydCBlbnVtIFN0YXR1cyB7XHJcbiAgTm90U2VsZWN0ZWQsXHJcbiAgU2VsZWN0ZWQsXHJcbiAgVXBsb2FkaW5nLFxyXG4gIExvYWRpbmcsXHJcbiAgTG9hZGVkLFxyXG4gIEVycm9yXHJcbn1cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbmd4LWltYWdlLXVwbG9hZGVyJyxcclxuICB0ZW1wbGF0ZTogYDxkaXYgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIj5cclxuICA8ZGl2IGNsYXNzPVwibWF0Y2gtcGFyZW50XCIgW25nU3dpdGNoXT1cInN0YXR1c1wiPlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJtYXRjaC1wYXJlbnRcIiAqbmdTd2l0Y2hDYXNlPVwic3RhdHVzRW51bS5Ob3RTZWxlY3RlZFwiPlxyXG4gICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cImFkZC1pbWFnZS1idG5cIiAoY2xpY2spPVwib25JbWFnZUNsaWNrZWQoKVwiPlxyXG4gICAgICAgICAgPGRpdj5cclxuICAgICAgICAgICAgPHAgY2xhc3M9XCJwbHVzXCI+KzwvcD5cclxuICAgICAgICAgICAgPHA+Q2xpY2sgaGVyZSB0byBhZGQgaW1hZ2U8L3A+XHJcbiAgICAgICAgICAgIDxwPk9yIGRyb3AgaW1hZ2UgaGVyZTwvcD5cclxuICAgICAgICAgIDwvZGl2PlxyXG4gICAgICA8L2J1dHRvbj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgY2xh