Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details
Socket
Book a DemoInstallSign in
Socket

@libs-ui/components-component-outlet

Package Overview
Dependencies
Maintainers
1
Versions
214
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@libs-ui/components-component-outlet - npm Package Compare versions

Comparing version
0.2.355-14
to
0.2.355-15
+9
-1
component-outlet.component.d.ts
import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
import * as i0 from "@angular/core";
/**
* @deprecated Component này đã cũ và không còn được sử dụng.
*
* Lý do: 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.
*
* Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.
*/
export declare class LibsUiComponentsComponentOutletComponent {
readonly item: import("@angular/core").InputSignal<TYPE_OBJECT>;
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsComponentOutletComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsComponentOutletComponent, "libs_ui-components-component_outlet", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, false, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsComponentOutletComponent, "libs_ui-components-component_outlet", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}
import { Component, input } from '@angular/core';
import * as i0 from "@angular/core";
/**
* @deprecated Component này đã cũ và không còn được sử dụng.
*
* Lý do: 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.
*
* Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.
*/
export class LibsUiComponentsComponentOutletComponent {
item = input.required();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsComponentOutletComponent, selector: "libs_ui-components-component_outlet", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsComponentOutletComponent, isStandalone: true, selector: "libs_ui-components-component_outlet", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
}

@@ -14,4 +22,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, decorators: [{

template: ``,
standalone: true,
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LW91dGxldC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvY29tcG9uZW50LW91dGxldC9zcmMvY29tcG9uZW50LW91dGxldC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBUWpELE1BQU0sT0FBTyx3Q0FBd0M7SUFDMUMsSUFBSSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWUsQ0FBQzt3R0FEbkMsd0NBQXdDOzRGQUF4Qyx3Q0FBd0MsMk1BRnpDLEVBQUU7OzRGQUVELHdDQUF3QztrQkFMcEQsU0FBUzttQkFBQztvQkFDVCw4REFBOEQ7b0JBQzlELFFBQVEsRUFBRSxxQ0FBcUM7b0JBQy9DLFFBQVEsRUFBRSxFQUFFO2lCQUNiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVFlQRV9PQkpFQ1QgfSBmcm9tICdAbGlicy11aS9pbnRlcmZhY2VzLXR5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLWNvbXBvbmVudF9vdXRsZXQnLFxuICB0ZW1wbGF0ZTogYGAsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNDb21wb25lbnRPdXRsZXRDb21wb25lbnQge1xuICByZWFkb25seSBpdGVtID0gaW5wdXQucmVxdWlyZWQ8VFlQRV9PQkpFQ1Q+KCk7XG59XG4iXX0=
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LW91dGxldC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvY29tcG9uZW50LW91dGxldC9zcmMvY29tcG9uZW50LW91dGxldC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBR2pEOzs7Ozs7O0dBT0c7QUFPSCxNQUFNLE9BQU8sd0NBQXdDO0lBQzFDLElBQUksR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFlLENBQUM7d0dBRG5DLHdDQUF3Qzs0RkFBeEMsd0NBQXdDLCtOQUh6QyxFQUFFOzs0RkFHRCx3Q0FBd0M7a0JBTnBELFNBQVM7bUJBQUM7b0JBQ1QsOERBQThEO29CQUM5RCxRQUFRLEVBQUUscUNBQXFDO29CQUMvQyxRQUFRLEVBQUUsRUFBRTtvQkFDWixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUWVBFX09CSkVDVCB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkIENvbXBvbmVudCBuw6B5IMSRw6MgY8WpIHbDoCBraMO0bmcgY8OybiDEkcaw4bujYyBz4butIGThu6VuZy5cbiAqXG4gKiBMw70gZG86IEjDoG0gYGdldERhdGFDb21wb25lbnRPdXRsZXRgIHRyb25nIExpc3QvVGFibGUgY29uZmlnIMSRw6MgaOG7lyB0cuG7oyB0cuG6oyB24buBIGlucHV0IHRoZW8gY29tcG9uZW50IHRydXnhu4FuIHbDoG8sXG4gKiBraMO0bmcgY+G6p24gZXh0ZW5kIGJhc2UgY29tcG9uZW50IG7DoHkgbuG7r2EuXG4gKlxuICogVGhheSB2w6BvIMSRw7MsIHThuqFvIHN0YW5kYWxvbmUgY29tcG9uZW50IHbhu5tpIGlucHV0IHTDuXkgY2jhu4luaCB2w6Agc+G7rSBk4bulbmcgYGdldERhdGFDb21wb25lbnRPdXRsZXRgIMSR4buDIG1hcCBkYXRhLlxuICovXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtY29tcG9uZW50X291dGxldCcsXG4gIHRlbXBsYXRlOiBgYCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0NvbXBvbmVudE91dGxldENvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGl0ZW0gPSBpbnB1dC5yZXF1aXJlZDxUWVBFX09CSkVDVD4oKTtcbn1cbiJdfQ==
import * as i0 from '@angular/core';
import { input, Component } from '@angular/core';
/**
* @deprecated Component này đã cũ và không còn được sử dụng.
*
* Lý do: 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.
*
* Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.
*/
class LibsUiComponentsComponentOutletComponent {
item = input.required();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsComponentOutletComponent, selector: "libs_ui-components-component_outlet", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: LibsUiComponentsComponentOutletComponent, isStandalone: true, selector: "libs_ui-components-component_outlet", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true });
}

