@libs-ui/components-buttons-select-color 0.2.356-9 → 0.2.357-0
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,272 +1,291 @@
|
|
|
1
1
|
# @libs-ui/components-buttons-select-color
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Button tích hợp color picker dạng popover, hỗ trợ chế độ apply ngay hoặc apply sau khi xác nhận.
|
|
4
4
|
|
|
5
5
|
## Giới thiệu
|
|
6
6
|
|
|
7
|
-
`LibsUiComponentsButtonsSelectColorComponent` là
|
|
7
|
+
`LibsUiComponentsButtonsSelectColorComponent` là standalone Angular component hiển thị một button mở popover chứa color picker. Component hỗ trợ hai chế độ: `applyNow = true` để emit màu ngay khi chọn, hoặc `applyNow = false` để hiển thị nút Cancel / Apply trước khi xác nhận. Màu có thể được emit dưới dạng chuỗi đơn (`outColorChange`) hoặc object chứa tất cả định dạng (`outColorChangeMultipleType`).
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Tính năng
|
|
10
10
|
|
|
11
|
-
- ✅
|
|
12
|
-
- ✅
|
|
13
|
-
- ✅ Tùy chỉnh button trigger
|
|
14
|
-
- ✅ Hỗ trợ external content
|
|
15
|
-
- ✅
|
|
16
|
-
- ✅
|
|
17
|
-
- ✅
|
|
18
|
-
- ✅
|
|
19
|
-
- ✅ OnPush Change Detection
|
|
20
|
-
- ✅ Auto cleanup khi destroy component
|
|
11
|
+
- ✅ Hai chế độ: Apply ngay (`applyNow = true`) hoặc Apply sau qua nút xác nhận (`applyNow = false`)
|
|
12
|
+
- ✅ Emit màu dưới nhiều định dạng: HEX, RGB, RGBA, HSL, HSLA, Alpha
|
|
13
|
+
- ✅ Tùy chỉnh button trigger qua `IButton` (label, icon, type, disabled...)
|
|
14
|
+
- ✅ Hỗ trợ external content — dùng bất kỳ element nào làm trigger thay cho button mặc định
|
|
15
|
+
- ✅ Tùy chỉnh color picker options (màu khởi tạo, hiển thị formats, alpha slider...)
|
|
16
|
+
- ✅ Điều hướng popover 4 chiều: `top`, `bottom`, `left`, `right`
|
|
17
|
+
- ✅ Two-way binding cho `zIndex` tránh xung đột với modal/dialog khác
|
|
18
|
+
- ✅ Tự động cleanup popover khi component bị destroy
|
|
19
|
+
- ✅ OnPush Change Detection + Angular Signals
|
|
21
20
|
|
|
22
21
|
## Khi nào sử dụng
|
|
23
22
|
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
- Khi cần preview màu trước khi
|
|
27
|
-
-
|
|
23
|
+
- Cho phép user chọn màu trong các tính năng theme customization, color settings
|
|
24
|
+
- Tích hợp color picker vào toolbar, design tool, form nhập màu sắc
|
|
25
|
+
- Khi cần preview màu trước khi confirm (`applyNow = false`)
|
|
26
|
+
- Khi cần hiển thị một color swatch làm trigger thay cho button thông thường (`externalContent = true`)
|
|
28
27
|
|
|
29
28
|
## Cài đặt
|
|
30
29
|
|
|
31
30
|
```bash
|
|
32
|
-
# npm
|
|
33
31
|
npm install @libs-ui/components-buttons-select-color
|
|
34
|
-
|
|
35
|
-
# yarn
|
|
36
|
-
yarn add @libs-ui/components-buttons-select-color
|
|
37
32
|
```
|
|
38
33
|
|
|
39
34
|
## Import
|
|
40
35
|
|
|
41
36
|
```typescript
|
|
42
37
|
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
43
|
-
import {
|
|
38
|
+
import { IOutputColorChangeMultipleType, IPickerCustomOptions } from '@libs-ui/components-color-picker';
|
|
44
39
|
import { IButton } from '@libs-ui/components-buttons-button';
|
|
45
40
|
|
|
46
41
|
@Component({
|
|
47
42
|
standalone: true,
|
|
48
43
|
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
49
|
-
// ...
|
|
50
44
|
})
|
|
51
|
-
export class
|
|
45
|
+
export class MyComponent {}
|
|
52
46
|
```
|
|
53
47
|
|
|
54
|
-
## Ví dụ
|
|
48
|
+
## Ví dụ sử dụng
|
|
55
49
|
|
|
56
|
-
###
|
|
50
|
+
### 1. Apply ngay khi chọn màu
|
|
57
51
|
|
|
58
52
|
```html
|
|
53
|
+
<!-- template.html -->
|
|
59
54
|
<libs_ui-components-buttons-select_color
|
|
60
|
-
[button]="{ label: 'Select Color' }"
|
|
55
|
+
[button]="{ label: 'Select Color', type: 'button-primary' }"
|
|
61
56
|
[applyNow]="true"
|
|
62
|
-
(outColorChange)="
|
|
57
|
+
(outColorChange)="handlerColorChange($event)"
|
|
58
|
+
/>
|
|
59
|
+
|
|
60
|
+
<div [style.background-color]="selectedColor()" class="w-24 h-8 rounded mt-4">
|
|
61
|
+
{{ selectedColor() }}
|
|
62
|
+
</div>
|
|
63
63
|
```
|
|
64
64
|
|
|
65
65
|
```typescript
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
// component.ts
|
|
67
|
+
import { Component, signal } from '@angular/core';
|
|
68
|
+
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
69
|
+
|
|
70
|
+
@Component({
|
|
71
|
+
standalone: true,
|
|
72
|
+
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
73
|
+
})
|
|
74
|
+
export class MyComponent {
|
|
75
|
+
protected selectedColor = signal<string>('#3b82f6');
|
|
76
|
+
|
|
77
|
+
protected handlerColorChange(event: string): void {
|
|
78
|
+
event.stopPropagation?.();
|
|
79
|
+
this.selectedColor.set(event);
|
|
80
|
+
}
|
|
68
81
|
}
|
|
69
82
|
```
|
|
70
83
|
|
|
71
|
-
###
|
|
84
|
+
### 2. Chọn trước, bấm Apply sau + nhận nhiều định dạng màu
|
|
72
85
|
|
|
73
86
|
```html
|
|
87
|
+
<!-- template.html -->
|
|
74
88
|
<libs_ui-components-buttons-select_color
|
|
75
|
-
[button]="{ label: 'Choose Color' }"
|
|
89
|
+
[button]="{ label: 'Choose Color', type: 'button-secondary' }"
|
|
76
90
|
[applyNow]="false"
|
|
77
|
-
(outColorChange)="
|
|
78
|
-
(outColorChangeMultipleType)="
|
|
91
|
+
(outColorChange)="handlerColorChange($event)"
|
|
92
|
+
(outColorChangeMultipleType)="handlerColorChangeMultipleType($event)"
|
|
93
|
+
/>
|
|
79
94
|
```
|
|
80
95
|
|
|
81
96
|
```typescript
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
97
|
+
// component.ts
|
|
98
|
+
import { Component, signal } from '@angular/core';
|
|
99
|
+
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
100
|
+
import { IOutputColorChangeMultipleType } from '@libs-ui/components-color-picker';
|
|
85
101
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
102
|
+
@Component({
|
|
103
|
+
standalone: true,
|
|
104
|
+
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
105
|
+
})
|
|
106
|
+
export class MyComponent {
|
|
107
|
+
protected selectedColor = signal<string>('#10b981');
|
|
108
|
+
protected colorFormats = signal<IOutputColorChangeMultipleType | null>(null);
|
|
109
|
+
|
|
110
|
+
protected handlerColorChange(event: string): void {
|
|
111
|
+
this.selectedColor.set(event);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
protected handlerColorChangeMultipleType(event: IOutputColorChangeMultipleType): void {
|
|
115
|
+
this.colorFormats.set(event);
|
|
116
|
+
// event.hex → '#10b981'
|
|
117
|
+
// event.rgb → 'rgb(16, 185, 129)'
|
|
118
|
+
// event.rgba → 'rgba(16, 185, 129, 1)'
|
|
119
|
+
// event.hsl → 'hsl(160, 84%, 39%)'
|
|
120
|
+
// event.hsla → 'hsla(160, 84%, 39%, 1)'
|
|
121
|
+
// event.alpha → 1
|
|
122
|
+
}
|
|
93
123
|
}
|
|
94
124
|
```
|
|
95
125
|
|
|
96
|
-
###
|
|
126
|
+
### 3. Tùy chỉnh color picker options
|
|
97
127
|
|
|
98
128
|
```html
|
|
129
|
+
<!-- template.html -->
|
|
99
130
|
<libs_ui-components-buttons-select_color
|
|
100
|
-
[button]="{
|
|
101
|
-
|
|
102
|
-
type: 'button-secondary',
|
|
103
|
-
classIconLeft: 'libs-ui-icon-color-palette'
|
|
104
|
-
}"
|
|
131
|
+
[button]="{ label: 'Pick Color', type: 'button-secondary', classIconLeft: 'libs-ui-icon-color-palette' }"
|
|
132
|
+
[customOptions]="customOptions"
|
|
105
133
|
[applyNow]="true"
|
|
106
|
-
(outColorChange)="
|
|
134
|
+
(outColorChange)="handlerColorChange($event)"
|
|
135
|
+
/>
|
|
107
136
|
```
|
|
108
137
|
|
|
109
|
-
|
|
138
|
+
```typescript
|
|
139
|
+
// component.ts
|
|
140
|
+
import { Component, signal } from '@angular/core';
|
|
141
|
+
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
142
|
+
import { IPickerCustomOptions } from '@libs-ui/components-color-picker';
|
|
110
143
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
[
|
|
114
|
-
|
|
144
|
+
@Component({
|
|
145
|
+
standalone: true,
|
|
146
|
+
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
147
|
+
})
|
|
148
|
+
export class MyComponent {
|
|
149
|
+
protected selectedColor = signal<string>('#ff5733');
|
|
150
|
+
|
|
151
|
+
protected readonly customOptions: IPickerCustomOptions = {
|
|
115
152
|
color: '#ff5733',
|
|
116
153
|
showAlpha: true,
|
|
117
154
|
showHex: true,
|
|
118
155
|
showRgb: true,
|
|
119
|
-
showHsl:
|
|
120
|
-
format: 'hex'
|
|
121
|
-
}
|
|
122
|
-
[applyNow]="true"
|
|
123
|
-
(outColorChange)="handleColorChange($event)" />
|
|
124
|
-
```
|
|
156
|
+
showHsl: true,
|
|
157
|
+
format: 'hex',
|
|
158
|
+
};
|
|
125
159
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
showHex: true,
|
|
131
|
-
showRgb: true,
|
|
132
|
-
showHsl: false,
|
|
133
|
-
format: 'hex',
|
|
134
|
-
};
|
|
160
|
+
protected handlerColorChange(event: string): void {
|
|
161
|
+
this.selectedColor.set(event);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
135
164
|
```
|
|
136
165
|
|
|
137
|
-
### External
|
|
166
|
+
### 4. External content — dùng color swatch làm trigger
|
|
138
167
|
|
|
139
168
|
```html
|
|
169
|
+
<!-- template.html -->
|
|
140
170
|
<libs_ui-components-buttons-select_color
|
|
141
171
|
[externalContent]="true"
|
|
142
172
|
[applyNow]="true"
|
|
143
|
-
(outColorChange)="
|
|
173
|
+
(outColorChange)="handlerColorChange($event)">
|
|
144
174
|
<div class="libs-ui-buttons-select-color">
|
|
145
175
|
<div
|
|
146
|
-
class="w-
|
|
147
|
-
[style.background-color]="selectedColor"
|
|
176
|
+
class="w-12 h-12 rounded-lg border-2 border-gray-300 cursor-pointer shadow-sm hover:shadow-md transition-shadow"
|
|
177
|
+
[style.background-color]="selectedColor()">
|
|
178
|
+
</div>
|
|
148
179
|
</div>
|
|
149
180
|
</libs_ui-components-buttons-select_color>
|
|
150
181
|
```
|
|
151
182
|
|
|
152
183
|
```typescript
|
|
153
|
-
|
|
184
|
+
// component.ts
|
|
185
|
+
import { Component, signal } from '@angular/core';
|
|
186
|
+
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
187
|
+
|
|
188
|
+
@Component({
|
|
189
|
+
standalone: true,
|
|
190
|
+
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
191
|
+
})
|
|
192
|
+
export class MyComponent {
|
|
193
|
+
protected selectedColor = signal<string>('#8b5cf6');
|
|
154
194
|
|
|
155
|
-
|
|
156
|
-
|
|
195
|
+
protected handlerColorChange(event: string): void {
|
|
196
|
+
this.selectedColor.set(event);
|
|
197
|
+
}
|
|
157
198
|
}
|
|
158
199
|
```
|
|
159
200
|
|
|
160
|
-
###
|
|
201
|
+
### 5. Icon only button với hướng popover tùy chỉnh
|
|
161
202
|
|
|
162
203
|
```html
|
|
163
|
-
<!--
|
|
164
|
-
<libs_ui-components-buttons-select_color
|
|
165
|
-
[button]="{ label: 'Bottom' }"
|
|
166
|
-
[direction]="'bottom'"
|
|
167
|
-
[applyNow]="true" />
|
|
168
|
-
|
|
169
|
-
<!-- Top -->
|
|
204
|
+
<!-- template.html -->
|
|
170
205
|
<libs_ui-components-buttons-select_color
|
|
171
|
-
[button]="{
|
|
206
|
+
[button]="{ classIconLeft: 'libs-ui-icon-color-palette', iconOnlyType: true }"
|
|
172
207
|
[direction]="'top'"
|
|
173
|
-
[applyNow]="true"
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
<libs_ui-components-buttons-select_color
|
|
177
|
-
[button]="{ label: 'Left' }"
|
|
178
|
-
[direction]="'left'"
|
|
179
|
-
[applyNow]="true" />
|
|
180
|
-
|
|
181
|
-
<!-- Right -->
|
|
182
|
-
<libs_ui-components-buttons-select_color
|
|
183
|
-
[button]="{ label: 'Right' }"
|
|
184
|
-
[direction]="'right'"
|
|
185
|
-
[applyNow]="true" />
|
|
208
|
+
[applyNow]="true"
|
|
209
|
+
(outColorChange)="handlerColorChange($event)"
|
|
210
|
+
/>
|
|
186
211
|
```
|
|
187
212
|
|
|
188
|
-
|
|
213
|
+
```typescript
|
|
214
|
+
// component.ts
|
|
215
|
+
import { Component, signal } from '@angular/core';
|
|
216
|
+
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
217
|
+
|
|
218
|
+
@Component({
|
|
219
|
+
standalone: true,
|
|
220
|
+
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
221
|
+
})
|
|
222
|
+
export class MyComponent {
|
|
223
|
+
protected selectedColor = signal<string>('#3b82f6');
|
|
189
224
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
iconOnlyType: true
|
|
195
|
-
}"
|
|
196
|
-
[applyNow]="true"
|
|
197
|
-
(outColorChange)="handleColorChange($event)" />
|
|
225
|
+
protected handlerColorChange(event: string): void {
|
|
226
|
+
this.selectedColor.set(event);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
198
229
|
```
|
|
199
230
|
|
|
200
|
-
###
|
|
231
|
+
### 6. Two-way binding zIndex tránh xung đột với modal
|
|
201
232
|
|
|
202
233
|
```html
|
|
234
|
+
<!-- template.html -->
|
|
203
235
|
<libs_ui-components-buttons-select_color
|
|
204
236
|
[button]="{ label: 'Select Color' }"
|
|
205
|
-
[(zIndex)]="
|
|
237
|
+
[(zIndex)]="popoverZIndex"
|
|
206
238
|
[applyNow]="true"
|
|
207
|
-
(outColorChange)="
|
|
239
|
+
(outColorChange)="handlerColorChange($event)"
|
|
240
|
+
/>
|
|
208
241
|
```
|
|
209
242
|
|
|
210
243
|
```typescript
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
## API
|
|
215
|
-
|
|
216
|
-
### libs_ui-components-buttons-select_color
|
|
244
|
+
// component.ts
|
|
245
|
+
import { Component, signal } from '@angular/core';
|
|
246
|
+
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
|
|
217
247
|
|
|
218
|
-
|
|
248
|
+
@Component({
|
|
249
|
+
standalone: true,
|
|
250
|
+
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
251
|
+
})
|
|
252
|
+
export class MyComponent {
|
|
253
|
+
protected selectedColor = signal<string>('#3b82f6');
|
|
254
|
+
protected popoverZIndex = 2000;
|
|
219
255
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
| `[direction]` | `TYPE_POPOVER_DIRECTION` | `'bottom'` | Hướng hiển thị popover |
|
|
226
|
-
| `[externalContent]` | `boolean` | `false` | Sử dụng custom content thay vì button mặc định |
|
|
227
|
-
| `[(zIndex)]` | `number` | `1200` | Z-index của popover (two-way binding) |
|
|
256
|
+
protected handlerColorChange(event: string): void {
|
|
257
|
+
this.selectedColor.set(event);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
```
|
|
228
261
|
|
|
229
|
-
|
|
262
|
+
## @Input()
|
|
230
263
|
|
|
231
|
-
|
|
|
232
|
-
|
|
233
|
-
| `
|
|
234
|
-
| `
|
|
264
|
+
| Input | Type | Default | Mô tả | Ví dụ |
|
|
265
|
+
|---|---|---|---|---|
|
|
266
|
+
| `[applyNow]` | `boolean` | `false` | `true`: emit màu ngay khi chọn, không cần xác nhận. `false`: hiển thị nút Cancel / Apply, emit khi bấm Apply | `[applyNow]="true"` |
|
|
267
|
+
| `[button]` | `IButton` | `undefined` | Cấu hình cho button trigger (label, type, icon, disabled...). Bị bỏ qua khi `externalContent = true` | `[button]="{ label: 'Pick', type: 'button-primary' }"` |
|
|
268
|
+
| `[customOptions]` | `IPickerCustomOptions` | `undefined` | Tùy chỉnh color picker: màu khởi tạo, hiện/ẩn formats (hex, rgb, hsl), alpha slider, kích thước thanh slider | `[customOptions]="{ color: '#ff0000', showAlpha: true, format: 'hex' }"` |
|
|
269
|
+
| `[direction]` | `TYPE_POPOVER_DIRECTION` | `'bottom'` | Hướng mở popover so với trigger button | `[direction]="'top'"` |
|
|
270
|
+
| `[externalContent]` | `boolean` | `false` | `true`: dùng content projection (class `libs-ui-buttons-select-color`) thay cho button mặc định | `[externalContent]="true"` |
|
|
271
|
+
| `[(zIndex)]` | `number` | `1200` | Z-index của popover, hỗ trợ two-way binding | `[(zIndex)]="myZIndex"` |
|
|
235
272
|
|
|
236
|
-
|
|
273
|
+
## @Output()
|
|
237
274
|
|
|
238
|
-
|
|
|
239
|
-
|
|
240
|
-
| `
|
|
275
|
+
| Output | Type | Mô tả | Handler TS | Binding HTML |
|
|
276
|
+
|---|---|---|---|---|
|
|
277
|
+
| `(outColorChange)` | `string` | Emit màu đã chọn dưới dạng chuỗi, format theo `customOptions.format` (mặc định: hex). Khi `applyNow = false` chỉ emit khi bấm Apply | `handlerColorChange(event: string): void { this.selectedColor.set(event); }` | `(outColorChange)="handlerColorChange($event)"` |
|
|
278
|
+
| `(outColorChangeMultipleType)` | `IOutputColorChangeMultipleType` | Emit object chứa tất cả định dạng màu (hex, rgb, rgba, hsl, hsla, alpha) cùng lúc. Khi `applyNow = false` chỉ emit khi bấm Apply | `handlerColorChangeMultipleType(event: IOutputColorChangeMultipleType): void { this.colorFormats.set(event); }` | `(outColorChangeMultipleType)="handlerColorChangeMultipleType($event)"` |
|
|
241
279
|
|
|
242
280
|
## Types & Interfaces
|
|
243
281
|
|
|
244
|
-
### IButton Interface
|
|
245
|
-
|
|
246
282
|
```typescript
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
sizeButton?: TYPE_SIZE_BUTTON;
|
|
251
|
-
iconOnlyType?: boolean;
|
|
252
|
-
label?: string;
|
|
253
|
-
disable?: boolean;
|
|
254
|
-
classInclude?: string;
|
|
255
|
-
classIconLeft?: string;
|
|
256
|
-
classIconRight?: string;
|
|
257
|
-
classLabel?: string;
|
|
258
|
-
popover?: IPopover;
|
|
259
|
-
ignoreStopPropagationEvent?: boolean;
|
|
260
|
-
zIndex?: number;
|
|
261
|
-
isPending?: boolean;
|
|
262
|
-
action?: (data?: any) => Promise<void>;
|
|
263
|
-
styleIconLeft?: Record<string, any>;
|
|
264
|
-
styleButton?: Record<string, any>;
|
|
265
|
-
buttonCustom?: IColorButton;
|
|
266
|
-
}
|
|
283
|
+
import { IOutputColorChangeMultipleType, IPickerCustomOptions } from '@libs-ui/components-color-picker';
|
|
284
|
+
import { IButton } from '@libs-ui/components-buttons-button';
|
|
285
|
+
import { TYPE_POPOVER_DIRECTION } from '@libs-ui/components-popover';
|
|
267
286
|
```
|
|
268
287
|
|
|
269
|
-
### IPickerCustomOptions
|
|
288
|
+
### IPickerCustomOptions
|
|
270
289
|
|
|
271
290
|
```typescript
|
|
272
291
|
export interface IPickerCustomOptions {
|
|
@@ -279,46 +298,46 @@ export interface IPickerCustomOptions {
|
|
|
279
298
|
/** Kích thước alpha bar [width, height] */
|
|
280
299
|
alphaBarSize?: Array<number>;
|
|
281
300
|
|
|
282
|
-
/** Hiển thị HSL input */
|
|
301
|
+
/** Hiển thị HSL input — default: true */
|
|
283
302
|
showHsl?: boolean;
|
|
284
303
|
|
|
285
|
-
/** Hiển thị RGB input */
|
|
304
|
+
/** Hiển thị RGB input — default: true */
|
|
286
305
|
showRgb?: boolean;
|
|
287
306
|
|
|
288
|
-
/** Hiển thị HEX input */
|
|
307
|
+
/** Hiển thị HEX input — default: true */
|
|
289
308
|
showHex?: boolean;
|
|
290
309
|
|
|
291
|
-
/** Hiển thị Alpha slider */
|
|
310
|
+
/** Hiển thị Alpha slider — default: false */
|
|
292
311
|
showAlpha?: boolean;
|
|
293
312
|
|
|
294
|
-
/** Màu khởi tạo
|
|
313
|
+
/** Màu khởi tạo: HEX string hoặc RGB array */
|
|
295
314
|
color?: string | Array<number>;
|
|
296
315
|
|
|
297
|
-
/** Format
|
|
316
|
+
/** Format chuỗi màu emit qua outColorChange */
|
|
298
317
|
format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
|
|
299
318
|
}
|
|
300
319
|
```
|
|
301
320
|
|
|
302
|
-
### IOutputColorChangeMultipleType
|
|
321
|
+
### IOutputColorChangeMultipleType
|
|
303
322
|
|
|
304
323
|
```typescript
|
|
305
324
|
export interface IOutputColorChangeMultipleType {
|
|
306
|
-
/** Màu dạng RGBA
|
|
325
|
+
/** Màu dạng RGBA: "rgba(255, 0, 0, 1)" */
|
|
307
326
|
rgba: string;
|
|
308
327
|
|
|
309
|
-
/** Màu dạng RGB
|
|
328
|
+
/** Màu dạng RGB: "rgb(255, 0, 0)" */
|
|
310
329
|
rgb: string;
|
|
311
330
|
|
|
312
|
-
/** Màu dạng HEX
|
|
331
|
+
/** Màu dạng HEX: "#ff0000" */
|
|
313
332
|
hex: string;
|
|
314
333
|
|
|
315
|
-
/** Màu dạng HSL
|
|
334
|
+
/** Màu dạng HSL: "hsl(0, 100%, 50%)" */
|
|
316
335
|
hsl: string;
|
|
317
336
|
|
|
318
|
-
/** Màu dạng HSLA
|
|
337
|
+
/** Màu dạng HSLA: "hsla(0, 100%, 50%, 1)" */
|
|
319
338
|
hsla: string;
|
|
320
339
|
|
|
321
|
-
/** Giá trị alpha
|
|
340
|
+
/** Giá trị alpha trong khoảng 0–1 */
|
|
322
341
|
alpha: number;
|
|
323
342
|
}
|
|
324
343
|
```
|
|
@@ -329,129 +348,65 @@ export interface IOutputColorChangeMultipleType {
|
|
|
329
348
|
export type TYPE_POPOVER_DIRECTION = 'top' | 'bottom' | 'left' | 'right';
|
|
330
349
|
```
|
|
331
350
|
|
|
332
|
-
|
|
351
|
+
### IButton (các thuộc tính thường dùng)
|
|
333
352
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
- Popover vẫn mở sau khi chọn màu (user có thể tiếp tục điều chỉnh)
|
|
339
|
-
|
|
340
|
-
### Apply Later Mode (applyNow = false)
|
|
341
|
-
|
|
342
|
-
- Khi chọn màu, component lưu tạm thời màu đã chọn
|
|
343
|
-
- Hiển thị Cancel và Apply buttons
|
|
344
|
-
- Click Cancel: đóng popover, không emit event
|
|
345
|
-
- Click Apply: emit `outColorChange` và `outColorChangeMultipleType`, sau đó đóng popover
|
|
346
|
-
|
|
347
|
-
### Popover Management
|
|
348
|
-
|
|
349
|
-
- Component tự động cleanup popover khi destroy (ngOnDestroy)
|
|
350
|
-
- Popover có thể được đóng bằng cách click outside (click-toggle mode)
|
|
351
|
-
- Z-index có thể được điều chỉnh để tránh conflicts
|
|
352
|
-
|
|
353
|
-
## Công nghệ
|
|
354
|
-
|
|
355
|
-
| Technology | Version | Purpose |
|
|
356
|
-
| --------------- | ------- | ---------------- |
|
|
357
|
-
| Angular | 18+ | Framework |
|
|
358
|
-
| Angular Signals | - | State management |
|
|
359
|
-
| TailwindCSS | 3.x | Styling |
|
|
360
|
-
| OnPush | - | Change Detection |
|
|
361
|
-
|
|
362
|
-
## Demo
|
|
353
|
+
```typescript
|
|
354
|
+
export interface IButton {
|
|
355
|
+
/** Nhãn hiển thị trên button */
|
|
356
|
+
label?: string;
|
|
363
357
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
```
|
|
358
|
+
/** Kiểu button: 'button-primary' | 'button-secondary' | 'button-third' | ... */
|
|
359
|
+
type?: TYPE_BUTTON;
|
|
367
360
|
|
|
368
|
-
|
|
361
|
+
/** Class icon bên trái */
|
|
362
|
+
classIconLeft?: string;
|
|
369
363
|
|
|
370
|
-
|
|
364
|
+
/** Class icon bên phải */
|
|
365
|
+
classIconRight?: string;
|
|
371
366
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
npx nx test buttons-select-color
|
|
367
|
+
/** Hiển thị dạng icon only (không label) */
|
|
368
|
+
iconOnlyType?: boolean;
|
|
375
369
|
|
|
376
|
-
|
|
377
|
-
|
|
370
|
+
/** Vô hiệu hóa button */
|
|
371
|
+
disable?: boolean;
|
|
378
372
|
|
|
379
|
-
|
|
380
|
-
|
|
373
|
+
/** Class thêm vào button */
|
|
374
|
+
classInclude?: string;
|
|
375
|
+
}
|
|
381
376
|
```
|
|
382
377
|
|
|
383
|
-
##
|
|
378
|
+
## Lưu ý quan trọng
|
|
384
379
|
|
|
385
|
-
-
|
|
386
|
-
- `@libs-ui/components-buttons-button`: 0.2.355-14
|
|
387
|
-
- `@libs-ui/components-color-picker`: 0.2.355-14
|
|
388
|
-
- `@libs-ui/components-popover`: 0.2.355-14
|
|
389
|
-
- `@ngx-translate/core`: ^15.0.0
|
|
390
|
-
|
|
391
|
-
## Important Notes
|
|
392
|
-
|
|
393
|
-
### ⚠️ External Content Selector
|
|
394
|
-
|
|
395
|
-
Khi sử dụng `[externalContent]="true"`, content projection PHẢI có class `libs-ui-buttons-select-color`:
|
|
380
|
+
⚠️ **External content selector bắt buộc**: Khi dùng `[externalContent]="true"`, wrapper div của content projection PHẢI có class `libs-ui-buttons-select-color`. Thiếu class này popover sẽ không mở.
|
|
396
381
|
|
|
397
382
|
```html
|
|
398
|
-
|
|
383
|
+
<!-- ĐÚNG -->
|
|
384
|
+
<libs_ui-components-buttons-select_color [externalContent]="true" [applyNow]="true">
|
|
399
385
|
<div class="libs-ui-buttons-select-color">
|
|
400
|
-
|
|
386
|
+
<div class="w-10 h-10 rounded cursor-pointer" [style.background-color]="selectedColor()"></div>
|
|
401
387
|
</div>
|
|
402
388
|
</libs_ui-components-buttons-select_color>
|
|
403
|
-
```
|
|
404
|
-
|
|
405
|
-
### ⚠️ Color Format
|
|
406
|
-
|
|
407
|
-
- `outColorChange` emit màu theo format được chỉ định trong `customOptions.format`
|
|
408
|
-
- Nếu không chỉ định format, mặc định là format của màu input
|
|
409
|
-
- `outColorChangeMultipleType` luôn emit tất cả các formats
|
|
410
|
-
|
|
411
|
-
### ⚠️ Z-Index Management
|
|
412
389
|
|
|
413
|
-
|
|
414
|
-
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
## Best Practices
|
|
422
|
-
|
|
423
|
-
1. **Sử dụng applyNow cho simple use cases**: Nếu không cần preview, dùng `applyNow="true"` để UX tốt hơn
|
|
424
|
-
2. **Handle multiple formats**: Sử dụng `outColorChangeMultipleType` khi cần lưu nhiều formats
|
|
425
|
-
3. **Custom trigger cho special cases**: Dùng `externalContent` khi cần custom UI (color swatch, preview box...)
|
|
426
|
-
4. **Set initial color**: Luôn set `customOptions.color` để có màu khởi tạo
|
|
427
|
-
5. **Responsive z-index**: Điều chỉnh z-index phù hợp với layout hierarchy
|
|
428
|
-
|
|
429
|
-
## Troubleshooting
|
|
430
|
-
|
|
431
|
-
### Color picker không hiển thị
|
|
432
|
-
|
|
433
|
-
- Kiểm tra z-index có bị overlap bởi elements khác không
|
|
434
|
-
- Verify `@libs-ui/components-color-picker` đã được install
|
|
435
|
-
- Check console errors
|
|
436
|
-
|
|
437
|
-
### External content không hoạt động
|
|
390
|
+
<!-- SAI — thiếu class libs-ui-buttons-select-color -->
|
|
391
|
+
<libs_ui-components-buttons-select_color [externalContent]="true" [applyNow]="true">
|
|
392
|
+
<div>
|
|
393
|
+
<div class="w-10 h-10 rounded cursor-pointer"></div>
|
|
394
|
+
</div>
|
|
395
|
+
</libs_ui-components-buttons-select_color>
|
|
396
|
+
```
|
|
438
397
|
|
|
439
|
-
|
|
440
|
-
- Verify `[externalContent]="true"` được set
|
|
441
|
-
- Check content projection syntax
|
|
398
|
+
⚠️ **Hành vi emit khi applyNow = false**: Khi `applyNow = false`, component giữ màu đã chọn trong state nội bộ và chỉ emit `outColorChange` + `outColorChangeMultipleType` khi user bấm nút "Apply". Bấm "Cancel" đóng popover mà không emit. Bấm "Apply" cũng tự đóng popover sau khi emit.
|
|
442
399
|
|
|
443
|
-
|
|
400
|
+
⚠️ **Format chuỗi từ outColorChange**: Output `outColorChange` emit chuỗi theo `customOptions.format`. Nếu không thiết lập `customOptions.format`, format mặc định phụ thuộc vào color picker. Để nhận màu theo tất cả định dạng cùng lúc, dùng `outColorChangeMultipleType`.
|
|
444
401
|
|
|
445
|
-
-
|
|
446
|
-
- Verify input color format hợp lệ
|
|
447
|
-
- Use `outColorChangeMultipleType` để có tất cả formats
|
|
402
|
+
⚠️ **Z-index khi dùng trong modal/dialog**: Default z-index là `1200`. Khi component nằm bên trong modal hoặc dialog có z-index cao hơn, cần tăng `[(zIndex)]` lên tương ứng để popover hiển thị đúng trên cùng.
|
|
448
403
|
|
|
449
|
-
|
|
404
|
+
⚠️ **Cleanup tự động**: Component tự gọi `removePopoverOverlay()` trong `ngOnDestroy`. Không cần cleanup thủ công ở component cha.
|
|
450
405
|
|
|
451
|
-
|
|
452
|
-
- Nếu cần đóng manual, có thể trigger click outside
|
|
453
|
-
- Check không có errors trong console
|
|
406
|
+
## Demo
|
|
454
407
|
|
|
455
|
-
|
|
408
|
+
```bash
|
|
409
|
+
npx nx serve core-ui
|
|
410
|
+
```
|
|
456
411
|
|
|
457
|
-
|
|
412
|
+
Truy cập: http://localhost:4500/buttons/select-color
|
|
@@ -4,9 +4,9 @@ import { IOutputColorChangeMultipleType, IPickerCustomOptions } from '@libs-ui/c
|
|
|
4
4
|
import { IPopoverFunctionControlEvent, TYPE_POPOVER_DIRECTION } from '@libs-ui/components-popover';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
export declare class LibsUiComponentsButtonsSelectColorComponent implements OnDestroy {
|
|
7
|
-
private color;
|
|
8
|
-
private colorMultipleType;
|
|
9
|
-
private popoverFunctionControl;
|
|
7
|
+
private readonly color;
|
|
8
|
+
private readonly colorMultipleType;
|
|
9
|
+
private readonly popoverFunctionControl;
|
|
10
10
|
readonly zIndex: import("@angular/core").ModelSignal<number>;
|
|
11
11
|
readonly customOptions: import("@angular/core").InputSignal<IPickerCustomOptions | undefined>;
|
|
12
12
|
readonly externalContent: import("@angular/core").InputSignal<boolean>;
|
|
@@ -62,4 +62,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{ selector: 'libs_ui-components-buttons-select_color', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsColorPickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\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(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\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 [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"handlerColorChangeMultipleType($event)\" />\n @if (!applyNow()) {\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 }\n </div>\n</ng-template>\n" }]
|
|
64
64
|
}] });
|
|
65
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
65
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9ucy1zZWxlY3QtY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvc2VsZWN0LWNvbG9yL3NyYy9idXR0b25zLXNlbGVjdC1jb2xvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zZWxlY3QtY29sb3Ivc3JjL2J1dHRvbnMtc2VsZWN0LWNvbG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVHLE9BQU8sRUFBVyxzQ0FBc0MsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3JHLE9BQU8sRUFBd0Qsb0NBQW9DLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM5SSxPQUFPLEVBQWdDLGdDQUFnQyxFQUEwQixNQUFNLDZCQUE2QixDQUFDO0FBQ3JJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7QUFVdEQsTUFBTSxPQUFPLDJDQUEyQztJQUN0RCxtQkFBbUI7SUFDRixLQUFLLEdBQUcsTUFBTSxDQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQzNCLGlCQUFpQixHQUFHLE1BQU0sQ0FBaUM7UUFDMUUsR0FBRyxFQUFFLEVBQUU7UUFDUCxJQUFJLEVBQUUsRUFBRTtRQUNSLEdBQUcsRUFBRSxFQUFFO1FBQ1AsR0FBRyxFQUFFLEVBQUU7UUFDUCxJQUFJLEVBQUUsRUFBRTtRQUNSLEtBQUssRUFBRSxDQUFDO0tBQ1QsQ0FBQyxDQUFDO0lBQ2Msc0JBQXNCLEdBQUcsTUFBTSxDQUEyQyxTQUFTLENBQUMsQ0FBQztJQUV0RyxnQkFBZ0I7SUFDUCxNQUFNLEdBQUcsS0FBSyxDQUFTLElBQUksQ0FBQyxDQUFDO0lBQzdCLGFBQWEsR0FBRyxLQUFLLEVBQXdCLENBQUM7SUFDOUMsZUFBZSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUN4QyxTQUFTLEdBQUcsS0FBSyxDQUF5QixRQUFRLENBQUMsQ0FBQztJQUNwRCxNQUFNLEdBQUcsS0FBSyxFQUFXLENBQUM7SUFDMUIsUUFBUSxHQUFHLEtBQUssQ0FBVSxLQUFLLENBQUMsQ0FBQztJQUUxQyxpQkFBaUI7SUFDUixjQUFjLEdBQUcsTUFBTSxFQUFVLENBQUM7SUFDbEMsMEJBQTBCLEdBQUcsTUFBTSxFQUFrQyxDQUFDO0lBRS9FLGVBQWU7SUFDTCxrQkFBa0IsQ0FBQyxLQUFhO1FBQ3hDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFaEMsT0FBTztRQUNULENBQUM7UUFDRCxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRVMsOEJBQThCLENBQUMsS0FBcUM7UUFDNUUsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQztZQUNwQixJQUFJLENBQUMsMEJBQTBCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRTVDLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRVMsc0JBQXNCLENBQUMsS0FBbUM7UUFDbEUsSUFBSSxDQUFDLHNCQUFzQixDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QyxDQUFDO0lBRVMsYUFBYSxDQUFDLEtBQVksRUFBRSxNQUEwQjtRQUM5RCxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLHNCQUFzQixFQUFFLEVBQUUsb0JBQW9CLEVBQUUsQ0FBQztRQUN0RCxJQUFJLE1BQU0sS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztZQUN2QyxJQUFJLENBQUMsMEJBQTBCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUM7UUFDakUsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHNCQUFzQixFQUFFLEVBQUUsb0JBQW9CLEVBQUUsQ0FBQztJQUN4RCxDQUFDO3dHQTNEVSwyQ0FBMkM7NEZBQTNDLDJDQUEyQyxpaENDZHhELGcvREEyREEsMkNEaERZLGVBQWUsK0JBQUUsZ0NBQWdDLG9nQkFBRSxzQ0FBc0Msc2pCQUFFLG9DQUFvQzs7NEZBRzlILDJDQUEyQztrQkFSdkQsU0FBUzsrQkFFRSx5Q0FBeUMsY0FFdkMsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLGdDQUFnQyxFQUFFLHNDQUFzQyxFQUFFLG9DQUFvQyxDQUFDLG1CQUN6SCx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQsIG1vZGVsLCBPbkRlc3Ryb3ksIG91dHB1dCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uLCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSU91dHB1dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlLCBJUGlja2VyQ3VzdG9tT3B0aW9ucywgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1jb2xvci1waWNrZXInO1xuaW1wb3J0IHsgSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQsIFRZUEVfUE9QT1ZFUl9ESVJFQ1RJT04gfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXInO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLXNlbGVjdF9jb2xvcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b25zLXNlbGVjdC1jb2xvci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50LCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zU2VsZWN0Q29sb3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByaXZhdGUgcmVhZG9ubHkgY29sb3IgPSBzaWduYWw8c3RyaW5nPignJyk7XG4gIHByaXZhdGUgcmVhZG9ubHkgY29sb3JNdWx0aXBsZVR5cGUgPSBzaWduYWw8SU91dHB1dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlPih7XG4gICAgaGV4OiAnJyxcbiAgICByZ2JhOiAnJyxcbiAgICByZ2I6ICcnLFxuICAgIGhzbDogJycsXG4gICAgaHNsYTogJycsXG4gICAgYWxwaGE6IDAsXG4gIH0pO1xuICBwcml2YXRlIHJlYWRvbmx5IHBvcG92ZXJGdW5jdGlvbkNvbnRyb2wgPSBzaWduYWw8SVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcblxuICAvLyAjcmVnaW9uIElOUFVUXG4gIHJlYWRvbmx5IHpJbmRleCA9IG1vZGVsPG51bWJlcj4oMTIwMCk7XG4gIHJlYWRvbmx5IGN1c3RvbU9wdGlvbnMgPSBpbnB1dDxJUGlja2VyQ3VzdG9tT3B0aW9ucz4oKTtcbiAgcmVhZG9ubHkgZXh0ZXJuYWxDb250ZW50ID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuICByZWFkb25seSBkaXJlY3Rpb24gPSBpbnB1dDxUWVBFX1BPUE9WRVJfRElSRUNUSU9OPignYm90dG9tJyk7XG4gIHJlYWRvbmx5IGJ1dHRvbiA9IGlucHV0PElCdXR0b24+KCk7XG4gIHJlYWRvbmx5IGFwcGx5Tm93ID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuXG4gIC8vICNyZWdpb24gT1VUUFVUXG4gIHJlYWRvbmx5IG91dENvbG9yQ2hhbmdlID0gb3V0cHV0PHN0cmluZz4oKTtcbiAgcmVhZG9ubHkgb3V0Q29sb3JDaGFuZ2VNdWx0aXBsZVR5cGUgPSBvdXRwdXQ8SU91dHB1dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlPigpO1xuXG4gIC8qIEZVTkNUSU9OUyAqL1xuICBwcm90ZWN0ZWQgaGFuZGxlckNvbG9yQ2hhbmdlKGV2ZW50OiBzdHJpbmcpIHtcbiAgICBpZiAodGhpcy5hcHBseU5vdygpKSB7XG4gICAgICB0aGlzLm91dENvbG9yQ2hhbmdlLmVtaXQoZXZlbnQpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuY29sb3Iuc2V0KGV2ZW50KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ29sb3JDaGFuZ2VNdWx0aXBsZVR5cGUoZXZlbnQ6IElPdXRwdXRDb2xvckNoYW5nZU11bHRpcGxlVHlwZSkge1xuICAgIGlmICh0aGlzLmFwcGx5Tm93KCkpIHtcbiAgICAgIHRoaXMub3V0Q29sb3JDaGFuZ2VNdWx0aXBsZVR5cGUuZW1pdChldmVudCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5jb2xvck11bHRpcGxlVHlwZS5zZXQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJGdW5jdGlvbkNvbnRyb2woZXZlbnQ6IElQb3BvdmVyRnVuY3Rpb25Db250cm9sRXZlbnQpIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2wuc2V0KGV2ZW50KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQWN0aW9uKGV2ZW50OiBFdmVudCwgYWN0aW9uOiAnY2FuY2VsJyB8ICdhcHBseScpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICBpZiAoYWN0aW9uID09PSAnYXBwbHknKSB7XG4gICAgICB0aGlzLm91dENvbG9yQ2hhbmdlLmVtaXQodGhpcy5jb2xvcigpKTtcbiAgICAgIHRoaXMub3V0Q29sb3JDaGFuZ2VNdWx0aXBsZVR5cGUuZW1pdCh0aGlzLmNvbG9yTXVsdGlwbGVUeXBlKCkpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMucG9wb3ZlckZ1bmN0aW9uQ29udHJvbCgpPy5yZW1vdmVQb3BvdmVyT3ZlcmxheSgpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiZmxleFwiXG4gIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyRGlyZWN0aXZlXG4gIFttb2RlXT1cIidjbGljay10b2dnbGUnXCJcbiAgW2lnbm9yZUhpZGRlblBvcG92ZXJDb250ZW50V2hlbk1vdXNlTGVhdmVdPVwidHJ1ZVwiXG4gIFtjb25maWddPVwie1xuICAgIHRlbXBsYXRlOiBjb2xvclBpY2tlcixcbiAgICB3aGl0ZVRoZW1lOiB0cnVlLFxuICAgIGlnbm9yZUFycm93OiB0cnVlLFxuICAgIHdpZHRoQnlQYXJlbnQ6IGZhbHNlLFxuICAgIG1heFdpZHRoOiA1MDAsXG4gICAgbWF4SGVpZ2h0OiA1MDAsXG4gICAgekluZGV4OiB6SW5kZXgoKSxcbiAgICBjbGFzc0luY2x1ZGU6ICd3LVszNTBweF0nLFxuICAgIGRpcmVjdGlvbjogZGlyZWN0aW9uKCksXG4gICAgZGlyZWN0aW9uRGlzdGFuY2U6IDIsXG4gICAgcG9zaXRpb246IHtcbiAgICAgIG1vZGU6ICdzdGFydCcsXG4gICAgICBkaXN0YW5jZTogMCxcbiAgICB9LFxuICB9XCJcbiAgKG91dEZ1bmN0aW9uc0NvbnRyb2wpPVwiaGFuZGxlckZ1bmN0aW9uQ29udHJvbCgkZXZlbnQpXCI+XG4gIEBpZiAoZXh0ZXJuYWxDb250ZW50KCkpIHtcbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJkaXYubGlicy11aS1idXR0b25zLXNlbGVjdC1jb2xvclwiPjwvbmctY29udGVudD5cbiAgfSBAZWxzZSB7XG4gICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvblxuICAgICAgW3R5cGVdPVwiYnV0dG9uKCk/LnR5cGUgfHwgJ2J1dHRvbi1wcmltYXJ5J1wiXG4gICAgICBbY2xhc3NJY29uTGVmdF09XCJidXR0b24oKT8uY2xhc3NJY29uTGVmdCB8fCAnJ1wiXG4gICAgICBbY2xhc3NJY29uUmlnaHRdPVwiYnV0dG9uKCk/LmNsYXNzSWNvblJpZ2h0IHx8ICcnXCJcbiAgICAgIFtsYWJlbF09XCJidXR0b24oKT8ubGFiZWwgfHwgJydcIlxuICAgICAgW2NsYXNzTGFiZWxdPVwiYnV0dG9uKCk/LmNsYXNzTGFiZWwgfHwgJydcIlxuICAgICAgW2NsYXNzSW5jbHVkZV09XCJidXR0b24oKT8uY2xhc3NJbmNsdWRlIHx8ICcnXCJcbiAgICAgIFtpY29uT25seVR5cGVdPVwiYnV0dG9uKCk/Lmljb25Pbmx5VHlwZSB8fCBmYWxzZVwiXG4gICAgICBbcG9wb3Zlcl09XCJidXR0b24oKT8ucG9wb3ZlciB8fCB7fVwiXG4gICAgICBbaWdub3JlU3RvcFByb3BhZ2F0aW9uRXZlbnRdPVwidHJ1ZVwiIC8+XG4gIH1cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2NvbG9yUGlja2VyPlxuICA8ZGl2IGNsYXNzPVwicC1bMTZweF0gdy1hdXRvIGgtYXV0b1wiPlxuICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtY29sb3JfcGlja2VyXG4gICAgICBbY3VzdG9tT3B0aW9uc109XCJjdXN0b21PcHRpb25zKClcIlxuICAgICAgKG91dENvbG9yQ2hhbmdlKT1cImhhbmRsZXJDb2xvckNoYW5nZSgkZXZlbnQpXCJcbiAgICAgIFtub0VtaXRFdmVudENvbG9yV2hlbkluaXRDb21wb25lbnRdPVwiYXBwbHlOb3coKVwiXG4gICAgICAob3V0Q29sb3JDaGFuZ2VNdWx0aXBsZVR5cGUpPVwiaGFuZGxlckNvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlKCRldmVudClcIiAvPlxuICAgIEBpZiAoIWFwcGx5Tm93KCkpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWVuZCBwdC1bMTZweF1cIj5cbiAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvblxuICAgICAgICAgIFtsYWJlbF09XCInaTE4bl9jYW5jZWwnXCJcbiAgICAgICAgICBbdHlwZV09XCInYnV0dG9uLXRoaXJkJ1wiXG4gICAgICAgICAgKG91dENsaWNrKT1cImhhbmRsZXJBY3Rpb24oJGV2ZW50LCAnY2FuY2VsJylcIiAvPlxuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICAgICAgW2xhYmVsXT1cIidpMThuX2FwcGx5J1wiXG4gICAgICAgICAgW2NsYXNzSW5jbHVkZV09XCInbWwtWzE2cHhdJ1wiXG4gICAgICAgICAgKG91dENsaWNrKT1cImhhbmRsZXJBY3Rpb24oJGV2ZW50LCAnYXBwbHknKVwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, model, input, output,
|
|
2
|
+
import { signal, model, input, output, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
|
|
4
4
|
import { LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';
|
|
5
5
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-buttons-select-color.mjs","sources":["../../../../../../libs-ui/components/buttons/select-color/src/buttons-select-color.component.ts","../../../../../../libs-ui/components/buttons/select-color/src/buttons-select-color.component.html","../../../../../../libs-ui/components/buttons/select-color/src/libs-ui-components-buttons-select-color.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, OnDestroy, output, signal } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IOutputColorChangeMultipleType, IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_DIRECTION } from '@libs-ui/components-popover';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-select_color',\n templateUrl: './buttons-select-color.component.html',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsColorPickerComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsSelectColorComponent implements OnDestroy {\n // #region PROPERTY\n private color = signal<string>('');\n private colorMultipleType = signal<IOutputColorChangeMultipleType>({\n hex: '',\n rgba: '',\n rgb: '',\n hsl: '',\n hsla: '',\n alpha: 0,\n });\n private popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n readonly zIndex = model<number>(1200);\n readonly customOptions = input<IPickerCustomOptions>();\n readonly externalContent = input<boolean>(false);\n readonly direction = input<TYPE_POPOVER_DIRECTION>('bottom');\n readonly button = input<IButton>();\n readonly applyNow = input<boolean>(false);\n\n // #region OUTPUT\n readonly outColorChange = output<string>();\n readonly outColorChangeMultipleType = output<IOutputColorChangeMultipleType>();\n\n /* FUNCTIONS */\n protected handlerColorChange(event: string) {\n if (this.applyNow()) {\n this.outColorChange.emit(event);\n\n return;\n }\n this.color.set(event);\n }\n\n protected handlerColorChangeMultipleType(event: IOutputColorChangeMultipleType) {\n if (this.applyNow()) {\n this.outColorChangeMultipleType.emit(event);\n\n return;\n }\n this.colorMultipleType.set(event);\n }\n\n protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControl.set(event);\n }\n\n protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n event.stopPropagation();\n this.popoverFunctionControl()?.removePopoverOverlay();\n if (action === 'apply') {\n this.outColorChange.emit(this.color());\n this.outColorChangeMultipleType.emit(this.colorMultipleType());\n }\n }\n\n ngOnDestroy(): void {\n this.popoverFunctionControl()?.removePopoverOverlay();\n }\n}\n","<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\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(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\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 [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"handlerColorChangeMultipleType($event)\" />\n @if (!applyNow()) {\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 }\n </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAca,2CAA2C,CAAA;;
|
|
1
|
+
{"version":3,"file":"libs-ui-components-buttons-select-color.mjs","sources":["../../../../../../libs-ui/components/buttons/select-color/src/buttons-select-color.component.ts","../../../../../../libs-ui/components/buttons/select-color/src/buttons-select-color.component.html","../../../../../../libs-ui/components/buttons/select-color/src/libs-ui-components-buttons-select-color.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, OnDestroy, output, signal } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IOutputColorChangeMultipleType, IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_DIRECTION } from '@libs-ui/components-popover';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-select_color',\n templateUrl: './buttons-select-color.component.html',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsColorPickerComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsSelectColorComponent implements OnDestroy {\n // #region PROPERTY\n private readonly color = signal<string>('');\n private readonly colorMultipleType = signal<IOutputColorChangeMultipleType>({\n hex: '',\n rgba: '',\n rgb: '',\n hsl: '',\n hsla: '',\n alpha: 0,\n });\n private readonly popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n readonly zIndex = model<number>(1200);\n readonly customOptions = input<IPickerCustomOptions>();\n readonly externalContent = input<boolean>(false);\n readonly direction = input<TYPE_POPOVER_DIRECTION>('bottom');\n readonly button = input<IButton>();\n readonly applyNow = input<boolean>(false);\n\n // #region OUTPUT\n readonly outColorChange = output<string>();\n readonly outColorChangeMultipleType = output<IOutputColorChangeMultipleType>();\n\n /* FUNCTIONS */\n protected handlerColorChange(event: string) {\n if (this.applyNow()) {\n this.outColorChange.emit(event);\n\n return;\n }\n this.color.set(event);\n }\n\n protected handlerColorChangeMultipleType(event: IOutputColorChangeMultipleType) {\n if (this.applyNow()) {\n this.outColorChangeMultipleType.emit(event);\n\n return;\n }\n this.colorMultipleType.set(event);\n }\n\n protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControl.set(event);\n }\n\n protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n event.stopPropagation();\n this.popoverFunctionControl()?.removePopoverOverlay();\n if (action === 'apply') {\n this.outColorChange.emit(this.color());\n this.outColorChangeMultipleType.emit(this.colorMultipleType());\n }\n }\n\n ngOnDestroy(): void {\n this.popoverFunctionControl()?.removePopoverOverlay();\n }\n}\n","<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\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(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\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 [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"handlerColorChangeMultipleType($event)\" />\n @if (!applyNow()) {\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 }\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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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-select-color",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.357-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
7
|
-
"@libs-ui/components-color-picker": "0.2.
|
|
8
|
-
"@libs-ui/components-popover": "0.2.
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.357-0",
|
|
7
|
+
"@libs-ui/components-color-picker": "0.2.357-0",
|
|
8
|
+
"@libs-ui/components-popover": "0.2.357-0",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|