@libs-ui/components-component-outlet 0.2.356-9 → 0.2.357-0

package/README.md

@@ -1,82 +1,38 @@
 # @libs-ui/components-component-outlet
 
-> ⚠️ **DEPRECATED** - Component này đã cũ và không còn được sử dụng
+> ⚠️ **DEPRECATED** — Base component cũ để chuẩn hóa input cho dynamic component trong Table/List. Không sử dụng trong code mới.
 
-## ⚠️ Deprecation Notice
-
-**Component này đã bị deprecated và không nên sử dụng trong code mới.**
-
-### Lý do Deprecation
-
-Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào, **không cần extend base component này nữa**.
-
-### Migration Guide
-
-**❌ Cách cũ (Deprecated):**
-
-```typescript
-// KHÔNG nên làm như này nữa
-export class CustomComponent extends LibsUiComponentsComponentOutletComponent {
-  // Extend base component
-}
-```
+---
 
-**✅ Cách mới (Recommended):**
+## ⚠️ Deprecation Notice
 
-```typescript
-// Tạo standalone component với input tùy chỉnh
-@Component({
-  selector: 'app-custom-component',
-  standalone: true,
-  template: `
-    <div>{{ data().name }}</div>
-  `,
-})
-export class CustomComponent {
-  // Input tùy chỉnh theo nhu cầu
-  readonly data = input.required<MyCustomType>();
-}
+**`LibsUiComponentsComponentOutletComponent` đã bị deprecated và không nên sử dụng trong code mới.**
 
-// Sử dụng getDataComponentOutlet để map data
-configTemplateText: signal({
-  getComponentOutlet: () => of(CustomComponent),
-  getDataComponentOutlet: (item: any) => ({ data: item }), // Map to component inputs
-});
-```
+Hàm `getDataComponentOutlet` trong cấu hình Table/List hiện đã hỗ trợ truyền input tùy chỉnh trực tiếp vào component mà không cần extend base component. Pattern mới linh hoạt hơn, type-safe hơn và không phụ thuộc vào base class này.
 
 ---
 
-## Giới thiệu (Legacy Documentation)
+## Giới thiệu
 
-`LibsUiComponentsComponentOutletComponent` là một standalone Angular base component được thiết kế để chuẩn hóa input interface cho các custom components sử dụng trong Table, List và các container components khác thông qua Angular Component Outlet pattern.
+`LibsUiComponentsComponentOutletComponent` là một Angular standalone base component với input duy nhất `[item]: TYPE_OBJECT`. Trước đây, các custom component dùng trong Table/List cần extend class này để nhận dữ liệu từ `getDataComponentOutlet`. Kể từ khi `getDataComponentOutlet` hỗ trợ truyền input tùy chỉnh theo từng component, base class này không còn cần thiết nữa.
 
-### Tính năng
+Package cũng export type `TYPE_COMPONENT_OUTLET_DATA = WritableSignal<TYPE_OBJECT>` dùng cho reactive data binding.
 
-- ✅ Base component với standardized input interface
-- ✅ Required input `[item]` với type `TYPE_OBJECT`
-- ✅ Empty template - components con override template
-- ✅ Sử dụng với Angular Component Outlet
-- ✅ Type safety với TYPE_OBJECT từ @libs-ui/interfaces-types
-- ✅ Standalone Component
-- ✅ Minimal overhead
+## Tính năng
 
-## Khi nào sử dụng
+- ✅ Base component với input chuẩn hóa `[item]` kiểu `TYPE_OBJECT`
+- ✅ Template rỗng — component con tự định nghĩa template
+- ✅ Standalone component, không cần NgModule
+- ✅ Export `TYPE_COMPONENT_OUTLET_DATA` type alias
 
-- Khi tạo custom cell component cho Table component với component outlet
-- Khi tạo custom item component cho List component với component outlet
-- Khi cần chuẩn hóa input interface cho dynamic components
-- Khi muốn đảm bảo tất cả custom components nhận cùng một data structure
-- Khi extend base component để tạo custom render components
-
-## Important Notes
-
-⚠️ **Base Component**: Đây là base component, KHÔNG sử dụng trực tiếp. Extend component này để tạo custom components.
+## Khi nào sử dụng
 
