@libs-ui/components-color-picker 0.2.29 → 0.2.30-6.2
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/color-picker.component.d.ts +10 -4
- package/esm2022/color-picker.component.mjs +40 -42
- package/esm2022/interfaces/picker.interface.mjs +1 -1
- package/esm2022/utils/picker.mjs +172 -40
- package/fesm2022/libs-ui-components-color-picker.mjs +210 -80
- package/fesm2022/libs-ui-components-color-picker.mjs.map +1 -1
- package/interfaces/picker.interface.d.ts +10 -0
- package/package.json +6 -3
- package/utils/picker.d.ts +2 -151
|
@@ -1,10 +1,162 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, inject, input, output, viewChild, effect,
|
|
2
|
+
import { signal, inject, input, output, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';
|
|
4
|
+
import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
|
|
4
5
|
import { LibsUiNotificationService } from '@libs-ui/services-notification';
|
|
5
|
-
import { get, isNil, set } from '@libs-ui/utils';
|
|
6
|
+
import { get, isNil, set, getDragEventByElement } from '@libs-ui/utils';
|
|
7
|
+
import { Subject } from 'rxjs';
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
10
|
+
const ColorNames = {
|
|
11
|
+
aliceblue: '#F0F8FF',
|
|
12
|
+
antiquewhite: '#FAEBD7',
|
|
13
|
+
aqua: '#00FFFF',
|
|
14
|
+
aquamarine: '#7FFFD4',
|
|
15
|
+
azure: '#F0FFFF',
|
|
16
|
+
beige: '#F5F5DC',
|
|
17
|
+
bisque: '#FFE4C4',
|
|
18
|
+
black: '#000000',
|
|
19
|
+
blanchedalmond: '#FFEBCD',
|
|
20
|
+
blue: '#0000FF',
|
|
21
|
+
blueviolet: '#8A2BE2',
|
|
22
|
+
brown: '#A52A2A',
|
|
23
|
+
burlywood: '#DEB887',
|
|
24
|
+
cadetblue: '#5F9EA0',
|
|
25
|
+
chartreuse: '#7FFF00',
|
|
26
|
+
chocolate: '#D2691E',
|
|
27
|
+
coral: '#FF7F50',
|
|
28
|
+
cornflowerblue: '#6495ED',
|
|
29
|
+
cornsilk: '#FFF8DC',
|
|
30
|
+
crimson: '#DC143C',
|
|
31
|
+
cyan: '#00FFFF',
|
|
32
|
+
darkblue: '#00008B',
|
|
33
|
+
darkcyan: '#008B8B',
|
|
34
|
+
darkgoldenrod: '#B8860B',
|
|
35
|
+
darkgray: '#A9A9A9',
|
|
36
|
+
darkgrey: '#A9A9A9',
|
|
37
|
+
darkgreen: '#006400',
|
|
38
|
+
darkkhaki: '#BDB76B',
|
|
39
|
+
darkmagenta: '#8B008B',
|
|
40
|
+
darkolivegreen: '#556B2F',
|
|
41
|
+
darkorange: '#FF8C00',
|
|
42
|
+
darkorchid: '#9932CC',
|
|
43
|
+
darkred: '#8B0000',
|
|
44
|
+
darksalmon: '#E9967A',
|
|
45
|
+
darkseagreen: '#8FBC8F',
|
|
46
|
+
darkslateblue: '#483D8B',
|
|
47
|
+
darkslategray: '#2F4F4F',
|
|
48
|
+
darkslategrey: '#2F4F4F',
|
|
49
|
+
darkturquoise: '#00CED1',
|
|
50
|
+
darkviolet: '#9400D3',
|
|
51
|
+
deeppink: '#FF1493',
|
|
52
|
+
deepskyblue: '#00BFFF',
|
|
53
|
+
dimgray: '#696969',
|
|
54
|
+
dimgrey: '#696969',
|
|
55
|
+
dodgerblue: '#1E90FF',
|
|
56
|
+
firebrick: '#B22222',
|
|
57
|
+
floralwhite: '#FFFAF0',
|
|
58
|
+
forestgreen: '#228B22',
|
|
59
|
+
fuchsia: '#FF00FF',
|
|
60
|
+
gainsboro: '#DCDCDC',
|
|
61
|
+
ghostwhite: '#F8F8FF',
|
|
62
|
+
gold: '#FFD700',
|
|
63
|
+
goldenrod: '#DAA520',
|
|
64
|
+
gray: '#808080',
|
|
65
|
+
grey: '#808080',
|
|
66
|
+
green: '#008000',
|
|
67
|
+
greenyellow: '#ADFF2F',
|
|
68
|
+
honeydew: '#F0FFF0',
|
|
69
|
+
hotpink: '#FF69B4',
|
|
70
|
+
indianred: '#CD5C5C',
|
|
71
|
+
indigo: '#4B0082',
|
|
72
|
+
ivory: '#FFFFF0',
|
|
73
|
+
khaki: '#F0E68C',
|
|
74
|
+
lavender: '#E6E6FA',
|
|
75
|
+
lavenderblush: '#FFF0F5',
|
|
76
|
+
lawngreen: '#7CFC00',
|
|
77
|
+
lemonchiffon: '#FFFACD',
|
|
78
|
+
lightblue: '#ADD8E6',
|
|
79
|
+
lightcoral: '#F08080',
|
|
80
|
+
lightcyan: '#E0FFFF',
|
|
81
|
+
lightgoldenrodyellow: '#FAFAD2',
|
|
82
|
+
lightgray: '#D3D3D3',
|
|
83
|
+
lightgrey: '#D3D3D3',
|
|
84
|
+
lightgreen: '#90EE90',
|
|
85
|
+
lightpink: '#FFB6C1',
|
|
86
|
+
lightsalmon: '#FFA07A',
|
|
87
|
+
lightseagreen: '#20B2AA',
|
|
88
|
+
lightskyblue: '#87CEFA',
|
|
89
|
+
lightslategray: '#778899',
|
|
90
|
+
lightslategrey: '#778899',
|
|
91
|
+
lightsteelblue: '#B0C4DE',
|
|
92
|
+
lightyellow: '#FFFFE0',
|
|
93
|
+
lime: '#00FF00',
|
|
94
|
+
limegreen: '#32CD32',
|
|
95
|
+
linen: '#FAF0E6',
|
|
96
|
+
magenta: '#FF00FF',
|
|
97
|
+
maroon: '#800000',
|
|
98
|
+
mediumaquamarine: '#66CDAA',
|
|
99
|
+
mediumblue: '#0000CD',
|
|
100
|
+
mediumorchid: '#BA55D3',
|
|
101
|
+
mediumpurple: '#9370DB',
|
|
102
|
+
mediumseagreen: '#3CB371',
|
|
103
|
+
mediumslateblue: '#7B68EE',
|
|
104
|
+
mediumspringgreen: '#00FA9A',
|
|
105
|
+
mediumturquoise: '#48D1CC',
|
|
106
|
+
mediumvioletred: '#C71585',
|
|
107
|
+
midnightblue: '#191970',
|
|
108
|
+
mintcream: '#F5FFFA',
|
|
109
|
+
mistyrose: '#FFE4E1',
|
|
110
|
+
moccasin: '#FFE4B5',
|
|
111
|
+
navajowhite: '#FFDEAD',
|
|
112
|
+
navy: '#000080',
|
|
113
|
+
oldlace: '#FDF5E6',
|
|
114
|
+
olive: '#808000',
|
|
115
|
+
olivedrab: '#6B8E23',
|
|
116
|
+
orange: '#FFA500',
|
|
117
|
+
orangered: '#FF4500',
|
|
118
|
+
orchid: '#DA70D6',
|
|
119
|
+
palegoldenrod: '#EEE8AA',
|
|
120
|
+
palegreen: '#98FB98',
|
|
121
|
+
paleturquoise: '#AFEEEE',
|
|
122
|
+
palevioletred: '#DB7093',
|
|
123
|
+
papayawhip: '#FFEFD5',
|
|
124
|
+
peachpuff: '#FFDAB9',
|
|
125
|
+
peru: '#CD853F',
|
|
126
|
+
pink: '#FFC0CB',
|
|
127
|
+
plum: '#DDA0DD',
|
|
128
|
+
powderblue: '#B0E0E6',
|
|
129
|
+
purple: '#800080',
|
|
130
|
+
rebeccapurple: '#663399',
|
|
131
|
+
red: '#FF0000',
|
|
132
|
+
rosybrown: '#BC8F8F',
|
|
133
|
+
royalblue: '#4169E1',
|
|
134
|
+
saddlebrown: '#8B4513',
|
|
135
|
+
salmon: '#FA8072',
|
|
136
|
+
sandybrown: '#F4A460',
|
|
137
|
+
seagreen: '#2E8B57',
|
|
138
|
+
seashell: '#FFF5EE',
|
|
139
|
+
sienna: '#A0522D',
|
|
140
|
+
silver: '#C0C0C0',
|
|
141
|
+
skyblue: '#87CEEB',
|
|
142
|
+
slateblue: '#6A5ACD',
|
|
143
|
+
slategray: '#708090',
|
|
144
|
+
slategrey: '#708090',
|
|
145
|
+
snow: '#FFFAFA',
|
|
146
|
+
springgreen: '#00FF7F',
|
|
147
|
+
steelblue: '#4682B4',
|
|
148
|
+
tan: '#D2B48C',
|
|
149
|
+
teal: '#008080',
|
|
150
|
+
thistle: '#D8BFD8',
|
|
151
|
+
tomato: '#FF6347',
|
|
152
|
+
turquoise: '#40E0D0',
|
|
153
|
+
violet: '#EE82EE',
|
|
154
|
+
wheat: '#F5DEB3',
|
|
155
|
+
white: '#FFFFFF',
|
|
156
|
+
whitesmoke: '#F5F5F5',
|
|
157
|
+
yellow: '#FFFF00',
|
|
158
|
+
yellowgreen: '#9ACD32',
|
|
159
|
+
};
|
|
8
160
|
const optionsDefault = () => {
|
|
9
161
|
return {
|
|
10
162
|
showHsl: false,
|
|
@@ -13,14 +165,14 @@ const optionsDefault = () => {
|
|
|
13
165
|
showAlpha: false,
|
|
14
166
|
color: '#ff0000',
|
|
15
167
|
format: 'color',
|
|
16
|
-
slBarSize: [
|
|
17
|
-
hueBarSize: [
|
|
18
|
-
alphaBarSize: [
|
|
168
|
+
slBarSize: [420, 200],
|
|
169
|
+
hueBarSize: [420, 20],
|
|
170
|
+
alphaBarSize: [420, 20],
|
|
19
171
|
};
|
|
20
172
|
};
|
|
21
173
|
const limit = (value, min, max) => {
|
|
22
174
|
value = +value;
|
|
23
|
-
return isNaN(value) ? min :
|
|
175
|
+
return isNaN(value) ? min : value < min ? min : value > max ? max : value;
|
|
24
176
|
};
|
|
25
177
|
const hslToRgb = (h, s, l) => {
|
|
26
178
|
let r, g, b;
|
|
@@ -43,10 +195,10 @@ const hslToRgb = (h, s, l) => {
|
|
|
43
195
|
return p;
|
|
44
196
|
};
|
|
45
197
|
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
46
|
-
const p =
|
|
47
|
-
r = hueToRgb(p, q, h +
|
|
198
|
+
const p = 2 * l - q;
|
|
199
|
+
r = hueToRgb(p, q, h + 1 / 3);
|
|
48
200
|
g = hueToRgb(p, q, h);
|
|
49
|
-
b = hueToRgb(p, q, h -
|
|
201
|
+
b = hueToRgb(p, q, h - 1 / 3);
|
|
50
202
|
return [r * 255, g * 255, b * 255].map(Math.round);
|
|
51
203
|
};
|
|
52
204
|
const cssColorToRgba = (color) => {
|
|
@@ -54,32 +206,17 @@ const cssColorToRgba = (color) => {
|
|
|
54
206
|
const colorByName = get(ColorNames, color.toLowerCase());
|
|
55
207
|
const [, , , r, g, b, a, , rr, gg, bb, aa] = /^\s*#?((([0-9A-F])([0-9A-F])([0-9A-F])([0-9A-F])?)|(([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})?))\s*$/i.exec(colorByName || color) || [];
|
|
56
208
|
if (!isNil(r)) {
|
|
57
|
-
return [
|
|
58
|
-
parseInt(r + r, 16),
|
|
59
|
-
parseInt(g + g, 16),
|
|
60
|
-
parseInt(b + b, 16),
|
|
61
|
-
a ? +((parseInt(a + a, 16)) / 255).toFixed(2) : 1
|
|
62
|
-
];
|
|
209
|
+
return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), a ? +(parseInt(a + a, 16) / 255).toFixed(2) : 1];
|
|
63
210
|
}
|
|
64
211
|
if (!isNil(rr)) {
|
|
65
|
-
return [
|
|
66
|
-
parseInt(rr, 16),
|
|
67
|
-
parseInt(gg, 16),
|
|
68
|
-
parseInt(bb, 16),
|
|
69
|
-
aa ? +((parseInt(aa, 16)) / 255).toFixed(2) : 1
|
|
70
|
-
];
|
|
212
|
+
return [parseInt(rr, 16), parseInt(gg, 16), parseInt(bb, 16), aa ? +(parseInt(aa, 16) / 255).toFixed(2) : 1];
|
|
71
213
|
}
|
|
72
214
|
}
|
|
73
215
|
return undefined;
|
|
74
216
|
};
|
|
75
217
|
const parseColorToRgba = (color) => {
|
|
76
218
|
if (Array.isArray(color)) {
|
|
77
|
-
return [
|
|
78
|
-
limit(color[0], 0, 255),
|
|
79
|
-
limit(color[1], 0, 255),
|
|
80
|
-
limit(color[2], 0, 255),
|
|
81
|
-
limit(color[3] ?? 1, 0, 1)
|
|
82
|
-
];
|
|
219
|
+
return [limit(color[0], 0, 255), limit(color[1], 0, 255), limit(color[2], 0, 255), limit(color[3] ?? 1, 0, 1)];
|
|
83
220
|
}
|
|
84
221
|
const parsed = cssColorToRgba(color) || cssRgbaToRgba(color);
|
|
85
222
|
if (parsed && parsed.length === 3) {
|
|
@@ -103,12 +240,7 @@ const cssHslaToHsla = (hsla) => {
|
|
|
103
240
|
};
|
|
104
241
|
const parseColorToHsla = (color) => {
|
|
105
242
|
if (Array.isArray(color)) {
|
|
106
|
-
return [
|
|
107
|
-
limit(color[0], 0, 360),
|
|
108
|
-
limit(color[1], 0, 100),
|
|
109
|
-
limit(color[2], 0, 100),
|
|
110
|
-
limit(color[3] ?? 1, 0, 1)
|
|
111
|
-
];
|
|
243
|
+
return [limit(color[0], 0, 360), limit(color[1], 0, 100), limit(color[2], 0, 100), limit(color[3] ?? 1, 0, 1)];
|
|
112
244
|
}
|
|
113
245
|
const parsed = cssHslaToHsla(color);
|
|
114
246
|
if (parsed && parsed.length === 3) {
|
|
@@ -130,13 +262,13 @@ const rgbToHsl = (r, g, b) => {
|
|
|
130
262
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
131
263
|
switch (max) {
|
|
132
264
|
case r:
|
|
133
|
-
h = (
|
|
265
|
+
h = (g - b) / d + (g < b ? 6 : 0);
|
|
134
266
|
break;
|
|
135
267
|
case g:
|
|
136
|
-
h = (
|
|
268
|
+
h = (b - r) / d + 2;
|
|
137
269
|
break;
|
|
138
270
|
case b:
|
|
139
|
-
h = (
|
|
271
|
+
h = (r - g) / d + 4;
|
|
140
272
|
break;
|
|
141
273
|
}
|
|
142
274
|
h = (h || 0) / 6;
|
|
@@ -144,7 +276,7 @@ const rgbToHsl = (r, g, b) => {
|
|
|
144
276
|
};
|
|
145
277
|
const rgbToHex = (r, g, b) => {
|
|
146
278
|
[r, g, b] = [limit(r, 0, 255), limit(g, 0, 255), limit(b, 0, 255)];
|
|
147
|
-
return
|
|
279
|
+
return '#' + ('000000' + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
|
|
148
280
|
};
|
|
149
281
|
const rgbToInt = (r, g, b) => {
|
|
150
282
|
return (r << 16) | (g << 8) | b;
|
|
@@ -229,14 +361,16 @@ const parseColor = (color, format) => {
|
|
|
229
361
|
};
|
|
230
362
|
const defaultHelper = () => {
|
|
231
363
|
return {
|
|
232
|
-
setHue: () => {
|
|
364
|
+
setHue: () => {
|
|
365
|
+
return;
|
|
366
|
+
},
|
|
233
367
|
grabColor: () => [],
|
|
234
|
-
findColor: () => []
|
|
368
|
+
findColor: () => [],
|
|
235
369
|
};
|
|
236
370
|
};
|
|
237
371
|
|
|
238
372
|
class LibsUiComponentsColorPickerComponent {
|
|
239
|
-
|
|
373
|
+
// #region PROPERTY
|
|
240
374
|
options = signal(optionsDefault());
|
|
241
375
|
focus = signal(undefined);
|
|
242
376
|
hex = signal('');
|
|
@@ -249,10 +383,13 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
249
383
|
a = signal(1);
|
|
250
384
|
slBarHelper = signal(defaultHelper());
|
|
251
385
|
notificationService = inject(LibsUiNotificationService);
|
|
252
|
-
|
|
386
|
+
onDestroy = new Subject();
|
|
387
|
+
// #region INPUT
|
|
253
388
|
customOptions = input();
|
|
254
|
-
|
|
389
|
+
noEmitEventColorWhenInitComponent = input(true, { transform: (value) => value ?? true });
|
|
390
|
+
// #region OUTPUT
|
|
255
391
|
outColorChange = output();
|
|
392
|
+
outColorChangeMultipleType = output();
|
|
256
393
|
/* VIEW CHILD */
|
|
257
394
|
hueEl = viewChild('hueEl');
|
|
258
395
|
huePointerEl = viewChild('huePointerEl');
|
|
@@ -288,7 +425,7 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
288
425
|
if (this.options().showAlpha) {
|
|
289
426
|
this.setupAlphaCanvas();
|
|
290
427
|
}
|
|
291
|
-
this.handlerColorChange(this.options().format, this.options().color);
|
|
428
|
+
this.handlerColorChange(this.options().format, this.options().color, this.noEmitEventColorWhenInitComponent());
|
|
292
429
|
}
|
|
293
430
|
setupHueCanvas() {
|
|
294
431
|
const canvas = this.hueEl()?.nativeElement;
|
|
@@ -302,43 +439,25 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
302
439
|
}
|
|
303
440
|
ctx.fillStyle = gradient;
|
|
304
441
|
ctx.fillRect(0, 0, this.options().hueBarSize[0], this.options().hueBarSize[1]);
|
|
305
|
-
|
|
442
|
+
getDragEventByElement({ elementMouseDown: canvas, isStartWithMouseDownEvent: true, onDestroy: this.onDestroy }).subscribe((event) => {
|
|
306
443
|
const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().hueBarSize[0]);
|
|
307
444
|
const hue = Math.round(x * 360 / this.options().hueBarSize[0]);
|
|
308
445
|
set(this.huePointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
|
|
309
446
|
this.h.set(hue);
|
|
310
447
|
this.handlerColorChange('h', hue);
|
|
311
|
-
};
|
|
312
|
-
const onMouseUp = () => {
|
|
313
|
-
document.removeEventListener('mousemove', onMouseMove);
|
|
314
|
-
document.removeEventListener('mouseup', onMouseUp);
|
|
315
|
-
};
|
|
316
|
-
canvas.addEventListener('mousedown', (event) => {
|
|
317
|
-
onMouseMove(event);
|
|
318
|
-
document.addEventListener('mousemove', onMouseMove);
|
|
319
|
-
document.addEventListener('mouseup', onMouseUp);
|
|
320
448
|
});
|
|
321
449
|
}
|
|
322
450
|
setupSlCanvas() {
|
|
323
451
|
const canvas = this.slEl()?.nativeElement;
|
|
324
452
|
canvas.width = this.options().slBarSize[0];
|
|
325
453
|
canvas.height = this.options().slBarSize[1];
|
|
326
|
-
|
|
454
|
+
getDragEventByElement({ elementMouseDown: canvas, isStartWithMouseDownEvent: true, onDestroy: this.onDestroy }).subscribe((event) => {
|
|
327
455
|
const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().slBarSize[0] - 1);
|
|
328
456
|
const y = limit(event.clientY - canvas.getBoundingClientRect().top, 0, this.options().slBarSize[1] - 1);
|
|
329
457
|
const c = this.slBarHelper().grabColor(x, y);
|
|
330
458
|
set(this.slPointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
|
|
331
459
|
set(this.slPointerEl()?.nativeElement.style, 'top', `${y - 7}px`);
|
|
332
460
|
this.handlerColorChange('rgb', c);
|
|
333
|
-
};
|
|
334
|
-
const onMouseUp = () => {
|
|
335
|
-
document.removeEventListener('mousemove', onMouseMove);
|
|
336
|
-
document.removeEventListener('mouseup', onMouseUp);
|
|
337
|
-
};
|
|
338
|
-
canvas.addEventListener('mousedown', (event) => {
|
|
339
|
-
onMouseMove(event);
|
|
340
|
-
document.addEventListener('mousemove', onMouseMove);
|
|
341
|
-
document.addEventListener('mouseup', onMouseUp);
|
|
342
461
|
});
|
|
343
462
|
}
|
|
344
463
|
setupSlBarHelper() {
|
|
@@ -380,26 +499,17 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
380
499
|
gradient.addColorStop(1, `hsla(${this.h()},${this.s()}%,${this.l()}%, 1)`);
|
|
381
500
|
ctx.fillStyle = gradient;
|
|
382
501
|
ctx.fillRect(0, 0, this.options().alphaBarSize[0], this.options().alphaBarSize[1]);
|
|
383
|
-
|
|
502
|
+
getDragEventByElement({ elementMouseDown: canvas, isStartWithMouseDownEvent: true, onDestroy: this.onDestroy }).subscribe((event) => {
|
|
384
503
|
const x = limit(event.clientX - canvas.getBoundingClientRect().left, 0, this.options().alphaBarSize[0]);
|
|
385
504
|
const alpha = +(x / this.options().alphaBarSize[0]).toFixed(2);
|
|
386
505
|
set(this.alphaPointerEl()?.nativeElement.style, 'left', `${x - 7}px`);
|
|
387
506
|
this.handlerColorChange('alpha', alpha);
|
|
388
|
-
};
|
|
389
|
-
const onMouseUp = () => {
|
|
390
|
-
document.removeEventListener('mousemove', onMouseMove);
|
|
391
|
-
document.removeEventListener('mouseup', onMouseUp);
|
|
392
|
-
};
|
|
393
|
-
canvas.addEventListener('mousedown', (event) => {
|
|
394
|
-
onMouseMove(event);
|
|
395
|
-
document.addEventListener('mousemove', onMouseMove);
|
|
396
|
-
document.addEventListener('mouseup', onMouseUp);
|
|
397
507
|
});
|
|
398
508
|
}
|
|
399
509
|
handlerCopyColor(event) {
|
|
400
510
|
event.stopPropagation();
|
|
401
511
|
window.navigator.clipboard.writeText(this.hex());
|
|
402
|
-
this.notificationService.showCompTypeTextSuccess('i18n_copy_successfully');
|
|
512
|
+
// this.notificationService.showCompTypeTextSuccess('i18n_copy_successfully');
|
|
403
513
|
}
|
|
404
514
|
updatePointerH(h) {
|
|
405
515
|
const x = this.options().hueBarSize[0] * h / 360;
|
|
@@ -462,7 +572,7 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
462
572
|
this.updatePointerA(this.a());
|
|
463
573
|
}
|
|
464
574
|
}
|
|
465
|
-
handlerColorChange(key, value,
|
|
575
|
+
handlerColorChange(key, value, isCallInitComponent = false) {
|
|
466
576
|
let config = {};
|
|
467
577
|
switch (key) {
|
|
468
578
|
case 'h':
|
|
@@ -534,8 +644,15 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
534
644
|
}
|
|
535
645
|
this.updateValuesAndPointer(config);
|
|
536
646
|
set(this.previewEl()?.nativeElement.style, 'backgroundColor', this.a() === 1 ? `rgb(${this.r()},${this.g()},${this.b()})` : `rgba(${this.r()},${this.g()},${this.b()},${this.a()})`);
|
|
537
|
-
if (!
|
|
647
|
+
if (!isCallInitComponent) {
|
|
538
648
|
this.outColorChange.emit(this.hex());
|
|
649
|
+
this.outColorChangeMultipleType.emit({
|
|
650
|
+
hex: this.hex(),
|
|
651
|
+
rgba: `rgba(${this.r()},${this.g()},${this.b()},${this.a()})`,
|
|
652
|
+
rgb: `rgb(${this.r()},${this.g()},${this.b()})`,
|
|
653
|
+
hsl: `hsl(${this.h()},${this.s()},${this.l()})`,
|
|
654
|
+
hsla: `hsla(${this.h()},${this.s()},${this.l()},${this.a()})`
|
|
655
|
+
});
|
|
539
656
|
}
|
|
540
657
|
}
|
|
541
658
|
handlerFocusAndBlur(event, key) {
|
|
@@ -544,14 +661,27 @@ class LibsUiComponentsColorPickerComponent {
|
|
|
544
661
|
handlerValueChange(event, key) {
|
|
545
662
|
this.handlerColorChange(key, event);
|
|
546
663
|
}
|
|
664
|
+
handlerValueChangeAlphaInput(event) {
|
|
665
|
+
this.handlerColorChange('alpha', (event || 0) / 100);
|
|
666
|
+
this.updatePointerA(this.a());
|
|
667
|
+
}
|
|
668
|
+
handlerResetColor() {
|
|
669
|
+
this.handlerColorChange('alpha', 0);
|
|
670
|
+
this.updatePointerA(this.a());
|
|
671
|
+
}
|
|
672
|
+
ngOnDestroy() {
|
|
673
|
+
this.onDestroy.next();
|
|
674
|
+
this.onDestroy.complete();
|
|
675
|
+
}
|
|
547
676
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
548
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div class=\"cursor-pointer\">\n <canvas #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\">\n </canvas>\n <div #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "hiddenContent", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, noEmitEventColorWhenInitComponent: { classPropertyName: "noEmitEventColorWhenInitComponent", publicName: "noEmitEventColorWhenInitComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\">\n </canvas>\n <div #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid [item]=\"{aValue:a()*100}\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{label:'%'}]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\"/>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
549
678
|
}
|
|
550
679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
|
|
551
680
|
type: Component,
|
|
552
681
|
args: [{ selector: 'libs_ui-components-color_picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
553
|
-
LibsUiComponentsInputsInputComponent
|
|
554
|
-
|
|
682
|
+
LibsUiComponentsInputsInputComponent,
|
|
683
|
+
LibsUiComponentsInputsValidComponent
|
|
684
|
+
], template: "<div>\n <div class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\">\n </canvas>\n <div #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid [item]=\"{aValue:a()*100}\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{label:'%'}]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\"/>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"] }]
|
|
555
685
|
}], ctorParameters: () => [] });
|
|
556
686
|
|
|
557
687
|
/**
|