@energycap/components 0.39.4-ECAP-23220-bc-file-upload-dialog.20231220-1530 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20231221-0959
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/controls/file-upload/file-upload.component.mjs +27 -45
- package/fesm2015/energycap-components.mjs +28 -47
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +26 -44
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +11 -3
- package/package.json +1 -1
|
@@ -3756,10 +3756,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3756
3756
|
// static class to create the form group from a parent component
|
|
3757
3757
|
static getFormModel(validators, disabled = false) {
|
|
3758
3758
|
let formGroup = new UntypedFormGroup({
|
|
3759
|
-
|
|
3760
|
-
|
|
3759
|
+
file: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3760
|
+
name: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3761
3761
|
base64FileString: new UntypedFormControl(null),
|
|
3762
|
-
uploadResult: new UntypedFormControl(null)
|
|
3762
|
+
uploadResult: new UntypedFormControl(null),
|
|
3763
3763
|
});
|
|
3764
3764
|
if (disabled) {
|
|
3765
3765
|
formGroup.disable();
|
|
@@ -3798,11 +3798,11 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3798
3798
|
// Watch for name to change, if the value is cleared we will clear the other
|
|
3799
3799
|
// supporting model properties. The name can be cleared by the user manually or via
|
|
3800
3800
|
// the clear button
|
|
3801
|
-
this.formModel?.get('
|
|
3801
|
+
this.formModel?.get('name')?.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(value => {
|
|
3802
3802
|
if (!value) {
|
|
3803
3803
|
this.formModel.patchValue({
|
|
3804
|
-
|
|
3805
|
-
|
|
3804
|
+
file: null,
|
|
3805
|
+
name: null,
|
|
3806
3806
|
base64FileString: null,
|
|
3807
3807
|
uploadResult: null
|
|
3808
3808
|
});
|
|
@@ -3811,9 +3811,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3811
3811
|
}
|
|
3812
3812
|
async fileChange(files) {
|
|
3813
3813
|
if (this.multiSelect) {
|
|
3814
|
-
|
|
3815
|
-
this.clearFormModel();
|
|
3816
|
-
await this.handleMultipleFiles(files);
|
|
3814
|
+
this.handleMultipleFiles(files);
|
|
3817
3815
|
}
|
|
3818
3816
|
else {
|
|
3819
3817
|
const file = files.item(0);
|
|
@@ -3880,27 +3878,9 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3880
3878
|
* @param onFileSelectedResult
|
|
3881
3879
|
*/
|
|
3882
3880
|
patchFileResult(file, base64FileString, onFileSelectedResult) {
|
|
3883
|
-
console.log('inside patchFileResult');
|
|
3884
|
-
// Get the current value of files from formModel
|
|
3885
|
-
let files = this.formModel?.get('files')?.value || [];
|
|
3886
|
-
let names = this.formModel?.get('names')?.value || [];
|
|
3887
|
-
// If multiSelect is true we need to append the file to the existing array
|
|
3888
|
-
// otherwise we'll just set the file to the form model
|
|
3889
|
-
if (this.multiSelect) {
|
|
3890
|
-
if (file) {
|
|
3891
|
-
files = [...files, file];
|
|
3892
|
-
}
|
|
3893
|
-
if (file?.name) {
|
|
3894
|
-
names = [...names, file.name];
|
|
3895
|
-
}
|
|
3896
|
-
}
|
|
3897
|
-
else {
|
|
3898
|
-
files = [file];
|
|
3899
|
-
names = [file?.name];
|
|
3900
|
-
}
|
|
3901
3881
|
this.formModel?.patchValue({
|
|
3902
|
-
|
|
3903
|
-
|
|
3882
|
+
file: file,
|
|
3883
|
+
name: file?.name,
|
|
3904
3884
|
base64FileString: base64FileString ?? null
|
|
3905
3885
|
});
|
|
3906
3886
|
if (onFileSelectedResult) {
|
|
@@ -3909,26 +3889,26 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3909
3889
|
else {
|
|
3910
3890
|
this.formModel.patchValue({ uploadResult: null });
|
|
3911
3891
|
}
|
|
3912
|
-
console.log('formModel.value after fileUploadComponent patch: ', this.formModel?.value);
|
|
3913
|
-
}
|
|
3914
|
-
/* ---------------------------- Helper Functions ---------------------------- */
|
|
3915
|
-
clearFormModel() {
|
|
3916
|
-
this.formModel?.patchValue({
|
|
3917
|
-
files: null,
|
|
3918
|
-
names: null,
|
|
3919
|
-
base64FileString: null,
|
|
3920
|
-
uploadResult: null
|
|
3921
|
-
});
|
|
3922
3892
|
}
|
|
3893
|
+
/** Maps the files to an array of File objects and sends them along
|
|
3894
|
+
* to the derived onMultipleFileSelected method in the hosting component
|
|
3895
|
+
*/
|
|
3923
3896
|
async handleMultipleFiles(files) {
|
|
3924
|
-
const
|
|
3925
|
-
|
|
3897
|
+
const filesArray = Array.from(files);
|
|
3898
|
+
if (this.onMultipleFilesSelected) {
|
|
3899
|
+
try {
|
|
3900
|
+
let result = await this.onMultipleFilesSelected(filesArray);
|
|
3901
|
+
}
|
|
3902
|
+
catch (e) {
|
|
3903
|
+
console.log('error: ', e);
|
|
3904
|
+
}
|
|
3905
|
+
}
|
|
3926
3906
|
}
|
|
3927
3907
|
;
|
|
3928
3908
|
async readFile(file) {
|
|
3929
3909
|
const reader = new FileReader();
|
|
3930
3910
|
reader.onloadend = async (e) => {
|
|
3931
|
-
|
|
3911
|
+
let base64FileString = reader?.result?.toString().split(",")[1];
|
|
3932
3912
|
await this.processFile(file, base64FileString);
|
|
3933
3913
|
};
|
|
3934
3914
|
if (this.isBase64FileOutput()) {
|
|
@@ -3940,10 +3920,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3940
3920
|
}
|
|
3941
3921
|
}
|
|
3942
3922
|
FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
|
|
3943
|
-
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", displayType: "displayType", buttonLabel: "buttonLabel", multiSelect: "multiSelect" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"displayType === 'file' ? formModel?.get('
|
|
3923
|
+
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", multiSelect: "multiSelect" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n <ec-form-control *ngIf=\"displayType === 'file'\"\r\n id=\"{{inputId}}_formControl\"\r\n class=\"text-truncate\"\r\n [required]=\"required\"\r\n [pending]=\"pending\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('name')\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [tabindex]=\"-1\">\r\n </ec-form-control>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'file'\"\r\n #browseBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n (clicked)=\"fileInput.click()\"\r\n type=\"secondary\"\r\n [tabindex]=\"tabindex\"\r\n [disabled]=\"formModel?.get('name').disabled\"\r\n label=\"Browse\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'button'\"\r\n #selectZipFilesBtn\r\n id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n type=\"primary\"\r\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n (clicked)=\"fileInput.click()\"\r\n style=\"width: 100%;\">\r\n </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3944
3924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3945
3925
|
type: Component,
|
|
3946
|
-
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"displayType === 'file' ? formModel?.get('
|
|
3926
|
+
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n <ec-form-control *ngIf=\"displayType === 'file'\"\r\n id=\"{{inputId}}_formControl\"\r\n class=\"text-truncate\"\r\n [required]=\"required\"\r\n [pending]=\"pending\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('name')\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [tabindex]=\"-1\">\r\n </ec-form-control>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'file'\"\r\n #browseBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n (clicked)=\"fileInput.click()\"\r\n type=\"secondary\"\r\n [tabindex]=\"tabindex\"\r\n [disabled]=\"formModel?.get('name').disabled\"\r\n label=\"Browse\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'button'\"\r\n #selectZipFilesBtn\r\n id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n type=\"primary\"\r\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n (clicked)=\"fileInput.click()\"\r\n style=\"width: 100%;\">\r\n </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
|
|
3947
3927
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3948
3928
|
type: Input
|
|
3949
3929
|
}], fileType: [{
|
|
@@ -3954,6 +3934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3954
3934
|
type: Input
|
|
3955
3935
|
}], onFileSelected: [{
|
|
3956
3936
|
type: Input
|
|
3937
|
+
}], onMultipleFilesSelected: [{
|
|
3938
|
+
type: Input
|
|
3957
3939
|
}], displayType: [{
|
|
3958
3940
|
type: Input
|
|
3959
3941
|
}], buttonLabel: [{
|