@libs-ui/components-preview-file 0.2.356-42 → 0.2.356-43

package/README.md

@@ -1,35 +1,33 @@
 # @libs-ui/components-preview-file
 
-> Component xem trước tệp tin hỗ trợ nhiều định dạng từ hình ảnh đến tài liệu văn phòng, PDF thông qua các bộ Viewer phổ biến.
+> Component modal xem trước tệp tin hỗ trợ đa định dạng: hình ảnh, PDF, tài liệu Office — tự động chọn viewer phù hợp (Google Viewer, Microsoft Online Viewer, hoặc iframe trực tiếp).
 
 ## Giới thiệu
 
-`LibsUiComponentsPreviewFileComponent` là một component cung cấp giao diện modal để xem nhanh nội dung của tệp tin. Nó hỗ trợ điều hướng giữa một danh sách tệp, các nút hành động tùy chỉnh (như download, share) và tự động nhận diện định dạng để sử dụng viewer phù hợp (Google Viewer cho PDF/Images, Microsoft Viewer cho Office documents).
+`LibsUiComponentsPreviewFileComponent` cung cấp giao diện modal để xem nhanh nội dung tệp tin mà không cần tải về. Component tự động nhận diện MIME type để định tuyến sang viewer tối ưu: hình ảnh hiển thị trực tiếp, tài liệu Office dùng Microsoft Online Viewer, PDF và các loại khác dùng Google Docs Viewer. Hỗ trợ điều hướng qua danh sách nhiều tệp bằng nút Prev/Next và cho phép thêm các nút hành động tùy chỉnh trên thanh tiêu đề.
 
-### Tính năng
+## Tính năng
 
-- ✅ **Hỗ trợ đa định dạng**: Image (JPEG, PNG, SVG), PDF, Office (DOCX, XLSX, PPTX).
-- ✅ **Viewer tích hợp**: Sử dụng Google và Microsoft Online Viewers cho các tài liệu phức tạp.
-- ✅ **Điều hướng**: Hỗ trợ xem danh sách nhiều tệp với nút Prev/Next.
-- ✅ **Tùy biến hành động**: Cho phép thêm các nút điều khiển tùy chỉnh trên header.
-- ✅ **Lazy Loading**: Chỉ load viewer khi tệp được chọn.
-- ✅ **OnPush Change Detection**
-- ✅ **Angular Signals**
+- ✅ **Hỗ trợ đa định dạng**: Hình ảnh (JPEG, PNG, GIF, SVG), PDF, Word (DOC/DOCX), Excel (XLS/XLSX), PowerPoint (PPT/PPTX)
+- ✅ **Tự động chọn Viewer**: Microsoft Online Viewer cho Office, Google Docs Viewer cho PDF/các định dạng khác
+- ✅ **Chế độ Iframe trực tiếp**: Bỏ qua map viewer — dùng URL gốc làm src iframe (cho Google Drive, Dropbox share link)
+- ✅ **Điều hướng Prev/Next**: Duyệt qua danh sách nhiều tệp với two-way binding index
+- ✅ **Nút hành động tùy chỉnh**: Thêm Download, Share hoặc bất kỳ action nào lên header modal
+- ✅ **Loading state**: Spinner cho hình ảnh, Skeleton cho iframe — reset tự động khi chuyển tệp
+- ✅ **Fallback ảnh lỗi**: Hỗ trợ injection token `LINK_IMAGE_ERROR_TOKEN_INJECT` cho ảnh placeholder khi lỗi load
+- ✅ **OnPush Change Detection** + **Angular Signals**
 
 ## Khi nào sử dụng
 
-- Khi cần xem nhanh nội dung của một hoặc nhiều tệp đính kèm.
-- Hỗ trợ duyệt album ảnh hoặc danh sách tài liệu PDF, Office.
-- Tránh việc phải tải tệp về máy chỉ để xem nội dung cơ bản.
+- Xem nhanh nội dung tệp đính kèm (hợp đồng, báo cáo, ảnh sản phẩm) mà không cần tải về máy
+- Duyệt gallery ảnh hoặc danh sách tài liệu PDF/Office trong workflow phê duyệt
+- Nhúng preview tệp từ Google Drive, Dropbox hoặc CDN nội bộ vào trong ứng dụng
+- Cho phép người dùng thực hiện hành động (download, share) ngay từ giao diện xem trước
 
 ## Cài đặt
 
 ```bash
-# npm
 npm install @libs-ui/components-preview-file
-
-# yarn
-yarn add @libs-ui/components-preview-file
 ```
 
 ## Import
