@libs-ui/components-component-outlet 0.2.355-13 → 0.2.355-15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,3 +1,264 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-component-outlet
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
> ⚠️ **DEPRECATED** - Component này đã cũ và không còn được sử dụng
|
|
4
|
+
|
|
5
|
+
## ⚠️ Deprecation Notice
|
|
6
|
+
|
|
7
|
+
**Component này đã bị deprecated và không nên sử dụng trong code mới.**
|
|
8
|
+
|
|
9
|
+
### Lý do Deprecation
|
|
10
|
+
|
|
11
|
+
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**.
|
|
12
|
+
|
|
13
|
+
### Migration Guide
|
|
14
|
+
|
|
15
|
+
**❌ Cách cũ (Deprecated):**
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
// KHÔNG nên làm như này nữa
|
|
19
|
+
export class CustomComponent extends LibsUiComponentsComponentOutletComponent {
|
|
20
|
+
// Extend base component
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
**✅ Cách mới (Recommended):**
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
// Tạo standalone component với input tùy chỉnh
|
|
28
|
+
@Component({
|
|
29
|
+
selector: 'app-custom-component',
|
|
30
|
+
standalone: true,
|
|
31
|
+
template: `
|
|
32
|
+
<div>{{ data().name }}</div>
|
|
33
|
+
`,
|
|
34
|
+
})
|
|
35
|
+
export class CustomComponent {
|
|
36
|
+
// Input tùy chỉnh theo nhu cầu
|
|
37
|
+
readonly data = input.required<MyCustomType>();
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Sử dụng getDataComponentOutlet để map data
|
|
41
|
+
configTemplateText: signal({
|
|
42
|
+
getComponentOutlet: () => of(CustomComponent),
|
|
43
|
+
getDataComponentOutlet: (item: any) => ({ data: item }), // Map to component inputs
|
|
44
|
+
});
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Giới thiệu (Legacy Documentation)
|
|
50
|
+
|
|
51
|
+
`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.
|
|
52
|
+
|
|
53
|
+
### Tính năng
|
|
54
|
+
|
|
55
|
+
- ✅ Base component với standardized input interface
|
|
56
|
+
- ✅ Required input `[item]` với type `TYPE_OBJECT`
|
|
57
|
+
- ✅ Empty template - components con override template
|
|
58
|
+
- ✅ Sử dụng với Angular Component Outlet
|
|
59
|
+
- ✅ Type safety với TYPE_OBJECT từ @libs-ui/interfaces-types
|
|
60
|
+
- ✅ Standalone Component
|
|
61
|
+
- ✅ Minimal overhead
|
|
62
|
+
|
|
63
|
+
## Khi nào sử dụng
|
|
64
|
+
|
|
65
|
+
- Khi tạo custom cell component cho Table component với component outlet
|
|
66
|
+
- Khi tạo custom item component cho List component với component outlet
|
|
67
|
+
- Khi cần chuẩn hóa input interface cho dynamic components
|
|
68
|
+
- Khi muốn đảm bảo tất cả custom components nhận cùng một data structure
|
|
69
|
+
- Khi extend base component để tạo custom render components
|
|
70
|
+
|
|
71
|
+
## Important Notes
|
|
72
|
+
|
|
73
|
+
⚠️ **Base Component**: Đây là base component, KHÔNG sử dụng trực tiếp. Extend component này để tạo custom components.
|
|
74
|
+
|
|
75
|
+
⚠️ **Empty Template**: Component có template rỗng, các component con phải override template.
|
|
76
|
+
|
|
77
|
+
⚠️ **Required Input**: Input `item` là required và được chuẩn hóa ở base component.
|
|
78
|
+
|
|
79
|
+
⚠️ **Component Outlet Pattern**: Sử dụng với Angular Component Outlet trong Table/List để render dynamic components.
|
|
80
|
+
|
|
81
|
+
## Cài đặt
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
npm install @libs-ui/components-component-outlet
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Sử dụng cơ bản
|
|
88
|
+
|
|
89
|
+
### 1. Tạo Custom Component (Extend Base)
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
import { Component } from '@angular/core';
|
|
93
|
+
import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
|
|
94
|
+
|
|
95
|
+
// Custom component EXTENDS base component
|
|
96
|
+
@Component({
|
|
97
|
+
selector: 'app-custom-list-item',
|
|
98
|
+
standalone: true,
|
|
99
|
+
template: `
|
|
100
|
+
<div class="flex items-center gap-2">
|
|
101
|
+
<span class="font-bold">{{ item().name }}</span>
|
|
102
|
+
<span class="text-xs text-gray-500">ID: {{ item().id }}</span>
|
|
103
|
+
@if (item().status === 'active') {
|
|
104
|
+
<span class="px-2 py-1 bg-green-100 text-green-800 rounded text-xs">Active</span>
|
|
105
|
+
}
|
|
106
|
+
</div>
|
|
107
|
+
`,
|
|
108
|
+
})
|
|
109
|
+
export class CustomListItemComponent extends LibsUiComponentsComponentOutletComponent {
|
|
110
|
+
// Inherit input 'item' từ base component
|
|
111
|
+
// Không cần khai báo lại input
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
### 2. Sử dụng trong List Component
|
|
116
|
+
|
|
117
|
+
```typescript
|
|
118
|
+
import { Component, signal } from '@angular/core';
|
|
119
|
+
import { LibsUiComponentsListComponent } from '@libs-ui/components-list';
|
|
120
|
+
import { of } from 'rxjs';
|
|
121
|
+
|
|
122
|
+
@Component({
|
|
123
|
+
selector: 'app-list-example',
|
|
124
|
+
standalone: true,
|
|
125
|
+
imports: [LibsUiComponentsListComponent],
|
|
126
|
+
template: `
|
|
127
|
+
<libs_ui-components-list
|
|
128
|
+
[config]="listConfig()"
|
|
129
|
+
(outSelectedKey)="onItemSelected($event)" />
|
|
130
|
+
`,
|
|
131
|
+
})
|
|
132
|
+
export class ListExampleComponent {
|
|
133
|
+
readonly listConfig = signal({
|
|
134
|
+
type: 'text',
|
|
135
|
+
httpRequestData: signal({
|
|
136
|
+
objectInstance: returnListObject(myData),
|
|
137
|
+
argumentsValue: [],
|
|
138
|
+
functionName: 'list',
|
|
139
|
+
}),
|
|
140
|
+
configTemplateText: signal({
|
|
141
|
+
fieldKey: 'id',
|
|
142
|
+
|
|
143
|
+
// Trả về custom component class
|
|
144
|
+
getComponentOutlet: () => of(CustomListItemComponent),
|
|
145
|
+
|
|
146
|
+
// Trả về data cho component
|
|
147
|
+
getDataComponentOutlet: (item: any) => item,
|
|
148
|
+
}),
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
onItemSelected(event: any) {
|
|
152
|
+
console.log('Selected:', event);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## API
|
|
158
|
+
|
|
159
|
+
### Inputs
|
|
160
|
+
|
|
161
|
+
| Property | Type | Default | Description |
|
|
162
|
+
| -------- | ------------- | ---------- | ---------------------------------------------------- |
|
|
163
|
+
| `[item]` | `TYPE_OBJECT` | `required` | Data object được pass vào component (required input) |
|
|
164
|
+
|
|
165
|
+
### Outputs
|
|
166
|
+
|
|
167
|
+
Component này không có outputs.
|
|
168
|
+
|
|
169
|
+
## Interfaces
|
|
170
|
+
|
|
171
|
+
### TYPE_COMPONENT_OUTLET_DATA
|
|
172
|
+
|
|
173
|
+
```typescript
|
|
174
|
+
import { WritableSignal } from '@angular/core';
|
|
175
|
+
import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
|
|
176
|
+
|
|
177
|
+
export type TYPE_COMPONENT_OUTLET_DATA = WritableSignal<TYPE_OBJECT>;
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
Type alias cho WritableSignal chứa TYPE_OBJECT, sử dụng cho reactive data binding.
|
|
181
|
+
|
|
182
|
+
## Ví dụ nâng cao
|
|
183
|
+
|
|
184
|
+
### Multiple Custom Components
|
|
185
|
+
|
|
186
|
+
```typescript
|
|
187
|
+
import { Component } from '@angular/core';
|
|
188
|
+
import { LibsUiComponentsComponentOutletComponent } from '@libs-ui/components-component-outlet';
|
|
189
|
+
|
|
190
|
+
// Status Cell Component
|
|
191
|
+
@Component({
|
|
192
|
+
selector: 'app-status-cell',
|
|
193
|
+
standalone: true,
|
|
194
|
+
template: `
|
|
195
|
+
<span [class]="getStatusClass()">
|
|
196
|
+
{{ item().status }}
|
|
197
|
+
</span>
|
|
198
|
+
`,
|
|
199
|
+
})
|
|
200
|
+
export class StatusCellComponent extends LibsUiComponentsComponentOutletComponent {
|
|
201
|
+
getStatusClass(): string {
|
|
202
|
+
return this.item().status === 'active' ? 'text-green-600' : 'text-gray-400';
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
// Action Cell Component
|
|
207
|
+
@Component({
|
|
208
|
+
selector: 'app-action-cell',
|
|
209
|
+
standalone: true,
|
|
210
|
+
template: `
|
|
211
|
+
<button (click)="handleAction()">Action for {{ item().name }}</button>
|
|
212
|
+
`,
|
|
213
|
+
})
|
|
214
|
+
export class ActionCellComponent extends LibsUiComponentsComponentOutletComponent {
|
|
215
|
+
handleAction(): void {
|
|
216
|
+
console.log('Action for:', this.item());
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// Badge Cell Component
|
|
221
|
+
@Component({
|
|
222
|
+
selector: 'app-badge-cell',
|
|
223
|
+
standalone: true,
|
|
224
|
+
template: `
|
|
225
|
+
<span class="badge">
|
|
226
|
+
{{ item().count || 0 }}
|
|
227
|
+
</span>
|
|
228
|
+
`,
|
|
229
|
+
})
|
|
230
|
+
export class BadgeCellComponent extends LibsUiComponentsComponentOutletComponent {
|
|
231
|
+
// Tất cả đều inherit input 'item' từ base component
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
## Pattern Benefits
|
|
236
|
+
|
|
237
|
+
### 1. **Consistency**
|
|
238
|
+
|
|
239
|
+
Tất cả custom components đều có cùng input interface `[item]`, đảm bảo consistency across codebase.
|
|
240
|
+
|
|
241
|
+
### 2. **Type Safety**
|
|
242
|
+
|
|
243
|
+
Sử dụng `TYPE_OBJECT` từ `@libs-ui/interfaces-types` đảm bảo type safety và flexibility.
|
|
244
|
+
|
|
245
|
+
### 3. **Reusability**
|
|
246
|
+
|
|
247
|
+
Base component có thể được extend bởi nhiều custom components khác nhau.
|
|
248
|
+
|
|
249
|
+
### 4. **Component Outlet Integration**
|
|
250
|
+
|
|
251
|
+
Hoạt động seamlessly với Angular Component Outlet trong Table/List components.
|
|
252
|
+
|
|
253
|
+
## Dependencies
|
|
254
|
+
|
|
255
|
+
- `@angular/core` >= 18.0.0
|
|
256
|
+
- `@libs-ui/interfaces-types`
|
|
257
|
+
|
|
258
|
+
## Demo
|
|
259
|
+
|
|
260
|
+
Xem demo tại: [http://localhost:4500/component-outlet](http://localhost:4500/component-outlet)
|
|
261
|
+
|
|
262
|
+
## License
|
|
263
|
+
|
|
264
|
+
MIT
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import { TYPE_OBJECT } from '@libs-ui/interfaces-types';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Component này đã cũ và không còn được sử dụng.
|
|
5
|
+
*
|
|
6
|
+
* Lý do: Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào,
|
|
7
|
+
* không cần extend base component này nữa.
|
|
8
|
+
*
|
|
9
|
+
* Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.
|
|
10
|
+
*/
|
|
3
11
|
export declare class LibsUiComponentsComponentOutletComponent {
|
|
4
12
|
readonly item: import("@angular/core").InputSignal<TYPE_OBJECT>;
|
|
5
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsComponentOutletComponent, never>;
|
|
6
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsComponentOutletComponent, "libs_ui-components-component_outlet", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never,
|
|
14
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsComponentOutletComponent, "libs_ui-components-component_outlet", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
7
15
|
}
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { Component, input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Component này đã cũ và không còn được sử dụng.
|
|
5
|
+
*
|
|
6
|
+
* Lý do: Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào,
|
|
7
|
+
* không cần extend base component này nữa.
|
|
8
|
+
*
|
|
9
|
+
* Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.
|
|
10
|
+
*/
|
|
3
11
|
export class LibsUiComponentsComponentOutletComponent {
|
|
4
12
|
item = input.required();
|
|
5
13
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
-
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 });
|
|
14
|
+
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 });
|
|
7
15
|
}
|
|
8
16
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, decorators: [{
|
|
9
17
|
type: Component,
|
|
@@ -11,6 +19,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
11
19
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
12
20
|
selector: 'libs_ui-components-component_outlet',
|
|
13
21
|
template: ``,
|
|
22
|
+
standalone: true,
|
|
14
23
|
}]
|
|
15
24
|
}] });
|
|
16
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LW91dGxldC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvY29tcG9uZW50LW91dGxldC9zcmMvY29tcG9uZW50LW91dGxldC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBR2pEOzs7Ozs7O0dBT0c7QUFPSCxNQUFNLE9BQU8sd0NBQXdDO0lBQzFDLElBQUksR0FBRyxLQUFLLENBQUMsUUFBUSxFQUFlLENBQUM7d0dBRG5DLHdDQUF3Qzs0RkFBeEMsd0NBQXdDLCtOQUh6QyxFQUFFOzs0RkFHRCx3Q0FBd0M7a0JBTnBELFNBQVM7bUJBQUM7b0JBQ1QsOERBQThEO29CQUM5RCxRQUFRLEVBQUUscUNBQXFDO29CQUMvQyxRQUFRLEVBQUUsRUFBRTtvQkFDWixVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUWVBFX09CSkVDVCB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuXG4vKipcbiAqIEBkZXByZWNhdGVkIENvbXBvbmVudCBuw6B5IMSRw6MgY8WpIHbDoCBraMO0bmcgY8OybiDEkcaw4bujYyBz4butIGThu6VuZy5cbiAqXG4gKiBMw70gZG86IEjDoG0gYGdldERhdGFDb21wb25lbnRPdXRsZXRgIHRyb25nIExpc3QvVGFibGUgY29uZmlnIMSRw6MgaOG7lyB0cuG7oyB0cuG6oyB24buBIGlucHV0IHRoZW8gY29tcG9uZW50IHRydXnhu4FuIHbDoG8sXG4gKiBraMO0bmcgY+G6p24gZXh0ZW5kIGJhc2UgY29tcG9uZW50IG7DoHkgbuG7r2EuXG4gKlxuICogVGhheSB2w6BvIMSRw7MsIHThuqFvIHN0YW5kYWxvbmUgY29tcG9uZW50IHbhu5tpIGlucHV0IHTDuXkgY2jhu4luaCB2w6Agc+G7rSBk4bulbmcgYGdldERhdGFDb21wb25lbnRPdXRsZXRgIMSR4buDIG1hcCBkYXRhLlxuICovXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtY29tcG9uZW50X291dGxldCcsXG4gIHRlbXBsYXRlOiBgYCxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0NvbXBvbmVudE91dGxldENvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGl0ZW0gPSBpbnB1dC5yZXF1aXJlZDxUWVBFX09CSkVDVD4oKTtcbn1cbiJdfQ==
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, Component } from '@angular/core';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Component này đã cũ và không còn được sử dụng.
|
|
6
|
+
*
|
|
7
|
+
* Lý do: Hàm `getDataComponentOutlet` trong List/Table config đã hỗ trợ trả về input theo component truyền vào,
|
|
8
|
+
* không cần extend base component này nữa.
|
|
9
|
+
*
|
|
10
|
+
* Thay vào đó, tạo standalone component với input tùy chỉnh và sử dụng `getDataComponentOutlet` để map data.
|
|
11
|
+
*/
|
|
4
12
|
class LibsUiComponentsComponentOutletComponent {
|
|
5
13
|
item = input.required();
|
|
6
14
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
-
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 });
|
|
15
|
+
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 });
|
|
8
16
|
}
|
|
9
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsComponentOutletComponent, decorators: [{
|
|
10
18
|
type: Component,
|
|
@@ -12,6 +20,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
12
20
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
13
21
|
selector: 'libs_ui-components-component_outlet',
|
|
14
22
|
template: ``,
|
|
23
|
+
standalone: true,
|
|
15
24
|
}]
|
|
16
25
|
}] });
|
|
17
26
|
|
|
@@ -1 +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@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":";;;
|
|
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;;;;"}
|