@ruc-lib/multi-file-upload 3.2.0 → 4.0.0

package/README.md

@@ -17,17 +17,51 @@ Then second option is delete in which if :
 # Install individual component
 
 If users only need the multi file upload component, they can install it separately
-`npm install @ruc-lib/multi-file-upload`
 
+**For Angular 15:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
+```
+
+**For Angular 16:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
+
+**For Angular 17:**
+```bash
+npm install @ruc-lib/multi-file-upload@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
+
+**For Angular 18:**
+```bash
+npm install @ruc-lib/multi-file-upload@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
+
+**For Angular 19:**
+```bash
+npm install @ruc-lib/multi-file-upload@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
+```
+
+**For Angular 20:**
+```bash
+npm install @ruc-lib/multi-file-upload@4.0.0
+```
+
+> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
 
 # Version Compatibility
 
 Please ensure you install the correct version of `@ruc-lib/multi-file-upload` based on your Angular version.
- 
+
 | Angular Version    | Compatible `@ruc-lib/multi-file-upload` Version     |
 |--------------------|-----------------------------------------------------|
 | 15.x.x             | `npm install @ruc-lib/multi-file-upload@^3.2.0`     |
 | 16.x.x             | `npm install @ruc-lib/multi-file-upload@^3.2.0`     |
+| 17.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
+| 18.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
+| 19.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
+| 20.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
 
 
 # Usage
@@ -93,34 +127,87 @@ npm install @uxpractice/ruc-lib
 ```
 
 ### Install Individual Component
-If you only need the Multi-File Upload component:
+
+If you only need the MultiFileUpload component:
+
+**For Angular 15:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
+```
+
+**For Angular 16:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
+```
+
+**For Angular 17:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
+```
+
+**For Angular 18:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
+```
+
+**For Angular 19:**
 ```bash
-npm install @ruc-lib/multi-file-upload
+npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
 ```
 
