@energycap/components 0.39.4-ECAP-23220-bc-file-upload-dialog.20231220-1435 → 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 -46
- package/fesm2015/energycap-components.mjs +28 -48
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +26 -45
- 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,27 +3889,26 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3909
3889
|
else {
|
|
3910
3890
|
this.formModel.patchValue({ uploadResult: null });
|
|
3911
3891
|
}
|
|
3912
|
-
// console.log('formModel.value', this.formModel?.value);
|
|
3913
|
-
console.log('this.formModel?.get("names")?.value', this.formModel?.get('names')?.value);
|
|
3914
|
-
}
|
|
3915
|
-
/* ---------------------------- Helper Functions ---------------------------- */
|
|
3916
|
-
clearFormModel() {
|
|
3917
|
-
this.formModel?.patchValue({
|
|
3918
|
-
files: null,
|
|
3919
|
-
names: null,
|
|
3920
|
-
base64FileString: null,
|
|
3921
|
-
uploadResult: null
|
|
3922
|
-
});
|
|
3923
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
|
+
*/
|
|
3924
3896
|
async handleMultipleFiles(files) {
|
|
3925
|
-
const
|
|
3926
|
-
|
|
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
|
+
}
|
|
3927
3906
|
}
|
|
3928
3907
|
;
|
|
3929
3908
|
async readFile(file) {
|
|
3930
3909
|
const reader = new FileReader();
|
|
3931
3910
|
reader.onloadend = async (e) => {
|
|
3932
|
-
|
|
3911
|
+
let base64FileString = reader?.result?.toString().split(",")[1];
|
|
3933
3912
|
await this.processFile(file, base64FileString);
|
|
3934
3913
|
};
|
|
3935
3914
|
if (this.isBase64FileOutput()) {
|
|
@@ -3941,10 +3920,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3941
3920
|
}
|
|
3942
3921
|
}
|
|
3943
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 });
|
|
3944
|
-
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" }] });
|
|
3945
3924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3946
3925
|
type: Component,
|
|
3947
|
-
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"] }]
|
|
3948
3927
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3949
3928
|
type: Input
|
|
3950
3929
|
}], fileType: [{
|
|
@@ -3955,6 +3934,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3955
3934
|
type: Input
|
|
3956
3935
|
}], onFileSelected: [{
|
|
3957
3936
|
type: Input
|
|
3937
|
+
}], onMultipleFilesSelected: [{
|
|
3938
|
+
type: Input
|
|
3958
3939
|
}], displayType: [{
|
|
3959
3940
|
type: Input
|
|
3960
3941
|
}], buttonLabel: [{
|