@libs-ui/components-preview-file 0.2.357-7 → 0.2.357-9

package/README.md

@@ -45,152 +45,75 @@ export class YourComponent {}
 
 ## Ví dụ sử dụng
 
-### Ví dụ 1 — Cơ bản (xem danh sách tệp)
+### Ví dụ 1 — Sử dụng cơ bản
 
-**TypeScript:**
-
-```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';
-import { IFile } from '@libs-ui/interfaces-types';
-
-@Component({
-  selector: 'app-document-list',
-  templateUrl: './document-list.component.html',
-  standalone: true,
-  imports: [LibsUiComponentsPreviewFileComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DocumentListComponent {
-  protected showPreview = signal(false);
-  protected currentIndex = signal(0);
-
-  protected fileList: IFile[] = [
-    {
-      name: 'Bao cao thang 6.pdf',
-      url: 'https://example.com/files/report-june.pdf',
-      mimetype: 'application/pdf',
-    },
-    {
-      name: 'Anh san pham.jpg',
-      url: 'https://example.com/images/product.jpg',
-      mimetype: 'image/jpeg',
-    },
-    {
-      name: 'Du lieu Excel.xlsx',
-      url: 'https://example.com/files/data.xlsx',
-      mimetype: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-    },
-  ];
-
-  protected handlerOpenPreview(index: number): void {
-    this.currentIndex.set(index);
-    this.showPreview.set(true);
-  }
-
-  protected handlerClosePreview(): void {
-    this.showPreview.set(false);
-  }
-}
-```
+Mở trình xem trước tệp với các thiết lập mặc định.
 
 **HTML:**
 
 ```html
-<button (click)="handlerOpenPreview(0)">Xem tài liệu</button>
+<button (click)="openPreview(0)" class="libs-ui-button-primary">
+  Xem danh sách tệp
+</button>
 
 @if (showPreview()) {
   <libs_ui-components-preview_file
     [data]="fileList"
     [(index)]="currentIndex"
-    (outClose)="handlerClosePreview()" />
+    (outClose)="showPreview.set(false)" />
 }
 ```
 
----
-
-### Ví dụ 2 — Với nút hành động tùy chỉnh (Download, Share)
-
 **TypeScript:**
 
 ```typescript
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';
 import { IFile } from '@libs-ui/interfaces-types';
 
 @Component({
-  selector: 'app-file-gallery',
-  templateUrl: './file-gallery.component.html',
   standalone: true,
-  imports: [LibsUiComponentsPreviewFileComponent, LibsUiComponentsButtonsButtonComponent],
+  imports: [LibsUiComponentsPreviewFileComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  // ...
 })
-export class FileGalleryComponent {
-  protected showPreview = signal(false);
-  protected currentIndex = signal(0);
-
-  protected fileList: IFile[] = [
-    {
-      name: 'Hop dong dich vu.docx',
-      url: 'https://example.com/files/contract.docx',
-      mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    },
-    {
-      name: 'Thuyet trinh Q2.pptx',
-      url: 'https://example.com/files/presentation-q2.pptx',
-      mimetype: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-    },
+export class YourComponent {
+  // [data]="fileList" — danh sách tệp cần xem trước (Bắt buộc)
+  readonly fileList: IFile[] = [
+    { name: 'Beautiful Landscape.jpg', url: 'https://images.unsplash.com/photo-xxx.jpg', mimetype: 'image/jpeg' },
+    { name: 'Sample PDF Document.pdf', url: 'https://example.com/dummy.pdf', mimetype: 'application/pdf' },
+    { name: 'Project Plan Excel.xlsx', url: 'https://example.com/plan.xlsx', mimetype: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+    { name: 'Sample Presentation.pptx', url: 'https://example.com/deck.pptx', mimetype: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
   ];
 
-  protected customButtons: IButton[] = [
-    {
-      key: 'download',
-      label: 'Tai xuong',
-      type: 'button-primary',
-      classIconLeft: 'libs-ui-icon-download-outline',
-      action: async (index: number) => {
-        const file = this.fileList[index];
-        window.open(file.url, '_blank');
-      },
-    },
-    {
-      key: 'share',
-      label: '',
-      type: 'button-outline',
-      classIconLeft: 'libs-ui-icon-upload-outline',
-      iconOnlyType: true,
-      action: async (index: number) => {
-        const file = this.fileList[index];
-        await navigator.clipboard.writeText(file.url || '');
-      },
-    },
-  ];
+  // [(index)]="currentIndex" — chỉ số tệp đang xem (two-way binding)
+  readonly currentIndex = signal(0);
+
+  // @if (showPreview()) — điều kiện hiển thị component
+  readonly showPreview = signal(false);
 
-  protected handlerOpenPreview(index: number): void {
+  // Handler mở preview tại vị trí index — gọi từ nút "Xem danh sách tệp"
+  openPreview(index: number): void {
     this.currentIndex.set(index);
     this.showPreview.set(true);
   }
-
-  protected handlerClosePreview(): void {
-    this.showPreview.set(false);
-  }
-
-  protected handlerChangeIndex(newIndex: number): void {
-    // Cập nhật nút theo tệp hiện tại nếu cần
-    console.log('Chuyển sang tệp index:', newIndex);
-  }
 }
 ```
 