@@ -45,108 +43,361 @@ import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-previe
 export class YourComponent {}
 ```
 
-## Ví dụ
+## Ví dụ sử dụng
+
+### Ví dụ 1 — Cơ bản (xem danh sách tệp)
+
+**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);
+  }
+}
+```
 
-### Cơ bản
+**HTML:**
 
 ```html
-<libs_ui-components-preview_file
-  [data]="fileList"
-  [(index)]="currentIndex"
-  (outClose)="onClose()" />
+<button (click)="handlerOpenPreview(0)">Xem tài liệu</button>
+
+@if (showPreview()) {
+  <libs_ui-components-preview_file
+    [data]="fileList"
+    [(index)]="currentIndex"
+    (outClose)="handlerClosePreview()" />
+}
+```
+
+---
+
+### 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],
+  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',
+    },
+  ];
+
+  protected customButtons: IButton[] = [
+    {
+      key: 'download',
+      label: 'Tai xuong',
+      type: 'button-primary',
+      classIconLeft: 'libs-ui-icon-download',
+      action: async (index: number) => {
+        const file = this.fileList[index];
+        window.open(file.url, '_blank');
+      },
+    },
+    {
+      key: 'share',
+      label: '',
+      type: 'button-outline',
+      classIconLeft: 'libs-ui-icon-share',
+      iconOnlyType: true,
+      action: async (index: number) => {
+        const file = this.fileList[index];
+        await navigator.clipboard.writeText(file.url || '');
+      },
+    },
+  ];
+
+  protected handlerOpenPreview(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);
+  }
+}
+```
+
+**HTML:**
+
+```html
+<div class="flex flex-col gap-2">
+  @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>
+  }
+</div>
+
+@if (showPreview()) {
+  <libs_ui-components-preview_file
+    [data]="fileList"
+    [(index)]="currentIndex"
+    [buttons]="customButtons"
+    (outClose)="handlerClosePreview()"
+    (outChangeIndex)="handlerChangeIndex($event)" />
+}
+```
+
+---
+
+### 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);
+
+  protected driveFiles: IFile[] = [
+    {
+      name: 'Tai lieu Google Drive',
+      url: 'https://drive.google.com/file/d/1B9Ke75VYIznY4cjyZTnXRsRYPkmJ1AgK/preview',
+      mimetype: 'application/pdf',
+    },
+    {
+      name: 'Dropbox Shared File',
+      url: 'https://www.dropbox.com/s/abc123/file.pdf?dl=0&raw=1',
+      mimetype: 'application/pdf',
+    },
+  ];
+
+  protected handlerOpen(): void {
+    this.currentIndex.set(0);
+    this.showPreview.set(true);
+  }
+
+  protected handlerClose(): void {
+    this.showPreview.set(false);
+  }
+}
 ```
 
-### Với nút bấm tùy chỉnh
+**HTML:**
 
 ```html
-<libs_ui-components-preview_file
-  [data]="fileList"
-  [(index)]="currentIndex"
-  [buttons]="customButtons"
-  (outClose)="onClose()" />
+<button (click)="handlerOpen()">Mo Google Drive Preview</button>
+
+@if (showPreview()) {
+  <libs_ui-components-preview_file
+    [data]="driveFiles"
+    [(index)]="currentIndex"
+    [isSourceIframe]="true"
+    (outClose)="handlerClose()" />
+}
 ```
 
-## API
+---
+
+### Ví dụ 4 — Với `LINK_IMAGE_ERROR_TOKEN_INJECT` (ảnh placeholder khi lỗi)
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';
+import { LINK_IMAGE_ERROR_TOKEN_INJECT } from '@libs-ui/utils';
 