-⚠️ **Empty Template**: Component có template rỗng, các component con phải override template.
+> 🚫 **Không sử dụng trong code mới.** Xem phần [Migration Guide](#migration-guide) bên dưới.
 
-⚠️ **Required Input**: Input `item` là required và được chuẩn hóa ở base component.
+Lib này chỉ còn giá trị khi:
 
-⚠️ **Component Outlet Pattern**: Sử dụng với Angular Component Outlet trong Table/List để render dynamic components.
+- Duy trì code cũ đang extend `LibsUiComponentsComponentOutletComponent` và chưa có kế hoạch migrate.
+- Cần tham chiếu type `TYPE_COMPONENT_OUTLET_DATA` từ package này.
 
 ## Cài đặt
 
@@ -84,181 +40,284 @@ configTemplateText: signal({
 npm install @libs-ui/components-component-outlet
 ```
 
-## Sử dụng cơ bản
+## Import
 
-### 1. Tạo Custom Component (Extend Base)
+```typescript
+import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
+import { TYPE_COMPONENT_OUTLET_DATA } from '@libs-ui/components-component-outlet';
+```
+
+---
+
+## Migration Guide
+
+### Cách cũ — Extend base component (❌ Deprecated)
 
 ```typescript
 import { Component } from '@angular/core';
 import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
 
-// Custom component EXTENDS base component
+// ❌ KHÔNG làm như này trong code mới
 @Component({
-  selector: 'app-custom-list-item',
+  selector: 'app-product-cell',
   standalone: true,
   template: `
-    <div class="flex items-center gap-2">
-      <span class="font-bold">{{ item().name }}</span>
-      <span class="text-xs text-gray-500">ID: {{ item().id }}</span>
-      @if (item().status === 'active') {
-        <span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">Active</span>
-      }
+    <div>
+      <strong>{{ item().name }}</strong>
+      <span>{{ item().price }}</span>
     </div>
   `,
 })
-export class CustomListItemComponent extends LibsUiComponentsComponentOutletComponent {
-  // Inherit input 'item' từ base component
-  // Không cần khai báo lại input
+export class ProductCellComponent extends LibsUiComponentsComponentOutletComponent {
+  // Kế thừa input 'item: TYPE_OBJECT' từ base component
 }
 ```
 
-### 2. Sử dụng trong List Component
+```typescript
+// ❌ getDataComponentOutlet trả về item nguyên xi (không type-safe)
+configTemplateText: signal({
+  fieldKey: 'id',
+  getComponentOutlet: () => of(ProductCellComponent),
+  getDataComponentOutlet: (item: any) => item,
+})
+```
+
+### Cách mới — Standalone component + getDataComponentOutlet (✅ Recommended)
 
 ```typescript
-import { Component, signal } from '@angular/core';
-import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
+import { Component, input } from '@angular/core';
 import { of } from 'rxjs';
 
+// ✅ Standalone component với input tùy chỉnh, KHÔNG extend base
 @Component({
-  selector: 'app-list-example',
+  selector: 'app-product-cell',
   standalone: true,
-  imports: [LibsUiComponentsListComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <libs_ui-components-list
-      [config]="listConfig()"
-      (outSelectedKey)="onItemSelected($event)" />
+    <div>
+      <strong>{{ product().name }}</strong>
+      <span>{{ product().price }}</span>
+    </div>
   `,
 })
-export class ListExampleComponent {
-  readonly listConfig = signal({
-    type: 'text',
-    httpRequestData: signal({
-      objectInstance: returnListObject(myData),
-      argumentsValue: [],
-      functionName: 'list',
-    }),
-    configTemplateText: signal({
-      fieldKey: 'id',
-
-      // Trả về custom component class
-      getComponentOutlet: () => of(CustomListItemComponent),
-
-      // Trả về data cho component
-      getDataComponentOutlet: (item: any) => item,
-    }),
-  });
-
-  onItemSelected(event: any) {
-    console.log('Selected:', event);
-  }
+export class ProductCellComponent {
+  // Input tùy chỉnh — tên và type hoàn toàn tự do
+  readonly product = input.required<{ name: string; price: number }>();
 }
 ```
 
-## API
-
-### Inputs
+```typescript
+// ✅ getDataComponentOutlet map đúng input name và type
+configTemplateText: signal({
+  fieldKey: 'id',
+  getComponentOutlet: () => of(ProductCellComponent),
+  getDataComponentOutlet: (item: any) => ({
+    product: {
+      name: item.productName,
+      price: item.salePrice,
+    },
+  }),
+})
+```
 
-| Property | Type          | Default    | Description                                          |
-| -------- | ------------- | ---------- | ---------------------------------------------------- |
-| `[item]` | `TYPE_OBJECT` | `required` | Data object được pass vào component (required input) |
+**Lợi ích của cách mới:**
 
-### Outputs
+- Input name tùy chỉnh (`product` thay vì `item`) — đặt tên rõ nghĩa theo domain
+- Type-safe với interface cụ thể thay vì `TYPE_OBJECT`
+- Không phụ thuộc vào base class
+- Dễ test hơn (standalone component thuần)
 
-Component này không có outputs.
+---
 
-## Interfaces
+## Ví dụ sử dụng
 
-### TYPE_COMPONENT_OUTLET_DATA
+### Ví dụ 1 — Custom status component trong List (Cách mới)
 
 ```typescript
-import { WritableSignal } from '@angular/core';
-import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
+import { Component, input, ChangeDetectionStrategy } from '@angular/core';
+import { of } from 'rxjs';
 
-export type TYPE_COMPONENT_OUTLET_DATA = WritableSignal<TYPE_OBJECT>;
-```
+// Bước 1: Tạo standalone component tùy chỉnh
+@Component({
+  selector: 'app-status-cell',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <span [class]="statusClass()">{{ label().text }}</span>
+  `,
+})
+export class StatusCellComponent {
+  readonly label = input.required<{ text: string; color: string }>();
 
-Type alias cho WritableSignal chứa TYPE_OBJECT, sử dụng cho reactive data binding.
+  protected statusClass = computed(() => {
+    const color = this.label().color;
+    return color === 'green' ? 'text-green-600 font-medium' : 'text-gray-400';
+  });
+}
 
-## Ví dụ nâng cao
+// Bước 2: Dùng trong List config
+@Component({
+  selector: 'app-order-list',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [LibsUiComponentsListComponent],
+  template: `
+    <libs_ui-components-list [config]="listConfig()" />
+  `,
+})
+export class OrderListComponent {
+  protected listConfig = signal({
+    type: 'text',
+    configTemplateText: signal({
+      fieldKey: 'orderId',
+      getComponentOutlet: () => of(StatusCellComponent),
+      getDataComponentOutlet: (item: any) => ({
+        label: {
+          text: item.statusText,
+          color: item.statusColor,
+        },
+      }),
+    }),
+  });
+}
+```
 
-### Multiple Custom Components
+### Ví dụ 2 — Custom action component trong Table (Cách mới)
 
 ```typescript
-import { Component } from '@angular/core';
-import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
+import { Component, input, output, ChangeDetectionStrategy } from '@angular/core';
+import { of } from 'rxjs';
 
-// Status Cell Component
+// Bước 1: Tạo component với output event
 @Component({
-  selector: 'app-status-cell',
+  selector: 'app-action-cell',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <span [class]="getStatusClass()">
-      {{ item().status }}
-    </span>
+    <button class="text-blue-500 hover:underline" (click)="handlerView($event)">
+      Xem {{ row().name }}
+    </button>
   `,
 })
-export class StatusCellComponent extends LibsUiComponentsComponentOutletComponent {
-  getStatusClass(): string {
-    return this.item().status === 'active' ? 'text-green-600' : 'text-gray-400';
+export class ActionCellComponent {
+  readonly row = input.required<{ id: string; name: string }>();
+  readonly outView = output<{ id: string; name: string }>();
+
+  protected handlerView(event: Event): void {
+    event.stopPropagation();
+    this.outView.emit(this.row());
   }
 }
 
-// Action Cell Component
+// Bước 2: Dùng trong Table config
 @Component({
-  selector: 'app-action-cell',
+  selector: 'app-user-table',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [LibsUiComponentsTableComponent],
   template: `
-    <button (click)="handleAction()">Action for {{ item().name }}</button>
+    <libs_ui-components-table [config]="tableConfig()" />
   `,
 })
-export class ActionCellComponent extends LibsUiComponentsComponentOutletComponent {
-  handleAction(): void {
-    console.log('Action for:', this.item());
-  }
+export class UserTableComponent {
+  protected tableConfig = signal({
+    columns: signal([
+      {
+        key: 'action',
+        title: 'Thao tác',
+        getComponentOutlet: () => of(ActionCellComponent),
+        getDataComponentOutlet: (item: any) => ({
+          row: { id: item.userId, name: item.fullName },
+        }),
+      },
+    ]),
+  });
 }
+```
+
+### Ví dụ 3 — Duy trì code cũ đang extend base (Legacy)
+
+> Chỉ dùng khi chưa kịp migrate. Đặt task refactor sang cách mới.
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
+import { of } from 'rxjs';
 
-// Badge Cell Component
+// Code cũ — vẫn hoạt động nhưng không nên dùng trong code mới
 @Component({
-  selector: 'app-badge-cell',
+  selector: 'app-legacy-cell',
   standalone: true,
   template: `
-    <span class="badge">
-      {{ item().count || 0 }}
-    </span>
+    <div class="flex items-center gap-2">
+      <strong>{{ item().name }}</strong>
+      <span class="text-xs text-gray-500">{{ item().id }}</span>
+    </div>
   `,
 })
-export class BadgeCellComponent extends LibsUiComponentsComponentOutletComponent {
-  // Tất cả đều inherit input 'item' từ base component
+export class LegacyCellComponent extends LibsUiComponentsComponentOutletComponent {
+  // Kế thừa: readonly item = input.required<TYPE_OBJECT>()
 }
+
+// Sử dụng trong List
+listConfig = signal({
+  configTemplateText: signal({
+    fieldKey: 'id',
+    getComponentOutlet: () => of(LegacyCellComponent),
+    getDataComponentOutlet: (item: any) => item,
+  }),
+});
 ```
 
-## Pattern Benefits
+---
 
-### 1. **Consistency**
+## @Input()
 
-Tất cả custom components đều có cùng input interface `[item]`, đảm bảo consistency across codebase.
+| Input | Type | Default | Mô tả | Ví dụ |
+|---|---|---|---|---|
+| `[item]` | `TYPE_OBJECT` | `required` | Data object truyền vào component. Là required signal input kế thừa từ base. | `[item]="rowData()"` |
 
-### 2. **Type Safety**
+## @Output()
 
-Sử dụng `TYPE_OBJECT` từ `@libs-ui/interfaces-types` đảm bảo type safety và flexibility.
+Component này không có output. Nếu cần emit event từ dynamic component, khai báo `output()` trực tiếp trong component tùy chỉnh (không phụ thuộc vào base class).
 
-### 3. **Reusability**
+---
 
-Base component có thể được extend bởi nhiều custom components khác nhau.
+## Types & Interfaces
 
-### 4. **Component Outlet Integration**
+```typescript
+import { TYPE_COMPONENT_OUTLET_DATA } from '@libs-ui/components-component-outlet';
+import { WritableSignal } from '@angular/core';
+import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
 
-Hoạt động seamlessly với Angular Component Outlet trong Table/List components.
+// TYPE_COMPONENT_OUTLET_DATA là alias cho WritableSignal<TYPE_OBJECT>
+// Dùng khi cần typed signal chứa generic object
+const data: TYPE_COMPONENT_OUTLET_DATA = signal({ id: 1, name: 'Item A' });
+```
 
-## Dependencies
+| Type | Definition | Mô tả |
+|---|---|---|
+| `TYPE_COMPONENT_OUTLET_DATA` | `WritableSignal<TYPE_OBJECT>` | Signal có thể ghi chứa generic object, dùng cho reactive data binding |
+| `TYPE_OBJECT` | _(từ `@libs-ui/interfaces-types`)_ | Generic object type, cho phép truyền bất kỳ cấu trúc object nào |
 
-- `@angular/core` >= 18.0.0
-- `@libs-ui/interfaces-types`
+---
 
-## Demo
+## Lưu ý quan trọng
+
+⚠️ **DEPRECATED**: Component này đã bị deprecated và sẽ bị xóa trong phiên bản tương lai. Không sử dụng trong code mới.
+
+⚠️ **Template rỗng**: Base component có `template: ''` — không render bất kỳ UI nào. Chỉ có tác dụng khi được extend bởi component con tự định nghĩa template.
 
-Xem demo tại: [http://localhost:4500/component-outlet](http://localhost:4500/component-outlet)
+⚠️ **Input bắt buộc**: `[item]` là `input.required<TYPE_OBJECT>()` — phải truyền giá trị khi dùng, nếu không sẽ báo lỗi runtime.
 
-## License
+⚠️ **Chỉ extend, không dùng trực tiếp**: Nếu render `<libs_ui-components-component_outlet [item]="data()">` trực tiếp, component sẽ không hiển thị gì cả do template rỗng.
+
+---
+
+## Demo
+
+```bash
+npx nx serve core-ui
+```
 
-MIT
+Truy cập: [http://localhost:4500/components/component-outlet](http://localhost:4500/components/component-outlet)

package/fesm2022/libs-ui-components-component-outlet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"libs-ui-components-component-outlet.mjs","sources":["../../../../../libs-ui/components/component-outlet/src/component-outlet.component.ts","../../../../../libs-ui/components/component-outlet/src/libs-ui-components-component-outlet.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { TYPE_OBJECT } from '@libs-ui/interfaces-types';\n\n/**\n * @deprecated Component này đã cũ và không còn được sử dụng.\n *\n * Lý do: Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào,\n * không cần extend base component này nữa.\n *\n * Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-component_outlet',\n  template: ``,\n  standalone: true,\n})\nexport class LibsUiComponentsComponentOutletComponent {\n  readonly item = input.required<TYPE_OBJECT>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;MAOU,wCAAwC,CAAA;AAC1C,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAe;wGADlC,wCAAwC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wCAAwC,+NAHzC,CAAA,CAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;4FAGD,wCAAwC,EAAA,UAAA,EAAA,CAAA;kBANpD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,QAAQ,EAAE,CAAA,CAAE;AACZ,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"libs-ui-components-component-outlet.mjs","sources":["../../../../../libs-ui/components/component-outlet/src/component-outlet.component.ts","../../../../../libs-ui/components/component-outlet/src/libs-ui-components-component-outlet.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { TYPE_OBJECT } from '@libs-ui/interfaces-types';\n\n/**\n * @deprecated Component này đã cũ và không còn được sử dụng.\n *\n * Lý do: Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào,\n * không cần extend base component này nữa.\n *\n * Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-component_outlet',\n  template: ``,\n  standalone: true,\n})\nexport class LibsUiComponentsComponentOutletComponent {\n  readonly item = input.required<TYPE_OBJECT>();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;;;;;AAOG;MAOU,wCAAwC,CAAA;AAC1C,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAe,CAAC;wGADnC,wCAAwC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wCAAwC,+NAHzC,CAAE,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;4FAGD,wCAAwC,EAAA,UAAA,EAAA,CAAA;kBANpD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,QAAQ,EAAE,CAAE,CAAA;AACZ,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@libs-ui/components-component-outlet",
-  "version": "0.2.356-9",
+  "version": "0.2.357-0",
   "peerDependencies": {
-    "@angular/common": ">=18.0.0",
-    "@angular/core": ">=18.0.0"
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/interfaces-types": "0.2.357-0"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-component-outlet.mjs",