@libs-ui/pipes-call-function-in-template 0.2.356-9 → 0.2.357-1
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,28 +1,31 @@
|
|
|
1
1
|
# @libs-ui/pipes-call-function-in-template
|
|
2
2
|
|
|
3
|
-
>
|
|
4
|
-
>
|
|
5
|
-
> Pipe đa năng giúp gọi function xử lý logic ngay trong template, hỗ trợ truyền tham số và xử lý kết quả Async (Observable).
|
|
3
|
+
> Pipe đa năng giúp gọi function xử lý logic ngay trong Angular template, hỗ trợ truyền tham số và trả về Observable (async).
|
|
6
4
|
|
|
7
5
|
## Giới thiệu
|
|
8
6
|
|
|
9
|
-
`LibsUiPipesCallFunctionInTemplatePipe`
|
|
7
|
+
`LibsUiPipesCallFunctionInTemplatePipe` cho phép gọi một arrow function tùy ý từ component ngay bên trong template HTML của Angular. Thay vì tạo nhiều Pipe riêng biệt cho từng nghiệp vụ, pipe này đóng vai trò là "bridge" truyền `value`, `item`, `otherData` vào function, nhận lại `Observable<T>` và kết hợp với `async` pipe để hiển thị kết quả.
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
Pipe tích hợp sẵn logic chuẩn hóa giá trị đầu ra: tự động xử lý `null`, `undefined`, chuỗi rỗng, số `0` và non-primitive (object, mảng) — không cần viết thêm guard trong function.
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
- ✅
|
|
16
|
-
- ✅
|
|
17
|
-
- ✅
|
|
18
|
-
- ✅
|
|
11
|
+
## Tính năng
|
|
12
|
+
|
|
13
|
+
- ✅ Gọi bất kỳ arrow function nào trực tiếp trong template mà không cần tạo Pipe riêng
|
|
14
|
+
- ✅ Hỗ trợ truyền 2 tham số phụ: `item` và `otherData`
|
|
15
|
+
- ✅ Trả về `Observable<T>` — kết hợp với `async` pipe hoặc `@if (...; as val)`
|
|
16
|
+
- ✅ Tích hợp `switchMap` — tự hủy Observable cũ khi giá trị đầu vào thay đổi
|
|
17
|
+
- ✅ Tự động chuẩn hóa giá trị rỗng: `null` / `undefined` / `''` / `NaN` → `'__'` (mặc định)
|
|
18
|
+
- ✅ Tùy chỉnh giá trị mặc định cho `0` và empty qua tham số `defaultValueEmpty`
|
|
19
|
+
- ✅ Non-primitive (object, mảng, Date) được giữ nguyên reference
|
|
20
|
+
- ✅ Boolean được trả về nguyên dạng `boolean`, không bị stringify
|
|
21
|
+
- ✅ Standalone pipe, Angular 16+
|
|
19
22
|
|
|
20
23
|
## Khi nào sử dụng
|
|
21
24
|
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
25
|
+
- Cần xử lý/biến đổi dữ liệu phức tạp để hiển thị nhưng không muốn tạo riêng một Pipe chỉ dùng 1 lần
|
|
26
|
+
- Cần truyền thêm ngữ cảnh (`item`, `otherData`) vào hàm xử lý — ví dụ: tính tổng tiền từ giá × số lượng − giảm giá
|
|
27
|
+
- Logic transform có thể tái sử dụng giữa nhiều hàng trong `@for` hoặc nhiều chỗ trong cùng component
|
|
28
|
+
- Cần gọi một hàm async (mock API, lookup map) và hiển thị kết quả trong template
|
|
26
29
|
|
|
27
30
|
## Cài đặt
|
|
28
31
|
|
|
@@ -40,117 +43,268 @@ import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-funct
|
|
|
40
43
|
imports: [LibsUiPipesCallFunctionInTemplatePipe],
|
|
41
44
|
// ...
|
|
42
45
|
})
|
|
46
|
+
export class MyComponent {}
|
|
43
47
|
```
|
|
44
48
|
|
|
45
|
-
##
|
|
49
|
+
## Ví dụ sử dụng
|
|
46
50
|
|
|
47
|
-
### 1. Transform
|
|
51
|
+
### 1. Transform chuỗi đơn giản
|
|
48
52
|
|
|
49
|
-
```
|
|
50
|
-
{
|
|
53
|
+
```typescript
|
|
54
|
+
import { Component } from '@angular/core';
|
|
55
|
+
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
|
|
56
|
+
import { Observable, of } from 'rxjs';
|
|
57
|
+
import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
58
|
+
|
|
59
|
+
@Component({
|
|
60
|
+
standalone: true,
|
|
61
|
+
imports: [LibsUiPipesCallFunctionInTemplatePipe],
|
|
62
|
+
template: `
|
|
63
|
+
<span>{{ 'hello world' | LibsUiPipesCallFunctionInTemplatePipe : transformUppercase | async }}</span>
|
|
64
|
+
`,
|
|
65
|
+
})
|
|
66
|
+
export class MyComponent {
|
|
67
|
+
transformUppercase: TYPE_FUNCTION<string> = (data: { value: string }): Observable<string> => {
|
|
68
|
+
return of((data.value || '').toUpperCase());
|
|
69
|
+
};
|
|
70
|
+
}
|
|
51
71
|
```
|
|
52
72
|
|
|
73
|
+
Kết quả hiển thị: `HELLO WORLD`
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
### 2. Truyền tham số phụ `item` và `otherData`
|
|
78
|
+
|
|
53
79
|
```typescript
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
};
|
|
80
|
+
import { Component } from '@angular/core';
|
|
81
|
+
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
|
|
82
|
+
import { Observable, of } from 'rxjs';
|
|
83
|
+
import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
84
|
+
|
|
85
|
+
@Component({
|
|
86
|
+
standalone: true,
|
|
87
|
+
imports: [LibsUiPipesCallFunctionInTemplatePipe],
|
|
88
|
+
template: `
|
|
89
|
+
<!-- value=100, item=5 (số lượng), otherData=20 (giảm giá) -->
|
|
90
|
+
<span>{{ 100 | LibsUiPipesCallFunctionInTemplatePipe : calculateTotal : 5 : 20 | async }}</span>
|
|
91
|
+
`,
|
|
92
|
+
})
|
|
93
|
+
export class MyComponent {
|
|
94
|
+
calculateTotal: TYPE_FUNCTION<string> = (data: {
|
|
95
|
+
value: number;
|
|
96
|
+
item?: number;
|
|
97
|
+
otherData?: number;
|
|
98
|
+
}): Observable<string> => {
|
|
99
|
+
const qty = data.item || 0;
|
|
100
|
+
const discount = data.otherData || 0;
|
|
101
|
+
const total = data.value * qty - discount;
|
|
102
|
+
return of(`${total.toFixed(0)} đ`);
|
|
103
|
+
};
|
|
104
|
+
}
|
|
57
105
|
```
|
|
58
106
|
|
|
59
|
-
|
|
107
|
+
Kết quả hiển thị: `480 đ` (100 × 5 − 20)
|
|
60
108
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
109
|
+
---
|
|
110
|
+
|
|
111
|
+
### 3. Dùng trong `@for` để render từng hàng
|
|
64
112
|
|
|
65
113
|
```typescript
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
};
|
|
114
|
+
import { Component, signal } from '@angular/core';
|
|
115
|
+
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
|
|
116
|
+
import { Observable, of } from 'rxjs';
|
|
117
|
+
import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
118
|
+
|
|
119
|
+
type T_product = { id: string; name: string; status: string };
|
|
120
|
+
|
|
121
|
+
@Component({
|
|
122
|
+
standalone: true,
|
|
123
|
+
imports: [LibsUiPipesCallFunctionInTemplatePipe],
|
|
124
|
+
template: `
|
|
125
|
+
@for (product of products(); track product.id) {
|
|
126
|
+
<div>
|
|
127
|
+
{{ product.name }}
|
|
128
|
+
— {{ product.status | LibsUiPipesCallFunctionInTemplatePipe : formatStatus | async }}
|
|
129
|
+
</div>
|
|
130
|
+
}
|
|
131
|
+
`,
|
|
132
|
+
})
|
|
133
|
+
export class MyComponent {
|
|
134
|
+
protected products = signal<T_product[]>([
|
|
135
|
+
{ id: '1', name: 'Sản phẩm A', status: 'active' },
|
|
136
|
+
{ id: '2', name: 'Sản phẩm B', status: 'inactive' },
|
|
137
|
+
]);
|
|
138
|
+
|
|
139
|
+
formatStatus: TYPE_FUNCTION<string> = (data: { value: string }): Observable<string> => {
|
|
140
|
+
const map: Record<string, string> = {
|
|
141
|
+
active: 'Đang kinh doanh',
|
|
142
|
+
inactive: 'Ngừng kinh doanh',
|
|
143
|
+
};
|
|
144
|
+
return of(map[data.value] ?? data.value);
|
|
145
|
+
};
|
|
146
|
+
}
|
|
72
147
|
```
|
|
73
148
|
|
|
74
|
-
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
### 4. Tùy chỉnh giá trị mặc định cho `null` và `0`
|
|
75
152
|
|
|
76
153
|
```html
|
|
77
|
-
<!--
|
|
78
|
-
{{ null | LibsUiPipesCallFunctionInTemplatePipe : undefined : undefined : undefined : { valueIsEmpty: '
|
|
154
|
+
<!-- null → 'Chưa có dữ liệu' thay vì '__' mặc định -->
|
|
155
|
+
{{ null | LibsUiPipesCallFunctionInTemplatePipe : undefined : undefined : undefined : { valueIsEmpty: 'Chưa có dữ liệu' } | async }}
|
|
156
|
+
|
|
157
|
+
<!-- 0 → 'Miễn phí' thay vì '0' mặc định -->
|
|
158
|
+
{{ 0 | LibsUiPipesCallFunctionInTemplatePipe : undefined : undefined : undefined : { valueIs0: 'Miễn phí' } | async }}
|
|
79
159
|
|
|
80
|
-
<!--
|
|
81
|
-
{{
|
|
160
|
+
<!-- Không cần function, chỉ cần normalize giá trị hiển thị -->
|
|
161
|
+
{{ price() | LibsUiPipesCallFunctionInTemplatePipe : undefined : undefined : undefined : { valueIs0: 'Miễn phí', valueIsEmpty: 'Chưa cập nhật' } | async }}
|
|
82
162
|
```
|
|
83
163
|
|
|
84
|
-
|
|
164
|
+
---
|
|
85
165
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
} @
|
|
90
|
-
|
|
166
|
+
### 5. Gọi hàm async (mock API, lookup bất đồng bộ)
|
|
167
|
+
|
|
168
|
+
```typescript
|
|
169
|
+
import { Component } from '@angular/core';
|
|
170
|
+
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
|
|
171
|
+
import { Observable, of, delay } from 'rxjs';
|
|
172
|
+
import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
173
|
+
|
|
174
|
+
@Component({
|
|
175
|
+
standalone: true,
|
|
176
|
+
imports: [LibsUiPipesCallFunctionInTemplatePipe],
|
|
177
|
+
template: `
|
|
178
|
+
@if ('active' | LibsUiPipesCallFunctionInTemplatePipe : fetchStatusLabel | async; as label) {
|
|
179
|
+
<span class="status-badge">{{ label }}</span>
|
|
180
|
+
} @else {
|
|
181
|
+
<span>Đang tải...</span>
|
|
182
|
+
}
|
|
183
|
+
`,
|
|
184
|
+
})
|
|
185
|
+
export class MyComponent {
|
|
186
|
+
fetchStatusLabel: TYPE_FUNCTION<string> = (data: { value: string }): Observable<string> => {
|
|
187
|
+
const statusMap: Record<string, string> = {
|
|
188
|
+
active: 'Đang hoạt động',
|
|
189
|
+
inactive: 'Ngừng hoạt động',
|
|
190
|
+
pending: 'Đang chờ duyệt',
|
|
191
|
+
};
|
|
192
|
+
return of(statusMap[data.value] || 'Không xác định').pipe(delay(500));
|
|
193
|
+
};
|
|
91
194
|
}
|
|
92
195
|
```
|
|
93
196
|
|
|
197
|
+
---
|
|
198
|
+
|
|
199
|
+
### 6. Sử dụng standalone (gọi transform trực tiếp trong TypeScript)
|
|
200
|
+
|
|
94
201
|
```typescript
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
202
|
+
import { TestBed } from '@angular/core/testing';
|
|
203
|
+
import { firstValueFrom, of } from 'rxjs';
|
|
204
|
+
import { LibsUiPipesCallFunctionInTemplatePipe } from '@libs-ui/pipes-call-function-in-template';
|
|
205
|
+
|
|
206
|
+
const pipe = TestBed.runInInjectionContext(
|
|
207
|
+
() => new LibsUiPipesCallFunctionInTemplatePipe()
|
|
208
|
+
);
|
|
209
|
+
|
|
210
|
+
// Không truyền function — chỉ normalize giá trị
|
|
211
|
+
const result = await firstValueFrom(pipe.transform('hello'));
|
|
212
|
+
// result === 'hello'
|
|
213
|
+
|
|
214
|
+
const empty = await firstValueFrom(pipe.transform(null));
|
|
215
|
+
// empty === '__' (CHARACTER_DATA_EMPTY)
|
|
216
|
+
|
|
217
|
+
// Truyền function transform
|
|
218
|
+
const upper = await firstValueFrom(
|
|
219
|
+
pipe.transform('world', (data) => of(data.value.toUpperCase()))
|
|
220
|
+
);
|
|
221
|
+
// upper === 'WORLD'
|
|
103
222
|
```
|
|
104
223
|
|
|
105
|
-
##
|
|
224
|
+
## Transform
|
|
106
225
|
|
|
107
|
-
|
|
226
|
+
| Tham số | Type | Bắt buộc | Default | Mô tả |
|
|
227
|
+
|---|---|---|---|---|
|
|
228
|
+
| `value` | `any` | ✅ | — | Giá trị đầu vào cần xử lý hoặc hiển thị |
|
|
229
|
+
| `functionCall` | `TYPE_FUNCTION` | ❌ | `undefined` | Arrow function nhận `{ value, item, otherData }` và trả về `Observable<T>`. Nếu không truyền, pipe chỉ chuẩn hóa `value` |
|
|
230
|
+
| `item` | `any` | ❌ | `undefined` | Tham số phụ thứ nhất — ví dụ: số lượng, row index, config object |
|
|
231
|
+
| `otherData` | `any` | ❌ | `undefined` | Tham số phụ thứ hai — ví dụ: giảm giá, currency, extra config |
|
|
232
|
+
| `defaultValueEmpty` | `{ valueIs0?: any; valueIsEmpty?: any }` | ❌ | `undefined` | Ghi đè giá trị mặc định khi output là `0` hoặc falsy/null/undefined |
|
|
108
233
|
|
|
109
|
-
|
|
234
|
+
**Cú pháp trong template:**
|
|
110
235
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
|
236
|
+
```html
|
|
237
|
+
{{ value | LibsUiPipesCallFunctionInTemplatePipe : functionCall : item : otherData : defaultValueEmpty | async }}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
**Kết quả trả về — quy tắc chuẩn hóa:**
|
|
241
|
+
|
|
242
|
+
| Giá trị output | Kết quả |
|
|
243
|
+
|---|---|
|
|
244
|
+
| `null` / `undefined` / `''` / `NaN` | `defaultValueEmpty.valueIsEmpty` nếu có, hoặc `'__'` |
|
|
245
|
+
| `0` (số nguyên, float) | `defaultValueEmpty.valueIs0` nếu có, hoặc `'0'` |
|
|
246
|
+
| Số khác `0` | Chuỗi stringify: `'42'`, `'-1'`, `'3.14'` |
|
|
247
|
+
| `boolean` | Giữ nguyên `true` / `false` (không stringify) |
|
|
248
|
+
| Non-primitive (object, mảng, Date, function) | Giữ nguyên reference |
|
|
118
249
|
|
|
119
250
|
## Types & Interfaces
|
|
120
251
|
|
|
121
|
-
|
|
252
|
+
```typescript
|
|
253
|
+
import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
254
|
+
```
|
|
122
255
|
|
|
123
256
|
```typescript
|
|
257
|
+
/**
|
|
258
|
+
* Type cho function xử lý logic trong pipe.
|
|
259
|
+
* Nhận object chứa value, item, otherData — trả về Observable<T>.
|
|
260
|
+
*/
|
|
124
261
|
export type TYPE_FUNCTION<T = any> = (
|
|
125
262
|
data: { value: any; item?: any; otherData?: any }
|
|
126
263
|
) => Observable<T>;
|
|
127
264
|
```
|
|
128
265
|
|
|
129
|
-
**
|
|
266
|
+
**Ví dụ khai báo có type cụ thể:**
|
|
267
|
+
|
|
268
|
+
```typescript
|
|
269
|
+
import { Observable, of } from 'rxjs';
|
|
270
|
+
import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
271
|
+
|
|
272
|
+
// Typed rõ ràng — T = string
|
|
273
|
+
formatCurrency: TYPE_FUNCTION<string> = (data: {
|
|
274
|
+
value: number;
|
|
275
|
+
item?: string; // currency code
|
|
276
|
+
}): Observable<string> => {
|
|
277
|
+
const currency = data.item ?? 'VND';
|
|
278
|
+
return of(`${data.value.toLocaleString()} ${currency}`);
|
|
279
|
+
};
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
## Lưu ý quan trọng
|
|
130
283
|
|
|
131
|
-
|
|
284
|
+
⚠️ **Bắt buộc dùng `async` pipe**: Pipe này luôn trả về `Observable`. Bắt buộc kết hợp với `| async` trong template hoặc dùng `@if (... | async; as val)` để unwrap giá trị. Thiếu `async` sẽ hiển thị object Observable thay vì giá trị thực.
|
|
132
285
|
|
|
133
|
-
|
|
134
|
-
>
|
|
135
|
-
> - **Yêu cầu `async` pipe**: Pipe này trả về một `Observable`. Bạn **BẮT BUỘC** phải sử dụng thêm `async` pipe trong template để hiển thị giá trị cuối cùng (ví dụ: `value | LibsUiPipesCallFunctionInTemplatePipe : fn | async`).
|
|
136
|
-
> - **Cơ chế SwitchMap**: Pipe sử dụng `switchMap` bên trong, do đó hàm xử lý của bạn phải trả về một Observable hoặc Promise.
|
|
137
|
-
> - **Xử lý giá trị rỗng**: Pipe tích hợp sẵn logic để handle `null`, `undefined` hoặc `0`. Bạn có thể tùy chỉnh thông qua tham số cuối cùng.
|
|
138
|
-
> - **Tham số truyền vào**: Hàm xử lý (`functionCall`) sẽ nhận một object duy nhất chứa `{ value, item, otherData }` để thuận tiện cho việc giải nén (destructuring).
|
|
286
|
+
⚠️ **Function phải là arrow function (class property)**: `functionCall` phải là class property kiểu arrow function, không được là method thông thường. Method thông thường sẽ mất `this` context khi được truyền qua pipe.
|
|
139
287
|
|
|
140
|
-
|
|
288
|
+
```typescript
|
|
289
|
+
// ✅ ĐÚNG — class property arrow function
|
|
290
|
+
formatLabel: TYPE_FUNCTION<string> = (data) => of(this.translate(data.value));
|
|
141
291
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
292
|
+
// ❌ SAI — method thông thường, mất `this`
|
|
293
|
+
formatLabel(data: { value: string }): Observable<string> {
|
|
294
|
+
return of(this.translate(data.value)); // this là undefined khi pipe gọi
|
|
295
|
+
}
|
|
296
|
+
```
|
|
145
297
|
|
|
146
|
-
|
|
298
|
+
⚠️ **SwitchMap hủy Observable cũ**: Pipe dùng `switchMap` nội bộ. Khi `value` thay đổi, Observable từ lần gọi trước bị hủy ngay lập tức. Đây là hành vi đúng cho hầu hết use case, nhưng cần chú ý nếu function trả về Observable thực hiện side-effect.
|
|
147
299
|
|
|
148
|
-
|
|
300
|
+
⚠️ **`bigint 0n` không kích hoạt `valueIs0`**: `defaultValueEmpty.valueIs0` chỉ áp dụng cho `value === 0` (số JS tiêu chuẩn). `0n` (BigInt) được xử lý như falsy primitive và rơi vào nhánh `valueIsEmpty`.
|
|
149
301
|
|
|
150
|
-
|
|
302
|
+
⚠️ **Symbol gây TypeError**: Truyền `Symbol` vào pipe (dù là value hay kết quả trả về từ function) sẽ ném `TypeError` khi pipe cố stringify. Không dùng `Symbol` với pipe này.
|
|
151
303
|
|
|
152
|
-
|
|
304
|
+
## Demo
|
|
153
305
|
|
|
154
|
-
|
|
306
|
+
```bash
|
|
307
|
+
npx nx serve core-ui
|
|
308
|
+
```
|
|
155
309
|
|
|
156
|
-
|
|
310
|
+
Truy cập: [http://localhost:4500/pipes/call-function-in-template](http://localhost:4500/pipes/call-function-in-template)
|
|
@@ -3,7 +3,7 @@ import { TYPE_FUNCTION } from '@libs-ui/interfaces-types';
|
|
|
3
3
|
import { Observable } from 'rxjs';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class LibsUiPipesCallFunctionInTemplatePipe implements PipeTransform {
|
|
6
|
-
private destroyRef;
|
|
6
|
+
private readonly destroyRef;
|
|
7
7
|
transform(value: any, functionCall?: TYPE_FUNCTION, item?: any, otherData?: any, defaultValueEmpty?: {
|
|
8
8
|
valueIs0?: any;
|
|
9
9
|
valueIsEmpty?: any;
|
|
@@ -34,4 +34,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
34
34
|
standalone: true,
|
|
35
35
|
}]
|
|
36
36
|
}] });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FsbC1mdW5jdGlvbi1pbi10ZW1wbGF0ZS5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9waXBlcy9jYWxsLWZ1bmN0aW9uLWluLXRlbXBsYXRlL3NyYy9jYWxsLWZ1bmN0aW9uLWluLXRlbXBsYXRlLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsdURBQXVEO0FBQ3ZELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFDeEUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFFaEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLGVBQWUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxHQUFHLEVBQWMsRUFBRSxFQUFFLFNBQVMsRUFBRSxNQUFNLE1BQU0sQ0FBQzs7QUFNdEQsTUFBTSxPQUFPLHFDQUFxQztJQUMvQixVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ2pELFNBQVMsQ0FBQyxLQUFVLEVBQUUsWUFBNEIsRUFBRSxJQUFVLEVBQUUsU0FBZSxFQUFFLGlCQUEwRDtRQUN6SSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDbEIsT0FBTyxFQUFFLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLEVBQUUsaUJBQWlCLENBQUMsQ0FBQyxDQUFDO1FBQzNELENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQ3hDLFNBQVMsQ0FBQyxZQUFZLENBQUMsRUFDdkIsR0FBRyxDQUFDLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksRUFBRSxpQkFBaUIsQ0FBQyxDQUFDLEVBQzNELGtCQUFrQixDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FDcEMsQ0FBQztJQUNKLENBQUM7SUFFTyxjQUFjLENBQUMsS0FBVSxFQUFFLGlCQUE2RDtRQUM5RixJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssQ0FBQyxJQUFJLE9BQU8sS0FBSyxLQUFLLFNBQVMsRUFBRSxDQUFDO1lBQzFELE9BQU8sS0FBSyxJQUFJLGlCQUFpQixFQUFFLFlBQVksSUFBSSxvQkFBb0IsQ0FBQztRQUMxRSxDQUFDO1FBRUQsSUFBSSxLQUFLLEVBQUUsQ0FBQztZQUNWLE9BQU8sR0FBRyxLQUFLLEVBQUUsQ0FBQztRQUNwQixDQUFDO1FBRUQsSUFBSSxLQUFLLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDaEIsT0FBTyxpQkFBaUIsRUFBRSxRQUFRLElBQUksR0FBRyxDQUFDO1FBQzVDLENBQUM7UUFFRCxPQUFPLGlCQUFpQixFQUFFLFlBQVksSUFBSSxvQkFBb0IsQ0FBQztJQUNqRSxDQUFDO3dHQTNCVSxxQ0FBcUM7c0dBQXJDLHFDQUFxQzs7NEZBQXJDLHFDQUFxQztrQkFKakQsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsdUNBQXVDO29CQUM3QyxVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55ICovXG5pbXBvcnQgeyBEZXN0cm95UmVmLCBpbmplY3QsIFBpcGUsIFBpcGVUcmFuc2Zvcm0gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7IFRZUEVfRlVOQ1RJT04gfSBmcm9tICdAbGlicy11aS9pbnRlcmZhY2VzLXR5cGVzJztcbmltcG9ydCB7IENIQVJBQ1RFUl9EQVRBX0VNUFRZLCBpc1ByaW1pdGl2ZVR5cGUgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBtYXAsIE9ic2VydmFibGUsIG9mLCBzd2l0Y2hNYXAgfSBmcm9tICdyeGpzJztcblxuQFBpcGUoe1xuICBuYW1lOiAnTGlic1VpUGlwZXNDYWxsRnVuY3Rpb25JblRlbXBsYXRlUGlwZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaVBpcGVzQ2FsbEZ1bmN0aW9uSW5UZW1wbGF0ZVBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcbiAgcHJpdmF0ZSByZWFkb25seSBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuICB0cmFuc2Zvcm0odmFsdWU6IGFueSwgZnVuY3Rpb25DYWxsPzogVFlQRV9GVU5DVElPTiwgaXRlbT86IGFueSwgb3RoZXJEYXRhPzogYW55LCBkZWZhdWx0VmFsdWVFbXB0eT86IHsgdmFsdWVJczA/OiBhbnk7IHZhbHVlSXNFbXB0eT86IGFueSB9KTogT2JzZXJ2YWJsZTxhbnk+IHtcbiAgICBpZiAoIWZ1bmN0aW9uQ2FsbCkge1xuICAgICAgcmV0dXJuIG9mKHRoaXMuZ2V0VmFsdWVPZlR5cGUodmFsdWUsIGRlZmF1bHRWYWx1ZUVtcHR5KSk7XG4gICAgfVxuICAgIHJldHVybiBvZih7IHZhbHVlLCBpdGVtLCBvdGhlckRhdGEgfSkucGlwZShcbiAgICAgIHN3aXRjaE1hcChmdW5jdGlvbkNhbGwpLFxuICAgICAgbWFwKChkYXRhKSA9PiB0aGlzLmdldFZhbHVlT2ZUeXBlKGRhdGEsIGRlZmF1bHRWYWx1ZUVtcHR5KSksXG4gICAgICB0YWtlVW50aWxEZXN0cm95ZWQodGhpcy5kZXN0cm95UmVmKVxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIGdldFZhbHVlT2ZUeXBlKHZhbHVlOiBhbnksIGRlZmF1bHRWYWx1ZUVtcHR5PzogeyB2YWx1ZUlzMD86IGFueTsgdmFsdWVJc0VtcHR5Pzogc3RyaW5nIH0pIHtcbiAgICBpZiAoIWlzUHJpbWl0aXZlVHlwZSh2YWx1ZSkgfHwgdHlwZW9mIHZhbHVlID09PSAnYm9vbGVhbicpIHtcbiAgICAgIHJldHVybiB2YWx1ZSA/PyBkZWZhdWx0VmFsdWVFbXB0eT8udmFsdWVJc0VtcHR5ID8/IENIQVJBQ1RFUl9EQVRBX0VNUFRZO1xuICAgIH1cblxuICAgIGlmICh2YWx1ZSkge1xuICAgICAgcmV0dXJuIGAke3ZhbHVlfWA7XG4gICAgfVxuXG4gICAgaWYgKHZhbHVlID09PSAwKSB7XG4gICAgICByZXR1cm4gZGVmYXVsdFZhbHVlRW1wdHk/LnZhbHVlSXMwID8/ICcwJztcbiAgICB9XG5cbiAgICByZXR1cm4gZGVmYXVsdFZhbHVlRW1wdHk/LnZhbHVlSXNFbXB0eSB8fCBDSEFSQUNURVJfREFUQV9FTVBUWTtcbiAgfVxufVxuIl19
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-pipes-call-function-in-template.mjs","sources":["../../../../../libs-ui/pipes/call-function-in-template/src/call-function-in-template.pipe.ts","../../../../../libs-ui/pipes/call-function-in-template/src/libs-ui-pipes-call-function-in-template.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DestroyRef, inject, Pipe, PipeTransform } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { TYPE_FUNCTION } from '@libs-ui/interfaces-types';\nimport { CHARACTER_DATA_EMPTY, isPrimitiveType } from '@libs-ui/utils';\nimport { map, Observable, of, switchMap } from 'rxjs';\n\n@Pipe({\n name: 'LibsUiPipesCallFunctionInTemplatePipe',\n standalone: true,\n})\nexport class LibsUiPipesCallFunctionInTemplatePipe implements PipeTransform {\n private destroyRef = inject(DestroyRef);\n transform(value: any, functionCall?: TYPE_FUNCTION, item?: any, otherData?: any, defaultValueEmpty?: { valueIs0?: any; valueIsEmpty?: any }): Observable<any> {\n if (!functionCall) {\n return of(this.getValueOfType(value, defaultValueEmpty));\n }\n return of({ value, item, otherData }).pipe(\n switchMap(functionCall),\n map((data) => this.getValueOfType(data, defaultValueEmpty)),\n takeUntilDestroyed(this.destroyRef)\n );\n }\n\n private getValueOfType(value: any, defaultValueEmpty?: { valueIs0?: any; valueIsEmpty?: string }) {\n if (!isPrimitiveType(value) || typeof value === 'boolean') {\n return value ?? defaultValueEmpty?.valueIsEmpty ?? CHARACTER_DATA_EMPTY;\n }\n\n if (value) {\n return `${value}`;\n }\n\n if (value === 0) {\n return defaultValueEmpty?.valueIs0 ?? '0';\n }\n\n return defaultValueEmpty?.valueIsEmpty || CHARACTER_DATA_EMPTY;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;MAWa,qCAAqC,CAAA;
|
|
1
|
+
{"version":3,"file":"libs-ui-pipes-call-function-in-template.mjs","sources":["../../../../../libs-ui/pipes/call-function-in-template/src/call-function-in-template.pipe.ts","../../../../../libs-ui/pipes/call-function-in-template/src/libs-ui-pipes-call-function-in-template.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DestroyRef, inject, Pipe, PipeTransform } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { TYPE_FUNCTION } from '@libs-ui/interfaces-types';\nimport { CHARACTER_DATA_EMPTY, isPrimitiveType } from '@libs-ui/utils';\nimport { map, Observable, of, switchMap } from 'rxjs';\n\n@Pipe({\n name: 'LibsUiPipesCallFunctionInTemplatePipe',\n standalone: true,\n})\nexport class LibsUiPipesCallFunctionInTemplatePipe implements PipeTransform {\n private readonly destroyRef = inject(DestroyRef);\n transform(value: any, functionCall?: TYPE_FUNCTION, item?: any, otherData?: any, defaultValueEmpty?: { valueIs0?: any; valueIsEmpty?: any }): Observable<any> {\n if (!functionCall) {\n return of(this.getValueOfType(value, defaultValueEmpty));\n }\n return of({ value, item, otherData }).pipe(\n switchMap(functionCall),\n map((data) => this.getValueOfType(data, defaultValueEmpty)),\n takeUntilDestroyed(this.destroyRef)\n );\n }\n\n private getValueOfType(value: any, defaultValueEmpty?: { valueIs0?: any; valueIsEmpty?: string }) {\n if (!isPrimitiveType(value) || typeof value === 'boolean') {\n return value ?? defaultValueEmpty?.valueIsEmpty ?? CHARACTER_DATA_EMPTY;\n }\n\n if (value) {\n return `${value}`;\n }\n\n if (value === 0) {\n return defaultValueEmpty?.valueIs0 ?? '0';\n }\n\n return defaultValueEmpty?.valueIsEmpty || CHARACTER_DATA_EMPTY;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAA;MAWa,qCAAqC,CAAA;AAC/B,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACjD,SAAS,CAAC,KAAU,EAAE,YAA4B,EAAE,IAAU,EAAE,SAAe,EAAE,iBAA0D,EAAA;QACzI,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;SAC1D;AACD,QAAA,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,CACxC,SAAS,CAAC,YAAY,CAAC,EACvB,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,EAC3D,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CACpC,CAAC;KACH;IAEO,cAAc,CAAC,KAAU,EAAE,iBAA6D,EAAA;QAC9F,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AACzD,YAAA,OAAO,KAAK,IAAI,iBAAiB,EAAE,YAAY,IAAI,oBAAoB,CAAC;SACzE;QAED,IAAI,KAAK,EAAE;YACT,OAAO,CAAA,EAAG,KAAK,CAAA,CAAE,CAAC;SACnB;AAED,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,YAAA,OAAO,iBAAiB,EAAE,QAAQ,IAAI,GAAG,CAAC;SAC3C;AAED,QAAA,OAAO,iBAAiB,EAAE,YAAY,IAAI,oBAAoB,CAAC;KAChE;wGA3BU,qCAAqC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;sGAArC,qCAAqC,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,uCAAA,EAAA,CAAA,CAAA;;4FAArC,qCAAqC,EAAA,UAAA,EAAA,CAAA;kBAJjD,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,uCAAuC;AAC7C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/pipes-call-function-in-template",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.357-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
-
"rxjs": "~7.8.0"
|
|
6
|
+
"@libs-ui/utils": "0.2.357-1",
|
|
7
|
+
"rxjs": "~7.8.0",
|
|
8
|
+
"@libs-ui/interfaces-types": "0.2.357-1"
|
|
8
9
|
},
|
|
9
10
|
"sideEffects": false,
|
|
10
11
|
"module": "fesm2022/libs-ui-pipes-call-function-in-template.mjs",
|