-### libs_ui-components-preview_file
+@Component({
+  // ...
+  imports: [LibsUiComponentsPreviewFileComponent],
+  providers: [
+    {
+      provide: LINK_IMAGE_ERROR_TOKEN_INJECT,
+      useValue: 'https://example.com/assets/image-error-placeholder.png',
+    },
+  ],
+})
+export class AppComponent {}
+```
 
-#### Inputs
+## @Input()
 
-| Property    | Type        | Default      | Description                                                   |
-| ----------- | ----------- | ------------ | ------------------------------------------------------------- |
-| `[data]`    | `IFile[]`   | **Bắt buộc** | Danh sách các đối tượng tệp tin cần xem trước.                |
-| `[(index)]` | `number`    | **Bắt buộc** | Vị trí tệp hiện tại trong danh sách (hỗ trợ Two-way binding). |
-| `[buttons]` | `IButton[]` | `[]`         | Danh sách các nút hành động bổ sung hiển thị trên header.     |
-| `[zIndex]`  | `number`    | `undefined`  | Thiết lập z-index cho modal preview.                          |
+| Input | Type | Default | Mô tả | Ví dụ |
+|---|---|---|---|---|
+| `[data]` | `IFile[]` | **Bắt buộc** | Danh sách tệp cần xem trước. Phải là mảng `IFile[]`. | `[data]="fileList"` |
+| `[(index)]` | `number` | **Bắt buộc** | Index tệp hiện tại trong mảng `data`. Hỗ trợ two-way binding (model). | `[(index)]="currentIndex"` |
+| `[buttons]` | `IButton[]` | `undefined` | Danh sách nút hành động tùy chỉnh hiển thị trên header modal (Download, Share...). | `[buttons]="customButtons"` |
+| `[zIndex]` | `number` | `undefined` | Z-index CSS cho modal. Dùng khi cần kiểm soát lớp hiển thị. | `[zIndex]="1050"` |
+| `[isSourceIframe]` | `boolean` | `undefined` (falsy) | Bỏ qua logic map viewer — dùng `url` hoặc `origin_url` trực tiếp làm `src` của iframe. Dùng cho Google Drive share link, Dropbox, v.v. | `[isSourceIframe]="true"` |
 
-#### Outputs
+## @Output()
 
-| Property     | Type   | Description                                                     |
-| ------------ | ------ | --------------------------------------------------------------- |
-| `(outClose)` | `void` | Phát ra khi người dùng nhấn nút đóng hoặc click ra ngoài modal. |
+| Output | Type | Mô tả | Handler TS | Binding HTML |
+|---|---|---|---|---|
+| `(outClose)` | `void` | Phát ra khi người dùng đóng modal (nhấn nút X hoặc click backdrop). | `handlerClosePreview(): void { this.showPreview.set(false); }` | `(outClose)="handlerClosePreview()"` |
+| `(outChangeIndex)` | `number` | Phát ra index mới sau khi nhấn Prev/Next để chuyển tệp. | `handlerChangeIndex(index: number): void { console.log(index); }` | `(outChangeIndex)="handlerChangeIndex($event)"` |
 
 ## Types & Interfaces
 
+Các type được import từ `@libs-ui/interfaces-types`:
+
+```typescript
+import { IFile } from '@libs-ui/interfaces-types';
+import { IButton } from '@libs-ui/components-buttons-button';
+```
+
 ```typescript
 export interface IFile {
   id?: string;
-  name?: string;
-  file?: File;
-  size?: string;
-  url?: string;
-  origin_url?: string;
-  mimetype?: string;
+  name?: string;           // Tên tệp hiển thị trên header modal
+  file?: File;             // Native File object (dùng khi upload)
+  size?: string;           // Kích thước tệp (chuỗi, vd: "2.5MB")
+  isUploading?: boolean;
+  percentUploading?: number;
+  isUpdate?: boolean;
+  url?: string;            // URL công khai để hiển thị tệp
+  origin_url?: string;     // URL gốc (fallback khi url không có)
+  mimetype?: string;       // MIME type — dùng để chọn viewer phù hợp
   type?: 'document' | 'image' | 'video' | 'audio';
-  extension?: string;
+  error?: string;
+  isAvatar?: boolean;
 }
 
 export interface IButton {
-  key: string;
-  label?: string;
-  type?: string;
-  classIconLeft?: string;
-  iconOnlyType?: boolean;
-  action?: (index: number) => Promise<void>;
+  key: string;                              // ID duy nhất cho button
+  label?: string;                           // Text hiển thị
+  type?: string;                            // Kiểu button (button-primary, button-outline...)
+  classIconLeft?: string;                   // Class icon bên trái
+  classIconRight?: string;                  // Class icon bên phải
+  iconOnlyType?: boolean;                   // Chỉ hiện icon, ẩn label
+  classInclude?: string;                    // Class CSS bổ sung
+  action?: (index: number) => Promise<void>; // Callback nhận index tệp hiện tại
 }
 ```
 
-## Styling
+## Logic ẩn quan trọng
 
-### CSS Classes
+### 1. Tự động chọn Viewer theo MIME Type
 
-| Class                     | Description                                        |
-| ------------------------- | -------------------------------------------------- |
-| `.preview-file-container` | Container chính của modal preview.                 |
-| `.preview-header`         | Thanh tiêu đề chứa tên file và các nút điều hướng. |
-| `.preview-body`           | Vùng hiển thị nội dung file (iframe/img).          |
+Component ưu tiên theo thứ tự:
 
-## Công nghệ
+1. Nếu `isSourceIframe = true` → dùng `url` / `origin_url` làm src trực tiếp (bỏ qua tất cả logic map)
+2. Nếu MIME type thuộc nhóm Microsoft Office → dùng `https://view.officeapps.live.com/op/embed.aspx?src=...`
+3. Mọi trường hợp còn lại (PDF, ảnh embed, v.v.) → dùng `https://docs.google.com/viewer?url=...`
 
