systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
75 lines • 10.9 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class FileSelectorComponent {
constructor() {
this._fileName = '';
this.fileNameChange = new EventEmitter();
this.fileChange = new EventEmitter();
this.fileListChange = new EventEmitter();
this.showButtonOnDisable = false;
this.multipleSelection = false;
this.disabled = false;
}
get fileName() {
return this._fileName;
}
set fileName(name) {
this._fileName = name;
this.fileNameChange.emit(this._fileName);
}
get file() {
return this._file;
}
set file(file) {
this._file = file;
this.fileChange.emit(this._file);
}
get fileList() {
return this._fileList;
}
set fileList(fileList) {
this._fileList = fileList;
this.fileListChange.emit(this._fileList);
}
selectFile(files) {
if (files.length) {
if (this.multipleSelection) {
this.fileList = files;
this.fileName = '';
for (let index = 0; index < files.length; index++) {
this.fileName += (this.fileName.length > 0 ? ', ' : '') + files[index].name;
}
}
else {
this.fileName = files[0].name;
this.file = files[0];
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FileSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: FileSelectorComponent, selector: "systelab-file-selector", inputs: { showButtonOnDisable: "showButtonOnDisable", multipleSelection: "multipleSelection", disabled: "disabled", fileName: "fileName", file: "file", fileList: "fileList" }, outputs: { fileNameChange: "fileNameChange", fileChange: "fileChange", fileListChange: "fileListChange" }, ngImport: i0, template: "<div class=\"slab-file-selector input-group\">\n <input readonly class=\"form-control\" id=\"fileSelectorInput\" type=\"text\" name=\"uploadFile\"\n [(ngModel)]=\"fileName\"\n (click)=\"uploadBtn.click()\"\n [disabled]=\"disabled\">\n <input #uploadBtn type=\"file\" class=\"d-none\" (change)=\"selectFile($event.target.files)\" [multiple]=\"multipleSelection\">\n <div class=\"input-group-append\">\n <button class=\"btn btn-sm pt-0 pb-0\" [disabled]=\"disabled\"\n [hidden]=\"disabled && !showButtonOnDisable\"\n id=\"selectionButton\"\n type=\"button\" (click)=\"uploadBtn.click()\"><b>...</b></button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: FileSelectorComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-file-selector', template: "<div class=\"slab-file-selector input-group\">\n <input readonly class=\"form-control\" id=\"fileSelectorInput\" type=\"text\" name=\"uploadFile\"\n [(ngModel)]=\"fileName\"\n (click)=\"uploadBtn.click()\"\n [disabled]=\"disabled\">\n <input #uploadBtn type=\"file\" class=\"d-none\" (change)=\"selectFile($event.target.files)\" [multiple]=\"multipleSelection\">\n <div class=\"input-group-append\">\n <button class=\"btn btn-sm pt-0 pb-0\" [disabled]=\"disabled\"\n [hidden]=\"disabled && !showButtonOnDisable\"\n id=\"selectionButton\"\n type=\"button\" (click)=\"uploadBtn.click()\"><b>...</b></button>\n </div>\n</div>\n" }]
}], propDecorators: { fileNameChange: [{
type: Output
}], fileChange: [{
type: Output
}], fileListChange: [{
type: Output
}], showButtonOnDisable: [{
type: Input
}], multipleSelection: [{
type: Input
}], disabled: [{
type: Input
}], fileName: [{
type: Input
}], file: [{
type: Input
}], fileList: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1zZWxlY3Rvci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvZmlsZS1zZWxlY3Rvci9maWxlLXNlbGVjdG9yLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9maWxlLXNlbGVjdG9yL2ZpbGUtc2VsZWN0b3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBT3ZFLE1BQU0sT0FBTyxxQkFBcUI7SUFMbEM7UUFPUyxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBSU4sbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBQzVDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3RDLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztRQUV0RCx3QkFBbUIsR0FBRyxLQUFLLENBQUM7UUFDNUIsc0JBQWlCLEdBQUcsS0FBSyxDQUFDO1FBQzFCLGFBQVEsR0FBRyxLQUFLLENBQUM7S0E4QzFCO0lBNUNBLElBQ1csUUFBUTtRQUNsQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQVcsUUFBUSxDQUFDLElBQVk7UUFDL0IsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzFDLENBQUM7SUFFRCxJQUNXLElBQUk7UUFDZCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUM7SUFDbkIsQ0FBQztJQUVELElBQVcsSUFBSSxDQUFDLElBQVU7UUFDekIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7UUFDbEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxJQUNXLFFBQVE7UUFDbEIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxJQUFXLFFBQVEsQ0FBQyxRQUFrQjtRQUNyQyxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUMxQixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUVNLFVBQVUsQ0FBQyxLQUFlO1FBQ2hDLElBQUksS0FBSyxDQUFDLE1BQU0sRUFBRTtZQUNqQixJQUFJLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtnQkFDM0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7Z0JBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO2dCQUNuQixLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRTtvQkFDbEQsSUFBSSxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDO2lCQUM1RTthQUNEO2lCQUFNO2dCQUNOLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztnQkFDOUIsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDckI7U0FDRDtJQUNGLENBQUM7OEdBekRXLHFCQUFxQjtrR0FBckIscUJBQXFCLHlWQ1BsQyxndEJBYUE7OzJGRE5hLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDQyx3QkFBd0I7OEJBVWpCLGNBQWM7c0JBQTlCLE1BQU07Z0JBQ1UsVUFBVTtzQkFBMUIsTUFBTTtnQkFDVSxjQUFjO3NCQUE5QixNQUFNO2dCQUVFLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFHSyxRQUFRO3NCQURsQixLQUFLO2dCQVdLLElBQUk7c0JBRGQsS0FBSztnQkFXSyxRQUFRO3NCQURsQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnc3lzdGVsYWItZmlsZS1zZWxlY3RvcicsXG5cdHRlbXBsYXRlVXJsOiAnZmlsZS1zZWxlY3Rvci5jb21wb25lbnQuaHRtbCdcbn0pXG5cbmV4cG9ydCBjbGFzcyBGaWxlU2VsZWN0b3JDb21wb25lbnQge1xuXG5cdHByaXZhdGUgX2ZpbGVOYW1lID0gJyc7XG5cdHByaXZhdGUgX2ZpbGU6IEZpbGU7XG5cdHByaXZhdGUgX2ZpbGVMaXN0OiBGaWxlTGlzdDtcblxuXHRAT3V0cHV0KCkgcHVibGljIGZpbGVOYW1lQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG5cdEBPdXRwdXQoKSBwdWJsaWMgZmlsZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RmlsZT4oKTtcblx0QE91dHB1dCgpIHB1YmxpYyBmaWxlTGlzdENoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RmlsZUxpc3Q+KCk7XG5cblx0QElucHV0KCkgc2hvd0J1dHRvbk9uRGlzYWJsZSA9IGZhbHNlO1xuXHRASW5wdXQoKSBtdWx0aXBsZVNlbGVjdGlvbiA9IGZhbHNlO1xuXHRASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG5cdEBJbnB1dCgpXG5cdHB1YmxpYyBnZXQgZmlsZU5hbWUoKSB7XG5cdFx0cmV0dXJuIHRoaXMuX2ZpbGVOYW1lO1xuXHR9XG5cblx0cHVibGljIHNldCBmaWxlTmFtZShuYW1lOiBzdHJpbmcpIHtcblx0XHR0aGlzLl9maWxlTmFtZSA9IG5hbWU7XG5cdFx0dGhpcy5maWxlTmFtZUNoYW5nZS5lbWl0KHRoaXMuX2ZpbGVOYW1lKTtcblx0fVxuXG5cdEBJbnB1dCgpXG5cdHB1YmxpYyBnZXQgZmlsZSgpIHtcblx0XHRyZXR1cm4gdGhpcy5fZmlsZTtcblx0fVxuXG5cdHB1YmxpYyBzZXQgZmlsZShmaWxlOiBGaWxlKSB7XG5cdFx0dGhpcy5fZmlsZSA9IGZpbGU7XG5cdFx0dGhpcy5maWxlQ2hhbmdlLmVtaXQodGhpcy5fZmlsZSk7XG5cdH1cblxuXHRASW5wdXQoKVxuXHRwdWJsaWMgZ2V0IGZpbGVMaXN0KCkge1xuXHRcdHJldHVybiB0aGlzLl9maWxlTGlzdDtcblx0fVxuXG5cdHB1YmxpYyBzZXQgZmlsZUxpc3QoZmlsZUxpc3Q6IEZpbGVMaXN0KSB7XG5cdFx0dGhpcy5fZmlsZUxpc3QgPSBmaWxlTGlzdDtcblx0XHR0aGlzLmZpbGVMaXN0Q2hhbmdlLmVtaXQodGhpcy5fZmlsZUxpc3QpO1xuXHR9XG5cblx0cHVibGljIHNlbGVjdEZpbGUoZmlsZXM6IEZpbGVMaXN0KSB7XG5cdFx0aWYgKGZpbGVzLmxlbmd0aCkge1xuXHRcdFx0aWYgKHRoaXMubXVsdGlwbGVTZWxlY3Rpb24pIHtcblx0XHRcdFx0dGhpcy5maWxlTGlzdCA9IGZpbGVzO1xuXHRcdFx0XHR0aGlzLmZpbGVOYW1lID0gJyc7XG5cdFx0XHRcdGZvciAobGV0IGluZGV4ID0gMDsgaW5kZXggPCBmaWxlcy5sZW5ndGg7IGluZGV4KyspIHtcblx0XHRcdFx0XHR0aGlzLmZpbGVOYW1lICs9ICh0aGlzLmZpbGVOYW1lLmxlbmd0aCA+IDAgPyAnLCAnIDogJycpICsgZmlsZXNbaW5kZXhdLm5hbWU7XG5cdFx0XHRcdH1cblx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdHRoaXMuZmlsZU5hbWUgPSBmaWxlc1swXS5uYW1lO1xuXHRcdFx0XHR0aGlzLmZpbGUgPSBmaWxlc1swXTtcblx0XHRcdH1cblx0XHR9XG5cdH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJzbGFiLWZpbGUtc2VsZWN0b3IgaW5wdXQtZ3JvdXBcIj5cbiAgICA8aW5wdXQgcmVhZG9ubHkgY2xhc3M9XCJmb3JtLWNvbnRyb2xcIiBpZD1cImZpbGVTZWxlY3RvcklucHV0XCIgdHlwZT1cInRleHRcIiBuYW1lPVwidXBsb2FkRmlsZVwiXG4gICAgICAgICAgIFsobmdNb2RlbCldPVwiZmlsZU5hbWVcIlxuICAgICAgICAgICAoY2xpY2spPVwidXBsb2FkQnRuLmNsaWNrKClcIlxuICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIj5cbiAgICA8aW5wdXQgI3VwbG9hZEJ0biB0eXBlPVwiZmlsZVwiIGNsYXNzPVwiZC1ub25lXCIgKGNoYW5nZSk9XCJzZWxlY3RGaWxlKCRldmVudC50YXJnZXQuZmlsZXMpXCIgW211bHRpcGxlXT1cIm11bHRpcGxlU2VsZWN0aW9uXCI+XG4gICAgPGRpdiBjbGFzcz1cImlucHV0LWdyb3VwLWFwcGVuZFwiPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1zbSBwdC0wIHBiLTBcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgICAgICAgIFtoaWRkZW5dPVwiZGlzYWJsZWQgJiYgIXNob3dCdXR0b25PbkRpc2FibGVcIlxuICAgICAgICAgICAgICAgIGlkPVwic2VsZWN0aW9uQnV0dG9uXCJcbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cInVwbG9hZEJ0bi5jbGljaygpXCI+PGI+Li4uPC9iPjwvYnV0dG9uPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=