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

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

@@ -1,152 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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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"}