@@ -15,2 +23,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, decorators: [{

template: ``,
standalone: true,
}]

@@ -17,0 +26,0 @@ }] });

+1
-1

@@ -1,1 +0,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@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-component_outlet',\n template: ``,\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":";;;MAQa,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,2MAFzC,CAAA,CAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA;;4FAED,wCAAwC,EAAA,UAAA,EAAA,CAAA;kBALpD,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,QAAQ,EAAE,CAAA,CAAE;AACb,iBAAA;;;ACPD;;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;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;;;;"}
{
"name": "@libs-ui/components-component-outlet",
"version": "0.2.355-14",
"version": "0.2.355-15",
"peerDependencies": {

@@ -5,0 +5,0 @@ "@angular/common": ">=18.0.0",

+263
-2

@@ -1,3 +0,264 @@

# inputs-component-outlet
# @libs-ui/components-component-outlet
This library was generated with [Nx](https://nx.dev).
> ⚠️ **DEPRECATED** - Component này đã cũ và không còn được sử dụng
## ⚠️ 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):**
```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>();
}
// Sử dụng getDataComponentOutlet để map data
configTemplateText: signal({
getComponentOutlet: () => of(CustomComponent),
getDataComponentOutlet: (item: any) => ({ data: item }), // Map to component inputs
});
```
---
## Giới thiệu (Legacy Documentation)
`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.
### Tính năng
- ✅ 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
## Khi nào sử dụng
- 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.
⚠️ **Empty Template**: Component có template rỗng, các component con phải override template.
⚠️ **Required Input**: Input `item` là required và được chuẩn hóa ở base component.
⚠️ **Component Outlet Pattern**: Sử dụng với Angular Component Outlet trong Table/List để render dynamic components.
## Cài đặt
```bash
npm install @libs-ui/components-component-outlet
```
## Sử dụng cơ bản
### 1. Tạo Custom Component (Extend Base)
```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
// Custom component EXTENDS base component
@Component({
selector: 'app-custom-list-item',
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>
`,
})
export class CustomListItemComponent extends LibsUiComponentsComponentOutletComponent {
// Inherit input 'item' từ base component
// Không cần khai báo lại input
}
```
### 2. Sử dụng trong List Component
```typescript
import { Component, signal } from '@angular/core';
import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
import { of } from 'rxjs';
@Component({
selector: 'app-list-example',
standalone: true,
imports: [LibsUiComponentsListComponent],
template: `
<libs_ui-components-list
[config]="listConfig()"
(outSelectedKey)="onItemSelected($event)" />
`,
})
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);
}
}
```
## API
### Inputs
| Property | Type | Default | Description |
| -------- | ------------- | ---------- | ---------------------------------------------------- |
| `[item]` | `TYPE_OBJECT` | `required` | Data object được pass vào component (required input) |
### Outputs
Component này không có outputs.
## Interfaces
### TYPE_COMPONENT_OUTLET_DATA
```typescript
import { WritableSignal } from '@angular/core';
import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
export type TYPE_COMPONENT_OUTLET_DATA = WritableSignal<TYPE_OBJECT>;
```
Type alias cho WritableSignal chứa TYPE_OBJECT, sử dụng cho reactive data binding.
## Ví dụ nâng cao
### Multiple Custom Components
```typescript
import { Component } from '@angular/core';
import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
// Status Cell Component
@Component({
selector: 'app-status-cell',
standalone: true,
template: `
<span [class]="getStatusClass()">
{{ item().status }}
</span>
`,
})
export class StatusCellComponent extends LibsUiComponentsComponentOutletComponent {
getStatusClass(): string {
return this.item().status === 'active' ? 'text-green-600' : 'text-gray-400';
}
}
// Action Cell Component
@Component({
selector: 'app-action-cell',
standalone: true,
template: `
<button (click)="handleAction()">Action for {{ item().name }}</button>
`,
})
export class ActionCellComponent extends LibsUiComponentsComponentOutletComponent {
handleAction(): void {
console.log('Action for:', this.item());
}
}
// Badge Cell Component
@Component({
selector: 'app-badge-cell',
standalone: true,
template: `
<span class="badge">
{{ item().count || 0 }}
</span>
`,
})
export class BadgeCellComponent extends LibsUiComponentsComponentOutletComponent {
// Tất cả đều inherit input 'item' từ base component
}
```
## Pattern Benefits
### 1. **Consistency**
Tất cả custom components đều có cùng input interface `[item]`, đảm bảo consistency across codebase.
### 2. **Type Safety**
Sử dụng `TYPE_OBJECT` từ `@libs-ui/interfaces-types` đảm bảo type safety và flexibility.
### 3. **Reusability**
Base component có thể được extend bởi nhiều custom components khác nhau.
### 4. **Component Outlet Integration**
Hoạt động seamlessly với Angular Component Outlet trong Table/List components.
## Dependencies
- `@angular/core` >= 18.0.0
- `@libs-ui/interfaces-types`
## Demo
Xem demo tại: [http://localhost:4500/component-outlet](http://localhost:4500/component-outlet)
## License
MIT