@libs-ui/components-inputs-color 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
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
# @libs-ui/components-inputs-color
|
|
2
2
|
|
|
3
|
-
> Component input chọn màu sắc (Color Picker)
|
|
3
|
+
> Component input chọn màu sắc (Color Picker) tích hợp palette mặc định, palette tùy chỉnh và điều chỉnh độ mờ (opacity).
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsInputsColorComponent` là một
|
|
7
|
+
`LibsUiComponentsInputsColorComponent` là một Standalone Angular component dùng để chọn màu sắc kết hợp điều chỉnh độ mờ. Component hiển thị dưới dạng một input thu gọn, khi click sẽ mở Popover chứa bảng màu mặc định, phần quản lý màu tùy chỉnh (tối đa 8 màu gần nhất), và một color picker nâng cao để thêm màu mới. Dữ liệu màu sắc và opacity được quản lý qua Angular `model()` cho phép two-way binding linh hoạt.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
10
|
|
|
11
|
-
- ✅ Chọn màu từ palette mặc định
|
|
12
|
-
- ✅ Lưu và quản lý palette tùy chỉnh (
|
|
13
|
-
- ✅ Điều chỉnh độ mờ (opacity) trực tiếp
|
|
14
|
-
- ✅
|
|
15
|
-
- ✅
|
|
16
|
-
- ✅
|
|
11
|
+
- ✅ Chọn màu từ palette mặc định (có thể cung cấp qua function hoặc dùng cache mặc định)
|
|
12
|
+
- ✅ Lưu và quản lý palette màu tùy chỉnh (tự động giới hạn 8 màu gần nhất)
|
|
13
|
+
- ✅ Điều chỉnh độ mờ (opacity) từ 0–100 trực tiếp trên input
|
|
14
|
+
- ✅ Two-way binding với `[(data)]` qua Angular `model()`
|
|
15
|
+
- ✅ Tích hợp Popover thông minh với `ignoreHiddenPopoverContentWhenMouseLeave`
|
|
16
|
+
- ✅ Hỗ trợ custom provider functions để lấy/lưu danh sách màu từ API
|
|
17
|
+
- ✅ Standalone Component, ChangeDetectionStrategy.OnPush
|
|
18
|
+
- ✅ Tự động cleanup popover khi component bị destroy
|
|
17
19
|
|
|
18
20
|
## Khi nào sử dụng
|
|
19
21
|
|
|
20
|
-
- Khi cần cho phép người dùng chọn màu sắc trong
|
|
21
|
-
- Khi cần tích hợp
|
|
22
|
-
- Khi cần điều chỉnh cả màu sắc và độ trong suốt của phần tử.
|
|
22
|
+
- Khi cần cho phép người dùng chọn màu sắc trong form cấu hình giao diện, thiết kế chart, hoặc tùy biến theme.
|
|
23
|
+
- Khi cần tích hợp quản lý bảng màu cá nhân của người dùng (lưu/tải từ API).
|
|
24
|
+
- Khi cần điều chỉnh đồng thời cả màu sắc và độ trong suốt (opacity) của một phần tử.
|
|
25
|
+
- Khi cần một component compact — hiển thị ô màu + mã hex + input opacity trong một hàng duy nhất.
|
|
23
26
|
|
|
24
27
|
## Cài đặt
|
|
25
28
|
|
|
26
29
|
```bash
|
|
27
|
-
# npm
|
|
28
30
|
npm install @libs-ui/components-inputs-color
|
|
29
|
-
|
|
30
|
-
# yarn
|
|
31
|
-
yarn add @libs-ui/components-inputs-color
|
|
32
31
|
```
|
|
33
32
|
|
|
34
33
|
## Import
|
|
35
34
|
|
|
36
35
|
```typescript
|
|
37
36
|
import { LibsUiComponentsInputsColorComponent } from '@libs-ui/components-inputs-color';
|
|
37
|
+
import { IColorPickerData } from '@libs-ui/components-inputs-color';
|
|
38
38
|
|
|
39
39
|
@Component({
|
|
40
40
|
standalone: true,
|
|
@@ -44,92 +44,211 @@ import { LibsUiComponentsInputsColorComponent } from '@libs-ui/components-inputs
|
|
|
44
44
|
export class YourComponent {}
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
## Ví dụ
|
|
47
|
+
## Ví dụ sử dụng
|
|
48
|
+
|
|
49
|
+
### Ví dụ 1 — Cơ bản (Two-way binding)
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import { Component, signal } from '@angular/core';
|
|
53
|
+
import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
|
|
54
|
+
|
|
55
|
+
@Component({
|
|
56
|
+
selector: 'app-basic-color',
|
|
57
|
+
standalone: true,
|
|
58
|
+
imports: [LibsUiComponentsInputsColorComponent],
|
|
59
|
+
template: `
|
|
60
|
+
<libs_ui-components-inputs-color [(data)]="colorData" />
|
|
61
|
+
<p>Màu hiện tại: {{ colorData().color }} — Opacity: {{ colorData().opacity }}%</p>
|
|
62
|
+
`,
|
|
63
|
+
})
|
|
64
|
+
export class BasicColorComponent {
|
|
65
|
+
colorData = signal<IColorPickerData>({ color: '#3b82f6', opacity: 100 });
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Ví dụ 2 — Lắng nghe sự kiện thay đổi màu
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
import { Component, signal } from '@angular/core';
|
|
73
|
+
import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
|
|
48
74
|
|
|
49
|
-
|
|
75
|
+
@Component({
|
|
76
|
+
selector: 'app-color-with-event',
|
|
77
|
+
standalone: true,
|
|
78
|
+
imports: [LibsUiComponentsInputsColorComponent],
|
|
79
|
+
template: `
|
|
80
|
+
<libs_ui-components-inputs-color
|
|
81
|
+
[(data)]="colorData"
|
|
82
|
+
(outColorChange)="handlerColorChange($event)"
|
|
83
|
+
/>
|
|
84
|
+
`,
|
|
85
|
+
})
|
|
86
|
+
export class ColorWithEventComponent {
|
|
87
|
+
colorData = signal<IColorPickerData>({ color: '#ef4444', opacity: 80 });
|
|
50
88
|
|
|
51
|
-
|
|
52
|
-
|
|
89
|
+
handlerColorChange(event: IColorPickerData): void {
|
|
90
|
+
event; // IColorPickerData không phải DOM Event, không cần stopPropagation
|
|
91
|
+
// Xử lý nghiệp vụ: lưu màu vào state, gọi API, v.v.
|
|
92
|
+
}
|
|
93
|
+
}
|
|
53
94
|
```
|
|
54
95
|
|
|
55
|
-
###
|
|
96
|
+
### Ví dụ 3 — Custom Provider (tích hợp API)
|
|
56
97
|
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
98
|
+
```typescript
|
|
99
|
+
import { Component, signal } from '@angular/core';
|
|
100
|
+
import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
|
|
101
|
+
|
|
102
|
+
@Component({
|
|
103
|
+
selector: 'app-color-custom-provider',
|
|
104
|
+
standalone: true,
|
|
105
|
+
imports: [LibsUiComponentsInputsColorComponent],
|
|
106
|
+
template: `
|
|
107
|
+
<libs_ui-components-inputs-color
|
|
108
|
+
[(data)]="colorData"
|
|
109
|
+
[functionGetListColorDefault]="getColorsDefault"
|
|
110
|
+
[functionGetListColorCustom]="getColorsCustom"
|
|
111
|
+
[functionSetListColorCustom]="saveColorsCustom"
|
|
112
|
+
(outColorChange)="handlerColorChange($event)"
|
|
113
|
+
/>
|
|
114
|
+
`,
|
|
115
|
+
})
|
|
116
|
+
export class ColorCustomProviderComponent {
|
|
117
|
+
colorData = signal<IColorPickerData>({ color: '#10b981', opacity: 100 });
|
|
118
|
+
|
|
119
|
+
getColorsDefault = async (): Promise<string[]> => {
|
|
120
|
+
// Ví dụ: gọi API hoặc trả về danh sách màu thương hiệu
|
|
121
|
+
return ['#ffffff', '#000000', '#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6'];
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
getColorsCustom = async (): Promise<string[]> => {
|
|
125
|
+
// Ví dụ: tải màu đã lưu của người dùng từ localStorage hoặc API
|
|
126
|
+
return JSON.parse(localStorage.getItem('user-colors') || '[]');
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
saveColorsCustom = async (colors: string[]): Promise<void> => {
|
|
130
|
+
// Ví dụ: lưu màu tùy chỉnh vào localStorage hoặc API
|
|
131
|
+
localStorage.setItem('user-colors', JSON.stringify(colors));
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
handlerColorChange(event: IColorPickerData): void {
|
|
135
|
+
// Cập nhật style preview hoặc notify component khác
|
|
136
|
+
}
|
|
137
|
+
}
|
|
62
138
|
```
|
|
63
139
|
|
|
64
|
-
|
|
140
|
+
### Ví dụ 4 — Tùy chỉnh Color Picker nâng cao
|
|
65
141
|
|
|
66
|
-
|
|
142
|
+
```typescript
|
|
143
|
+
import { Component, signal } from '@angular/core';
|
|
144
|
+
import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
|
|
145
|
+
import { IPickerCustomOptions } from '@libs-ui/components-color-picker';
|
|
67
146
|
|
|
68
|
-
|
|
147
|
+
@Component({
|
|
148
|
+
selector: 'app-color-advanced',
|
|
149
|
+
standalone: true,
|
|
150
|
+
imports: [LibsUiComponentsInputsColorComponent],
|
|
151
|
+
template: `
|
|
152
|
+
<libs_ui-components-inputs-color
|
|
153
|
+
[(data)]="colorData"
|
|
154
|
+
[customOptions]="pickerOptions"
|
|
155
|
+
[zIndex]="1300"
|
|
156
|
+
/>
|
|
157
|
+
`,
|
|
158
|
+
})
|
|
159
|
+
export class ColorAdvancedComponent {
|
|
160
|
+
colorData = signal<IColorPickerData>({ color: '#8b5cf6', opacity: 90 });
|
|
161
|
+
|
|
162
|
+
pickerOptions: IPickerCustomOptions = {
|
|
163
|
+
showHex: true,
|
|
164
|
+
showRgb: false,
|
|
165
|
+
showHsl: false,
|
|
166
|
+
showAlpha: true,
|
|
167
|
+
format: 'hex',
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
```
|
|
69
171
|
|
|
70
|
-
|
|
71
|
-
| ------------------------------- | ------------------------------------------------- | ----------------------------- | ----------------------------------- |
|
|
72
|
-
| `[(data)]` | `model<IColorPickerData>` | `{ color: '', opacity: 100 }` | Dữ liệu màu sắc và độ mờ hiện tại |
|
|
73
|
-
| `[zIndex]` | `model<number>` | `1200` | Z-index cho popover bảng màu |
|
|
74
|
-
| `[customOptions]` | `input<IPickerCustomOptions>` | `undefined` | Cấu hình cho color picker bên trong |
|
|
75
|
-
| `[functionGetListColorDefault]` | `input<() => Promise<Array<string>>>` | `undefined` | Hàm lấy danh sách màu mặc định |
|
|
76
|
-
| `[functionGetListColorCustom]` | `input<() => Promise<Array<string>>>` | `undefined` | Hàm lấy danh sách màu tùy chỉnh |
|
|
77
|
-
| `[functionSetListColorCustom]` | `input<(colors: Array<string>) => Promise<void>>` | `undefined` | Hàm lưu danh sách màu tùy chỉnh |
|
|
172
|
+
## @Input() / model()
|
|
78
173
|
|
|
79
|
-
|
|
174
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
175
|
+
|---|---|---|---|---|
|
|
176
|
+
| `[(data)]` | `model<IColorPickerData>` | `{ color: '', opacity: 100 }` | Dữ liệu màu sắc (hex) và độ mờ (0–100). Hỗ trợ two-way binding. | `[(data)]="colorData"` |
|
|
177
|
+
| `[(zIndex)]` | `model<number>` | `1200` | Z-index của Popover bảng màu chính. Color picker nâng cao tự động dùng `zIndex + 1`. | `[(zIndex)]="myZIndex"` |
|
|
178
|
+
| `[customOptions]` | `IPickerCustomOptions \| undefined` | `undefined` | Tùy chỉnh giao diện color picker nâng cao (thanh hue, alpha, định dạng hiển thị). | `[customOptions]="pickerOptions"` |
|
|
179
|
+
| `[functionGetListColorDefault]` | `(() => Promise<string[]>) \| undefined` | `undefined` | Function async trả về mảng hex màu mặc định. Nếu không cung cấp, dùng cache nội bộ. | `[functionGetListColorDefault]="getColors"` |
|
|
180
|
+
| `[functionGetListColorCustom]` | `(() => Promise<string[]>) \| undefined` | `undefined` | Function async tải danh sách màu tùy chỉnh đã lưu của người dùng. | `[functionGetListColorCustom]="loadCustom"` |
|
|
181
|
+
| `[functionSetListColorCustom]` | `((colors: string[]) => Promise<void>) \| undefined` | `undefined` | Function async lưu danh sách màu tùy chỉnh. Tự động giữ lại 8 màu gần nhất. | `[functionSetListColorCustom]="saveCustom"` |
|
|
80
182
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
|
183
|
+
## @Output()
|
|
184
|
+
|
|
185
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
186
|
+
|---|---|---|---|---|
|
|
187
|
+
| `(outColorChange)` | `IColorPickerData` | Emit khi người dùng chọn màu mới từ palette hoặc thay đổi opacity. | `handlerColorChange(data: IColorPickerData): void { /* xử lý màu */ }` | `(outColorChange)="handlerColorChange($event)"` |
|
|
188
|
+
|
|
189
|
+
> **Lưu ý:** `outColorChange` emit `IColorPickerData` (không phải DOM Event), vì vậy **không cần** gọi `event.stopPropagation()` trong handler này. Tuy nhiên nếu handler được gắn vào DOM event khác, vẫn áp dụng `stopPropagation()` theo convention.
|
|
84
190
|
|
|
85
191
|
## Types & Interfaces
|
|
86
192
|
|
|
193
|
+
```typescript
|
|
194
|
+
import { IColorPickerData } from '@libs-ui/components-inputs-color';
|
|
195
|
+
import { IPickerCustomOptions } from '@libs-ui/components-color-picker';
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### IColorPickerData
|
|
199
|
+
|
|
200
|
+
Dữ liệu màu sắc truyền vào/ra component. Là kiểu dữ liệu cho `data` model và `outColorChange` output.
|
|
201
|
+
|
|
87
202
|
```typescript
|
|
88
203
|
export interface IColorPickerData {
|
|
204
|
+
/** Mã màu hex (ví dụ: '#3b82f6', '#ffffff') */
|
|
89
205
|
color: string;
|
|
206
|
+
/** Độ mờ từ 0 (trong suốt hoàn toàn) đến 100 (đục hoàn toàn) */
|
|
90
207
|
opacity: number;
|
|
91
208
|
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### IPickerCustomOptions
|
|
212
|
+
|
|
213
|
+
Tùy chỉnh giao diện và tính năng cho color picker nâng cao (truyền qua `[customOptions]`).
|
|
92
214
|
|
|
215
|
+
```typescript
|
|
93
216
|
export interface IPickerCustomOptions {
|
|
217
|
+
/** Kích thước thanh SL (Saturation-Lightness). Mặc định: [232, 150] */
|
|
94
218
|
slBarSize?: Array<number>;
|
|
219
|
+
/** Kích thước thanh Hue. Mặc định: [232, 12] */
|
|
95
220
|
hueBarSize?: Array<number>;
|
|
221
|
+
/** Kích thước thanh Alpha (opacity). Mặc định: [232, 12] */
|
|
96
222
|
alphaBarSize?: Array<number>;
|
|
223
|
+
/** Hiển thị input HSL. Mặc định: true */
|
|
97
224
|
showHsl?: boolean;
|
|
225
|
+
/** Hiển thị input RGB. Mặc định: true */
|
|
98
226
|
showRgb?: boolean;
|
|
227
|
+
/** Hiển thị input HEX. Mặc định: true */
|
|
99
228
|
showHex?: boolean;
|
|
229
|
+
/** Hiển thị thanh Alpha (opacity). Mặc định: true */
|
|
100
230
|
showAlpha?: boolean;
|
|
231
|
+
/** Màu khởi tạo ban đầu cho color picker */
|
|
101
232
|
color?: string | Array<number>;
|
|
233
|
+
/** Định dạng giá trị trả về */
|
|
102
234
|
format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
|
|
103
235
|
}
|
|
104
236
|
```
|
|
105
237
|
|
|
106
|
-
##
|
|
238
|
+
## Lưu ý quan trọng
|
|
107
239
|
|
|
108
|
-
|
|
109
|
-
| --------------- | ------- | ---------------- |
|
|
110
|
-
| Angular | 18+ | Framework |
|
|
111
|
-
| Angular Signals | - | State management |
|
|
112
|
-
| TailwindCSS | 3.x | Styling |
|
|
113
|
-
| OnPush | - | Change Detection |
|
|
240
|
+
⚠️ **Cache nội bộ khi không cung cấp provider functions**: Nếu không truyền `functionGetListColorDefault`, `functionGetListColorCustom` hoặc `functionSetListColorCustom`, component sẽ tự động dùng `UtilsCache` với các key cố định nội bộ. Hành vi này có thể gây xung đột nếu nhiều instance dùng chung cache. Khuyến nghị luôn cung cấp đầy đủ 3 provider functions khi dùng trong production.
|
|
114
241
|
|
|
115
|
-
|
|
242
|
+
⚠️ **Giới hạn màu tùy chỉnh**: Khi người dùng thêm màu mới qua color picker nâng cao, component tự động giữ lại **tối đa 8 màu gần nhất** (LIFO — màu mới nhất ở đầu). Màu cũ hơn sẽ bị loại bỏ.
|
|
116
243
|
|
|
117
|
-
|
|
118
|
-
npx nx serve core-ui
|
|
119
|
-
```
|
|
244
|
+
⚠️ **Z-index tự động tăng**: Popover color picker nâng cao (khi click "Thêm màu") tự động sử dụng `zIndex + 1` so với Popover bảng màu chính. Nếu component nằm trong các lớp overlay khác (dialog, drawer), hãy truyền `[zIndex]` phù hợp để tránh bị che khuất.
|
|
120
245
|
|
|
121
|
-
|
|
246
|
+
⚠️ **Cleanup tự động**: Component tự gọi `removePopoverOverlay()` trong `ngOnDestroy`. Không cần xử lý cleanup popover thủ công từ component cha.
|
|
122
247
|
|
|
123
|
-
##
|
|
248
|
+
## Demo
|
|
124
249
|
|
|
125
250
|
```bash
|
|
126
|
-
|
|
127
|
-
npx nx test components-inputs-color
|
|
128
|
-
|
|
129
|
-
# Coverage
|
|
130
|
-
npx nx test components-inputs-color --coverage
|
|
251
|
+
npx nx serve core-ui
|
|
131
252
|
```
|
|
132
253
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
MIT
|
|
254
|
+
Truy cập: http://localhost:4500/components/inputs/color
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LowerCasePipe } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { signal, model, input, output,
|
|
3
|
+
import { signal, model, input, output, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
4
4
|
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
5
5
|
import { LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';
|
|
6
6
|
import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-inputs-color.mjs","sources":["../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.ts","../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.html","../../../../../../libs-ui/components/inputs/color/src/libs-ui-components-inputs-color.ts"],"sourcesContent":["import { LowerCasePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input, model, OnDestroy, OnInit, output, signal } from '@angular/core';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';\nimport { IFlagMouse, IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { UtilsCache } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IColorPickerData } from './interfaces/color.interface';\n\n/**\n * Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity)\n * Cung cấp bảng màu mặc định và cho phép người dùng lưu bảng màu tùy chỉnh\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-color',\n templateUrl: './inputs-color.component.html',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent],\n})\nexport class LibsUiComponentsInputsColorComponent implements OnInit, OnDestroy {\n // #region PROPERTY\n protected colorDefault = signal<Array<string>>([]);\n protected showPopup = signal<boolean>(false);\n protected colorCustom = signal<Array<string>>([]);\n protected flagMouse = signal<IFlagMouse>({ isMouseEnter: false, isMouseEnterContent: false });\n\n private readonly colorAdd = signal<string | undefined>(undefined);\n private readonly popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n private readonly popoverAddColorFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n /** Dữ liệu màu sắc và độ mờ hiện tại */\n readonly data = model<IColorPickerData>({ color: '', opacity: 100 });\n\n /** Z-index cho popover bảng màu */\n readonly zIndex = model<number>(1200);\n\n /** Cấu hình tùy chỉnh cho color picker */\n readonly customOptions = input<IPickerCustomOptions>();\n\n /** Function lấy danh sách màu mặc định */\n readonly functionGetListColorDefault = input<() => Promise<Array<string>>>();\n\n /** Function lấy danh sách màu tùy chỉnh đã lưu */\n readonly functionGetListColorCustom = input<() => Promise<Array<string>>>();\n\n /** Function lưu danh sách màu tùy chỉnh mới */\n readonly functionSetListColorCustom = input<(colors: Array<string>) => Promise<void>>();\n\n // #region OUTPUT\n /** Emit khi màu sắc hoặc độ mờ thay đổi */\n readonly outColorChange = output<IColorPickerData>();\n\n ngOnInit() {\n this.getListColorDefault();\n }\n\n /* FUNCTIONS */\n private async getListColorDefault() {\n const functionGetListColorDefault = this.functionGetListColorDefault();\n\n if (functionGetListColorDefault) {\n this.colorDefault.set(await functionGetListColorDefault());\n\n return;\n }\n this.colorDefault.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksuwesfsdfsdf')) || []);\n }\n\n private async getListColorCustom() {\n const functionGetListColorCustom = this.functionGetListColorCustom();\n\n if (functionGetListColorCustom) {\n this.colorCustom.set(await functionGetListColorCustom());\n\n return;\n }\n this.colorCustom.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf')) || []);\n }\n\n protected handlerPopoverEvent(type: TYPE_POPOVER_EVENT) {\n if (type === 'show') {\n this.showPopup.set(true);\n this.getListColorCustom();\n\n return;\n }\n if (type === 'remove') {\n this.showPopup.set(false);\n }\n }\n\n protected handlerSelectColor(event: Event, color: string) {\n event.stopPropagation();\n this.data.update((value) => ({ ...value, color }));\n this.outColorChange.emit(this.data());\n }\n\n protected handlerChangeOpacity() {\n this.outColorChange.emit(this.data());\n }\n\n protected handlerColorChange(event: string) {\n this.colorAdd.set(event);\n }\n\n protected handlerPopoverAddColorEvent(type: TYPE_POPOVER_EVENT) {\n if (type === 'show') {\n this.flagMouse.set({ isMouseEnter: true, isMouseEnterContent: true });\n\n return;\n }\n if (type === 'remove') {\n setTimeout(() => {\n this.flagMouse.set({ isMouseEnter: false, isMouseEnterContent: false });\n }, 500);\n }\n }\n\n protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControl.set(event);\n }\n\n protected handlerAddColorFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverAddColorFunctionControl.set(event);\n }\n\n protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n event.stopPropagation();\n this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n if (action === 'cancel') {\n return;\n }\n const colorAdd = this.colorAdd();\n\n if (!colorAdd) {\n return;\n }\n this.handlerSelectColor(event, colorAdd);\n if (this.colorCustom().find((color) => color === colorAdd)) {\n return;\n }\n this.colorCustom.update((value) => {\n value.unshift(colorAdd);\n if (value.length > 8) {\n value.splice(8, value.length - 8);\n }\n\n return [...value];\n });\n this.setColorCustom();\n }\n\n private async setColorCustom() {\n const functionSetListColorCustom = this.functionSetListColorCustom();\n\n if (functionSetListColorCustom) {\n await functionSetListColorCustom(this.colorCustom());\n\n return;\n }\n UtilsCache.SetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf', this.colorCustom(), UtilsCache.CACHE_EXPIRE_NONE);\n }\n\n ngOnDestroy() {\n this.popoverFunctionControl()?.removePopoverOverlay();\n this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n }\n}\n","<div\n class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n [class.libs-ui-border-general]=\"!showPopup()\"\n [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n <div\n LibsUiComponentsPopoverDirective\n class=\"w-full flex\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: element,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[334px]',\n direction: 'left',\n directionDistance: 4,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [flagMouse]=\"flagMouse()\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n <div class=\"px-[16px] flex items-center\">\n <span\n class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n [style.background-color]=\"data().color\"></span>\n <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n </div>\n </div>\n <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n <libs_ui-components-inputs-valid\n [noBorder]=\"true\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [(item)]=\"data\"\n [fieldNameBind]=\"'opacity'\"\n [unitsRight]=\"[{ id: '%', label: '%' }]\"\n [keySelectedUnitRight]=\"'%'\"\n [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n (outValueChange)=\"handlerChangeOpacity()\" />\n </div>\n</div>\n\n<ng-template #element>\n <div class=\"p-[16px] w-full\">\n <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorDefault(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"\n (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-add'\"\n [label]=\"'i18n_add_new'\"\n [popover]=\"{\n mode: 'click-toggle',\n ignoreHiddenPopoverContentWhenMouseLeave: true,\n config: {\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex() + 1,\n classInclude: 'w-[350px]',\n direction: 'left',\n directionDistance: -100,\n position: {\n mode: 'start',\n distance: -165,\n },\n },\n }\"\n [classInclude]=\"'py-[2px] px-[0]'\"\n (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n </div>\n @if (colorCustom().length) {\n <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorCustom(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"\n (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\" />\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n </div>\n</ng-template>\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-inputs-color.mjs","sources":["../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.ts","../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.html","../../../../../../libs-ui/components/inputs/color/src/libs-ui-components-inputs-color.ts"],"sourcesContent":["import { LowerCasePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input, model, OnDestroy, OnInit, output, signal } from '@angular/core';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';\nimport { IFlagMouse, IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { UtilsCache } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IColorPickerData } from './interfaces/color.interface';\n\n/**\n * Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity)\n * Cung cấp bảng màu mặc định và cho phép người dùng lưu bảng màu tùy chỉnh\n */\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-color',\n templateUrl: './inputs-color.component.html',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent],\n})\nexport class LibsUiComponentsInputsColorComponent implements OnInit, OnDestroy {\n // #region PROPERTY\n protected colorDefault = signal<Array<string>>([]);\n protected showPopup = signal<boolean>(false);\n protected colorCustom = signal<Array<string>>([]);\n protected flagMouse = signal<IFlagMouse>({ isMouseEnter: false, isMouseEnterContent: false });\n\n private readonly colorAdd = signal<string | undefined>(undefined);\n private readonly popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n private readonly popoverAddColorFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n /** Dữ liệu màu sắc và độ mờ hiện tại */\n readonly data = model<IColorPickerData>({ color: '', opacity: 100 });\n\n /** Z-index cho popover bảng màu */\n readonly zIndex = model<number>(1200);\n\n /** Cấu hình tùy chỉnh cho color picker */\n readonly customOptions = input<IPickerCustomOptions>();\n\n /** Function lấy danh sách màu mặc định */\n readonly functionGetListColorDefault = input<() => Promise<Array<string>>>();\n\n /** Function lấy danh sách màu tùy chỉnh đã lưu */\n readonly functionGetListColorCustom = input<() => Promise<Array<string>>>();\n\n /** Function lưu danh sách màu tùy chỉnh mới */\n readonly functionSetListColorCustom = input<(colors: Array<string>) => Promise<void>>();\n\n // #region OUTPUT\n /** Emit khi màu sắc hoặc độ mờ thay đổi */\n readonly outColorChange = output<IColorPickerData>();\n\n ngOnInit() {\n this.getListColorDefault();\n }\n\n /* FUNCTIONS */\n private async getListColorDefault() {\n const functionGetListColorDefault = this.functionGetListColorDefault();\n\n if (functionGetListColorDefault) {\n this.colorDefault.set(await functionGetListColorDefault());\n\n return;\n }\n this.colorDefault.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksuwesfsdfsdf')) || []);\n }\n\n private async getListColorCustom() {\n const functionGetListColorCustom = this.functionGetListColorCustom();\n\n if (functionGetListColorCustom) {\n this.colorCustom.set(await functionGetListColorCustom());\n\n return;\n }\n this.colorCustom.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf')) || []);\n }\n\n protected handlerPopoverEvent(type: TYPE_POPOVER_EVENT) {\n if (type === 'show') {\n this.showPopup.set(true);\n this.getListColorCustom();\n\n return;\n }\n if (type === 'remove') {\n this.showPopup.set(false);\n }\n }\n\n protected handlerSelectColor(event: Event, color: string) {\n event.stopPropagation();\n this.data.update((value) => ({ ...value, color }));\n this.outColorChange.emit(this.data());\n }\n\n protected handlerChangeOpacity() {\n this.outColorChange.emit(this.data());\n }\n\n protected handlerColorChange(event: string) {\n this.colorAdd.set(event);\n }\n\n protected handlerPopoverAddColorEvent(type: TYPE_POPOVER_EVENT) {\n if (type === 'show') {\n this.flagMouse.set({ isMouseEnter: true, isMouseEnterContent: true });\n\n return;\n }\n if (type === 'remove') {\n setTimeout(() => {\n this.flagMouse.set({ isMouseEnter: false, isMouseEnterContent: false });\n }, 500);\n }\n }\n\n protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControl.set(event);\n }\n\n protected handlerAddColorFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverAddColorFunctionControl.set(event);\n }\n\n protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n event.stopPropagation();\n this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n if (action === 'cancel') {\n return;\n }\n const colorAdd = this.colorAdd();\n\n if (!colorAdd) {\n return;\n }\n this.handlerSelectColor(event, colorAdd);\n if (this.colorCustom().find((color) => color === colorAdd)) {\n return;\n }\n this.colorCustom.update((value) => {\n value.unshift(colorAdd);\n if (value.length > 8) {\n value.splice(8, value.length - 8);\n }\n\n return [...value];\n });\n this.setColorCustom();\n }\n\n private async setColorCustom() {\n const functionSetListColorCustom = this.functionSetListColorCustom();\n\n if (functionSetListColorCustom) {\n await functionSetListColorCustom(this.colorCustom());\n\n return;\n }\n UtilsCache.SetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf', this.colorCustom(), UtilsCache.CACHE_EXPIRE_NONE);\n }\n\n ngOnDestroy() {\n this.popoverFunctionControl()?.removePopoverOverlay();\n this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n }\n}\n","<div\n class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n [class.libs-ui-border-general]=\"!showPopup()\"\n [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n <div\n LibsUiComponentsPopoverDirective\n class=\"w-full flex\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: element,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[334px]',\n direction: 'left',\n directionDistance: 4,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [flagMouse]=\"flagMouse()\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n <div class=\"px-[16px] flex items-center\">\n <span\n class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n [style.background-color]=\"data().color\"></span>\n <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n </div>\n </div>\n <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n <libs_ui-components-inputs-valid\n [noBorder]=\"true\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [(item)]=\"data\"\n [fieldNameBind]=\"'opacity'\"\n [unitsRight]=\"[{ id: '%', label: '%' }]\"\n [keySelectedUnitRight]=\"'%'\"\n [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n (outValueChange)=\"handlerChangeOpacity()\" />\n </div>\n</div>\n\n<ng-template #element>\n <div class=\"p-[16px] w-full\">\n <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorDefault(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"\n (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-add'\"\n [label]=\"'i18n_add_new'\"\n [popover]=\"{\n mode: 'click-toggle',\n ignoreHiddenPopoverContentWhenMouseLeave: true,\n config: {\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex() + 1,\n classInclude: 'w-[350px]',\n direction: 'left',\n directionDistance: -100,\n position: {\n mode: 'start',\n distance: -165,\n },\n },\n }\"\n [classInclude]=\"'py-[2px] px-[0]'\"\n (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n </div>\n @if (colorCustom().length) {\n <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorCustom(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"\n (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\" />\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAUA;;;AAGG;MASU,oCAAoC,CAAA;;AAErC,IAAA,YAAY,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;AACzC,IAAA,SAAS,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;AACnC,IAAA,WAAW,GAAG,MAAM,CAAgB,EAAE,CAAC,CAAC;AACxC,IAAA,SAAS,GAAG,MAAM,CAAa,EAAE,YAAY,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,CAAC;AAE7E,IAAA,QAAQ,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;AACjD,IAAA,sBAAsB,GAAG,MAAM,CAA2C,SAAS,CAAC,CAAC;AACrF,IAAA,8BAA8B,GAAG,MAAM,CAA2C,SAAS,CAAC,CAAC;;;AAIrG,IAAA,IAAI,GAAG,KAAK,CAAmB,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;;AAG5D,IAAA,MAAM,GAAG,KAAK,CAAS,IAAI,CAAC,CAAC;;IAG7B,aAAa,GAAG,KAAK,EAAwB,CAAC;;IAG9C,2BAA2B,GAAG,KAAK,EAAgC,CAAC;;IAGpE,0BAA0B,GAAG,KAAK,EAAgC,CAAC;;IAGnE,0BAA0B,GAAG,KAAK,EAA4C,CAAC;;;IAI/E,cAAc,GAAG,MAAM,EAAoB,CAAC;IAErD,QAAQ,GAAA;QACN,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;;AAGO,IAAA,MAAM,mBAAmB,GAAA;AAC/B,QAAA,MAAM,2BAA2B,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QAEvE,IAAI,2BAA2B,EAAE;YAC/B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,2BAA2B,EAAE,CAAC,CAAC;YAE3D,OAAO;SACR;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,UAAU,CAAC,QAAQ,CAAC,oDAAoD,CAAC,KAAK,EAAE,CAAC,CAAC;KAChH;AAEO,IAAA,MAAM,kBAAkB,GAAA;AAC9B,QAAA,MAAM,0BAA0B,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAErE,IAAI,0BAA0B,EAAE;YAC9B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,0BAA0B,EAAE,CAAC,CAAC;YAEzD,OAAO;SACR;AACD,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,UAAU,CAAC,QAAQ,CAAC,kEAAkE,CAAC,KAAK,EAAE,CAAC,CAAC;KAC7H;AAES,IAAA,mBAAmB,CAAC,IAAwB,EAAA;AACpD,QAAA,IAAI,IAAI,KAAK,MAAM,EAAE;AACnB,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,OAAO;SACR;AACD,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;SAC3B;KACF;IAES,kBAAkB,CAAC,KAAY,EAAE,KAAa,EAAA;QACtD,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,MAAM,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACnD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACvC;IAES,oBAAoB,GAAA;QAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KACvC;AAES,IAAA,kBAAkB,CAAC,KAAa,EAAA;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KAC1B;AAES,IAAA,2BAA2B,CAAC,IAAwB,EAAA;AAC5D,QAAA,IAAI,IAAI,KAAK,MAAM,EAAE;AACnB,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAC;YAEtE,OAAO;SACR;AACD,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,CAAC,CAAC;aACzE,EAAE,GAAG,CAAC,CAAC;SACT;KACF;AAES,IAAA,sBAAsB,CAAC,KAAmC,EAAA;AAClE,QAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KACxC;AAES,IAAA,8BAA8B,CAAC,KAAmC,EAAA;AAC1E,QAAA,IAAI,CAAC,8BAA8B,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;KAChD;IAES,aAAa,CAAC,KAAY,EAAE,MAA0B,EAAA;QAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,8BAA8B,EAAE,EAAE,oBAAoB,EAAE,CAAC;AAC9D,QAAA,IAAI,MAAM,KAAK,QAAQ,EAAE;YACvB,OAAO;SACR;AACD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEjC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;AACD,QAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AACzC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,KAAK,QAAQ,CAAC,EAAE;YAC1D,OAAO;SACR;QACD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,KAAI;AAChC,YAAA,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AACxB,YAAA,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;aACnC;AAED,YAAA,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC;AACpB,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;AAEO,IAAA,MAAM,cAAc,GAAA;AAC1B,QAAA,MAAM,0BAA0B,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAErE,IAAI,0BAA0B,EAAE;AAC9B,YAAA,MAAM,0BAA0B,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;YAErD,OAAO;SACR;AACD,QAAA,UAAU,CAAC,QAAQ,CAAC,kEAAkE,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;KAC3I;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,sBAAsB,EAAE,EAAE,oBAAoB,EAAE,CAAC;AACtD,QAAA,IAAI,CAAC,8BAA8B,EAAE,EAAE,oBAAoB,EAAE,CAAC;KAC/D;wGApJU,oCAAoC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oCAAoC,ECtBjD,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,2BAAA,EAAA,EAAA,iBAAA,EAAA,6BAAA,EAAA,UAAA,EAAA,6BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,0BAAA,EAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,UAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,0BAAA,EAAA,EAAA,iBAAA,EAAA,4BAAA,EAAA,UAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,YAAA,EAAA,MAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,2qKAuIA,EDnHY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,EAAE,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,aAAa,EAAE,IAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gCAAgC,EAAE,QAAA,EAAA,+DAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,6BAAA,EAAA,cAAA,EAAA,0CAAA,EAAA,4BAAA,EAAA,kCAAA,EAAA,8BAAA,EAAA,oBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,sCAAsC,EAAE,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,yBAAA,EAAA,+BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,mCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,oCAAoC,g3DAAE,oCAAoC,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,mCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,4BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEnL,oCAAoC,EAAA,UAAA,EAAA,CAAA;kBARhD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iCAAiC,cAE/B,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,WACtC,CAAC,eAAe,EAAE,aAAa,EAAE,gCAAgC,EAAE,sCAAsC,EAAE,oCAAoC,EAAE,oCAAoC,CAAC,EAAA,QAAA,EAAA,2qKAAA,EAAA,CAAA;;;AEpBjM;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-color",
|
|
3
|
-
"version": "0.2.356-
|
|
3
|
+
"version": "0.2.356-43",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-buttons-button": "0.2.356-
|
|
8
|
-
"@libs-ui/components-inputs-valid": "0.2.356-
|
|
9
|
-
"@libs-ui/components-popover": "0.2.356-
|
|
10
|
-
"@libs-ui/utils": "0.2.356-
|
|
7
|
+
"@libs-ui/components-buttons-button": "0.2.356-43",
|
|
8
|
+
"@libs-ui/components-inputs-valid": "0.2.356-43",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.356-43",
|
|
10
|
+
"@libs-ui/utils": "0.2.356-43",
|
|
11
11
|
"@ngx-translate/core": "^15.0.0",
|
|
12
|
-
"@libs-ui/components-color-picker": "0.2.356-
|
|
12
|
+
"@libs-ui/components-color-picker": "0.2.356-43"
|
|
13
13
|
},
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"module": "fesm2022/libs-ui-components-inputs-color.mjs",
|