-| Technology              | Version | Purpose                 |
-| ----------------------- | ------- | ----------------------- |
-| Angular                 | 18+     | Framework               |
-| Google Viewer           | -       | PDF & Image Viewing     |
-| Microsoft Office Online | -       | Office Document Viewing |
-| Angular Signals         | -       | State management        |
+**Các MIME type được nhận diện là Office (dùng Microsoft Viewer):**
 
-## Demo
+| MIME Type | Loại tệp |
+|---|---|
+| `application/msword` | Word DOC |
+| `application/vnd.openxmlformats-officedocument.wordprocessingml.document` | Word DOCX |
+| `application/vnd.openxmlformats-officedocument.wordprocessingml.template` | Word DOTX |
+| `application/vnd.ms-excel` | Excel XLS |
+| `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` | Excel XLSX |
+| `application/vnd.openxmlformats-officedocument.spreadsheetml.template` | Excel XLTX |
+| `application/vnd.ms-excel.sheet.macroEnabled.12` | Excel XLSM |
+| `application/vnd.ms-powerpoint` | PowerPoint PPT |
+| `application/vnd.openxmlformats-officedocument.presentationml.presentation` | PowerPoint PPTX |
+| `application/vnd.ms-powerpoint.presentation.macroEnabled.12` | PowerPoint PPTM |
+| `application/vnd.openxmlformats-officedocument.presentationml.slideshow` | PowerPoint PPSX |
 
-```bash
-npx nx serve core-ui
-```
+### 2. Kiểm tra hình ảnh bằng Pipe
 
-Truy cập: `http://localhost:4200/preview-file`
+Hình ảnh được render bằng thẻ `<img>` (không qua iframe) khi `LibsUiPipesCheckFileExtensionPipe` trả về `true` cho loại `'image'`. Pipe này kiểm tra cả `mimetype` lẫn extension từ tên tệp.
 
-## Unit Tests
+### 3. Reset loading khi chuyển tệp
 
-```bash
-# Chạy tests
-npx nx test components-preview-file
+Khi `index` thay đổi, `computed()` tính lại `fileView` và dùng `untracked()` để set `loading = true` mà không tạo vòng lặp reactive. Trạng thái loading chỉ về `false` sau khi `(load)` event của `<img>` hoặc `<iframe>` kích hoạt.
 
-# Coverage
-npx nx test components-preview-file --coverage
-```
+### 4. Bảo vệ điều hướng biên
+
+Nút Prev chỉ hiển thị khi `index() > 0`. Nút Next chỉ hiển thị khi `index() < data().length - 1`. Component không tự động wrap vòng (không nhảy từ cuối về đầu).
+
+## Lưu ý quan trọng
+
+⚠️ **Yêu cầu kết nối Internet**: Google Viewer và Microsoft Online Viewer là dịch vụ bên ngoài. Tệp phải có URL công khai (public URL) để các viewer này truy cập được. Không hoạt động với URL nội bộ hoặc localhost.
 