+---
+
+### Ví dụ 2 — Tùy biến nút hành động
+
+Thêm các nút chức năng như Tải xuống, Chia sẻ ngay trong giao diện xem trước.
+
 **HTML:**
 
 ```html
-<div class="flex flex-col gap-2">
+<!-- Danh sách thumbnail -->
+<div class="flex gap-4">
   @for (file of fileList; track file.url) {
-    <div class="flex items-center justify-between p-3 border rounded-lg">
-      <span>{{ file.name }}</span>
-      <button (click)="handlerOpenPreview($index)">Xem truoc</button>
+    <div (click)="openPreview($index)" class="cursor-pointer">
+       {{ file.name }}
     </div>
   }
 </div>
@@ -200,73 +123,91 @@ export class FileGalleryComponent {
     [data]="fileList"
     [(index)]="currentIndex"
     [buttons]="customButtons"
-    (outClose)="handlerClosePreview()"
-    (outChangeIndex)="handlerChangeIndex($event)" />
+    (outClose)="showPreview.set(false)" />
 }
 ```
 
----
-
-### Ví dụ 3 — Chế độ Iframe trực tiếp (Google Drive, Dropbox)
-
-Dùng khi URL đã là embed link sẵn (ví dụ Google Drive `/preview`), không cần qua Google Docs Viewer hay Microsoft Viewer.
-
 **TypeScript:**
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';
-import { IFile } from '@libs-ui/interfaces-types';
-
-@Component({
-  selector: 'app-drive-preview',
-  templateUrl: './drive-preview.component.html',
-  standalone: true,
-  imports: [LibsUiComponentsPreviewFileComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class DrivePreviewComponent {
-  protected showPreview = signal(false);
-  protected currentIndex = signal(0);
+import { IButton } from '@libs-ui/components-buttons-button';
 
-  protected driveFiles: IFile[] = [
-    {
-      name: 'Tai lieu Google Drive',
-      url: 'https://drive.google.com/file/d/1B9Ke75VYIznY4cjyZTnXRsRYPkmJ1AgK/preview',
-      mimetype: 'application/pdf',
+// fileList / currentIndex / showPreview / openPreview() — xem Ví dụ 1 phía trên.
+
+// [buttons]="customButtons" — thêm nút hành động tùy biến trên header preview
+readonly customButtons: IButton[] = [
+  {
+    key: 'download',
+    label: 'Tải xuống',
+    type: 'button-primary',
+    classIconLeft: 'libs-ui-icon-download-outline',
+    action: async (index: number) => {
+      alert(`Bắt đầu tải xuống: ${this.fileList[index].name}`);
     },
-    {
-      name: 'Dropbox Shared File',
-      url: 'https://www.dropbox.com/s/abc123/file.pdf?dl=0&raw=1',
-      mimetype: 'application/pdf',
+  },
+  {
+    key: 'share',
+    label: '',
+    type: 'button-outline',
+    classIconLeft: 'libs-ui-icon-upload-outline',
+    iconOnlyType: true,
+    action: async (index: number) => {
+      alert(`Chia sẻ tệp: ${this.fileList[index].name}`);
     },
-  ];
+  },
+];
+```
 
-  protected handlerOpen(): void {
-    this.currentIndex.set(0);
-    this.showPreview.set(true);
-  }
+---
 
-  protected handlerClose(): void {
-    this.showPreview.set(false);
-  }
-}
-```
+### Ví dụ 3 — Nguồn Iframe trực tiếp (Google Drive, Dropbox)
+
+Có thể bỏ qua map URL viewer, dùng luôn link cho iframe (VD: Share link public của Google Drive). Không cần qua Google Docs Viewer hay Microsoft Viewer.
 
 **HTML:**
 
 ```html
-<button (click)="handlerOpen()">Mo Google Drive Preview</button>
+<button (click)="openPreviewIframe(0)" class="libs-ui-button-primary">
+  Mở Link Dạng Iframe
+</button>
 
-@if (showPreview()) {
+@if (showPreviewIframe()) {
   <libs_ui-components-preview_file
-    [data]="driveFiles"
-    [(index)]="currentIndex"
+    [data]="fileListIframe"
+    [(index)]="currentIframeIndex"
     [isSourceIframe]="true"
-    (outClose)="handlerClose()" />
+    (outClose)="showPreviewIframe.set(false)" />
 }
 ```
 
+**TypeScript:**
+
+```typescript
+import { signal } from '@angular/core';
+import { IFile } from '@libs-ui/interfaces-types';
+
+// [data]="fileListIframe" — dùng link share public (VD: Google Drive) render trực tiếp qua iframe
+readonly fileListIframe: IFile[] = [
+  {
+    name: 'Google Drive Source',
+    url: 'https://drive.google.com/file/d/1B9Ke75VYIznY4cjyZTnXRsRYPkmJ1AgK/preview',
+    mimetype: 'application/pdf',
+  },
+];
+
+// [(index)]="currentIframeIndex" / @if (showPreviewIframe())
+readonly currentIframeIndex = signal(0);
+readonly showPreviewIframe = signal(false);
+
+// Handler mở preview iframe — gọi từ nút "Mở Link Dạng Iframe"
+openPreviewIframe(index: number): void {
+  this.currentIframeIndex.set(index);
+  this.showPreviewIframe.set(true);
+}
+```
+
+> ⚠️ **`isSourceIframe` cho Google Drive**: Dùng link dạng `https://drive.google.com/file/d/{fileId}/preview` kết hợp `[isSourceIframe]="true"`. Không dùng link `/view` thông thường vì Google Drive chặn nhúng iframe.
+
 ---
 
 ### Ví dụ 4 — Với `LINK_IMAGE_ERROR_TOKEN_INJECT` (ảnh placeholder khi lỗi)
@@ -393,11 +334,3 @@ Nút Prev chỉ hiển thị khi `index() > 0`. Nút Next chỉ hiển thị khi
 ⚠️ **`isSourceIframe` cho Google Drive**: Khi chia sẻ file từ Google Drive, dùng link dạng `https://drive.google.com/file/d/{fileId}/preview` kết hợp với `[isSourceIframe]="true"`. Không dùng link `/view` thông thường vì Google Drive chặn nhúng iframe.
 
 ⚠️ **Two-way binding bắt buộc cho `index`**: Input `index` là `model.required()`, phải truyền bằng `[(index)]` hoặc cả `[index]` lẫn `(indexChange)`. Không có giá trị mặc định.
-
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: `http://localhost:4500/components/preview-file`

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@libs-ui/components-preview-file",
-  "version": "0.2.357-7",
+  "version": "0.2.357-9",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-modal": "0.2.357-7",
-    "@libs-ui/components-skeleton": "0.2.357-7",
-    "@libs-ui/interfaces-types": "0.2.357-7",
-    "@libs-ui/pipes-security-trust": "0.2.357-7",
-    "@libs-ui/components-buttons-button": "0.2.357-7",
-    "@libs-ui/components-popover": "0.2.357-7",
-    "@libs-ui/components-spinner": "0.2.357-7",
-    "@libs-ui/pipes-check-file-extension": "0.2.357-7",
-    "@libs-ui/utils": "0.2.357-7"
+    "@libs-ui/components-modal": "0.2.357-9",
+    "@libs-ui/components-skeleton": "0.2.357-9",
+    "@libs-ui/interfaces-types": "0.2.357-9",
+    "@libs-ui/pipes-security-trust": "0.2.357-9",
+    "@libs-ui/components-buttons-button": "0.2.357-9",
+    "@libs-ui/components-popover": "0.2.357-9",
+    "@libs-ui/components-spinner": "0.2.357-9",
+    "@libs-ui/pipes-check-file-extension": "0.2.357-9",
+    "@libs-ui/utils": "0.2.357-9"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-preview-file.mjs",