+**For Angular 20:**
+```bash
+npm install @ruc-lib/multi-file-upload@3.1.0
+```
+
+> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.
+
+### 📦 Version Compatibility
+
+| Angular Version | Compatible Version | Installation Command |
+|-----------------|-------------------|----------------------|
+| 15.x.x          | 3.1.0            | See installation instructions above |
+| 16.x.x          | 3.1.0            | See installation instructions above |
+| 17.x.x          | 3.1.0            | See installation instructions above |
+| 18.x.x          | 3.1.0            | See installation instructions above |
+| 19.x.x          | 3.1.0            | See installation instructions above |
+| 20.x.x          | 3.1.0            | See installation instructions above |
+
+
+### 📦 Version Compatibility
+
+| Angular Version | Compatible Version | Installation Command |
+|-----------------|-------------------|----------------------|
+| 15.x.x          | 3.1.0            | See installation instructions above |
+| 16.x.x          | 3.1.0            | See installation instructions above |
+| 17.x.x          | 3.1.0            | See installation instructions above |
+| 18.x.x          | 3.1.0            | See installation instructions above |
+| 19.x.x          | 3.1.0            | See installation instructions above |
+| 20.x.x          | 3.1.0            | See installation instructions above |
+
+
 ## Usage
 
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibMultiFileUploadModule`:
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibMultiFileUploadComponent`:
 
 ```typescript
-import { RuclibMultiFileUploadModule } from '@ruc-lib/multi-file-upload';
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    HttpClientModule,
-    RuclibMultiFileUploadModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibMultiFileUploadComponent } from '@uxpractice/ruc-lib/multi-file-upload';
+
+// For Individual Package
+import { RuclibMultiFileUploadComponent } from '@ruc-lib/multi-file-upload';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibMultiFileUploadComponent],
+  templateUrl: './app.component.html',
 })
-export class AppModule {}
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component
@@ -211,4 +298,4 @@ Contributions are welcome! Feel free to open issues or pull requests for any enh
 
 ## Acknowledgements
 
-Thank you for choosing the Multi-File Upload Component. If you have any feedback or suggestions, please let us know!
+Thank you for choosing the Multi-File Upload Component. If you have any feedback or suggestions, please let us know!

package/fesm2022/ruc-lib-multi-file-upload.mjs

@@ -0,0 +1,152 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, inject, Output, Input, Component } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/common/http';
+import { HttpEventType, HttpResponse } from '@angular/common/http';
+import * as i2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i3 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i6 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+class RuclibMultiFileUploadService {
+    constructor(http) {
+        this.http = http;
+    }
+    uploadFile(formData, api) {
+        return this.http.post(api, formData, {
+            reportProgress: true,
+            observe: 'events',
+        });
+    }
+    deleteFile(id, deleteApi) {
+        return this.http.delete(deleteApi + '/' + id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiFileUploadService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiFileUploadService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiFileUploadService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class RuclibMultiFileUploadComponent {
+    constructor() {
+        this.rucEvent = new EventEmitter();
+        this.service = inject(RuclibMultiFileUploadService);
+        this.selectedFileData = [];
+        this.files = [];
+    }
+    // constructor(public service: RuclibMultiFileUploadService) {}
+    ngOnInit() {
+        this.progress = 0; //initial value for the progress bar
+    }
+    /**
+     * To get the url
+     * of the thumbnail
+     * for png file type
+     */
+    getUrlFromFile(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onerror = (error) => {
+                reject(error);
+            };
+            reader.onloadend = () => {
+                try {
+                    file['url'] = reader.result;
+                    resolve(file);
+                }
+                catch (err) {
+                    reject(err);
+                }
+            };
+        });
+    }
+    /**
+     * To choose the file
+     * and get the thumbnail
+     */
+    async chooseFile(event) {
+        const filePromises = Array.from(event.target.files).map((file) => {
+            const selectedFile = file;
+            selectedFile['disableUploadFile'] = false;
+            if (selectedFile.type !== 'image/png') {
+                return selectedFile;
+            }
+            return this.getUrlFromFile(selectedFile);
+        });
+        const fileInfos = await Promise.all(filePromises);
+        if (fileInfos[0]) {
+            this.selectedFileData.push(fileInfos[0]);
+        }
+        this.rucEvent.emit({
+            eventName: 'onFileSelection',
+            eventOutput: fileInfos,
+        });
+    }
+    /**
+     * To delete the selected file
+     */
+    removeSelectedFile(index, selected) {
+        if (this.rucInputData.deleteUrl) {
+            this.service.deleteFile(index, this.rucInputData.deleteUrl).subscribe();
+            this.selectedFileData.splice(index, 1);
+        }
+        else {
+            this.selectedFileData.splice(index, 1);
+        }
+        this.rucEvent.emit({ eventName: 'onDeleting', eventOutput: selected });
+    }
+    /**
+     * To upload the file
+     * and see progress bar
+     */
+    uploadSelectedFile(fileOne) {
+        this.rucEvent.emit({ eventName: 'onUploading', eventOutput: fileOne });
+        fileOne['disableUploadFile'] = true;
+        const formData = new FormData();
+        this.service
+            .uploadFile(formData, this.rucInputData.uploadUrl)
+            .subscribe((event) => {
+            if (event.type === HttpEventType.UploadProgress) {
+                this.progress = Math.round(((event.loaded || 1) / (event.total || 1)) * 100);
+            }
+            else if (event instanceof HttpResponse) {
+                this.progress = 0;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibMultiFileUploadComponent, isStandalone: true, selector: "uxp-ruclib-multi-file-upload", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, outputs: { rucEvent: "rucEvent" }, providers: [RuclibMultiFileUploadService], ngImport: i0, template: "<p>ruclib-multi-file-upload works!</p>\r\n<div class=\"{{ customTheme }}\">\r\n  <div class=\"colorcustomoverride\">\r\n    @if (rucInputData) {\r\n      <mat-card class=\"container\">\r\n        <!--Label For Selecting File Starts-->\r\n        <mat-card-title>\r\n          <div>\r\n            <mat-card class=\"matCard\">\r\n              <input\r\n                #attachments\r\n                type=\"file\"\r\n                (change)=\"chooseFile($event)\"\r\n                #fileInput\r\n                [multiple]=\"rucInputData.multifileSelection\"\r\n                name=\"files\"\r\n                id=\"img\"\r\n                class=\"isDisplay\"\r\n                />\r\n                <label for=\"img\" class=\"containerlabel\"\r\n                  >{{ rucInputData.label }}\r\n                  <mat-icon class=\"attachfile\">attach_file</mat-icon></label\r\n                  >\r\n                </mat-card>\r\n              </div>\r\n            </mat-card-title>\r\n            <!--Label For Selecting File Starts-->\r\n            <mat-card-content class=\"marCardTable\">\r\n              @for (selected of selectedFileData; track selected; let index = $index) {\r\n                <div\r\n                  class=\"row\"\r\n                  class=\"selectedFileList\"\r\n                  >\r\n                  <!--Thumbnail previewing of Image Starts-->\r\n                  @if (selected.type === 'image/png') {\r\n                    <div\r\n                      [ngClass]=\"rucInputData.displayThumbnail ? '' : 'isDisplay'\"\r\n                      >\r\n                      <img [src]=\"selected.url\" width=\"50px\" />\r\n                    </div>\r\n                  }\r\n                  <!--Thumbnail previewing of Image Ends-->\r\n                  <!--Name of Selected File Starts-->\r\n                  <mat-label class=\"selectedFileName\">{{ selected.name }}</mat-label>\r\n                  <!--Name of Selected File Ends-->\r\n                  <!--Button Starts-->\r\n                  <div class=\"floatRight\">\r\n                    <mat-icon\r\n                      (click)=\"removeSelectedFile(index, selected)\"\r\n                      class=\"deletebutton\"\r\n                      color=\"warn\"\r\n                      >delete_outline</mat-icon\r\n                      >\r\n                    </div>\r\n                    <div class=\"floatRightSubmit\">\r\n                      <button\r\n                        mat-raised-button\r\n                        color=\"primary\"\r\n                        class=\"uploadButton\"\r\n                        type=\"submit\"\r\n                        (click)=\"uploadSelectedFile(selected)\"\r\n                        [disabled]=\"selected.disableUploadFile\"\r\n                        >\r\n                        Submit\r\n                      </button>\r\n                    </div>\r\n                    <!--Button Ends-->\r\n                    <!--Progress Bar with Label Starts-->\r\n                    @if (selected.disableUploadFile) {\r\n                      <div class=\"progressbar\">\r\n                        <mat-label class=\"fileSize\"\r\n                          >{{ (selected.size / 1000).toFixed(2) }} KB</mat-label\r\n                          >\r\n                          <mat-label class=\"filePercentage\"> {{ progress }}% </mat-label>\r\n                          <mat-progress-bar\r\n                            mode=\"determinate\"\r\n                            [value]=\"progress\"\r\n                            class=\"displayInline\"\r\n                          ></mat-progress-bar>\r\n                        </div>\r\n                      }\r\n                      <!--Progress Bar with Label Ends-->\r\n                    </div>\r\n                  }\r\n                </mat-card-content>\r\n              </mat-card>\r\n            }\r\n          </div>\r\n        </div>\r\n", styles: [".isDisplay{display:none}.colorcustomoverride mat-mdc-card{background-color:#fff!important;color:#000!important}.colorcustomoverride mat-mdc-card-content{padding-bottom:33px}.container{width:90%;padding:33px}.floatRight{float:right}.displayInline{display:inline-block}.uploadButton{margin-right:26px;display:inline-block}.matCard{border:2px solid #3f51b5}.marCardTable{max-height:300px;overflow:auto}.attachfile{float:right;cursor:pointer}.selectedFileList{padding-top:56px}.progressbar{width:76%}.fileSize{float:left;padding:10px}.filePercentage{float:right;padding:10px}.deletebutton{margin-top:4px;display:inline-block;cursor:pointer}.floatRightSubmit{float:right}.selectedFileName{display:inline-block;line-break:auto}@media (max-width: 800px){.fileSize{margin-top:31px;float:left}.filePercentage{padding:0;margin-top:41px}.floatRightSubmit{margin-right:-6px;float:right}.deletebutton{margin-right:-22px;cursor:pointer}.progressbar{width:100%}.attachfile{float:right;cursor:pointer;margin-top:-4px}.containerlabel{font-size:18px}.container{height:auto;overflow:scroll}.selectedFileName{margin-bottom:14px;line-break:auto;width:85px;margin-left:-17px}}@media only screen and (max-width: 740px) and (min-width: 360px){.floatRightSubmit{margin-right:-12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibMultiFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-multi-file-upload', imports: [
+                        CommonModule,
+                        MatProgressBarModule,
+                        MatCardModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                    ], providers: [RuclibMultiFileUploadService], template: "<p>ruclib-multi-file-upload works!</p>\r\n<div class=\"{{ customTheme }}\">\r\n  <div class=\"colorcustomoverride\">\r\n    @if (rucInputData) {\r\n      <mat-card class=\"container\">\r\n        <!--Label For Selecting File Starts-->\r\n        <mat-card-title>\r\n          <div>\r\n            <mat-card class=\"matCard\">\r\n              <input\r\n                #attachments\r\n                type=\"file\"\r\n                (change)=\"chooseFile($event)\"\r\n                #fileInput\r\n                [multiple]=\"rucInputData.multifileSelection\"\r\n                name=\"files\"\r\n                id=\"img\"\r\n                class=\"isDisplay\"\r\n                />\r\n                <label for=\"img\" class=\"containerlabel\"\r\n                  >{{ rucInputData.label }}\r\n                  <mat-icon class=\"attachfile\">attach_file</mat-icon></label\r\n                  >\r\n                </mat-card>\r\n              </div>\r\n            </mat-card-title>\r\n            <!--Label For Selecting File Starts-->\r\n            <mat-card-content class=\"marCardTable\">\r\n              @for (selected of selectedFileData; track selected; let index = $index) {\r\n                <div\r\n                  class=\"row\"\r\n                  class=\"selectedFileList\"\r\n                  >\r\n                  <!--Thumbnail previewing of Image Starts-->\r\n                  @if (selected.type === 'image/png') {\r\n                    <div\r\n                      [ngClass]=\"rucInputData.displayThumbnail ? '' : 'isDisplay'\"\r\n                      >\r\n                      <img [src]=\"selected.url\" width=\"50px\" />\r\n                    </div>\r\n                  }\r\n                  <!--Thumbnail previewing of Image Ends-->\r\n                  <!--Name of Selected File Starts-->\r\n                  <mat-label class=\"selectedFileName\">{{ selected.name }}</mat-label>\r\n                  <!--Name of Selected File Ends-->\r\n                  <!--Button Starts-->\r\n                  <div class=\"floatRight\">\r\n                    <mat-icon\r\n                      (click)=\"removeSelectedFile(index, selected)\"\r\n                      class=\"deletebutton\"\r\n                      color=\"warn\"\r\n                      >delete_outline</mat-icon\r\n                      >\r\n                    </div>\r\n                    <div class=\"floatRightSubmit\">\r\n                      <button\r\n                        mat-raised-button\r\n                        color=\"primary\"\r\n                        class=\"uploadButton\"\r\n                        type=\"submit\"\r\n                        (click)=\"uploadSelectedFile(selected)\"\r\n                        [disabled]=\"selected.disableUploadFile\"\r\n                        >\r\n                        Submit\r\n                      </button>\r\n                    </div>\r\n                    <!--Button Ends-->\r\n                    <!--Progress Bar with Label Starts-->\r\n                    @if (selected.disableUploadFile) {\r\n                      <div class=\"progressbar\">\r\n                        <mat-label class=\"fileSize\"\r\n                          >{{ (selected.size / 1000).toFixed(2) }} KB</mat-label\r\n                          >\r\n                          <mat-label class=\"filePercentage\"> {{ progress }}% </mat-label>\r\n                          <mat-progress-bar\r\n                            mode=\"determinate\"\r\n                            [value]=\"progress\"\r\n                            class=\"displayInline\"\r\n                          ></mat-progress-bar>\r\n                        </div>\r\n                      }\r\n                      <!--Progress Bar with Label Ends-->\r\n                    </div>\r\n                  }\r\n                </mat-card-content>\r\n              </mat-card>\r\n            }\r\n          </div>\r\n        </div>\r\n", styles: [".isDisplay{display:none}.colorcustomoverride mat-mdc-card{background-color:#fff!important;color:#000!important}.colorcustomoverride mat-mdc-card-content{padding-bottom:33px}.container{width:90%;padding:33px}.floatRight{float:right}.displayInline{display:inline-block}.uploadButton{margin-right:26px;display:inline-block}.matCard{border:2px solid #3f51b5}.marCardTable{max-height:300px;overflow:auto}.attachfile{float:right;cursor:pointer}.selectedFileList{padding-top:56px}.progressbar{width:76%}.fileSize{float:left;padding:10px}.filePercentage{float:right;padding:10px}.deletebutton{margin-top:4px;display:inline-block;cursor:pointer}.floatRightSubmit{float:right}.selectedFileName{display:inline-block;line-break:auto}@media (max-width: 800px){.fileSize{margin-top:31px;float:left}.filePercentage{padding:0;margin-top:41px}.floatRightSubmit{margin-right:-6px;float:right}.deletebutton{margin-right:-22px;cursor:pointer}.progressbar{width:100%}.attachfile{float:right;cursor:pointer;margin-top:-4px}.containerlabel{font-size:18px}.container{height:auto;overflow:scroll}.selectedFileName{margin-bottom:14px;line-break:auto;width:85px;margin-left:-17px}}@media only screen and (max-width: 740px) and (min-width: 360px){.floatRightSubmit{margin-right:-12px}}\n"] }]
+        }], propDecorators: { rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }], rucEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RuclibMultiFileUploadComponent, RuclibMultiFileUploadService };
+//# sourceMappingURL=ruc-lib-multi-file-upload.mjs.map

package/fesm2022/ruc-lib-multi-file-upload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ruc-lib-multi-file-upload.mjs","sources":["../../src/lib/services/ruclib-multi-file-upload.service.ts","../../src/lib/ruclib-multi-file-upload/ruclib-multi-file-upload.component.ts","../../src/lib/ruclib-multi-file-upload/ruclib-multi-file-upload.component.html","../../src/ruc-lib-multi-file-upload.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable()\r\nexport class RuclibMultiFileUploadService {\r\n  progress: any;\r\n\r\n  constructor(private http: HttpClient) {}\r\n\r\n  uploadFile(formData: any, api: string) {\r\n    return this.http.post(api, formData, {\r\n      reportProgress: true,\r\n      observe: 'events',\r\n    });\r\n  }\r\n  deleteFile(id: number, deleteApi: string) {\r\n    return this.http.delete(deleteApi + '/' + id);\r\n  }\r\n}\r\n","import { Component, EventEmitter, inject, Input, Output } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MultifiledefaultConfig } from '../interfaces/multiFileUploadDefault';\r\nimport { RuclibMultiFileUploadService } from '../services/ruclib-multi-file-upload.service';\r\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\r\nimport { MatCardModule } from '@angular/material/card';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { HttpEventType, HttpResponse } from '@angular/common/http';\r\n\r\n@Component({\r\n    selector: 'uxp-ruclib-multi-file-upload',\r\n    imports: [\r\n        CommonModule,\r\n        MatProgressBarModule,\r\n        MatCardModule,\r\n        MatIconModule,\r\n        MatButtonModule,\r\n        MatFormFieldModule,\r\n    ],\r\n    templateUrl: './ruclib-multi-file-upload.component.html',\r\n    styleUrl: './ruclib-multi-file-upload.component.scss',\r\n    providers: [RuclibMultiFileUploadService]\r\n})\r\nexport class RuclibMultiFileUploadComponent {\r\n  @Input() rucInputData!: MultifiledefaultConfig; // Input Json\r\n  @Input() customTheme!: string;\r\n  @Output() rucEvent = new EventEmitter<any>();\r\n  public service = inject(RuclibMultiFileUploadService);\r\n  index: any;\r\n  result!: string; //used for url purpose\r\n  selectedFileData: any[] = [];\r\n  progress!: number; //initial value for the progress bar\r\n  files: Array<{ name: string; url: string }> = [];\r\n  uploadUrl!: string;\r\n\r\n  // constructor(public service: RuclibMultiFileUploadService) {}\r\n\r\n  ngOnInit() {\r\n    this.progress = 0; //initial value for the progress bar\r\n  }\r\n\r\n  /**\r\n   * To get the url\r\n   * of the thumbnail\r\n   * for png file type\r\n   */\r\n  getUrlFromFile(file: any): Promise<any> {\r\n    return new Promise<any>((resolve, reject) => {\r\n      const reader = new FileReader();\r\n      reader.readAsDataURL(file);\r\n\r\n      reader.onerror = (error) => {\r\n        reject(error);\r\n      };\r\n\r\n      reader.onloadend = () => {\r\n        try {\r\n          file['url'] = reader.result;\r\n          resolve(file);\r\n        } catch (err) {\r\n          reject(err);\r\n        }\r\n      };\r\n    });\r\n  }\r\n\r\n  /**\r\n   * To choose the file\r\n   * and get the thumbnail\r\n   */\r\n  async chooseFile(event: any) {\r\n    const filePromises = Array.from(event.target.files).map((file: any) => {\r\n      const selectedFile = file;\r\n      selectedFile['disableUploadFile'] = false;\r\n\r\n      if (selectedFile.type !== 'image/png') {\r\n        return selectedFile;\r\n      }\r\n\r\n      return this.getUrlFromFile(selectedFile);\r\n    });\r\n    const fileInfos = await Promise.all(filePromises);\r\n    if (fileInfos[0]) {\r\n      this.selectedFileData.push(fileInfos[0]);\r\n    }\r\n    this.rucEvent.emit({\r\n      eventName: 'onFileSelection',\r\n      eventOutput: fileInfos,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * To delete the selected file\r\n   */\r\n  removeSelectedFile(index: number, selected: any) {\r\n    if (this.rucInputData.deleteUrl) {\r\n      this.service.deleteFile(index, this.rucInputData.deleteUrl).subscribe();\r\n      this.selectedFileData.splice(index, 1);\r\n    } else {\r\n      this.selectedFileData.splice(index, 1);\r\n    }\r\n    this.rucEvent.emit({ eventName: 'onDeleting', eventOutput: selected });\r\n  }\r\n\r\n  /**\r\n   * To upload the file\r\n   * and see progress bar\r\n   */\r\n  uploadSelectedFile(fileOne: any) {\r\n    this.rucEvent.emit({ eventName: 'onUploading', eventOutput: fileOne });\r\n    fileOne['disableUploadFile'] = true;\r\n    const formData = new FormData();\r\n    this.service\r\n      .uploadFile(formData, this.rucInputData.uploadUrl)\r\n      .subscribe((event) => {\r\n        if (event.type === HttpEventType.UploadProgress) {\r\n          this.progress = Math.round(\r\n            ((event.loaded || 1) / (event.total || 1)) * 100\r\n          );\r\n        } else if (event instanceof HttpResponse) {\r\n          this.progress = 0;\r\n        }\r\n      });\r\n  }\r\n}\r\n","<p>ruclib-multi-file-upload works!</p>\r\n<div class=\"{{ customTheme }}\">\r\n  <div class=\"colorcustomoverride\">\r\n    @if (rucInputData) {\r\n      <mat-card class=\"container\">\r\n        <!--Label For Selecting File Starts-->\r\n        <mat-card-title>\r\n          <div>\r\n            <mat-card class=\"matCard\">\r\n              <input\r\n                #attachments\r\n                type=\"file\"\r\n                (change)=\"chooseFile($event)\"\r\n                #fileInput\r\n                [multiple]=\"rucInputData.multifileSelection\"\r\n                name=\"files\"\r\n                id=\"img\"\r\n                class=\"isDisplay\"\r\n                />\r\n                <label for=\"img\" class=\"containerlabel\"\r\n                  >{{ rucInputData.label }}\r\n                  <mat-icon class=\"attachfile\">attach_file</mat-icon></label\r\n                  >\r\n                </mat-card>\r\n              </div>\r\n            </mat-card-title>\r\n            <!--Label For Selecting File Starts-->\r\n            <mat-card-content class=\"marCardTable\">\r\n              @for (selected of selectedFileData; track selected; let index = $index) {\r\n                <div\r\n                  class=\"row\"\r\n                  class=\"selectedFileList\"\r\n                  >\r\n                  <!--Thumbnail previewing of Image Starts-->\r\n                  @if (selected.type === 'image/png') {\r\n                    <div\r\n                      [ngClass]=\"rucInputData.displayThumbnail ? '' : 'isDisplay'\"\r\n                      >\r\n                      <img [src]=\"selected.url\" width=\"50px\" />\r\n                    </div>\r\n                  }\r\n                  <!--Thumbnail previewing of Image Ends-->\r\n                  <!--Name of Selected File Starts-->\r\n                  <mat-label class=\"selectedFileName\">{{ selected.name }}</mat-label>\r\n                  <!--Name of Selected File Ends-->\r\n                  <!--Button Starts-->\r\n                  <div class=\"floatRight\">\r\n                    <mat-icon\r\n                      (click)=\"removeSelectedFile(index, selected)\"\r\n                      class=\"deletebutton\"\r\n                      color=\"warn\"\r\n                      >delete_outline</mat-icon\r\n                      >\r\n                    </div>\r\n                    <div class=\"floatRightSubmit\">\r\n                      <button\r\n                        mat-raised-button\r\n                        color=\"primary\"\r\n                        class=\"uploadButton\"\r\n                        type=\"submit\"\r\n                        (click)=\"uploadSelectedFile(selected)\"\r\n                        [disabled]=\"selected.disableUploadFile\"\r\n                        >\r\n                        Submit\r\n                      </button>\r\n                    </div>\r\n                    <!--Button Ends-->\r\n                    <!--Progress Bar with Label Starts-->\r\n                    @if (selected.disableUploadFile) {\r\n                      <div class=\"progressbar\">\r\n                        <mat-label class=\"fileSize\"\r\n                          >{{ (selected.size / 1000).toFixed(2) }} KB</mat-label\r\n                          >\r\n                          <mat-label class=\"filePercentage\"> {{ progress }}% </mat-label>\r\n                          <mat-progress-bar\r\n                            mode=\"determinate\"\r\n                            [value]=\"progress\"\r\n                            class=\"displayInline\"\r\n                          ></mat-progress-bar>\r\n                        </div>\r\n                      }\r\n                      <!--Progress Bar with Label Ends-->\r\n                    </div>\r\n                  }\r\n                </mat-card-content>\r\n              </mat-card>\r\n            }\r\n          </div>\r\n        </div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/index.d.ts

@@ -1,3 +1,84 @@
-export * from './lib/ruclib-multi-file-upload.module';
-export * from './lib/ruclib-multi-file-upload/ruclib-multi-file-upload.component';
-export * from './lib/services/ruclib-multi-file-upload.service';
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import * as rxjs from 'rxjs';
+import * as _angular_common_http from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+
+interface MultifiledefaultConfig {
+    /**
+     * Mandatory
+     * Values:true,false
+     */
+    multifileSelection: boolean;
+    /**
+     * Mandatory,
+     * Values:true,false
+     */
+    displayThumbnail: boolean;
+    /**
+     * Mandatory,
+     * Values:string
+     */
+    label: string;
+    /**
+     * Mandatory,
+     * Values:string
+     */
+    uploadUrl: string;
+    /**
+     * Optional
+     * Values:string
+     */
+    deleteUrl?: string;
+}
+
+declare class RuclibMultiFileUploadService {
+    private http;
+    progress: any;
+    constructor(http: HttpClient);
+    uploadFile(formData: any, api: string): rxjs.Observable<_angular_common_http.HttpEvent<Object>>;
+    deleteFile(id: number, deleteApi: string): rxjs.Observable<Object>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibMultiFileUploadService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RuclibMultiFileUploadService>;
+}
+
+declare class RuclibMultiFileUploadComponent {
+    rucInputData: MultifiledefaultConfig;
+    customTheme: string;
+    rucEvent: EventEmitter<any>;
+    service: RuclibMultiFileUploadService;
+    index: any;
+    result: string;
+    selectedFileData: any[];
+    progress: number;
+    files: Array<{
+        name: string;
+        url: string;
+    }>;
+    uploadUrl: string;
+    ngOnInit(): void;
+    /**
+     * To get the url
+     * of the thumbnail
+     * for png file type
+     */
+    getUrlFromFile(file: any): Promise<any>;
+    /**
+     * To choose the file
+     * and get the thumbnail
+     */
+    chooseFile(event: any): Promise<void>;
+    /**
+     * To delete the selected file
+     */
+    removeSelectedFile(index: number, selected: any): void;
+    /**
+     * To upload the file
+     * and see progress bar
+     */
+    uploadSelectedFile(fileOne: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RuclibMultiFileUploadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RuclibMultiFileUploadComponent, "uxp-ruclib-multi-file-upload", never, { "rucInputData": { "alias": "rucInputData"; "required": false; }; "customTheme": { "alias": "customTheme"; "required": false; }; }, { "rucEvent": "rucEvent"; }, never, never, true, never>;
+}
+
+export { RuclibMultiFileUploadComponent, RuclibMultiFileUploadService };

package/package.json

@@ -1,28 +1,21 @@
 {
   "name": "@ruc-lib/multi-file-upload",
-  "version": "3.2.0",
-  "license": "MIT",
+  "version": "4.0.0",
   "peerDependencies": {
-    "@angular/core": ">=15.0.0 <18.0.0",
-    "@angular/common": ">=15.0.0 <18.0.0",
-    "@angular/material": "^15.2.9 || ^14.0.0 || ^13.0.0",
-    "@angular/forms": ">=15.0.0 <18.0.0",
-    "@angular/platform-browser": ">=15.0.0 <18.0.0",
-    "rxjs": ">=6.5.0 <8.0.0",
-    "zone.js": ">=0.11.4 <0.14.0"
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "rxjs": ">=7.5.0 <8.0.0",
+    "zone.js": "^0.13.0 || ^0.14.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "sideEffects": false,
-  "module": "fesm2015/ruc-lib-multi-file-upload.mjs",
-  "es2020": "fesm2020/ruc-lib-multi-file-upload.mjs",
-  "esm2020": "esm2020/ruc-lib-multi-file-upload.mjs",
-  "fesm2020": "fesm2020/ruc-lib-multi-file-upload.mjs",
-  "fesm2015": "fesm2015/ruc-lib-multi-file-upload.mjs",
+  "module": "fesm2022/ruc-lib-multi-file-upload.mjs",
   "typings": "index.d.ts",
   "exports": {
     "./package.json": {
@@ -30,11 +23,7 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ruc-lib-multi-file-upload.mjs",
-      "es2020": "./fesm2020/ruc-lib-multi-file-upload.mjs",
-      "es2015": "./fesm2015/ruc-lib-multi-file-upload.mjs",
-      "node": "./fesm2015/ruc-lib-multi-file-upload.mjs",
-      "default": "./fesm2020/ruc-lib-multi-file-upload.mjs"
+      "default": "./fesm2022/ruc-lib-multi-file-upload.mjs"
     }
   }
 }

package/esm2020/index.mjs

@@ -1,4 +0,0 @@
-export * from './lib/ruclib-multi-file-upload.module';
-export * from './lib/ruclib-multi-file-upload/ruclib-multi-file-upload.component';
-export * from './lib/services/ruclib-multi-file-upload.service';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyx1Q0FBdUMsQ0FBQztBQUN0RCxjQUFjLG1FQUFtRSxDQUFDO0FBQ2xGLGNBQWMsaURBQWlELENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9ydWNsaWItbXVsdGktZmlsZS11cGxvYWQubW9kdWxlJztcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvcnVjbGliLW11bHRpLWZpbGUtdXBsb2FkL3J1Y2xpYi1tdWx0aS1maWxlLXVwbG9hZC5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZXJ2aWNlcy9ydWNsaWItbXVsdGktZmlsZS11cGxvYWQuc2VydmljZSc7Il19

package/esm2020/lib/interfaces/multiFileUploadDefault.mjs

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXVsdGlGaWxlVXBsb2FkRGVmYXVsdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvaW50ZXJmYWNlcy9tdWx0aUZpbGVVcGxvYWREZWZhdWx0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgaW50ZXJmYWNlIE11bHRpZmlsZWRlZmF1bHRDb25maWcge1xyXG4gICAgLyoqXHJcbiAgICAgKiBNYW5kYXRvcnlcclxuICAgICAqIFZhbHVlczp0cnVlLGZhbHNlXHJcbiAgICAgKi9cclxuICAgIG11bHRpZmlsZVNlbGVjdGlvbjogYm9vbGVhbjtcclxuXHJcbiAgICAvKipcclxuICAgICAqIE1hbmRhdG9yeSwgXHJcbiAgICAgKiBWYWx1ZXM6dHJ1ZSxmYWxzZVxyXG4gICAgICovXHJcbiAgICBkaXNwbGF5VGh1bWJuYWlsOiBib29sZWFuO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogTWFuZGF0b3J5LCBcclxuICAgICAqIFZhbHVlczpzdHJpbmdcclxuICAgICAqL1xyXG4gICAgbGFiZWw6IHN0cmluZztcclxuXHJcbiAgICAvKipcclxuICAgICAqIE1hbmRhdG9yeSwgXHJcbiAgICAgKiBWYWx1ZXM6c3RyaW5nXHJcbiAgICAgKi9cclxuICAgIHVwbG9hZFVybDogc3RyaW5nO1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogT3B0aW9uYWwgXHJcbiAgICAgKiBWYWx1ZXM6c3RyaW5nXHJcbiAgICAgKi9cclxuICAgIGRlbGV0ZVVybD86IHN0cmluZztcclxuXHJcbn1cclxuIl19