{"_id":"@dhaivat-cloud/upload-component-library","name":"@dhaivat-cloud/upload-component-library","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dhaivat-cloud/upload-component-library","version":"0.0.1","peerDependencies":{"@angular/common":">=11.0.0 <20.0.0","@angular/core":">=11.0.0 <20.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2022/dhaivat-cloud-test1-ui-components.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/dhaivat-cloud-test1-ui-components.mjs"}},"sideEffects":false,"_id":"@dhaivat-cloud/upload-component-library@0.0.1","gitHead":"e2bc8064b116cae63106b04c6a5f663da7a9d3d9","description":"This Angular library provides reusable UI components, including buttons, cards, and a feature-rich file upload component. Designed to be compatible with multiple Angular versions, it offers seamless integration into your projects.","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-MI1Y/PVfO/cbR2D5tIfkoYfrpwKcQoPauGkplWoXl5w2F92yUl/wZVxG+8K8Mtp9HeZMUL6Yt7SUlQIwQUWtPg==","shasum":"a063eb3dc9293f86ff74e0b36450838d489d62bf","tarball":"https://registry.npmjs.org/@dhaivat-cloud/upload-component-library/-/upload-component-library-0.0.1.tgz","fileCount":14,"unpackedSize":52841,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDZXRnDS0+HsiNzNwX77owbes8s3Kqa5+w1mziyJB3+KAIgXzp80SLpbfYv8h/TO2QdWDXzyHe+hI7FXnruz+tZye0="}]},"_npmUser":{"name":"dhaivat-cloud","email":"dhaivat.d@cloudoffis.com.au"},"directories":{},"maintainers":[{"name":"dhaivat-cloud","email":"dhaivat.d@cloudoffis.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/upload-component-library_0.0.1_1742470087239_0.23684233579230285"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-20T11:28:07.183Z","0.0.1":"2025-03-20T11:28:07.530Z","modified":"2025-03-20T11:28:07.733Z"},"maintainers":[{"name":"dhaivat-cloud","email":"dhaivat.d@cloudoffis.com.au"}],"description":"This Angular library provides reusable UI components, including buttons, cards, and a feature-rich file upload component. Designed to be compatible with multiple Angular versions, it offers seamless integration into your projects.","readme":"# UI Components Library\r\n\r\n## Overview\r\nThis Angular library provides reusable UI components, including buttons, cards, and a feature-rich file upload component. Designed to be compatible with multiple Angular versions, it offers seamless integration into your projects.\r\n\r\n## Installation\r\nTo install the library from npm, use the following command:\r\n\r\n```sh\r\nnpm install @dhaivat-cloud/upload-component-library --legacy-peer-deps\r\n```\r\n\r\nMake sure to include the library in your Angular project as needed.\r\n\r\n## Available Components\r\n\r\n### 1. Button Component\r\nA simple button component for general UI interactions.\r\n\r\n```html\r\n<lib-button label=\"Click Me\"></lib-button>\r\n```\r\n\r\n### 2. Card Component\r\nA reusable card component for displaying content in a structured layout.\r\n\r\n```html\r\n<lib-card>\r\n  <h3>Card Title</h3>\r\n  <p>Card content goes here.</p>\r\n</lib-card>\r\n```\r\n\r\n### 3. File Upload Component\r\nThe file upload component provides an intuitive way to select, upload, and download files.\r\n\r\n#### Importing the Component\r\n\r\nIf using standalone components, import it directly:\r\n\r\n```typescript\r\nimport { FileUploadComponent } from '@dhaivat-cloud/upload-component-library';\r\n```\r\n\r\nIf using Angular modules:\r\n\r\n```typescript\r\nimport { UiComponentsModule } from '@dhaivat-cloud/upload-component-library';\r\n```\r\n\r\n#### Usage\r\n\r\n```html\r\n<lib-file-upload></lib-file-upload>\r\n```\r\n\r\n#### Features:\r\n- Select multiple files\r\n- Upload files to a server\r\n- Handle duplicate files\r\n- Download successfully uploaded files\r\n\r\n#### Example Implementation\r\n\r\n**Component:**\r\n```typescript\r\n@Component({\r\n  selector: 'app-root',\r\n  template: '<lib-file-upload></lib-file-upload>',\r\n})\r\nexport class AppComponent {}\r\n```\r\n\r\n**File Upload UI:**\r\n```html\r\n<div class=\"upload-container\">\r\n    <h2>File Upload</h2>\r\n    <input type=\"file\" (change)=\"onFileSelected($event)\" multiple />\r\n    <button (click)=\"uploadFiles()\" [disabled]=\"selectedFiles.length === 0\">\r\n      Upload Selected Files\r\n    </button>\r\n    <h3>Uploaded Files</h3>\r\n    <ul>\r\n      <li *ngFor=\"let file of uploadedFiles\">\r\n        {{ file.name }} ({{ file.size | number }} bytes) - \r\n        <span [ngClass]=\"{ 'success': file.status === 'success', 'failed': file.status === 'failed', 'duplicate': file.status === 'duplicate' }\">\r\n          {{ file.status === 'duplicate' ? 'Duplicate (Already Exists)' : file.status }}\r\n        </span>\r\n        <button *ngIf=\"file.status === 'success'\" (click)=\"downloadFile(file.name)\">\r\n          Download\r\n        </button>\r\n      </li>\r\n    </ul>\r\n</div>\r\n```\r\n\r\n**Styling:**\r\n```css\r\n.upload-container {\r\n  border: 1px solid #ccc;\r\n  padding: 20px;\r\n  max-width: 400px;\r\n}\r\n.success {\r\n  color: green;\r\n}\r\n.failed {\r\n  color: red;\r\n}\r\n```\r\n\r\n## License\r\nThis project is licensed under the MIT License.\r\n\r\n## Contributing\r\nContributions are welcome! Feel free to submit issues or pull requests.\r\n\r\n## Support\r\nFor any issues or feature requests, please open an issue on GitHub.\r\n\r\n","readmeFilename":"README.md","_rev":"1-84593b1b1dc2a8bfa315040136e93998"}