@winexist/ngp 0.0.2 → 0.1.1

package/fesm2022/winexist-ngp.mjs

@@ -1,5 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, Component } from '@angular/core';
+import { input, Component, output, signal, effect, ViewChild } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
 
 class EmptyComponent {
     title = input('Section is empty.', ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -13,11 +17,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{ selector: 'ngp-empty', imports: [], template: "<div class=\"w-full flex justify-center items-center p-5 h-full\">\n  <div class=\"flex items-center gap-3\">\n    @if (imgSrc()) {\n    <img alt=\"Empty\" [src]=\"imgSrc()\" class=\"w-[80px]\" />\n    } @else {\n    <div class=\"!rounded-md p-5 !bg-slate-100 mb-6\">\n      <span class=\"material-icons !text-gray-400 !text-7xl\"> search_off </span>\n    </div>\n    }\n\n    <div class=\"flex flex-col\">\n      <span class=\"!text-gray-900 !text-2xl !font-bold\">{{ title() }}</span>\n      @if (message()) {\n      <span class=\"!text-gray-400 !text-base\">{{ message() }}</span>\n      }\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], imgSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imgSrc", required: false }] }] } });
 
+class FileUploadComponent {
+    fileUploader;
+    // Signal-based inputs with defaults
+    files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    multiple = input(true, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    accept = input('.pdf,.png,.jpg,.jpeg,.doc,.docx,.csv,.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    maxFileSize = input(2097152, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : [])); // 2MB in bytes
+    placeholder = input('Drag and drop new files here to upload.', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    showUploadButton = input(false, ...(ngDevMode ? [{ debugName: "showUploadButton" }] : []));
+    cancelLabel = input('Clear', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    // Signal-based outputs
+    filesSelected = output();
+    filesCleared = output();
+    // Internal state
+    uploadedFiles = signal([], ...(ngDevMode ? [{ debugName: "uploadedFiles" }] : []));
+    constructor() {
+        effect(() => {
+            const _files = this.files();
+            if (_files.length) {
+                this.uploadedFiles.set(_files.map((file) => this.addFileType(file)));
+            }
+        });
+    }
+    onFileSelect(event) {
+        const validFiles = event.currentFiles.filter((file) => file.size <= this.maxFileSize() && this.isValidFileType(file));
+        if (validFiles.length) {
+            // Add type to files before adding to uploadedFiles
+            const typedFiles = validFiles.map((file) => this.addFileType(file));
+            if (this.multiple()) {
+                this.uploadedFiles.update((files) => Array.from(new Set([...files, ...typedFiles])));
+            }
+            else {
+                this.uploadedFiles.set(typedFiles);
+            }
+            this.filesSelected.emit(typedFiles);
+        }
+    }
+    onClear() {
+        this.uploadedFiles.set([]);
+        this.filesCleared.emit();
+    }
+    removeFile(index) {
+        this.uploadedFiles.update((files) => files.filter((_, i) => i !== index));
+        this.filesSelected.emit(this.uploadedFiles());
+    }
+    isValidFileType(file) {
+        const acceptedTypes = this.accept().split(',');
+        return acceptedTypes.some((type) => file.name.toLowerCase().endsWith(type.trim().toLowerCase()));
+    }
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    clear() {
+        this.uploadedFiles.set([]);
+        if (this.fileUploader?.nativeElement?.clear) {
+            this.fileUploader.nativeElement.clear();
+        }
+    }
+    // Function to determine file type based on extension
+    getFileTypeByExtension(file) {
+        const fileName = file.name.toLowerCase();
+        const imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.svg', '.webp'];
+        const pdfExtension = '.pdf';
+        if (imageExtensions.some((ext) => fileName.endsWith(ext))) {
+            return 'image';
+        }
+        else if (fileName.endsWith(pdfExtension)) {
+            return 'pdf';
+        }
+        else {
+            return 'other';
+        }
+    }
+    // Function to add type property to file
+    addFileType(file) {
+        const typedFile = file;
+        typedFile.fileType = this.getFileTypeByExtension(file);
+        return typedFile;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileUploadComponent, isStandalone: true, selector: "ngp-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showUploadButton: { classPropertyName: "showUploadButton", publicName: "showUploadButton", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", filesCleared: "filesCleared" }, viewQueries: [{ propertyName: "fileUploader", first: true, predicate: ["fileUploader"], descendants: true }], ngImport: i0, template: "<p-fileupload #fileUploader [multiple]=\"multiple()\" [showUploadButton]=\"showUploadButton()\"\n  [cancelLabel]=\"cancelLabel()\" [accept]=\"accept()\" auto=\"false\" [maxFileSize]=\"maxFileSize()\" mode=\"advanced\"\n  [customUpload]=\"true\" styleClass=\"!bg-gray-50\" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onClear()\">\n  <ng-template #content>\n    @if (uploadedFiles().length) {\n    <ul class=\"space-y-2\">\n      @for (file of uploadedFiles(); track $index) {\n      <li class=\"flex justify-between gap-4 p-2 bg-gray-100 rounded\">\n        <div class=\"flex gap-2\">\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: file.fileType }\"></ng-container>\n          <span class=\"text-sm\"> {{ file.name }} - {{ formatFileSize(file.size) }} </span>\n        </div>\n        <button type=\"button\" (click)=\"removeFile($index)\" class=\"text-red-500 hover:text-red-700 text-sm\">\n          <span class=\"material-icons !text-base\"> cancel </span>\n        </button>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex flex-col items-center gap-3\">\n      <img src=\"assets/images/file-upload.svg\" alt=\"File Upload\" class=\"w-28 mx-auto\" />\n      <span class=\"font-semibold text-center text-gray-400 text-sm\">\n        Drag & drop or<br />\n        click the \"Choose\" button to add new files\n      </span>\n    </div>\n    }\n  </ng-template>\n  <ng-template #file></ng-template>\n</p-fileupload>\n\n<ng-template #iconTemplate let-type>\n  @if (type === 'image') {\n  <span class=\"material-icons\"> image </span>\n  } @else if (type === 'pdf') {\n  <span class=\"material-icons\"> picture_as_pdf </span>\n  } @else {\n  <span class=\"material-icons\"> insert_drive_file </span>\n  }\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i1.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngp-file-upload', imports: [FileUploadModule, CommonModule], template: "<p-fileupload #fileUploader [multiple]=\"multiple()\" [showUploadButton]=\"showUploadButton()\"\n  [cancelLabel]=\"cancelLabel()\" [accept]=\"accept()\" auto=\"false\" [maxFileSize]=\"maxFileSize()\" mode=\"advanced\"\n  [customUpload]=\"true\" styleClass=\"!bg-gray-50\" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onClear()\">\n  <ng-template #content>\n    @if (uploadedFiles().length) {\n    <ul class=\"space-y-2\">\n      @for (file of uploadedFiles(); track $index) {\n      <li class=\"flex justify-between gap-4 p-2 bg-gray-100 rounded\">\n        <div class=\"flex gap-2\">\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: file.fileType }\"></ng-container>\n          <span class=\"text-sm\"> {{ file.name }} - {{ formatFileSize(file.size) }} </span>\n        </div>\n        <button type=\"button\" (click)=\"removeFile($index)\" class=\"text-red-500 hover:text-red-700 text-sm\">\n          <span class=\"material-icons !text-base\"> cancel </span>\n        </button>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex flex-col items-center gap-3\">\n      <img src=\"assets/images/file-upload.svg\" alt=\"File Upload\" class=\"w-28 mx-auto\" />\n      <span class=\"font-semibold text-center text-gray-400 text-sm\">\n        Drag & drop or<br />\n        click the \"Choose\" button to add new files\n      </span>\n    </div>\n    }\n  </ng-template>\n  <ng-template #file></ng-template>\n</p-fileupload>\n\n<ng-template #iconTemplate let-type>\n  @if (type === 'image') {\n  <span class=\"material-icons\"> image </span>\n  } @else if (type === 'pdf') {\n  <span class=\"material-icons\"> picture_as_pdf </span>\n  } @else {\n  <span class=\"material-icons\"> insert_drive_file </span>\n  }\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { fileUploader: [{
+                type: ViewChild,
+                args: ['fileUploader']
+            }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showUploadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUploadButton", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], filesCleared: [{ type: i0.Output, args: ["filesCleared"] }] } });
+
 // export * from './lib/components/components';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EmptyComponent };
+export { EmptyComponent, FileUploadComponent };
 //# sourceMappingURL=winexist-ngp.mjs.map

package/fesm2022/winexist-ngp.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"winexist-ngp.mjs","sources":["../../../packages/src/lib/components/empty/empty.component.ts","../../../packages/src/lib/components/empty/empty.component.html","../../../packages/src/index.ts","../../../packages/src/winexist-ngp.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\n@Component({\n\tselector: 'ngp-empty',\n\timports: [],\n\ttemplateUrl: './empty.component.html',\n\tstyleUrl: './empty.component.css'\n})\nexport class EmptyComponent {\n\ttitle = input<string>('Section is empty.');\n\tmessage = input<string>('No data available.');\n\timgSrc = input<string>();\n\n}\n","<div class=\"w-full flex justify-center items-center p-5 h-full\">\n  <div class=\"flex items-center gap-3\">\n    @if (imgSrc()) {\n    <img alt=\"Empty\" [src]=\"imgSrc()\" class=\"w-[80px]\" />\n    } @else {\n    <div class=\"!rounded-md p-5 !bg-slate-100 mb-6\">\n      <span class=\"material-icons !text-gray-400 !text-7xl\"> search_off </span>\n    </div>\n    }\n\n    <div class=\"flex flex-col\">\n      <span class=\"!text-gray-900 !text-2xl !font-bold\">{{ title() }}</span>\n      @if (message()) {\n      <span class=\"!text-gray-400 !text-base\">{{ message() }}</span>\n      }\n    </div>\n  </div>\n</div>","// export * from './lib/components/components';\nexport * from './lib/components/empty/empty.component'","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,cAAc,CAAA;AAC1B,IAAA,KAAK,GAAG,KAAK,CAAS,mBAAmB,iDAAC;AAC1C,IAAA,OAAO,GAAG,KAAK,CAAS,oBAAoB,mDAAC;IAC7C,MAAM,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;wGAHZ,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,kcCR3B,gnBAiBM,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FDTO,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,WACZ,EAAE,EAAA,QAAA,EAAA,gnBAAA,EAAA;;;AEJZ;;ACAA;;AAEG;;;;"}
+{"version":3,"file":"winexist-ngp.mjs","sources":["../../../packages/src/lib/components/empty/empty.component.ts","../../../packages/src/lib/components/empty/empty.component.html","../../../packages/src/lib/components/file-upload/file-upload.component.ts","../../../packages/src/lib/components/file-upload/file-upload.component.html","../../../packages/src/index.ts","../../../packages/src/winexist-ngp.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\n@Component({\n\tselector: 'ngp-empty',\n\timports: [],\n\ttemplateUrl: './empty.component.html',\n\tstyleUrl: './empty.component.css'\n})\nexport class EmptyComponent {\n\ttitle = input<string>('Section is empty.');\n\tmessage = input<string>('No data available.');\n\timgSrc = input<string>();\n\n}\n","<div class=\"w-full flex justify-center items-center p-5 h-full\">\n  <div class=\"flex items-center gap-3\">\n    @if (imgSrc()) {\n    <img alt=\"Empty\" [src]=\"imgSrc()\" class=\"w-[80px]\" />\n    } @else {\n    <div class=\"!rounded-md p-5 !bg-slate-100 mb-6\">\n      <span class=\"material-icons !text-gray-400 !text-7xl\"> search_off </span>\n    </div>\n    }\n\n    <div class=\"flex flex-col\">\n      <span class=\"!text-gray-900 !text-2xl !font-bold\">{{ title() }}</span>\n      @if (message()) {\n      <span class=\"!text-gray-400 !text-base\">{{ message() }}</span>\n      }\n    </div>\n  </div>\n</div>","import { CommonModule } from '@angular/common';\nimport { HttpClientModule, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';\nimport { Component, effect, ElementRef, input, output, signal, ViewChild } from '@angular/core';\nimport { FileSelectEvent, FileUploadModule } from 'primeng/fileupload';\n\n// Add interface for typed files\ninterface TypedFile extends File {\n\tfileType?: 'image' | 'pdf' | 'other';\n}\n\n@Component({\n\tselector: 'ngp-file-upload',\n\timports: [FileUploadModule, CommonModule],\n\ttemplateUrl: './file-upload.component.html',\n\tstyleUrl: './file-upload.component.css',\n})\nexport class FileUploadComponent {\n\t@ViewChild('fileUploader') fileUploader!: ElementRef;\n\n\t// Signal-based inputs with defaults\n\tfiles = input<File[]>([]);\n\tmultiple = input(true);\n\taccept = input('.pdf,.png,.jpg,.jpeg,.doc,.docx,.csv,.xls,.xlsx');\n\tmaxFileSize = input(2097152); // 2MB in bytes\n\tplaceholder = input('Drag and drop new files here to upload.');\n\tshowUploadButton = input<boolean>(false);\n\tcancelLabel = input('Clear');\n\n\t// Signal-based outputs\n\tfilesSelected = output<File[]>();\n\tfilesCleared = output<void>();\n\n\t// Internal state\n\tuploadedFiles = signal<TypedFile[]>([]);\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst _files = this.files();\n\t\t\tif (_files.length) {\n\t\t\t\tthis.uploadedFiles.set(_files.map((file) => this.addFileType(file)));\n\t\t\t}\n\t\t});\n\t}\n\n\tonFileSelect(event: FileSelectEvent) {\n\t\tconst validFiles = event.currentFiles.filter(\n\t\t\t(file) => file.size <= this.maxFileSize() && this.isValidFileType(file)\n\t\t);\n\n\t\tif (validFiles.length) {\n\t\t\t// Add type to files before adding to uploadedFiles\n\t\t\tconst typedFiles = validFiles.map((file) => this.addFileType(file));\n\n\t\t\tif (this.multiple()) {\n\t\t\t\tthis.uploadedFiles.update((files) => Array.from(new Set([...files, ...typedFiles])));\n\t\t\t} else {\n\t\t\t\tthis.uploadedFiles.set(typedFiles);\n\t\t\t}\n\t\t\tthis.filesSelected.emit(typedFiles);\n\t\t}\n\t}\n\n\tonClear() {\n\t\tthis.uploadedFiles.set([]);\n\t\tthis.filesCleared.emit();\n\t}\n\n\tremoveFile(index: number) {\n\t\tthis.uploadedFiles.update((files) => files.filter((_, i) => i !== index));\n\t\tthis.filesSelected.emit(this.uploadedFiles());\n\t}\n\n\tisValidFileType(file: File): boolean {\n\t\tconst acceptedTypes = this.accept().split(',');\n\t\treturn acceptedTypes.some((type) =>\n\t\t\tfile.name.toLowerCase().endsWith(type.trim().toLowerCase())\n\t\t);\n\t}\n\n\tformatFileSize(bytes: number): string {\n\t\tif (bytes === 0) return '0 Bytes';\n\t\tconst k = 1024;\n\t\tconst sizes = ['Bytes', 'KB', 'MB', 'GB'];\n\t\tconst i = Math.floor(Math.log(bytes) / Math.log(k));\n\t\treturn parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n\t}\n\n\tclear() {\n\t\tthis.uploadedFiles.set([]);\n\t\tif (this.fileUploader?.nativeElement?.clear) {\n\t\t\tthis.fileUploader.nativeElement.clear();\n\t\t}\n\t}\n\n\t// Function to determine file type based on extension\n\tgetFileTypeByExtension(file: File): 'image' | 'pdf' | 'other' {\n\t\tconst fileName = file.name.toLowerCase();\n\t\tconst imageExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.svg', '.webp'];\n\t\tconst pdfExtension = '.pdf';\n\n\t\tif (imageExtensions.some((ext) => fileName.endsWith(ext))) {\n\t\t\treturn 'image';\n\t\t} else if (fileName.endsWith(pdfExtension)) {\n\t\t\treturn 'pdf';\n\t\t} else {\n\t\t\treturn 'other';\n\t\t}\n\t}\n\n\t// Function to add type property to file\n\taddFileType(file: File): TypedFile {\n\t\tconst typedFile = file as TypedFile;\n\t\ttypedFile.fileType = this.getFileTypeByExtension(file);\n\t\treturn typedFile;\n\t}\n}\n","<p-fileupload #fileUploader [multiple]=\"multiple()\" [showUploadButton]=\"showUploadButton()\"\n  [cancelLabel]=\"cancelLabel()\" [accept]=\"accept()\" auto=\"false\" [maxFileSize]=\"maxFileSize()\" mode=\"advanced\"\n  [customUpload]=\"true\" styleClass=\"!bg-gray-50\" (onSelect)=\"onFileSelect($event)\" (onClear)=\"onClear()\">\n  <ng-template #content>\n    @if (uploadedFiles().length) {\n    <ul class=\"space-y-2\">\n      @for (file of uploadedFiles(); track $index) {\n      <li class=\"flex justify-between gap-4 p-2 bg-gray-100 rounded\">\n        <div class=\"flex gap-2\">\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: file.fileType }\"></ng-container>\n          <span class=\"text-sm\"> {{ file.name }} - {{ formatFileSize(file.size) }} </span>\n        </div>\n        <button type=\"button\" (click)=\"removeFile($index)\" class=\"text-red-500 hover:text-red-700 text-sm\">\n          <span class=\"material-icons !text-base\"> cancel </span>\n        </button>\n      </li>\n      }\n    </ul>\n    } @else {\n    <div class=\"flex flex-col items-center gap-3\">\n      <img src=\"assets/images/file-upload.svg\" alt=\"File Upload\" class=\"w-28 mx-auto\" />\n      <span class=\"font-semibold text-center text-gray-400 text-sm\">\n        Drag & drop or<br />\n        click the \"Choose\" button to add new files\n      </span>\n    </div>\n    }\n  </ng-template>\n  <ng-template #file></ng-template>\n</p-fileupload>\n\n<ng-template #iconTemplate let-type>\n  @if (type === 'image') {\n  <span class=\"material-icons\"> image </span>\n  } @else if (type === 'pdf') {\n  <span class=\"material-icons\"> picture_as_pdf </span>\n  } @else {\n  <span class=\"material-icons\"> insert_drive_file </span>\n  }\n</ng-template>","// export * from './lib/components/components';\nexport * from './lib/components/empty/empty.component'\nexport * from './lib/components/file-upload/file-upload.component'","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,4 +1,6 @@
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { FileSelectEvent } from 'primeng/fileupload';
 
 declare class EmptyComponent {
     title: _angular_core.InputSignal<string>;
@@ -8,4 +10,32 @@ declare class EmptyComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyComponent, "ngp-empty", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "imgSrc": { "alias": "imgSrc"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { EmptyComponent };
+interface TypedFile extends File {
+    fileType?: 'image' | 'pdf' | 'other';
+}
+declare class FileUploadComponent {
+    fileUploader: ElementRef;
+    files: _angular_core.InputSignal<File[]>;
+    multiple: _angular_core.InputSignal<boolean>;
+    accept: _angular_core.InputSignal<string>;
+    maxFileSize: _angular_core.InputSignal<number>;
+    placeholder: _angular_core.InputSignal<string>;
+    showUploadButton: _angular_core.InputSignal<boolean>;
+    cancelLabel: _angular_core.InputSignal<string>;
+    filesSelected: _angular_core.OutputEmitterRef<File[]>;
+    filesCleared: _angular_core.OutputEmitterRef<void>;
+    uploadedFiles: _angular_core.WritableSignal<TypedFile[]>;
+    constructor();
+    onFileSelect(event: FileSelectEvent): void;
+    onClear(): void;
+    removeFile(index: number): void;
+    isValidFileType(file: File): boolean;
+    formatFileSize(bytes: number): string;
+    clear(): void;
+    getFileTypeByExtension(file: File): 'image' | 'pdf' | 'other';
+    addFileType(file: File): TypedFile;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "ngp-file-upload", never, { "files": { "alias": "files"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showUploadButton": { "alias": "showUploadButton"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; }, { "filesSelected": "filesSelected"; "filesCleared": "filesCleared"; }, never, never, true, never>;
+}
+
+export { EmptyComponent, FileUploadComponent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@winexist/ngp",
-  "version": "0.0.2",
+  "version": "0.1.1",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"