ngx-dropzone-ivy
Version:
A highly configurable dropzone component for Angular.
116 lines • 13.2 kB
JavaScript
import { Component, Input, Output, EventEmitter, HostBinding, HostListener } from '@angular/core';
import { coerceBooleanProperty } from '../helpers';
import { DomSanitizer } from '@angular/platform-browser';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@angular/common";
import * as i3 from "./ngx-dropzone-remove-badge/ngx-dropzone-remove-badge.component";
var KEY_CODE;
(function (KEY_CODE) {
KEY_CODE[KEY_CODE["BACKSPACE"] = 8] = "BACKSPACE";
KEY_CODE[KEY_CODE["DELETE"] = 46] = "DELETE";
})(KEY_CODE || (KEY_CODE = {}));
export class NgxDropzonePreviewComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
this._removable = false;
/** Emitted when the element should be removed. */
this.removed = new EventEmitter();
/** Make the preview item focusable using the tab key. */
this.tabIndex = 0;
}
/** The file to preview. */
set file(value) { this._file = value; }
get file() { return this._file; }
/** Allow the user to remove files. */
get removable() {
return this._removable;
}
set removable(value) {
this._removable = coerceBooleanProperty(value);
}
keyEvent(event) {
switch (event.keyCode) {
case KEY_CODE.BACKSPACE:
case KEY_CODE.DELETE:
this.remove();
break;
default:
break;
}
}
/** We use the HostBinding to pass these common styles to child components. */
get hostStyle() {
const styles = `
display: flex;
height: 140px;
min-height: 140px;
min-width: 180px;
max-width: 180px;
justify-content: center;
align-items: center;
padding: 0 20px;
margin: 10px;
border-radius: 5px;
position: relative;
`;
return this.sanitizer.bypassSecurityTrustStyle(styles);
}
/** Remove method to be used from the template. */
_remove(event) {
event.stopPropagation();
this.remove();
}
/** Remove the preview item (use from component code). */
remove() {
if (this._removable) {
this.removed.next(this.file);
}
}
async readFile() {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = e => {
resolve(e.target.result);
};
reader.onerror = e => {
console.error(`FileReader failed on file ${this.file.name}.`);
reject(e);
};
if (!this.file) {
return reject('No file to read. Please provide a file using the [file] Input property.');
}
reader.readAsDataURL(this.file);
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxDropzonePreviewComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgxDropzonePreviewComponent, selector: "ngx-dropzone-preview", inputs: { file: "file", removable: "removable" }, outputs: { removed: "removed" }, host: { listeners: { "keyup": "keyEvent($event)" }, properties: { "style": "this.hostStyle", "tabindex": "this.tabIndex" } }, ngImport: i0, template: `
<ng-content select="ngx-dropzone-label"></ng-content>
<ngx-dropzone-remove-badge *ngIf="removable" (click)="_remove($event)">
</ngx-dropzone-remove-badge>
`, isInline: true, styles: [":host{background-image:linear-gradient(to top,#ededed,#efefef,#f1f1f1,#f4f4f4,#f6f6f6)}:host:hover,:host:focus{background-image:linear-gradient(to top,#e3e3e3,#ebeaea,#e8e7e7,#ebeaea,#f4f4f4);outline:0}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host ::ng-deep ngx-dropzone-label{overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.NgxDropzoneRemoveBadgeComponent, selector: "ngx-dropzone-remove-badge" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgxDropzonePreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-dropzone-preview', template: `
<ng-content select="ngx-dropzone-label"></ng-content>
<ngx-dropzone-remove-badge *ngIf="removable" (click)="_remove($event)">
</ngx-dropzone-remove-badge>
`, styles: [":host{background-image:linear-gradient(to top,#ededed,#efefef,#f1f1f1,#f4f4f4,#f6f6f6)}:host:hover,:host:focus{background-image:linear-gradient(to top,#e3e3e3,#ebeaea,#e8e7e7,#ebeaea,#f4f4f4);outline:0}:host:hover ngx-dropzone-remove-badge,:host:focus ngx-dropzone-remove-badge{opacity:1}:host ngx-dropzone-remove-badge{opacity:0}:host ::ng-deep ngx-dropzone-label{overflow-wrap:break-word}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { file: [{
type: Input
}], removable: [{
type: Input
}], removed: [{
type: Output
}], keyEvent: [{
type: HostListener,
args: ['keyup', ['$event']]
}], hostStyle: [{
type: HostBinding,
args: ['style']
}], tabIndex: [{
type: HostBinding,
args: ['tabindex']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWRyb3B6b25lLXByZXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRyb3B6b25lL3NyYy9saWIvbmd4LWRyb3B6b25lLXByZXZpZXcvbmd4LWRyb3B6b25lLXByZXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDbkQsT0FBTyxFQUFhLFlBQVksRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7OztBQUVwRSxJQUFLLFFBR0o7QUFIRCxXQUFLLFFBQVE7SUFDWixpREFBYSxDQUFBO0lBQ2IsNENBQVcsQ0FBQTtBQUNaLENBQUMsRUFISSxRQUFRLEtBQVIsUUFBUSxRQUdaO0FBV0QsTUFBTSxPQUFPLDJCQUEyQjtJQUV2QyxZQUNXLFNBQXVCO1FBQXZCLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFrQnhCLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFFN0Isa0RBQWtEO1FBQy9CLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBa0N0RCx5REFBeUQ7UUFDaEMsYUFBUSxHQUFHLENBQUMsQ0FBQztJQXZEbEMsQ0FBQztJQUlMLDJCQUEyQjtJQUMzQixJQUNJLElBQUksQ0FBQyxLQUFXLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQzdDLElBQUksSUFBSSxLQUFXLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFFdkMsc0NBQXNDO0lBQ3RDLElBQ0ksU0FBUztRQUNaLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN4QixDQUFDO0lBQ0QsSUFBSSxTQUFTLENBQUMsS0FBYztRQUMzQixJQUFJLENBQUMsVUFBVSxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFPRCxRQUFRLENBQUMsS0FBb0I7UUFDNUIsUUFBUSxLQUFLLENBQUMsT0FBTyxFQUFFO1lBQ3RCLEtBQUssUUFBUSxDQUFDLFNBQVMsQ0FBQztZQUN4QixLQUFLLFFBQVEsQ0FBQyxNQUFNO2dCQUNuQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQ2QsTUFBTTtZQUNQO2dCQUNDLE1BQU07U0FDUDtJQUNGLENBQUM7SUFFRCw4RUFBOEU7SUFDOUUsSUFDSSxTQUFTO1FBQ1osTUFBTSxNQUFNLEdBQUc7Ozs7Ozs7Ozs7OztHQVlkLENBQUM7UUFFRixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsd0JBQXdCLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUtELGtEQUFrRDtJQUNsRCxPQUFPLENBQUMsS0FBSztRQUNaLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDZixDQUFDO0lBRUQseURBQXlEO0lBQ3pELE1BQU07UUFDTCxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDcEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzdCO0lBQ0YsQ0FBQztJQUVTLEtBQUssQ0FBQyxRQUFRO1FBQ3ZCLE9BQU8sSUFBSSxPQUFPLENBQXVCLENBQUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxFQUFFO1lBQzVELE1BQU0sTUFBTSxHQUFHLElBQUksVUFBVSxFQUFFLENBQUM7WUFFaEMsTUFBTSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsRUFBRTtnQkFDbkIsT0FBTyxDQUFFLENBQUMsQ0FBQyxNQUFxQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQzFDLENBQUMsQ0FBQztZQUVGLE1BQU0sQ0FBQyxPQUFPLEdBQUcsQ0FBQyxDQUFDLEVBQUU7Z0JBQ3BCLE9BQU8sQ0FBQyxLQUFLLENBQUMsNkJBQTZCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztnQkFDOUQsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ1gsQ0FBQyxDQUFDO1lBRUYsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUU7Z0JBQ2YsT0FBTyxNQUFNLENBQUMseUVBQXlFLENBQUMsQ0FBQzthQUN6RjtZQUVELE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ2pDLENBQUMsQ0FBQyxDQUFDO0lBQ0osQ0FBQzsrR0E3RlcsMkJBQTJCO21HQUEzQiwyQkFBMkIsNlFBUDdCOzs7O0VBSVQ7OzRGQUdXLDJCQUEyQjtrQkFUdkMsU0FBUzsrQkFDQyxzQkFBc0IsWUFDdEI7Ozs7RUFJVDttR0FhRyxJQUFJO3NCQURQLEtBQUs7Z0JBTUYsU0FBUztzQkFEWixLQUFLO2dCQVVhLE9BQU87c0JBQXpCLE1BQU07Z0JBR1AsUUFBUTtzQkFEUCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFjN0IsU0FBUztzQkFEWixXQUFXO3VCQUFDLE9BQU87Z0JBb0JLLFFBQVE7c0JBQWhDLFdBQVc7dUJBQUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSB9IGZyb20gJy4uL2hlbHBlcnMnO1xyXG5pbXBvcnQgeyBTYWZlU3R5bGUsIERvbVNhbml0aXplciB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xyXG5cclxuZW51bSBLRVlfQ09ERSB7XHJcblx0QkFDS1NQQUNFID0gOCxcclxuXHRERUxFVEUgPSA0NlxyXG59XHJcblxyXG5AQ29tcG9uZW50KHtcclxuXHRzZWxlY3RvcjogJ25neC1kcm9wem9uZS1wcmV2aWV3JyxcclxuXHR0ZW1wbGF0ZTogYFxyXG5cdFx0PG5nLWNvbnRlbnQgc2VsZWN0PVwibmd4LWRyb3B6b25lLWxhYmVsXCI+PC9uZy1jb250ZW50PlxyXG5cdFx0PG5neC1kcm9wem9uZS1yZW1vdmUtYmFkZ2UgKm5nSWY9XCJyZW1vdmFibGVcIiAoY2xpY2spPVwiX3JlbW92ZSgkZXZlbnQpXCI+XHJcblx0XHQ8L25neC1kcm9wem9uZS1yZW1vdmUtYmFkZ2U+XHJcblx0YCxcclxuXHRzdHlsZVVybHM6IFsnLi9uZ3gtZHJvcHpvbmUtcHJldmlldy5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ3hEcm9wem9uZVByZXZpZXdDb21wb25lbnQge1xyXG5cclxuXHRjb25zdHJ1Y3RvcihcclxuXHRcdHByb3RlY3RlZCBzYW5pdGl6ZXI6IERvbVNhbml0aXplclxyXG5cdCkgeyB9XHJcblxyXG5cdHByb3RlY3RlZCBfZmlsZTogRmlsZTtcclxuXHJcblx0LyoqIFRoZSBmaWxlIHRvIHByZXZpZXcuICovXHJcblx0QElucHV0KClcclxuXHRzZXQgZmlsZSh2YWx1ZTogRmlsZSkgeyB0aGlzLl9maWxlID0gdmFsdWU7IH1cclxuXHRnZXQgZmlsZSgpOiBGaWxlIHsgcmV0dXJuIHRoaXMuX2ZpbGU7IH1cclxuXHJcblx0LyoqIEFsbG93IHRoZSB1c2VyIHRvIHJlbW92ZSBmaWxlcy4gKi9cclxuXHRASW5wdXQoKVxyXG5cdGdldCByZW1vdmFibGUoKTogYm9vbGVhbiB7XHJcblx0XHRyZXR1cm4gdGhpcy5fcmVtb3ZhYmxlO1xyXG5cdH1cclxuXHRzZXQgcmVtb3ZhYmxlKHZhbHVlOiBib29sZWFuKSB7XHJcblx0XHR0aGlzLl9yZW1vdmFibGUgPSBjb2VyY2VCb29sZWFuUHJvcGVydHkodmFsdWUpO1xyXG5cdH1cclxuXHRwcm90ZWN0ZWQgX3JlbW92YWJsZSA9IGZhbHNlO1xyXG5cclxuXHQvKiogRW1pdHRlZCB3aGVuIHRoZSBlbGVtZW50IHNob3VsZCBiZSByZW1vdmVkLiAqL1xyXG5cdEBPdXRwdXQoKSByZWFkb25seSByZW1vdmVkID0gbmV3IEV2ZW50RW1pdHRlcjxGaWxlPigpO1xyXG5cclxuXHRASG9zdExpc3RlbmVyKCdrZXl1cCcsIFsnJGV2ZW50J10pXHJcblx0a2V5RXZlbnQoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcclxuXHRcdHN3aXRjaCAoZXZlbnQua2V5Q29kZSkge1xyXG5cdFx0XHRjYXNlIEtFWV9DT0RFLkJBQ0tTUEFDRTpcclxuXHRcdFx0Y2FzZSBLRVlfQ09ERS5ERUxFVEU6XHJcblx0XHRcdFx0dGhpcy5yZW1vdmUoKTtcclxuXHRcdFx0XHRicmVhaztcclxuXHRcdFx0ZGVmYXVsdDpcclxuXHRcdFx0XHRicmVhaztcclxuXHRcdH1cclxuXHR9XHJcblxyXG5cdC8qKiBXZSB1c2UgdGhlIEhvc3RCaW5kaW5nIHRvIHBhc3MgdGhlc2UgY29tbW9uIHN0eWxlcyB0byBjaGlsZCBjb21wb25lbnRzLiAqL1xyXG5cdEBIb3N0QmluZGluZygnc3R5bGUnKVxyXG5cdGdldCBob3N0U3R5bGUoKTogU2FmZVN0eWxlIHtcclxuXHRcdGNvbnN0IHN0eWxlcyA9IGBcclxuXHRcdFx0ZGlzcGxheTogZmxleDtcclxuXHRcdFx0aGVpZ2h0OiAxNDBweDtcclxuXHRcdFx0bWluLWhlaWdodDogMTQwcHg7XHJcblx0XHRcdG1pbi13aWR0aDogMTgwcHg7XHJcblx0XHRcdG1heC13aWR0aDogMTgwcHg7XHJcblx0XHRcdGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xyXG5cdFx0XHRwYWRkaW5nOiAwIDIwcHg7XHJcblx0XHRcdG1hcmdpbjogMTBweDtcclxuXHRcdFx0Ym9yZGVyLXJhZGl1czogNXB4O1xyXG5cdFx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XHJcblx0XHRgO1xyXG5cclxuXHRcdHJldHVybiB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0U3R5bGUoc3R5bGVzKTtcclxuXHR9XHJcblxyXG5cdC8qKiBNYWtlIHRoZSBwcmV2aWV3IGl0ZW0gZm9jdXNhYmxlIHVzaW5nIHRoZSB0YWIga2V5LiAqL1xyXG5cdEBIb3N0QmluZGluZygndGFiaW5kZXgnKSB0YWJJbmRleCA9IDA7XHJcblxyXG5cdC8qKiBSZW1vdmUgbWV0aG9kIHRvIGJlIHVzZWQgZnJvbSB0aGUgdGVtcGxhdGUuICovXHJcblx0X3JlbW92ZShldmVudCkge1xyXG5cdFx0ZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcblx0XHR0aGlzLnJlbW92ZSgpO1xyXG5cdH1cclxuXHJcblx0LyoqIFJlbW92ZSB0aGUgcHJldmlldyBpdGVtICh1c2UgZnJvbSBjb21wb25lbnQgY29kZSkuICovXHJcblx0cmVtb3ZlKCkge1xyXG5cdFx0aWYgKHRoaXMuX3JlbW92YWJsZSkge1xyXG5cdFx0XHR0aGlzLnJlbW92ZWQubmV4dCh0aGlzLmZpbGUpO1xyXG5cdFx0fVxyXG5cdH1cclxuXHJcblx0cHJvdGVjdGVkIGFzeW5jIHJlYWRGaWxlKCk6IFByb21pc2U8c3RyaW5nIHwgQXJyYXlCdWZmZXI+IHtcclxuXHRcdHJldHVybiBuZXcgUHJvbWlzZTxzdHJpbmcgfCBBcnJheUJ1ZmZlcj4oKHJlc29sdmUsIHJlamVjdCkgPT4ge1xyXG5cdFx0XHRjb25zdCByZWFkZXIgPSBuZXcgRmlsZVJlYWRlcigpO1xyXG5cclxuXHRcdFx0cmVhZGVyLm9ubG9hZCA9IGUgPT4ge1xyXG5cdFx0XHRcdHJlc29sdmUoKGUudGFyZ2V0IGFzIEZpbGVSZWFkZXIpLnJlc3VsdCk7XHJcblx0XHRcdH07XHJcblxyXG5cdFx0XHRyZWFkZXIub25lcnJvciA9IGUgPT4ge1xyXG5cdFx0XHRcdGNvbnNvbGUuZXJyb3IoYEZpbGVSZWFkZXIgZmFpbGVkIG9uIGZpbGUgJHt0aGlzLmZpbGUubmFtZX0uYCk7XHJcblx0XHRcdFx0cmVqZWN0KGUpO1xyXG5cdFx0XHR9O1xyXG5cclxuXHRcdFx0aWYgKCF0aGlzLmZpbGUpIHtcclxuXHRcdFx0XHRyZXR1cm4gcmVqZWN0KCdObyBmaWxlIHRvIHJlYWQuIFBsZWFzZSBwcm92aWRlIGEgZmlsZSB1c2luZyB0aGUgW2ZpbGVdIElucHV0IHByb3BlcnR5LicpO1xyXG5cdFx0XHR9XHJcblxyXG5cdFx0XHRyZWFkZXIucmVhZEFzRGF0YVVSTCh0aGlzLmZpbGUpO1xyXG5cdFx0fSk7XHJcblx0fVxyXG59XHJcbiJdfQ==