-## License
+⚠️ **CORS và embed permissions**: Một số máy chủ cấu hình header `X-Frame-Options: DENY` hoặc `Content-Security-Policy` chặn nhúng iframe. Kiểm tra cấu hình server nếu tệp không hiển thị được.
+
+⚠️ **Chỉ dùng HTTPS**: Trình duyệt sẽ chặn nội dung Mixed Content nếu trang web dùng HTTPS nhưng URL tệp là HTTP. Luôn dùng link HTTPS cho tệp cần preview.
+
+⚠️ **`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
+```
 
-MIT
+Truy cập: `http://localhost:4500/components/preview-file`

package/fesm2022/libs-ui-components-preview-file.mjs

@@ -1,6 +1,6 @@
 import { AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, computed, untracked, input, model, output, Optional, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, computed, untracked, input, model, output, Component, ChangeDetectionStrategy, Optional, Inject } from '@angular/core';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';

package/fesm2022/libs-ui-components-preview-file.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"libs-ui-components-preview-file.mjs","sources":["../../../../../libs-ui/components/preview-file/src/preview-file.component.ts","../../../../../libs-ui/components/preview-file/src/preview-file.component.html","../../../../../libs-ui/components/preview-file/src/libs-ui-components-preview-file.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, Inject, input, model, Optional, output, signal, untracked } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiComponentsModalComponent, TYPE_MODAL_EVENT } from '@libs-ui/components-modal';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton';\nimport { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';\nimport { IEvent, IFile } from '@libs-ui/interfaces-types';\nimport { LibsUiPipesCheckFileExtensionPipe } from '@libs-ui/pipes-check-file-extension';\nimport { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';\nimport { LINK_IMAGE_ERROR_TOKEN_INJECT } from '@libs-ui/utils';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-preview_file',\n  templateUrl: './preview-file.component.html',\n  standalone: true,\n  imports: [\n    AsyncPipe,\n    LibsUiComponentsModalComponent,\n    LibsUiPipesSecurityTrustPipe,\n    LibsUiComponentsSkeletonComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiPipesCheckFileExtensionPipe,\n    LibsUiComponentsSpinnerComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsPreviewFileComponent {\n  protected loading = signal(true);\n  protected fileView = computed(() => {\n    const file = this.data()[this.index()];\n\n    if (!file) {\n      return null;\n    }\n    untracked(() => this.loading.set(true));\n    const mimeType = file.mimetype || file.file?.type;\n    const url = file.url || file.origin_url;\n\n    if (this.isSourceIframe()) {\n      return { ...file, urlFile: url };\n    }\n\n    if (mimeType && this.mineTypeMicroSoftSupport().includes(mimeType)) {\n      return { ...file, urlFile: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url || '')}` };\n    }\n\n    return { ...file, urlFile: `https://docs.google.com/a/umd.edu/viewer?url=${encodeURIComponent(url || '')}&embedded=true` };\n  });\n\n  readonly zIndex = input<number>();\n  readonly index = model.required<number>();\n  readonly data = input.required<IFile[]>();\n  readonly buttons = input<IButton[]>();\n  readonly isSourceIframe = input<boolean>();\n\n  readonly outClose = output<void>();\n  readonly outChangeIndex = output<number>();\n\n  constructor(@Optional() @Inject(LINK_IMAGE_ERROR_TOKEN_INJECT) private readonly linkImageError: string) {}\n\n  protected async handlerOnLoad() {\n    this.loading.set(false);\n  }\n\n  protected async handlerClose(type: TYPE_MODAL_EVENT) {\n    if (type === 'close') {\n      this.outClose.emit();\n    }\n  }\n\n  private mineTypeMicroSoftSupport() {\n    return [\n      'application/msword',\n      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n      'application/vnd.openxmlformats-officedocument.wordprocessingml.template',\n      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n      'application/vnd.ms-excel.sheet.macroEnabled.12',\n      'application/vnd.ms-excel',\n      'application/vnd.openxmlformats-officedocument.spreadsheetml.template',\n      'application/vnd.ms-powerpoint',\n      'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n      'application/vnd.ms-powerpoint.presentation.macroEnabled.12',\n      'application/vnd.openxmlformats-officedocument.presentationml.slideshow',\n    ];\n  }\n\n  protected handlerPrev() {\n    this.index.update((value) => value - 1);\n    this.outChangeIndex.emit(this.index());\n  }\n\n  protected handlerNext() {\n    this.index.update((value) => value + 1);\n    this.outChangeIndex.emit(this.index());\n  }\n\n  protected async handlerImageError(event: Event) {\n    if (!this.linkImageError) {\n      return;\n    }\n    (event as IEvent).target.src = this.linkImageError;\n  }\n}\n","<libs_ui-components-modal\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ ignoreHeaderTheme: true, classButtonCloseInclude: '!mr-[24px]' }\"\n  [bodyConfig]=\"{ classInclude: '!p-0', scrollOverlayOptions: { scrollX: 'hidden', scrollY: 'hidden' } }\"\n  [footerConfig]=\"{ hidden: true }\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\"\n  (outEvent)=\"handlerClose($event)\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between min-w-0\">\n    <div class=\"w-full ml-[24px] mr-[8px] flex justify-between items-center min-w-0 gap-[16px]\">\n      <div class=\"w-2/8 flex-1\"></div>\n      <div class=\"flex libs-ui-font-h4s min-w-0 w-4/8 justify-center flex-1\">\n        <libs_ui-components-popover\n          [type]=\"'text'\"\n          [config]=\"{ zIndex: zIndex() }\">\n          {{ fileView()?.name }}\n        </libs_ui-components-popover>\n      </div>\n      @if (buttons()?.length) {\n        <div class=\"flex gap-[8px] items-center w-2/8 justify-end flex-1\">\n          @for (button of buttons(); track button.key) {\n            <libs_ui-components-buttons-button\n              [type]=\"button.type || 'button-third'\"\n              [label]=\"button.label || ''\"\n              [classIconLeft]=\"button.classIconLeft || ''\"\n              [classIconRight]=\"button.classIconRight || ''\"\n              [iconOnlyType]=\"button.iconOnlyType || false\"\n              [classInclude]=\"button.classInclude || '!py-[4px] !px-[12px]'\"\n              (outClick)=\"button.action?.(index())\" />\n          }\n          <div class=\"h-[12px] libs-ui-border-left-general\"></div>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex rounded-b-[8px] overflow-hidden relative\">\n    @if (index() > 0) {\n      <div class=\"absolute top-[50%] left-[24px] transform -translate-y-[50%] z-[1]\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-outline'\"\n          [iconOnlyType]=\"true\"\n          [classInclude]=\"'!p-[11px] !rounded-[8px]'\"\n          [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-180 before:!text-[20px]'\"\n          (outClick)=\"handlerPrev()\" />\n      </div>\n    }\n    @if (fileView(); as fileView) {\n      @if (fileView | LibsUiPipesCheckFileExtensionPipe: 'image') {\n        <div class=\"w-full h-full relative flex items-center justify-center\">\n          @if (fileView.url || fileView.origin_url; as url) {\n            <img\n              [src]=\"url\"\n              alt=\"\"\n              class=\"max-w-full max-h-full object-contain\"\n              (load)=\"handlerOnLoad()\"\n              (error)=\"handlerImageError($event)\" />\n            @if (loading()) {\n              <libs_ui-components-spinner [size]=\"'medium'\" />\n            }\n          }\n        </div>\n      } @else {\n        <iframe\n          id=\"google\"\n          title=\"File preview\"\n          [class.hidden]=\"loading()\"\n          [src]=\"fileView.urlFile ?? '' | LibsUiPipesSecurityTrustPipe: 'resourceUrl' | async\"\n          width=\"100%\"\n          height=\"100%\"\n          class=\"border-0\"\n          allowfullscreen=\"allowfullscreen\"\n          (load)=\"handlerOnLoad()\"></iframe>\n        @if (loading()) {\n          <libs_ui-components-skeleton [class]=\"'w-full h-full'\" />\n        }\n      }\n      @if (index() < data().length - 1) {\n        <div class=\"absolute top-[50%] right-[24px] transform -translate-y-[50%] z-[1]\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-outline'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[11px] !rounded-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-chevron-right before:!text-[20px]'\"\n            (outClick)=\"handlerNext()\" />\n        </div>\n      }\n    }\n  </div>\n</libs_ui-components-modal>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"libs-ui-components-preview-file.mjs","sources":["../../../../../libs-ui/components/preview-file/src/preview-file.component.ts","../../../../../libs-ui/components/preview-file/src/preview-file.component.html","../../../../../libs-ui/components/preview-file/src/libs-ui-components-preview-file.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, Inject, input, model, Optional, output, signal, untracked } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { LibsUiComponentsModalComponent, TYPE_MODAL_EVENT } from '@libs-ui/components-modal';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { LibsUiComponentsSkeletonComponent } from '@libs-ui/components-skeleton';\nimport { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';\nimport { IEvent, IFile } from '@libs-ui/interfaces-types';\nimport { LibsUiPipesCheckFileExtensionPipe } from '@libs-ui/pipes-check-file-extension';\nimport { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';\nimport { LINK_IMAGE_ERROR_TOKEN_INJECT } from '@libs-ui/utils';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-preview_file',\n  templateUrl: './preview-file.component.html',\n  standalone: true,\n  imports: [\n    AsyncPipe,\n    LibsUiComponentsModalComponent,\n    LibsUiPipesSecurityTrustPipe,\n    LibsUiComponentsSkeletonComponent,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiPipesCheckFileExtensionPipe,\n    LibsUiComponentsSpinnerComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsPreviewFileComponent {\n  protected loading = signal(true);\n  protected fileView = computed(() => {\n    const file = this.data()[this.index()];\n\n    if (!file) {\n      return null;\n    }\n    untracked(() => this.loading.set(true));\n    const mimeType = file.mimetype || file.file?.type;\n    const url = file.url || file.origin_url;\n\n    if (this.isSourceIframe()) {\n      return { ...file, urlFile: url };\n    }\n\n    if (mimeType && this.mineTypeMicroSoftSupport().includes(mimeType)) {\n      return { ...file, urlFile: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url || '')}` };\n    }\n\n    return { ...file, urlFile: `https://docs.google.com/a/umd.edu/viewer?url=${encodeURIComponent(url || '')}&embedded=true` };\n  });\n\n  readonly zIndex = input<number>();\n  readonly index = model.required<number>();\n  readonly data = input.required<IFile[]>();\n  readonly buttons = input<IButton[]>();\n  readonly isSourceIframe = input<boolean>();\n\n  readonly outClose = output<void>();\n  readonly outChangeIndex = output<number>();\n\n  constructor(@Optional() @Inject(LINK_IMAGE_ERROR_TOKEN_INJECT) private readonly linkImageError: string) {}\n\n  protected async handlerOnLoad() {\n    this.loading.set(false);\n  }\n\n  protected async handlerClose(type: TYPE_MODAL_EVENT) {\n    if (type === 'close') {\n      this.outClose.emit();\n    }\n  }\n\n  private mineTypeMicroSoftSupport() {\n    return [\n      'application/msword',\n      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n      'application/vnd.openxmlformats-officedocument.wordprocessingml.template',\n      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n      'application/vnd.ms-excel.sheet.macroEnabled.12',\n      'application/vnd.ms-excel',\n      'application/vnd.openxmlformats-officedocument.spreadsheetml.template',\n      'application/vnd.ms-powerpoint',\n      'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n      'application/vnd.ms-powerpoint.presentation.macroEnabled.12',\n      'application/vnd.openxmlformats-officedocument.presentationml.slideshow',\n    ];\n  }\n\n  protected handlerPrev() {\n    this.index.update((value) => value - 1);\n    this.outChangeIndex.emit(this.index());\n  }\n\n  protected handlerNext() {\n    this.index.update((value) => value + 1);\n    this.outChangeIndex.emit(this.index());\n  }\n\n  protected async handlerImageError(event: Event) {\n    if (!this.linkImageError) {\n      return;\n    }\n    (event as IEvent).target.src = this.linkImageError;\n  }\n}\n","<libs_ui-components-modal\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ ignoreHeaderTheme: true, classButtonCloseInclude: '!mr-[24px]' }\"\n  [bodyConfig]=\"{ classInclude: '!p-0', scrollOverlayOptions: { scrollX: 'hidden', scrollY: 'hidden' } }\"\n  [footerConfig]=\"{ hidden: true }\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\"\n  (outEvent)=\"handlerClose($event)\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between min-w-0\">\n    <div class=\"w-full ml-[24px] mr-[8px] flex justify-between items-center min-w-0 gap-[16px]\">\n      <div class=\"w-2/8 flex-1\"></div>\n      <div class=\"flex libs-ui-font-h4s min-w-0 w-4/8 justify-center flex-1\">\n        <libs_ui-components-popover\n          [type]=\"'text'\"\n          [config]=\"{ zIndex: zIndex() }\">\n          {{ fileView()?.name }}\n        </libs_ui-components-popover>\n      </div>\n      @if (buttons()?.length) {\n        <div class=\"flex gap-[8px] items-center w-2/8 justify-end flex-1\">\n          @for (button of buttons(); track button.key) {\n            <libs_ui-components-buttons-button\n              [type]=\"button.type || 'button-third'\"\n              [label]=\"button.label || ''\"\n              [classIconLeft]=\"button.classIconLeft || ''\"\n              [classIconRight]=\"button.classIconRight || ''\"\n              [iconOnlyType]=\"button.iconOnlyType || false\"\n              [classInclude]=\"button.classInclude || '!py-[4px] !px-[12px]'\"\n              (outClick)=\"button.action?.(index())\" />\n          }\n          <div class=\"h-[12px] libs-ui-border-left-general\"></div>\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex rounded-b-[8px] overflow-hidden relative\">\n    @if (index() > 0) {\n      <div class=\"absolute top-[50%] left-[24px] transform -translate-y-[50%] z-[1]\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-outline'\"\n          [iconOnlyType]=\"true\"\n          [classInclude]=\"'!p-[11px] !rounded-[8px]'\"\n          [classIconLeft]=\"'libs-ui-icon-chevron-right rotate-180 before:!text-[20px]'\"\n          (outClick)=\"handlerPrev()\" />\n      </div>\n    }\n    @if (fileView(); as fileView) {\n      @if (fileView | LibsUiPipesCheckFileExtensionPipe: 'image') {\n        <div class=\"w-full h-full relative flex items-center justify-center\">\n          @if (fileView.url || fileView.origin_url; as url) {\n            <img\n              [src]=\"url\"\n              alt=\"\"\n              class=\"max-w-full max-h-full object-contain\"\n              (load)=\"handlerOnLoad()\"\n              (error)=\"handlerImageError($event)\" />\n            @if (loading()) {\n              <libs_ui-components-spinner [size]=\"'medium'\" />\n            }\n          }\n        </div>\n      } @else {\n        <iframe\n          id=\"google\"\n          title=\"File preview\"\n          [class.hidden]=\"loading()\"\n          [src]=\"fileView.urlFile ?? '' | LibsUiPipesSecurityTrustPipe: 'resourceUrl' | async\"\n          width=\"100%\"\n          height=\"100%\"\n          class=\"border-0\"\n          allowfullscreen=\"allowfullscreen\"\n          (load)=\"handlerOnLoad()\"></iframe>\n        @if (loading()) {\n          <libs_ui-components-skeleton [class]=\"'w-full h-full'\" />\n        }\n      }\n      @if (index() < data().length - 1) {\n        <div class=\"absolute top-[50%] right-[24px] transform -translate-y-[50%] z-[1]\">\n          <libs_ui-components-buttons-button\n            [type]=\"'button-outline'\"\n            [iconOnlyType]=\"true\"\n            [classInclude]=\"'!p-[11px] !rounded-[8px]'\"\n            [classIconLeft]=\"'libs-ui-icon-chevron-right before:!text-[20px]'\"\n            (outClick)=\"handlerNext()\" />\n        </div>\n      }\n    }\n  </div>\n</libs_ui-components-modal>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

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