@libs-ui/pipes-check-file-extension 0.2.355-9 → 0.2.356-1

package/README.md

@@ -0,0 +1,163 @@
+# @libs-ui/pipes-check-file-extension
+
+> Version: `0.2.355-10`
+>
+> Pipe kiểm tra định dạng file dựa trên extension (đuôi file) để phân loại thành các nhóm định dạng phổ biến.
+
+## Giới thiệu
+
+`LibsUiPipesCheckFileExtensionPipe` giúp xác định nhanh chóng một file có thuộc nhóm định dạng cụ thể (như image, video, pdf...) hay không. Kết quả trả về là `boolean` (`true` nếu khớp, `false` nếu không).
+
+### Tính năng
+
+- ✅ Kiểm tra định dạng file dựa trên extension
+- ✅ Hỗ trợ các nhóm: image, video, word, xlsx, pdf, pptx, other
+- ✅ Hỗ trợ MIME type cho các loại văn bản
+- ✅ Pure logic, hiệu năng cao
+- ✅ Standalone pipe (Angular 16+)
+
+## Khi nào sử dụng
+
+- Khi cần kiểm tra loại file dựa trên phần mở rộng (extension) để hiển thị icon hoặc UI tương ứng.
+- Hỗ trợ các nhóm định dạng: image, video, word, xlsx, pdf, pptx, other.
+- Sử dụng trong danh sách file, upload preview, hoặc file attachment.
+
+## Cài đặt
+
+```bash
+npm install @libs-ui/pipes-check-file-extension
+```
+
+## Import
+
+```typescript
+import { LibsUiPipesCheckFileExtensionPipe } from '@libs-ui/pipes-check-file-extension';
+
+@Component({
+  standalone: true,
+  imports: [LibsUiPipesCheckFileExtensionPipe],
+  // ...
+})
+```
+
+## Cách sử dụng
+
+### 1. Kiểm tra Image
+
+```html
+{{ fileImage | LibsUiPipesCheckFileExtensionPipe : 'image' }}
+```
+
+```typescript
+readonly fileImage: IFile = { name: 'holiday-photo.jpg', size: '2 MB' };
+```
+
+### 2. Kiểm tra Video
+
+```html
+{{ fileVideo | LibsUiPipesCheckFileExtensionPipe : 'video' }}
+```
+
+```typescript
+readonly fileVideo: IFile = { name: 'presentation.mp4', size: '10 MB' };
+```
+
+### 3. Kiểm tra sai loại (False)
+
+```html
+{{ fileDoc | LibsUiPipesCheckFileExtensionPipe : 'image' }}
+```
+
+```typescript
+readonly fileDoc: IFile = { name: 'requirements.docx', size: '5 KB' };
+```
+
+### 4. Ứng dụng: Hiển thị Icon theo loại file
+
+```html
+@for (file of fileList; track file.name) {
+  <div class="flex items-center gap-2 mb-2">
+    @if (file | LibsUiPipesCheckFileExtensionPipe : 'image') {
+      <span>🖼️ Image:</span>
+    }
+    @if (file | LibsUiPipesCheckFileExtensionPipe : 'video') {
+      <span>🎥 Video:</span>
+    }
+    @if (file | LibsUiPipesCheckFileExtensionPipe : 'word') {
+      <span>📝 Word:</span>
+    }
+    <span>{{ file.name }}</span>
+  </div>
+}
+```
+
+```typescript
+readonly fileList: IFile[] = [
+  { name: 'holiday-photo.jpg' },
+  { name: 'presentation.mp4' },
+  { name: 'requirements.docx' }
+];
+```
+
+## API Reference
+
+### LibsUiPipesCheckFileExtensionPipe
+
+#### Parameters
+
+| Property | Type                                                                   | Default | Description                                      |
+| -------- | ---------------------------------------------------------------------- | ------- | ------------------------------------------------- |
+| `file`   | `IFile \| any`                                                         | `-`     | Đối tượng file cần kiểm tra (cần có `name`, `mimetype`, hoặc `type`). |
+| `type`   | `'image' \| 'video' \| 'word' \| 'xlsx' \| 'pdf' \| 'pptx' \| 'other'` | `-`     | Nhóm định dạng muốn kiểm tra.                    |
+
+## Types & Interfaces
+
+### IFile
+
+```typescript
+export interface IFile {
+  id?: string;
+  name?: string;
+  file?: File;
+  size?: string;
+  isUploading?: boolean;
+  percentUploading?: number;
+  isUpdate?: boolean;
+  url?: string;
+  origin_url?: string;
+  mimetype?: string;
+  type?: TYPE_FILE;
+  error?: string;
+  isAvatar?: boolean;
+}
+
+export type TYPE_FILE = 'document' | 'image' | 'video' | 'audio';
+```
+
+**Mô tả**: Interface cho đối tượng file. Pipe yêu cầu ít nhất một trong các thuộc tính: `name`, `mimetype`, hoặc `type` (từ `file.type` nếu là File object) để hoạt động.
+
+## Lưu ý quan trọng (Important Notes)
+
+> ⚠️ **Caveats**:
+>
+> - **Yêu cầu đối tượng File**: Pipe này yêu cầu input là một object có ít nhất một trong các thuộc tính: `name`, `mimetype`, hoặc `type` (từ `file.type` nếu là File object). Pipe sẽ tự động extract extension từ `name` hoặc sử dụng trực tiếp `mimetype`/`type`. Nếu không tìm thấy, pipe sẽ trả về `false`.
+> - **Hỗ trợ MIME Type**: Đối với các loại văn bản (word, xlsx, pdf...), pipe hỗ trợ kiểm tra cả extension rút gọn (ví dụ: `pdf`) và MIME type đầy đủ (ví dụ: `application/pdf`).
+> - **Phân loại "Other"**: Loại `other` sẽ trả về `true` cho bất kỳ định dạng nào **KHÔNG** nằm trong danh sách mặc định của Image, Video và Documents phổ biến.
+> - **Hiệu năng**: Pipe này là pure logic, có thể sử dụng an toàn trong các danh sách dài mà không gây ảnh hưởng hiệu năng đáng kể.
+
+## Công nghệ sử dụng
+
+- Angular 18+
+- TypeScript 5+
+
+## Demo
+
+- **Local Development**: [http://localhost:4500/pipes/check-file-extension](http://localhost:4500/pipes/check-file-extension)
+
+## Unit Tests
+
+Xem file `test-commands.md` để biết cách chạy unit tests.
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libs-ui/pipes-check-file-extension",
-  "version": "0.2.355-9",
+  "version": "0.2.356-1",
   "peerDependencies": {
     "@angular/core": ">=18.0.0"
   },