@libs-ui/components-avatar 0.2.356-42 → 0.2.356-43
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 +179 -112
- package/fesm2022/libs-ui-components-avatar.mjs.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,40 +1,28 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/components-avatar
|
|
2
2
|
|
|
3
|
-
>
|
|
4
|
-
>
|
|
5
|
-
> Component hiển thị avatar (ảnh đại diện) với khả năng fallback sang text/icon khi ảnh lỗi hoặc không có.
|
|
3
|
+
> Component hiển thị avatar (ảnh đại diện) với cơ chế fallback thông minh sang text/icon khi ảnh lỗi hoặc không có.
|
|
6
4
|
|
|
7
5
|
## Giới thiệu
|
|
8
6
|
|
|
9
|
-
`LibsUiComponentsAvatarComponent` là
|
|
7
|
+
`LibsUiComponentsAvatarComponent` là standalone Angular component dùng để hiển thị ảnh đại diện người dùng. Component hỗ trợ nhiều kích thước và hình dạng, tự động fallback sang text với màu nền được generate từ ID khi ảnh không tải được, và tích hợp gallery viewer để xem ảnh phóng to khi click.
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
## Tính năng
|
|
12
10
|
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
21
|
-
|
|
22
|
-
## Lưu ý quan trọng (Important Notes)
|
|
23
|
-
|
|
24
|
-
> ⚠️ **Caveats**:
|
|
25
|
-
>
|
|
26
|
-
> - **Thứ tự Input quan trọng**: Nếu sử dụng `getLastTextAfterSpace`, phải truyền input này **TRƯỚC** `textAvatar` để logic transform hoạt động đúng.
|
|
27
|
-
> - **Error Handling Chain**: Component có chuỗi xử lý lỗi: `linkAvatar` → `linkAvatarError` → `textAvatar` + `idGenColor`. Nếu tất cả đều fail, sẽ hiển thị icon với text.
|
|
28
|
-
> - **Màu nền tự động**: Màu nền được tạo từ `idGenColor` thông qua hàm hash. Cùng ID sẽ luôn có cùng màu.
|
|
29
|
-
> - **Font size tự động**: Font size của text avatar được tính tự động dựa trên `size` (16/24 → 6, 32 → 4, 40 → 3, 64 → 1, default → 4).
|
|
30
|
-
> - **Preview Image**: Khi `clickPreviewImage = true`, click vào ảnh sẽ mở gallery viewer. Component tự quản lý lifecycle của gallery viewer.
|
|
11
|
+
- Hiển thị ảnh avatar từ URL với xử lý lỗi tự động
|
|
12
|
+
- Fallback thông minh theo chuỗi: `linkAvatar` → `linkAvatarError` → text + màu nền từ `idGenColor`
|
|
13
|
+
- Hỗ trợ 6 kích thước: 16, 24, 32, 40, 48, 64px
|
|
14
|
+
- Hỗ trợ 2 hình dạng: `circle` (mặc định) và `rectangle`
|
|
15
|
+
- Tự động generate màu nền nhất quán từ ID (hash color — cùng ID luôn ra cùng màu)
|
|
16
|
+
- Font size của text fallback tự động điều chỉnh theo kích thước avatar
|
|
17
|
+
- Preview ảnh phóng to khi click (tích hợp `LibsUiComponentsGalleryViewerComponent`)
|
|
18
|
+
- Angular Signals + Standalone Component
|
|
31
19
|
|
|
32
20
|
## Khi nào sử dụng
|
|
33
21
|
|
|
34
22
|
- Hiển thị ảnh đại diện người dùng trong danh sách, comment, profile
|
|
35
|
-
- Hiển thị avatar
|
|
36
|
-
- Cần hiển thị avatar với nhiều kích thước khác nhau
|
|
37
|
-
- Cần
|
|
23
|
+
- Hiển thị avatar có fallback khi ảnh không tải được hoặc chưa có ảnh
|
|
24
|
+
- Cần hiển thị avatar với nhiều kích thước khác nhau trong cùng giao diện
|
|
25
|
+
- Cần cho phép người dùng xem ảnh phóng to khi click vào avatar
|
|
38
26
|
|
|
39
27
|
## Cài đặt
|
|
40
28
|
|
|
@@ -45,101 +33,190 @@ npm install @libs-ui/components-avatar
|
|
|
45
33
|
## Import
|
|
46
34
|
|
|
47
35
|
```typescript
|
|
48
|
-
import {
|
|
36
|
+
import {
|
|
37
|
+
LibsUiComponentsAvatarComponent,
|
|
38
|
+
IAvatarConfig,
|
|
39
|
+
TYPE_SHAPE_AVATAR,
|
|
40
|
+
TYPE_SIZE_AVATAR_CONFIG,
|
|
41
|
+
} from '@libs-ui/components-avatar';
|
|
49
42
|
|
|
50
43
|
@Component({
|
|
51
44
|
standalone: true,
|
|
52
45
|
imports: [LibsUiComponentsAvatarComponent],
|
|
53
46
|
// ...
|
|
54
47
|
})
|
|
48
|
+
export class MyComponent {}
|
|
55
49
|
```
|
|
56
50
|
|
|
57
|
-
##
|
|
51
|
+
## Ví dụ sử dụng
|
|
58
52
|
|
|
59
|
-
### 1.
|
|
53
|
+
### 1. Avatar cơ bản với ảnh
|
|
60
54
|
|
|
61
55
|
```html
|
|
62
56
|
<libs_ui-components-avatar
|
|
63
|
-
[linkAvatar]="'https://example.com/
|
|
64
|
-
[size]="
|
|
57
|
+
[linkAvatar]="'https://example.com/user-123.jpg'"
|
|
58
|
+
[size]="40" />
|
|
65
59
|
```
|
|
66
60
|
|
|
67
|
-
### 2. Avatar với fallback text
|
|
61
|
+
### 2. Avatar với fallback text (khi ảnh lỗi)
|
|
62
|
+
|
|
63
|
+
Khi `linkAvatar` lỗi và không có `linkAvatarError`, component sẽ hiển thị ký tự đầu của `textAvatar` trên nền màu được generate từ `idGenColor`.
|
|
68
64
|
|
|
69
65
|
```html
|
|
70
66
|
<libs_ui-components-avatar
|
|
71
|
-
[linkAvatar]="'https://example.com/
|
|
72
|
-
[
|
|
73
|
-
[textAvatar]="'John Doe'"
|
|
67
|
+
[linkAvatar]="'https://example.com/user-123.jpg'"
|
|
68
|
+
[textAvatar]="'Nguyễn Văn An'"
|
|
74
69
|
[idGenColor]="'user-123'"
|
|
70
|
+
[size]="40"
|
|
71
|
+
(outAvatarError)="handlerAvatarError()" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
handlerAvatarError(): void {
|
|
76
|
+
// Ảnh không tải được, component đã tự hiển thị text fallback
|
|
77
|
+
console.log('Avatar fallback to text');
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### 3. Avatar với ảnh dự phòng và text cuối cùng
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<!-- getLastTextAfterSpace PHẢI được truyền TRƯỚC textAvatar -->
|
|
85
|
+
<libs_ui-components-avatar
|
|
86
|
+
[linkAvatar]="'https://example.com/user-456.jpg'"
|
|
87
|
+
[linkAvatarError]="'https://example.com/default-avatar.png'"
|
|
88
|
+
[getLastTextAfterSpace]="true"
|
|
89
|
+
[textAvatar]="'Trần Thị Bích'"
|
|
90
|
+
[idGenColor]="'user-456'"
|
|
75
91
|
[size]="40" />
|
|
76
92
|
```
|
|
77
93
|
|
|
78
|
-
|
|
94
|
+
Khi `getLastTextAfterSpace = true`, text `'Trần Thị Bích'` sẽ lấy ký tự đầu của từ cuối cùng → hiển thị `B`.
|
|
95
|
+
|
|
96
|
+
### 4. Avatar hình chữ nhật
|
|
79
97
|
|
|
80
98
|
```html
|
|
81
99
|
<libs_ui-components-avatar
|
|
82
|
-
[linkAvatar]="'https://example.com/
|
|
100
|
+
[linkAvatar]="'https://example.com/company-logo.jpg'"
|
|
83
101
|
[typeShape]="'rectangle'"
|
|
84
102
|
[size]="48" />
|
|
85
103
|
```
|
|
86
104
|
|
|
87
|
-
###
|
|
105
|
+
### 5. Avatar có thể click để xem phóng to
|
|
88
106
|
|
|
89
107
|
```html
|
|
90
108
|
<libs_ui-components-avatar
|
|
91
|
-
[linkAvatar]="'https://example.com/
|
|
109
|
+
[linkAvatar]="'https://example.com/user-photo.jpg'"
|
|
92
110
|
[clickPreviewImage]="true"
|
|
93
|
-
[zIndexPreviewImage]="
|
|
94
|
-
[size]="64"
|
|
111
|
+
[zIndexPreviewImage]="1050"
|
|
112
|
+
[size]="64"
|
|
113
|
+
(outEventPreviewImage)="handlerPreviewImageEvent($event)" />
|
|
95
114
|
```
|
|
96
115
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
116
|
+
```typescript
|
|
117
|
+
handlerPreviewImageEvent(event: Event, state: 'open' | 'remove'): void {
|
|
118
|
+
event.stopPropagation();
|
|
119
|
+
if (state === 'open') {
|
|
120
|
+
console.log('Gallery viewer mở');
|
|
121
|
+
} else {
|
|
122
|
+
console.log('Gallery viewer đóng');
|
|
123
|
+
}
|
|
124
|
+
}
|
|
105
125
|
```
|
|
106
126
|
|
|
107
|
-
|
|
127
|
+
### 6. Danh sách avatar người dùng
|
|
108
128
|
|
|
109
|
-
|
|
129
|
+
```typescript
|
|
130
|
+
import { Component } from '@angular/core';
|
|
131
|
+
import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
|
|
110
132
|
|
|
111
|
-
|
|
133
|
+
interface User {
|
|
134
|
+
id: string;
|
|
135
|
+
name: string;
|
|
136
|
+
avatarUrl: string;
|
|
137
|
+
}
|
|
112
138
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
139
|
+
@Component({
|
|
140
|
+
standalone: true,
|
|
141
|
+
imports: [LibsUiComponentsAvatarComponent],
|
|
142
|
+
template: `
|
|
143
|
+
<div class="flex items-center gap-2">
|
|
144
|
+
@for (user of users; track user.id) {
|
|
145
|
+
<libs_ui-components-avatar
|
|
146
|
+
[linkAvatar]="user.avatarUrl"
|
|
147
|
+
[textAvatar]="user.name"
|
|
148
|
+
[idGenColor]="user.id"
|
|
149
|
+
[classInclude]="''"
|
|
150
|
+
[size]="32" />
|
|
151
|
+
}
|
|
152
|
+
</div>
|
|
153
|
+
`,
|
|
154
|
+
})
|
|
155
|
+
export class UserListComponent {
|
|
156
|
+
users: User[] = [
|
|
157
|
+
{ id: 'u1', name: 'Nguyen Van A', avatarUrl: 'https://example.com/u1.jpg' },
|
|
158
|
+
{ id: 'u2', name: 'Tran Thi B', avatarUrl: 'https://example.com/u2.jpg' },
|
|
159
|
+
{ id: 'u3', name: 'Le Van C', avatarUrl: 'https://example.com/u3.jpg' },
|
|
160
|
+
];
|
|
161
|
+
}
|
|
162
|
+
```
|
|
128
163
|
|
|
129
|
-
|
|
164
|
+
### 7. Tùy chỉnh class CSS
|
|
130
165
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
166
|
+
```html
|
|
167
|
+
<libs_ui-components-avatar
|
|
168
|
+
[linkAvatar]="'https://example.com/avatar.jpg'"
|
|
169
|
+
[size]="40"
|
|
170
|
+
[classInclude]="'mr-0'"
|
|
171
|
+
[classImageInclude]="'opacity-90'"
|
|
172
|
+
[textAvatarClassInclude]="'font-bold'"
|
|
173
|
+
[containerTextAvatarClassInclude]="'border border-white'" />
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
## @Input()
|
|
177
|
+
|
|
178
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
179
|
+
|---|---|---|---|---|
|
|
180
|
+
| `[classInclude]` | `string \| undefined` | `'mr-[8px]'` | Class CSS tùy chỉnh cho thẻ container ngoài cùng | `[classInclude]="'mr-0 mb-2'"` |
|
|
181
|
+
| `[classImageInclude]` | `string \| undefined` | `''` | Class CSS tùy chỉnh cho thẻ `<img>` | `[classImageInclude]="'opacity-80'"` |
|
|
182
|
+
| `[clickPreviewImage]` | `boolean \| undefined` | `undefined` | Bật tính năng click để xem ảnh phóng to qua gallery viewer | `[clickPreviewImage]="true"` |
|
|
183
|
+
| `[containerTextAvatarClassInclude]` | `string \| undefined` | `''` | Class CSS tùy chỉnh cho container bọc ngoài text fallback | `[containerTextAvatarClassInclude]="'border-2'"` |
|
|
184
|
+
| `[getLastTextAfterSpace]` | `boolean \| undefined` | `undefined` | Lấy từ cuối cùng (sau khoảng trắng cuối) để hiển thị ký tự đầu. **Phải truyền TRƯỚC `textAvatar`** | `[getLastTextAfterSpace]="true"` |
|
|
185
|
+
| `[idGenColor]` | `string \| undefined` | `undefined` | ID dùng để generate màu nền khi hiển thị text fallback. Cùng ID luôn ra cùng màu | `[idGenColor]="'user-123'"` |
|
|
186
|
+
| `[linkAvatar]` | `string \| undefined` | `undefined` | URL ảnh avatar chính | `[linkAvatar]="user.photoUrl"` |
|
|
187
|
+
| `[linkAvatarError]` | `string \| undefined` | `undefined` | URL ảnh dự phòng khi `linkAvatar` bị lỗi | `[linkAvatarError]="'/assets/default.png'"` |
|
|
188
|
+
| `[size]` | `TYPE_SIZE_AVATAR_CONFIG \| undefined` | `32` | Kích thước (px) của avatar. Chỉ chấp nhận các giá trị: 16, 24, 32, 40, 48, 64 | `[size]="40"` |
|
|
189
|
+
| `[textAvatar]` | `string \| undefined` | `''` | Text dùng để hiển thị ký tự đầu khi fallback. Tự động loại bỏ unicode và ký tự đặc biệt | `[textAvatar]="user.fullName"` |
|
|
190
|
+
| `[textAvatarClassInclude]` | `string \| undefined` | `''` | Class CSS tùy chỉnh cho phần tử chứa ký tự text fallback | `[textAvatarClassInclude]="'tracking-wide'"` |
|
|
191
|
+
| `[typeShape]` | `TYPE_SHAPE_AVATAR \| undefined` | `'circle'` | Hình dạng của avatar: `'circle'` (border-radius 50%) hoặc `'rectangle'` (border-radius 4px) | `[typeShape]="'rectangle'"` |
|
|
192
|
+
| `[zIndexPreviewImage]` | `number \| undefined` | `undefined` | Z-index cho gallery viewer khi xem ảnh phóng to. Cần set khi giao diện có overlay/modal | `[zIndexPreviewImage]="1050"` |
|
|
193
|
+
|
|
194
|
+
## @Output()
|
|
195
|
+
|
|
196
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
197
|
+
|---|---|---|---|---|
|
|
198
|
+
| `(outAvatarError)` | `void` | Phát ra khi tất cả nguồn ảnh đều thất bại (cả `linkAvatar` lẫn `linkAvatarError`) và component chuyển sang hiển thị text fallback | `handlerAvatarError(): void { event.stopPropagation(); /* xử lý */ }` | `(outAvatarError)="handlerAvatarError()"` |
|
|
199
|
+
| `(outEventPreviewImage)` | `'open' \| 'remove'` | Phát ra khi gallery viewer được mở (`'open'`) hoặc đóng (`'remove'`) | `handlerPreviewImageEvent(state: 'open' \| 'remove'): void { event.stopPropagation(); /* xử lý */ }` | `(outEventPreviewImage)="handlerPreviewImageEvent($event)"` |
|
|
135
200
|
|
|
136
201
|
## Types & Interfaces
|
|
137
202
|
|
|
138
203
|
```typescript
|
|
204
|
+
import {
|
|
205
|
+
IAvatarConfig,
|
|
206
|
+
TYPE_SHAPE_AVATAR,
|
|
207
|
+
TYPE_SIZE_AVATAR_CONFIG,
|
|
208
|
+
} from '@libs-ui/components-avatar';
|
|
209
|
+
|
|
210
|
+
// Kích thước được hỗ trợ (px)
|
|
211
|
+
// Font size text fallback tự động: 16/24 → h6s, 32 → h4s, 40 → h3s, 64 → h1s, mặc định → h4s
|
|
139
212
|
export type TYPE_SIZE_AVATAR_CONFIG = 16 | 24 | 32 | 40 | 48 | 64;
|
|
140
213
|
|
|
214
|
+
// Hình dạng avatar
|
|
215
|
+
// 'circle' → border-radius: 50%
|
|
216
|
+
// 'rectangle' → border-radius: 4px
|
|
141
217
|
export type TYPE_SHAPE_AVATAR = 'circle' | 'rectangle';
|
|
142
218
|
|
|
219
|
+
// Interface config dùng khi cần truyền object config từ component cha
|
|
143
220
|
export interface IAvatarConfig {
|
|
144
221
|
classImageInclude?: string;
|
|
145
222
|
classInclude?: string;
|
|
@@ -153,34 +230,42 @@ export interface IAvatarConfig {
|
|
|
153
230
|
}
|
|
154
231
|
```
|
|
155
232
|
|
|
156
|
-
|
|
233
|
+
Ví dụ dùng `IAvatarConfig` để truyền config từ component cha:
|
|
157
234
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
235
|
+
```typescript
|
|
236
|
+
// parent.component.ts
|
|
237
|
+
import { IAvatarConfig } from '@libs-ui/components-avatar';
|
|
238
|
+
|
|
239
|
+
avatarConfig: IAvatarConfig = {
|
|
240
|
+
linkAvatar: 'https://example.com/avatar.jpg',
|
|
241
|
+
textAvatar: 'Nguyen Van An',
|
|
242
|
+
idGenColor: 'user-001',
|
|
243
|
+
size: 40,
|
|
244
|
+
typeShape: 'circle',
|
|
245
|
+
};
|
|
246
|
+
```
|
|
161
247
|
|
|
162
|
-
|
|
248
|
+
```html
|
|
249
|
+
<!-- parent.component.html -->
|
|
250
|
+
<libs_ui-components-avatar
|
|
251
|
+
[linkAvatar]="avatarConfig.linkAvatar"
|
|
252
|
+
[textAvatar]="avatarConfig.textAvatar"
|
|
253
|
+
[idGenColor]="avatarConfig.idGenColor"
|
|
254
|
+
[size]="avatarConfig.size"
|
|
255
|
+
[typeShape]="avatarConfig.typeShape" />
|
|
256
|
+
```
|
|
163
257
|
|
|
164
|
-
|
|
258
|
+
## Lưu ý quan trọng
|
|
165
259
|
|
|
166
|
-
|
|
167
|
-
|-------|-------------|
|
|
168
|
-
| `.libs_ui-component-avatar` | Container chính của avatar |
|
|
169
|
-
| `.libs_ui-component-avatar-rectangle` | Class khi `typeShape = 'rectangle'` |
|
|
170
|
-
| `.libs_ui-component-avatar-icon` | Container cho text/icon fallback |
|
|
260
|
+
⚠️ **Thứ tự input `getLastTextAfterSpace`**: Input `[getLastTextAfterSpace]` PHẢI được khai báo trong template TRƯỚC `[textAvatar]`. Nếu khai báo sau, transform của `textAvatar` sẽ chạy trước khi đọc được giá trị `getLastTextAfterSpace`, dẫn đến kết quả sai.
|
|
171
261
|
|
|
172
|
-
|
|
262
|
+
⚠️ **Chuỗi fallback xử lý lỗi ảnh**: Component xử lý lỗi theo thứ tự: `linkAvatar` → (lỗi) → `linkAvatarError` → (lỗi) → hiển thị text từ `textAvatar` với màu nền từ `idGenColor`. Nếu không cung cấp `idGenColor` và `textAvatar`, output `(outAvatarError)` sẽ phát ra ngay sau lần lỗi đầu tiên mà không hiển thị fallback.
|
|
173
263
|
|
|
174
|
-
|
|
264
|
+
⚠️ **Màu nền nhất quán**: Màu nền khi hiển thị text fallback được tính từ `idGenColor` qua hàm hash. Cùng một giá trị `idGenColor` luôn cho ra cùng một màu, đảm bảo nhất quán giao diện giữa các lần render.
|
|
175
265
|
|
|
176
|
-
|
|
266
|
+
⚠️ **Preview image và lifecycle**: Khi `[clickPreviewImage]="true"`, component tự khởi tạo và quản lý vòng đời của `LibsUiComponentsGalleryViewerComponent`. Gallery viewer sẽ tự bị hủy khi avatar component bị destroy (xử lý trong `ngOnDestroy`).
|
|
177
267
|
|
|
178
|
-
|
|
179
|
-
|------------|---------|---------|
|
|
180
|
-
| Angular | 18+ | Framework |
|
|
181
|
-
| Angular Signals | - | State management |
|
|
182
|
-
| TailwindCSS | 3.x | Styling |
|
|
183
|
-
| OnPush | - | Change Detection |
|
|
268
|
+
⚠️ **Transform text**: `textAvatar` được tự động xử lý: loại bỏ unicode tiếng Việt (normalize), xóa ký tự đặc biệt (giữ lại chữ và số), trim khoảng trắng, rồi lấy ký tự đầu tiên. Nếu sau xử lý không còn ký tự nào, hiển thị `—`.
|
|
184
269
|
|
|
185
270
|
## Demo
|
|
186
271
|
|
|
@@ -188,22 +273,4 @@ Component không sử dụng CSS variables, màu nền được generate từ `i
|
|
|
188
273
|
npx nx serve core-ui
|
|
189
274
|
```
|
|
190
275
|
|
|
191
|
-
Truy cập:
|
|
192
|
-
|
|
193
|
-
## Unit Tests
|
|
194
|
-
|
|
195
|
-
```bash
|
|
196
|
-
# Chạy tests
|
|
197
|
-
npx nx test components-avatar
|
|
198
|
-
|
|
199
|
-
# Coverage
|
|
200
|
-
npx nx test components-avatar --coverage
|
|
201
|
-
|
|
202
|
-
# Watch mode
|
|
203
|
-
npx nx test components-avatar --watch
|
|
204
|
-
```
|
|
205
|
-
|
|
206
|
-
## License
|
|
207
|
-
|
|
208
|
-
MIT
|
|
209
|
-
|
|
276
|
+
Truy cập: http://localhost:4500/avatar
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-avatar.mjs","sources":["../../../../../libs-ui/components/avatar/src/avatar.component.ts","../../../../../libs-ui/components/avatar/src/avatar.component.html","../../../../../libs-ui/components/avatar/src/libs-ui-components-avatar.ts"],"sourcesContent":["import { Component, ComponentRef, computed, effect, inject, input, OnDestroy, output, signal, untracked } from '@angular/core';\nimport { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';\nimport { deleteUnicode, getColorById } from '@libs-ui/utils';\nimport { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from './interfaces/avatar.interface';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-avatar',\n templateUrl: './avatar.component.html',\n standalone: true,\n styleUrls: ['./avatar.component.scss'],\n})\nexport class LibsUiComponentsAvatarComponent implements OnDestroy {\n // #region PROPERTY\n protected isErrorLinkAvatar = signal<boolean>(false);\n protected isErrorLinkAvatarError = signal<boolean>(false);\n protected isShowIcon = signal<boolean>(false);\n protected color = computed(() => getColorById(this.idGenColor() || ''));\n protected fontSize = computed(this.fontSizeComputed.bind(this));\n\n private galleryViewerComponent?: ComponentRef<LibsUiComponentsGalleryViewerComponent>;\n\n // #region INPUT\n readonly typeShape = input<TYPE_SHAPE_AVATAR | undefined, TYPE_SHAPE_AVATAR | undefined>('circle', { transform: (value) => value ?? 'circle' });\n readonly classInclude = input<string | undefined, string | undefined>('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });\n readonly size = input<TYPE_SIZE_AVATAR_CONFIG | undefined, TYPE_SIZE_AVATAR_CONFIG | undefined>(32, { transform: (value) => value ?? 32 });\n readonly linkAvatar = input<string>();\n readonly linkAvatarError = input<string>();\n readonly classImageInclude = input<string | undefined, string | undefined>('', { transform: (value) => value ?? '' });\n readonly zIndexPreviewImage = input<number>();\n readonly clickPreviewImage = input<boolean>();\n readonly idGenColor = input<string>();\n readonly getLastTextAfterSpace = input<boolean>(); // Lấy text cuối cùng sau khi cắt khoảng trắng. Lưu ý truyền biến này trước khi truyền biến textAvatar\n readonly textAvatar = input<string | undefined, string | undefined>('', {\n transform: (value) => {\n value = deleteUnicode(value || '')\n .replace(/[^a-zA-Z0-9\\s]/g, '')\n .trim();\n\n if (this.getLastTextAfterSpace()) {\n value = value.split(' ').pop() || '';\n }\n\n return value[0] || '—';\n },\n });\n readonly textAvatarClassInclude = input<string, string | undefined>('', { transform: (value) => value ?? '' });\n readonly containerTextAvatarClassInclude = input<string, string | undefined>('', { transform: (value) => value ?? '' });\n\n // #region OUTPUT\n readonly outAvatarError = output<void>();\n readonly outEventPreviewImage = output<'open' | 'remove'>();\n\n // #region INJECT\n private readonly dynamicComponentService = inject(LibsUiDynamicComponentService);\n\n constructor() {\n effect(() => {\n this.linkAvatar();\n untracked(() => {\n this.isShowIcon.set(false);\n this.isErrorLinkAvatar.set(false);\n this.isErrorLinkAvatarError.set(false);\n });\n });\n }\n\n /* FUNCTIONS */\n protected async handlerImageError(e: ErrorEvent) {\n if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {\n this.outAvatarError.emit();\n this.isShowIcon.set(true);\n\n return;\n }\n if (this.isErrorLinkAvatar()) {\n this.isErrorLinkAvatarError.set(true);\n }\n this.isErrorLinkAvatar.set(true);\n\n if (this.isErrorLinkAvatarError() && this.idGenColor() && this.textAvatar()) {\n this.isShowIcon.set(true);\n }\n\n if (this.isErrorLinkAvatarError()) {\n return;\n }\n if (!this.linkAvatarError()) {\n this.outAvatarError.emit();\n\n return;\n }\n (e as IEvent).target.src = this.linkAvatarError();\n }\n\n protected handlerClickImage() {\n if (this.galleryViewerComponent || !this.clickPreviewImage()) {\n return;\n }\n this.outEventPreviewImage.emit('open');\n this.galleryViewerComponent = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsGalleryViewerComponent);\n this.galleryViewerComponent.setInput('images', [{ imageSrc: this.linkAvatar() }]);\n this.galleryViewerComponent.setInput('fieldDisplaySrcImage', 'imageSrc');\n this.galleryViewerComponent.setInput('singleImage', true);\n this.galleryViewerComponent.setInput('zIndex', this.zIndexPreviewImage());\n this.galleryViewerComponent.instance.outClose.subscribe(() => {\n this.dynamicComponentService.remove(this.galleryViewerComponent);\n this.galleryViewerComponent = undefined;\n this.outEventPreviewImage.emit('remove');\n });\n\n this.dynamicComponentService.addToBody(this.galleryViewerComponent);\n }\n\n /* COMPUTED PROPERTIES FUNCTION */\n private fontSizeComputed() {\n if (this.size() === 16 || this.size() === 24) {\n return 6;\n }\n\n if (this.size() === 32) {\n return 4;\n }\n\n if (this.size() === 40) {\n return 3;\n }\n\n if (this.size() === 64) {\n return 1;\n }\n return 4;\n }\n\n ngOnDestroy(): void {\n this.dynamicComponentService.remove(this.galleryViewerComponent);\n this.galleryViewerComponent = undefined;\n }\n}\n","<div\n class=\"libs_ui-component-avatar {{ classInclude() }}\"\n [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\">\n @if (!isShowIcon()) {\n <img\n [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n [src]=\"linkAvatar()\"\n alt=\"\"\n [tabindex]=\"clickPreviewImage() ? 0 : null\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerClickImage()\"\n (keydown.enter)=\"handlerClickImage()\"\n (keydown.space)=\"handlerClickImage()\" />\n } @else {\n <div\n class=\"libs_ui-component-avatar-icon {{ containerTextAvatarClassInclude() }}\"\n [style.background]=\"color()\">\n <div\n class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n [innerHTML]=\"textAvatar()\"></div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"libs-ui-components-avatar.mjs","sources":["../../../../../libs-ui/components/avatar/src/avatar.component.ts","../../../../../libs-ui/components/avatar/src/avatar.component.html","../../../../../libs-ui/components/avatar/src/libs-ui-components-avatar.ts"],"sourcesContent":["import { Component, ComponentRef, computed, effect, inject, input, OnDestroy, output, signal, untracked } from '@angular/core';\nimport { LibsUiComponentsGalleryViewerComponent } from '@libs-ui/components-gallery';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';\nimport { deleteUnicode, getColorById } from '@libs-ui/utils';\nimport { TYPE_SHAPE_AVATAR, TYPE_SIZE_AVATAR_CONFIG } from './interfaces/avatar.interface';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-avatar',\n templateUrl: './avatar.component.html',\n standalone: true,\n styleUrls: ['./avatar.component.scss'],\n})\nexport class LibsUiComponentsAvatarComponent implements OnDestroy {\n // #region PROPERTY\n protected isErrorLinkAvatar = signal<boolean>(false);\n protected isErrorLinkAvatarError = signal<boolean>(false);\n protected isShowIcon = signal<boolean>(false);\n protected color = computed(() => getColorById(this.idGenColor() || ''));\n protected fontSize = computed(this.fontSizeComputed.bind(this));\n\n private galleryViewerComponent?: ComponentRef<LibsUiComponentsGalleryViewerComponent>;\n\n // #region INPUT\n readonly typeShape = input<TYPE_SHAPE_AVATAR | undefined, TYPE_SHAPE_AVATAR | undefined>('circle', { transform: (value) => value ?? 'circle' });\n readonly classInclude = input<string | undefined, string | undefined>('mr-[8px]', { transform: (value) => value ?? 'mr-[8px]' });\n readonly size = input<TYPE_SIZE_AVATAR_CONFIG | undefined, TYPE_SIZE_AVATAR_CONFIG | undefined>(32, { transform: (value) => value ?? 32 });\n readonly linkAvatar = input<string>();\n readonly linkAvatarError = input<string>();\n readonly classImageInclude = input<string | undefined, string | undefined>('', { transform: (value) => value ?? '' });\n readonly zIndexPreviewImage = input<number>();\n readonly clickPreviewImage = input<boolean>();\n readonly idGenColor = input<string>();\n readonly getLastTextAfterSpace = input<boolean>(); // Lấy text cuối cùng sau khi cắt khoảng trắng. Lưu ý truyền biến này trước khi truyền biến textAvatar\n readonly textAvatar = input<string | undefined, string | undefined>('', {\n transform: (value) => {\n value = deleteUnicode(value || '')\n .replace(/[^a-zA-Z0-9\\s]/g, '')\n .trim();\n\n if (this.getLastTextAfterSpace()) {\n value = value.split(' ').pop() || '';\n }\n\n return value[0] || '—';\n },\n });\n readonly textAvatarClassInclude = input<string, string | undefined>('', { transform: (value) => value ?? '' });\n readonly containerTextAvatarClassInclude = input<string, string | undefined>('', { transform: (value) => value ?? '' });\n\n // #region OUTPUT\n readonly outAvatarError = output<void>();\n readonly outEventPreviewImage = output<'open' | 'remove'>();\n\n // #region INJECT\n private readonly dynamicComponentService = inject(LibsUiDynamicComponentService);\n\n constructor() {\n effect(() => {\n this.linkAvatar();\n untracked(() => {\n this.isShowIcon.set(false);\n this.isErrorLinkAvatar.set(false);\n this.isErrorLinkAvatarError.set(false);\n });\n });\n }\n\n /* FUNCTIONS */\n protected async handlerImageError(e: ErrorEvent) {\n if (!this.linkAvatarError()?.trim() && this.idGenColor() && this.textAvatar()) {\n this.outAvatarError.emit();\n this.isShowIcon.set(true);\n\n return;\n }\n if (this.isErrorLinkAvatar()) {\n this.isErrorLinkAvatarError.set(true);\n }\n this.isErrorLinkAvatar.set(true);\n\n if (this.isErrorLinkAvatarError() && this.idGenColor() && this.textAvatar()) {\n this.isShowIcon.set(true);\n }\n\n if (this.isErrorLinkAvatarError()) {\n return;\n }\n if (!this.linkAvatarError()) {\n this.outAvatarError.emit();\n\n return;\n }\n (e as IEvent).target.src = this.linkAvatarError();\n }\n\n protected handlerClickImage() {\n if (this.galleryViewerComponent || !this.clickPreviewImage()) {\n return;\n }\n this.outEventPreviewImage.emit('open');\n this.galleryViewerComponent = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsGalleryViewerComponent);\n this.galleryViewerComponent.setInput('images', [{ imageSrc: this.linkAvatar() }]);\n this.galleryViewerComponent.setInput('fieldDisplaySrcImage', 'imageSrc');\n this.galleryViewerComponent.setInput('singleImage', true);\n this.galleryViewerComponent.setInput('zIndex', this.zIndexPreviewImage());\n this.galleryViewerComponent.instance.outClose.subscribe(() => {\n this.dynamicComponentService.remove(this.galleryViewerComponent);\n this.galleryViewerComponent = undefined;\n this.outEventPreviewImage.emit('remove');\n });\n\n this.dynamicComponentService.addToBody(this.galleryViewerComponent);\n }\n\n /* COMPUTED PROPERTIES FUNCTION */\n private fontSizeComputed() {\n if (this.size() === 16 || this.size() === 24) {\n return 6;\n }\n\n if (this.size() === 32) {\n return 4;\n }\n\n if (this.size() === 40) {\n return 3;\n }\n\n if (this.size() === 64) {\n return 1;\n }\n return 4;\n }\n\n ngOnDestroy(): void {\n this.dynamicComponentService.remove(this.galleryViewerComponent);\n this.galleryViewerComponent = undefined;\n }\n}\n","<div\n class=\"libs_ui-component-avatar {{ classInclude() }}\"\n [class.libs_ui-component-avatar-rectangle]=\"typeShape() === 'rectangle'\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\">\n @if (!isShowIcon()) {\n <img\n [class]=\"classImageInclude() + (clickPreviewImage() ? ' cursor-pointer' : 'cursor-default')\"\n [src]=\"linkAvatar()\"\n alt=\"\"\n [tabindex]=\"clickPreviewImage() ? 0 : null\"\n (error)=\"handlerImageError($event)\"\n (click)=\"handlerClickImage()\"\n (keydown.enter)=\"handlerClickImage()\"\n (keydown.space)=\"handlerClickImage()\" />\n } @else {\n <div\n class=\"libs_ui-component-avatar-icon {{ containerTextAvatarClassInclude() }}\"\n [style.background]=\"color()\">\n <div\n class=\"uppercase text-[#ffffff] libs-ui-font-h{{ fontSize() }}s {{ textAvatarClassInclude() }}\"\n [innerHTML]=\"textAvatar()\"></div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-avatar",
|
|
3
|
-
"version": "0.2.356-
|
|
3
|
+
"version": "0.2.356-43",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/interfaces-types": "0.2.356-
|
|
7
|
-
"@libs-ui/utils": "0.2.356-
|
|
8
|
-
"@libs-ui/components-gallery": "0.2.356-
|
|
9
|
-
"@libs-ui/services-dynamic-component": "0.2.356-
|
|
6
|
+
"@libs-ui/interfaces-types": "0.2.356-43",
|
|
7
|
+
"@libs-ui/utils": "0.2.356-43",
|
|
8
|
+
"@libs-ui/components-gallery": "0.2.356-43",
|
|
9
|
+
"@libs-ui/services-dynamic-component": "0.2.356-43"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"module": "fesm2022/libs-ui-components-avatar.mjs",
|