@energycap/components 0.39.21-ECAP-25650-file-upload-validation-support.20240802-1011 → 0.39.21-ECAP-25650-file-upload-validation-support.20240805-1645
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 +23 -16
- package/fesm2015/energycap-components.mjs +23 -15
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +22 -15
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +7 -3
- package/package.json +1 -1
- package/src/assets/locales/en_US.json +2 -1
|
@@ -4106,10 +4106,10 @@ const FileTypeExtensions = {
|
|
|
4106
4106
|
};
|
|
4107
4107
|
class FileUploadComponent extends FormControlBase {
|
|
4108
4108
|
// static class to create the form group from a parent component
|
|
4109
|
-
static getFormModel(validators, disabled = false) {
|
|
4109
|
+
static getFormModel(validators, disabled = false, fileValidators) {
|
|
4110
4110
|
let formGroup = new FormGroup({
|
|
4111
4111
|
file: new FormControl({ value: null, disabled: disabled }, validators),
|
|
4112
|
-
name: new FormControl({ value: null, disabled: disabled }, validators),
|
|
4112
|
+
name: new FormControl({ value: null, disabled: disabled }, { validators: validators, asyncValidators: fileValidators }),
|
|
4113
4113
|
base64FileString: new FormControl(null),
|
|
4114
4114
|
uploadResult: new FormControl(null),
|
|
4115
4115
|
});
|
|
@@ -4118,6 +4118,16 @@ class FileUploadComponent extends FormControlBase {
|
|
|
4118
4118
|
}
|
|
4119
4119
|
return formGroup;
|
|
4120
4120
|
}
|
|
4121
|
+
static getFileValidator(callback) {
|
|
4122
|
+
return async (nameControl) => {
|
|
4123
|
+
if (nameControl.value && nameControl.parent && nameControl.parent.get('file')?.value) {
|
|
4124
|
+
let file = nameControl.parent.get('file')?.value;
|
|
4125
|
+
let base64 = nameControl.parent.get('base64FileString')?.value;
|
|
4126
|
+
return await callback(file, base64);
|
|
4127
|
+
}
|
|
4128
|
+
return null;
|
|
4129
|
+
};
|
|
4130
|
+
}
|
|
4121
4131
|
constructor(validationMessageService, formGroupHelper) {
|
|
4122
4132
|
super(validationMessageService, formGroupHelper);
|
|
4123
4133
|
this.validationMessageService = validationMessageService;
|
|
@@ -4158,7 +4168,6 @@ class FileUploadComponent extends FormControlBase {
|
|
|
4158
4168
|
if (!value) {
|
|
4159
4169
|
this.formModel.patchValue({
|
|
4160
4170
|
file: null,
|
|
4161
|
-
name: null,
|
|
4162
4171
|
base64FileString: null,
|
|
4163
4172
|
uploadResult: null
|
|
4164
4173
|
});
|
|
@@ -4205,16 +4214,19 @@ class FileUploadComponent extends FormControlBase {
|
|
|
4205
4214
|
* @param base64FileString Optional: Will have a value provided if the fileOutput is set to base64
|
|
4206
4215
|
*/
|
|
4207
4216
|
async processFile(file, base64FileString) {
|
|
4208
|
-
|
|
4217
|
+
// Patch the file first to trigger any file validators
|
|
4218
|
+
this.patchProcessedFile(file, base64FileString);
|
|
4209
4219
|
// If we have any async validators pending we need to wait for them to complete before we know if the form is valid
|
|
4210
4220
|
if (this.formModel.pending) {
|
|
4211
4221
|
await this.formModel.statusChanges.pipe(filter(status => status !== 'PENDING'), take(1), takeUntil(this.componentDestroyed)).toPromise();
|
|
4212
4222
|
}
|
|
4223
|
+
// Mark the name control as touched so that any validation errors will show
|
|
4224
|
+
this.formModel.controls.name.markAsTouched();
|
|
4213
4225
|
// Only call the onFileSelected callback to upload the file if the form is valid
|
|
4214
4226
|
if (this.onFileSelected && this.formModel.valid) {
|
|
4215
4227
|
try {
|
|
4216
4228
|
let result = await this.onFileSelected(file);
|
|
4217
|
-
this.
|
|
4229
|
+
this.formModel.patchValue({ uploadResult: result ?? null });
|
|
4218
4230
|
}
|
|
4219
4231
|
catch (e) {
|
|
4220
4232
|
// Bummer, we're not going to do anything about it though.
|
|
@@ -4236,18 +4248,13 @@ class FileUploadComponent extends FormControlBase {
|
|
|
4236
4248
|
* @param base64FileString
|
|
4237
4249
|
* @param onFileSelectedResult
|
|
4238
4250
|
*/
|
|
4239
|
-
|
|
4251
|
+
patchProcessedFile(file, base64FileString) {
|
|
4240
4252
|
this.formModel?.patchValue({
|
|
4241
4253
|
file: file,
|
|
4242
4254
|
name: file?.name,
|
|
4243
|
-
base64FileString: base64FileString ?? null
|
|
4255
|
+
base64FileString: base64FileString ?? null,
|
|
4256
|
+
uploadResult: null
|
|
4244
4257
|
});
|
|
4245
|
-
if (onFileSelectedResult) {
|
|
4246
|
-
this.formModel.patchValue({ uploadResult: onFileSelectedResult });
|
|
4247
|
-
}
|
|
4248
|
-
else {
|
|
4249
|
-
this.formModel.patchValue({ uploadResult: null });
|
|
4250
|
-
}
|
|
4251
4258
|
}
|
|
4252
4259
|
/** Maps the files to an array of File objects and sends them along
|
|
4253
4260
|
* to the derived onMultipleFileSelected method in the hosting component
|
|
@@ -4279,10 +4286,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
4279
4286
|
}
|
|
4280
4287
|
}
|
|
4281
4288
|
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 });
|
|
4282
|
-
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", 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 [helpPopover]=\"helpPopover\"\r\n [helpPopoverPosition]=\"helpPopoverPosition\"\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
|
|
4289
|
+
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", 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 [helpPopover]=\"helpPopover\"\r\n [helpPopoverPosition]=\"helpPopoverPosition\"\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 || formModel?.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 id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n [type]=\"buttonType\"\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", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
4283
4290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
4284
4291
|
type: Component,
|
|
4285
|
-
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n [helpPopover]=\"helpPopover\"\r\n [helpPopoverPosition]=\"helpPopoverPosition\"\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
|
|
4292
|
+
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n [helpPopover]=\"helpPopover\"\r\n [helpPopoverPosition]=\"helpPopoverPosition\"\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 || formModel?.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 id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n [type]=\"buttonType\"\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"] }]
|
|
4286
4293
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { formModel: [{
|
|
4287
4294
|
type: Input
|
|
4288
4295
|
}], placeholder: [{
|