@energycap/components 0.39.4 → 0.39.5
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 +76 -27
- package/fesm2015/energycap-components.mjs +74 -23
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +69 -22
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +30 -1
- package/package.json +1 -1
- package/src/assets/locales/en_US.json +3 -1
|
@@ -3759,7 +3759,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3759
3759
|
file: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3760
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();
|
|
@@ -3778,6 +3778,20 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3778
3778
|
* File output, determines which properties are supplied on the formModel
|
|
3779
3779
|
*/
|
|
3780
3780
|
this.fileOutput = 'base64';
|
|
3781
|
+
/**
|
|
3782
|
+
* Optional display type that controls whether the file input textbox is displayed or
|
|
3783
|
+
* simply a button the user clicks to launch the OS file storage dialog.
|
|
3784
|
+
* Default: file
|
|
3785
|
+
*/
|
|
3786
|
+
this.displayType = 'file';
|
|
3787
|
+
/**
|
|
3788
|
+
* When display type is set to button this property will control the button type
|
|
3789
|
+
*/
|
|
3790
|
+
this.buttonType = 'primary';
|
|
3791
|
+
/**
|
|
3792
|
+
* Optional property to control whether the user can select multiple files
|
|
3793
|
+
*/
|
|
3794
|
+
this.multiSelect = false;
|
|
3781
3795
|
}
|
|
3782
3796
|
ngOnChanges(changes) {
|
|
3783
3797
|
super.ngOnChanges(changes);
|
|
@@ -3792,6 +3806,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3792
3806
|
if (!value) {
|
|
3793
3807
|
this.formModel.patchValue({
|
|
3794
3808
|
file: null,
|
|
3809
|
+
name: null,
|
|
3795
3810
|
base64FileString: null,
|
|
3796
3811
|
uploadResult: null
|
|
3797
3812
|
});
|
|
@@ -3799,26 +3814,20 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3799
3814
|
});
|
|
3800
3815
|
}
|
|
3801
3816
|
async fileChange(files) {
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
this.
|
|
3809
|
-
};
|
|
3810
|
-
if (this.isBase64FileOutput()) {
|
|
3811
|
-
reader.readAsDataURL(file);
|
|
3812
|
-
}
|
|
3813
|
-
else {
|
|
3814
|
-
await this.processFile(file);
|
|
3815
|
-
}
|
|
3816
|
-
// Clear the file inputs value, this will allow the user to pick the same filename and cause
|
|
3817
|
-
// the fileChange to trigger.
|
|
3818
|
-
if (this.fileInput) {
|
|
3819
|
-
this.fileInput.nativeElement.value = '';
|
|
3817
|
+
if (this.multiSelect) {
|
|
3818
|
+
this.handleMultipleFiles(files);
|
|
3819
|
+
}
|
|
3820
|
+
else {
|
|
3821
|
+
const file = files.item(0);
|
|
3822
|
+
if (file) {
|
|
3823
|
+
await this.readFile(file);
|
|
3820
3824
|
}
|
|
3821
3825
|
}
|
|
3826
|
+
// Clear the file inputs value, this will allow the user to pick the same filenames again
|
|
3827
|
+
// and cause fileChange to re-trigger.
|
|
3828
|
+
if (this.fileInput) {
|
|
3829
|
+
this.fileInput.nativeElement.value = '';
|
|
3830
|
+
}
|
|
3822
3831
|
}
|
|
3823
3832
|
/**
|
|
3824
3833
|
* Checks the file type and updates the file type accept property. This is what determines the file
|
|
@@ -3850,7 +3859,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3850
3859
|
this.patchFileResult(file, base64FileString, result);
|
|
3851
3860
|
}
|
|
3852
3861
|
catch (e) {
|
|
3853
|
-
// Bummer, we're not going to do anything about it though.
|
|
3862
|
+
// Bummer, we're not going to do anything about it though.
|
|
3854
3863
|
// We are not patching any of the result so any existing information remains
|
|
3855
3864
|
}
|
|
3856
3865
|
}
|
|
@@ -3885,12 +3894,40 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3885
3894
|
this.formModel.patchValue({ uploadResult: null });
|
|
3886
3895
|
}
|
|
3887
3896
|
}
|
|
3897
|
+
/** Maps the files to an array of File objects and sends them along
|
|
3898
|
+
* to the derived onMultipleFileSelected method in the hosting component
|
|
3899
|
+
*/
|
|
3900
|
+
async handleMultipleFiles(files) {
|
|
3901
|
+
const filesArray = Array.from(files);
|
|
3902
|
+
if (this.onMultipleFilesSelected) {
|
|
3903
|
+
try {
|
|
3904
|
+
let result = await this.onMultipleFilesSelected(filesArray);
|
|
3905
|
+
}
|
|
3906
|
+
catch (e) {
|
|
3907
|
+
console.log('error: ', e);
|
|
3908
|
+
}
|
|
3909
|
+
}
|
|
3910
|
+
}
|
|
3911
|
+
;
|
|
3912
|
+
async readFile(file) {
|
|
3913
|
+
const reader = new FileReader();
|
|
3914
|
+
reader.onloadend = async (e) => {
|
|
3915
|
+
let base64FileString = reader?.result?.toString().split(",")[1];
|
|
3916
|
+
await this.processFile(file, base64FileString);
|
|
3917
|
+
};
|
|
3918
|
+
if (this.isBase64FileOutput()) {
|
|
3919
|
+
reader.readAsDataURL(file);
|
|
3920
|
+
}
|
|
3921
|
+
else {
|
|
3922
|
+
await this.processFile(file);
|
|
3923
|
+
}
|
|
3924
|
+
}
|
|
3888
3925
|
}
|
|
3889
3926
|
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 });
|
|
3890
|
-
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" }, 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 (
|
|
3927
|
+
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", 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 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 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"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3891
3928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3892
3929
|
type: Component,
|
|
3893
|
-
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 (
|
|
3930
|
+
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 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"] }]
|
|
3894
3931
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3895
3932
|
type: Input
|
|
3896
3933
|
}], fileType: [{
|
|
@@ -3901,6 +3938,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3901
3938
|
type: Input
|
|
3902
3939
|
}], onFileSelected: [{
|
|
3903
3940
|
type: Input
|
|
3941
|
+
}], onMultipleFilesSelected: [{
|
|
3942
|
+
type: Input
|
|
3943
|
+
}], displayType: [{
|
|
3944
|
+
type: Input
|
|
3945
|
+
}], buttonLabel: [{
|
|
3946
|
+
type: Input
|
|
3947
|
+
}], buttonType: [{
|
|
3948
|
+
type: Input
|
|
3949
|
+
}], multiSelect: [{
|
|
3950
|
+
type: Input
|
|
3904
3951
|
}], fileInput: [{
|
|
3905
3952
|
type: ViewChild,
|
|
3906
3953
|
args: ["fileInput", { read: ElementRef, static: true }]
|