@ieeesa-npm/presentation 0.16.9 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/assets/constants.json +79 -4
- package/esm2022/lib/components/color-picker/color-picker.component.mjs +160 -9
- package/esm2022/lib/models/color-format.model.mjs +1 -1
- package/fesm2022/ieeesa-npm-presentation.mjs +426 -11
- package/fesm2022/ieeesa-npm-presentation.mjs.map +1 -1
- package/lib/components/chips/chips.component.d.ts +17 -3
- package/lib/components/color-picker/color-picker.component.d.ts +27 -4
- package/lib/components/file-upload/file-upload.component.d.ts +18 -7
- package/lib/models/color-format.model.d.ts +4 -0
- package/lib/services/file-upload.service.d.ts +17 -8
- package/package.json +1 -1
- package/src/lib/assets/constants.json +79 -4
|
@@ -352,12 +352,276 @@ var timePicker = {
|
|
|
352
352
|
defaultTimeFormat: 12
|
|
353
353
|
};
|
|
354
354
|
var colorPicker = {
|
|
355
|
-
|
|
356
|
-
|
|
355
|
+
label: {
|
|
356
|
+
select: "Select",
|
|
357
|
+
cancel: "Cancel"
|
|
358
|
+
},
|
|
359
|
+
ariaLabel: {
|
|
360
|
+
colorPicker: "Color picker.",
|
|
361
|
+
next: "More colors.",
|
|
362
|
+
back: "Back to color palettes.",
|
|
363
|
+
select: "Select color.",
|
|
364
|
+
cancel: "Closes the color picker.",
|
|
365
|
+
hexCodeInput: "Input your color hex code.",
|
|
366
|
+
palette: "Color palettes."
|
|
367
|
+
},
|
|
357
368
|
defaultColor: "#F4F3F3",
|
|
358
|
-
ariaLabel: "Color Picker",
|
|
359
369
|
ariaDescription: "Choose background color.",
|
|
360
|
-
ariaDescribedById: "ariaColorPicker"
|
|
370
|
+
ariaDescribedById: "ariaColorPicker",
|
|
371
|
+
paletteColors: [
|
|
372
|
+
{
|
|
373
|
+
name: "IEEE SA Blue",
|
|
374
|
+
hexCode: "#00B5E2"
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
name: "IEEE Master Brand Blue",
|
|
378
|
+
hexCode: "#00629B"
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
name: "IEEE SA Medium Blue",
|
|
382
|
+
hexCode: "#4AC9E3"
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
name: "IEEE SA Dark Grey",
|
|
386
|
+
hexCode: "#63666A"
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
name: "IEEE SA Medium Grey",
|
|
390
|
+
hexCode: "#A7A8AA"
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
name: "IEEE SA Light Grey",
|
|
394
|
+
hexCode: "#D9D9D6"
|
|
395
|
+
},
|
|
396
|
+
{
|
|
397
|
+
name: "IEEE Brand Yellow",
|
|
398
|
+
hexCode: "#FFD100"
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
name: "IEEE Brand Orange",
|
|
402
|
+
hexCode: "#FFA300"
|
|
403
|
+
},
|
|
404
|
+
{
|
|
405
|
+
name: "IEEE Brand Red",
|
|
406
|
+
hexCode: "#BA0C2F"
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
name: "IEEE White",
|
|
410
|
+
hexCode: "#FFFFFF"
|
|
411
|
+
},
|
|
412
|
+
{
|
|
413
|
+
name: "IEEE Neutral 95",
|
|
414
|
+
hexCode: "#F1F1F1"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
name: "IEEE Neutral Variant 95",
|
|
418
|
+
hexCode: "#F0F0F0"
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
name: "IEEE Primary Brand 95",
|
|
422
|
+
hexCode: "#EAF3F9"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
name: "IEEE Primary 95",
|
|
426
|
+
hexCode: "#DAE9F1"
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
name: "IEEE SA Medium Blue 95",
|
|
430
|
+
hexCode: "#F8FCFF"
|
|
431
|
+
},
|
|
432
|
+
{
|
|
433
|
+
name: "IEEE Brand Yellow 95",
|
|
434
|
+
hexCode: "#FFFBEB"
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
name: "IEEE Brand Orange 95",
|
|
438
|
+
hexCode: "#FFF8EB"
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
name: "IEEE Error 99",
|
|
442
|
+
hexCode: "#FFFBF9"
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
name: "IEEE SA Dark Grey 90",
|
|
446
|
+
hexCode: "#CCD2DA"
|
|
447
|
+
},
|
|
448
|
+
{
|
|
449
|
+
name: "IEEE Neutral 90",
|
|
450
|
+
hexCode: "#DDDCE2"
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
name: "IEEE Neutral Variant 90",
|
|
454
|
+
hexCode: "#E3E3E3"
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
name: "IEEE Primary Brand 90",
|
|
458
|
+
hexCode: "#D2F0F8"
|
|
459
|
+
},
|
|
460
|
+
{
|
|
461
|
+
name: "IEEE primary 90",
|
|
462
|
+
hexCode: "#C0DEEF"
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
name: "IEEE SA Medium Blue 90",
|
|
466
|
+
hexCode: "#EDFAFC"
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
name: "IEEE Brand Yellow 90",
|
|
470
|
+
hexCode: "#FFF8D6"
|
|
471
|
+
},
|
|
472
|
+
{
|
|
473
|
+
name: "IEEE brand orange 90",
|
|
474
|
+
hexCode: "#FFEFD3"
|
|
475
|
+
},
|
|
476
|
+
{
|
|
477
|
+
name: "IEEE Error 90",
|
|
478
|
+
hexCode: "#F9DEDC"
|
|
479
|
+
},
|
|
480
|
+
{
|
|
481
|
+
name: "IEEE SA Dark Grey 80",
|
|
482
|
+
hexCode: "#B2B7BE"
|
|
483
|
+
},
|
|
484
|
+
{
|
|
485
|
+
name: "IEEE Neutral 80",
|
|
486
|
+
hexCode: "#C6C5CA"
|
|
487
|
+
},
|
|
488
|
+
{
|
|
489
|
+
name: "IEEE Neutral Variant 80",
|
|
490
|
+
hexCode: "#D1D1D1"
|
|
491
|
+
},
|
|
492
|
+
{
|
|
493
|
+
name: "IEEE Primary Brand 80",
|
|
494
|
+
hexCode: "#9EE3F4"
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
name: "IEEE Primary 80",
|
|
498
|
+
hexCode: "#8CBDDA"
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
name: "IEEE SA Medium Blue 80",
|
|
502
|
+
hexCode: "#DBF4F9"
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
name: "IEEE Brand Yellow 80",
|
|
506
|
+
hexCode: "#FFF0AA"
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
name: "IEEE Brand Orange 80",
|
|
510
|
+
hexCode: "#FFE0AA"
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
name: "IEEE Error 80",
|
|
514
|
+
hexCode: "#F2B8B5"
|
|
515
|
+
},
|
|
516
|
+
{
|
|
517
|
+
name: "IEEE SA Dark Grey 60",
|
|
518
|
+
hexCode: "#878B8F"
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
name: "IEEE Neutral 60",
|
|
522
|
+
hexCode: "#939094"
|
|
523
|
+
},
|
|
524
|
+
{
|
|
525
|
+
name: "IEEE Neutral Variant 60",
|
|
526
|
+
hexCode: "#9B9B9B"
|
|
527
|
+
},
|
|
528
|
+
{
|
|
529
|
+
name: "IEEE Primary Brand 60",
|
|
530
|
+
hexCode: "#52D2F1"
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
name: "IEEE Primary 60",
|
|
534
|
+
hexCode: "#4393C1"
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
name: "IEEE SA Medium Blue 60",
|
|
538
|
+
hexCode: "#B7E9F4"
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
name: "IEEE Brand Yellow 60",
|
|
542
|
+
hexCode: "#FFE156"
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
name: "IEEE Brand Orange 60",
|
|
546
|
+
hexCode: "#FFC256"
|
|
547
|
+
},
|
|
548
|
+
{
|
|
549
|
+
name: "IEEE Error 60",
|
|
550
|
+
hexCode: "#E46962"
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
name: "IEEE SA Dark Grey 30",
|
|
554
|
+
hexCode: "#4A4D50"
|
|
555
|
+
},
|
|
556
|
+
{
|
|
557
|
+
name: "IEEE Neutral 30",
|
|
558
|
+
hexCode: "#484649"
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
name: "IEEE Neutral Variant 30",
|
|
562
|
+
hexCode: "#49454F"
|
|
563
|
+
},
|
|
564
|
+
{
|
|
565
|
+
name: "IEEE Primary Brand 30",
|
|
566
|
+
hexCode: "#0188AA"
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
name: "IEEE Primary 30",
|
|
570
|
+
hexCode: "#004982"
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
name: "IEEE SA Medium Blue",
|
|
574
|
+
hexCode: "#3BA1B6"
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
name: "IEEE Brand Yellow 30",
|
|
578
|
+
hexCode: "#C2A002"
|
|
579
|
+
},
|
|
580
|
+
{
|
|
581
|
+
name: "IEEE Brand Orange 30",
|
|
582
|
+
hexCode: "#BC7902"
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
name: "IEEE Error 40",
|
|
586
|
+
hexCode: "#B3261E"
|
|
587
|
+
},
|
|
588
|
+
{
|
|
589
|
+
name: "IEEE SA Dark Grey 20",
|
|
590
|
+
hexCode: "#333436"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
name: "IEEE Neutral 20",
|
|
594
|
+
hexCode: "#313033"
|
|
595
|
+
},
|
|
596
|
+
{
|
|
597
|
+
name: "IEEE Neutral Variant 20",
|
|
598
|
+
hexCode: "#322F37"
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
name: "IEEE Primary Brand 20",
|
|
602
|
+
hexCode: "#015E75"
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
name: "IEEE Primary 20",
|
|
606
|
+
hexCode: "#00314E"
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
name: "IEEE SA Medium Blue",
|
|
610
|
+
hexCode: "#2C7988"
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
name: "IEEE Brand Yellow 20",
|
|
614
|
+
hexCode: "#866E02"
|
|
615
|
+
},
|
|
616
|
+
{
|
|
617
|
+
name: "IEEE Brand Orange 20",
|
|
618
|
+
hexCode: "#825300"
|
|
619
|
+
},
|
|
620
|
+
{
|
|
621
|
+
name: "IEEE Error 20",
|
|
622
|
+
hexCode: "#680015"
|
|
623
|
+
}
|
|
624
|
+
]
|
|
361
625
|
};
|
|
362
626
|
var fileUpload = {
|
|
363
627
|
label: {
|
|
@@ -2857,20 +3121,25 @@ var ColorsAnimation;
|
|
|
2857
3121
|
class ColorPickerComponent {
|
|
2858
3122
|
constructor(
|
|
2859
3123
|
// eslint-disable-next-line no-unused-vars
|
|
3124
|
+
elementRef,
|
|
3125
|
+
// eslint-disable-next-line no-unused-vars
|
|
2860
3126
|
formUtilityService // eslint-disable-next-line no-empty-function
|
|
2861
3127
|
) {
|
|
3128
|
+
this.elementRef = elementRef;
|
|
2862
3129
|
this.formUtilityService = formUtilityService;
|
|
2863
3130
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2864
|
-
this.colorPickerTexts =
|
|
3131
|
+
this.colorPickerTexts = colorPicker;
|
|
3132
|
+
this.paletteColors = this.colorPickerTexts?.paletteColors;
|
|
2865
3133
|
this.colorPickerChange = new EventEmitter();
|
|
2866
3134
|
this.colorPickerSliderChange = new EventEmitter();
|
|
2867
3135
|
this.canShowPalette = false;
|
|
3136
|
+
this.palette = this.paletteColors?.map((color) => color.hexCode);
|
|
2868
3137
|
this.overlayClassName = 'ieeesa-color-picker__overlay';
|
|
2869
3138
|
this.colorFormat = ColorFormat.hex;
|
|
2870
3139
|
this.colorAnimation = ColorsAnimation.popup;
|
|
2871
3140
|
this.formControlName = 'colorPicker';
|
|
2872
|
-
this.paletteSelectLabel = this.colorPickerTexts?.
|
|
2873
|
-
this.paletteCancelLabel = this.colorPickerTexts?.
|
|
3141
|
+
this.paletteSelectLabel = this.colorPickerTexts?.label?.select;
|
|
3142
|
+
this.paletteCancelLabel = this.colorPickerTexts?.label?.cancel;
|
|
2874
3143
|
this.isColorCodeLabelNeeded = true;
|
|
2875
3144
|
this.isArrowIconNeeded = true;
|
|
2876
3145
|
this.canHideTextInput = false;
|
|
@@ -2918,6 +3187,7 @@ class ColorPickerComponent {
|
|
|
2918
3187
|
*/
|
|
2919
3188
|
onOpenPalette() {
|
|
2920
3189
|
this.canShowPalette = true;
|
|
3190
|
+
this.colorPickerEventHandlers(true);
|
|
2921
3191
|
}
|
|
2922
3192
|
/**
|
|
2923
3193
|
* Sets canShowPalette to false when the palette is closed.
|
|
@@ -2926,6 +3196,9 @@ class ColorPickerComponent {
|
|
|
2926
3196
|
*/
|
|
2927
3197
|
onClosePalette() {
|
|
2928
3198
|
this.canShowPalette = false;
|
|
3199
|
+
this.elementRef?.nativeElement
|
|
3200
|
+
?.querySelector('.ieeesa-color-picker__toggle-icon')
|
|
3201
|
+
?.focus();
|
|
2929
3202
|
}
|
|
2930
3203
|
/**
|
|
2931
3204
|
* Gets triggered when the the alpha, hue or Lightness sliders are changed
|
|
@@ -2946,8 +3219,150 @@ class ColorPickerComponent {
|
|
|
2946
3219
|
else
|
|
2947
3220
|
this.colorPickerDirective?.closePanel();
|
|
2948
3221
|
}
|
|
2949
|
-
|
|
2950
|
-
|
|
3222
|
+
/**
|
|
3223
|
+
* Listening the color picker events to achieve the accessibility for color palette.
|
|
3224
|
+
* canAddListener false remove the event listeners which we calls in ngDestroy,
|
|
3225
|
+
* canAddListener true adding the event listeners while opening the color palette.
|
|
3226
|
+
* @memberof ColorPickerComponent
|
|
3227
|
+
* @param {boolean} canAddListener
|
|
3228
|
+
* @returns {void}
|
|
3229
|
+
*/
|
|
3230
|
+
colorPickerEventHandlers(canAddListener) {
|
|
3231
|
+
const paletteContainer = this.colorPickerDirective?.panelRef?.location?.nativeElement?.querySelector('ngx-colors-panel .opened');
|
|
3232
|
+
setTimeout(() => {
|
|
3233
|
+
if (paletteContainer) {
|
|
3234
|
+
paletteContainer.role = 'dialog';
|
|
3235
|
+
paletteContainer.tabIndex = 0;
|
|
3236
|
+
paletteContainer.ariaLabel = this.colorPickerTexts?.ariaLabel?.palette;
|
|
3237
|
+
const colorPallettes = paletteContainer.querySelectorAll('.colors .circle.wrapper.color');
|
|
3238
|
+
const moreColorsArrowButton = paletteContainer.querySelector('.colors .circle.button');
|
|
3239
|
+
const lastElement = paletteContainer.querySelector('.g-input input');
|
|
3240
|
+
if (colorPallettes?.length) {
|
|
3241
|
+
const colorPallettesList = Array.from(colorPallettes);
|
|
3242
|
+
colorPallettesList.push(moreColorsArrowButton);
|
|
3243
|
+
colorPallettesList.push(lastElement);
|
|
3244
|
+
const keyDownHandlerForColorPalettes = (event) => {
|
|
3245
|
+
this.colorPickerKeyDownHandler(colorPallettesList, event);
|
|
3246
|
+
};
|
|
3247
|
+
colorPallettesList?.forEach((element, index) => {
|
|
3248
|
+
if (index !== colorPallettesList?.length - 1) {
|
|
3249
|
+
element.tabIndex = 0;
|
|
3250
|
+
element.role = 'button';
|
|
3251
|
+
element.ariaLabel = this.paletteColors[index]?.name;
|
|
3252
|
+
}
|
|
3253
|
+
else {
|
|
3254
|
+
element.ariaLabel =
|
|
3255
|
+
this.colorPickerTexts?.ariaLabel?.hexCodeInput;
|
|
3256
|
+
}
|
|
3257
|
+
if (index === 0)
|
|
3258
|
+
element.focus();
|
|
3259
|
+
if (index === colorPallettesList?.length - 2) {
|
|
3260
|
+
element.ariaLabel = this.colorPickerTexts?.ariaLabel?.next;
|
|
3261
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3262
|
+
const clickHandlerForMoreColorsButton = (event) => {
|
|
3263
|
+
setTimeout(() => {
|
|
3264
|
+
const list = paletteContainer?.querySelector('.nav-wrapper')?.childNodes;
|
|
3265
|
+
const gradientButtons = [];
|
|
3266
|
+
list?.forEach((element) => gradientButtons.push(element));
|
|
3267
|
+
if (gradientButtons?.length) {
|
|
3268
|
+
const lastElement = paletteContainer.querySelector('.g-input input');
|
|
3269
|
+
gradientButtons.push(lastElement);
|
|
3270
|
+
gradientButtons?.forEach((element, index) => {
|
|
3271
|
+
if (index === 0) {
|
|
3272
|
+
element.ariaLabel =
|
|
3273
|
+
this.colorPickerTexts?.ariaLabel?.back;
|
|
3274
|
+
element.focus();
|
|
3275
|
+
const clickHandlerForGradientPreviousButton = (
|
|
3276
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
3277
|
+
event) => {
|
|
3278
|
+
this.onOpenPalette();
|
|
3279
|
+
event.preventDefault();
|
|
3280
|
+
};
|
|
3281
|
+
const keyDownHandlerForGradientButtons = (event) => {
|
|
3282
|
+
this.colorPickerKeyDownHandler(gradientButtons, event);
|
|
3283
|
+
};
|
|
3284
|
+
element?.removeEventListener('click', clickHandlerForGradientPreviousButton);
|
|
3285
|
+
element?.removeEventListener('keydown', clickHandlerForGradientPreviousButton);
|
|
3286
|
+
if (canAddListener) {
|
|
3287
|
+
element?.addEventListener('click', clickHandlerForGradientPreviousButton);
|
|
3288
|
+
element?.addEventListener('keydown', keyDownHandlerForGradientButtons);
|
|
3289
|
+
}
|
|
3290
|
+
}
|
|
3291
|
+
element.role = 'button';
|
|
3292
|
+
element.tabIndex = 0;
|
|
3293
|
+
if (element?.innerText?.trim() ===
|
|
3294
|
+
this.colorPickerTexts?.label?.select) {
|
|
3295
|
+
element.ariaLabel =
|
|
3296
|
+
this.colorPickerTexts?.ariaLabel?.select;
|
|
3297
|
+
element?.classList?.add('select');
|
|
3298
|
+
}
|
|
3299
|
+
else if (element?.innerText?.trim() ===
|
|
3300
|
+
this.colorPickerTexts?.label?.cancel) {
|
|
3301
|
+
element.ariaLabel =
|
|
3302
|
+
this.colorPickerTexts?.ariaLabel?.cancel;
|
|
3303
|
+
element?.classList?.add('cancel');
|
|
3304
|
+
}
|
|
3305
|
+
if (index === gradientButtons?.length - 1) {
|
|
3306
|
+
element.role = '';
|
|
3307
|
+
}
|
|
3308
|
+
});
|
|
3309
|
+
}
|
|
3310
|
+
event.preventDefault();
|
|
3311
|
+
}, 250);
|
|
3312
|
+
};
|
|
3313
|
+
element.removeEventListener('click', clickHandlerForMoreColorsButton);
|
|
3314
|
+
if (canAddListener) {
|
|
3315
|
+
element.addEventListener('click', clickHandlerForMoreColorsButton);
|
|
3316
|
+
}
|
|
3317
|
+
}
|
|
3318
|
+
element.removeEventListener('keydown', keyDownHandlerForColorPalettes);
|
|
3319
|
+
if (canAddListener) {
|
|
3320
|
+
element.addEventListener('keydown', keyDownHandlerForColorPalettes);
|
|
3321
|
+
}
|
|
3322
|
+
});
|
|
3323
|
+
}
|
|
3324
|
+
}
|
|
3325
|
+
}, 250);
|
|
3326
|
+
}
|
|
3327
|
+
/**
|
|
3328
|
+
* Listens keydown event handles to make the palette focusable.
|
|
3329
|
+
* @memberof ColorPickerComponent
|
|
3330
|
+
* @param {HTMLElement[]} colorPallettesList
|
|
3331
|
+
* @param {KeyboardEvent} event
|
|
3332
|
+
* @returns {void}
|
|
3333
|
+
*/
|
|
3334
|
+
colorPickerKeyDownHandler(colorPallettesList, event) {
|
|
3335
|
+
const firstElement = colorPallettesList[0];
|
|
3336
|
+
const lastElement = colorPallettesList[colorPallettesList.length - 1];
|
|
3337
|
+
if (event.code === 'Tab') {
|
|
3338
|
+
if (event.shiftKey) {
|
|
3339
|
+
if (document.activeElement === firstElement) {
|
|
3340
|
+
lastElement.focus();
|
|
3341
|
+
event.preventDefault();
|
|
3342
|
+
}
|
|
3343
|
+
}
|
|
3344
|
+
else if (document.activeElement === lastElement) {
|
|
3345
|
+
firstElement.focus();
|
|
3346
|
+
event.preventDefault();
|
|
3347
|
+
}
|
|
3348
|
+
}
|
|
3349
|
+
if (event.code === 'Space' || event.code === 'Enter') {
|
|
3350
|
+
const targetElement = event.target;
|
|
3351
|
+
if (targetElement?.classList?.contains('button'))
|
|
3352
|
+
targetElement?.dispatchEvent(new Event('click'));
|
|
3353
|
+
else
|
|
3354
|
+
targetElement?.firstChild?.dispatchEvent(new Event('click'));
|
|
3355
|
+
event.preventDefault();
|
|
3356
|
+
}
|
|
3357
|
+
}
|
|
3358
|
+
/**
|
|
3359
|
+
* Removing the active listeners while component get destroyed.
|
|
3360
|
+
*/
|
|
3361
|
+
ngOnDestroy() {
|
|
3362
|
+
this.colorPickerEventHandlers(false);
|
|
3363
|
+
}
|
|
3364
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FormUtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "ieeesa-color-picker", inputs: { defaultColor: "defaultColor", palette: "palette", overlayClassName: "overlayClassName", colorFormat: "colorFormat", colorAnimation: "colorAnimation", formControlName: "formControlName", paletteSelectLabel: "paletteSelectLabel", paletteCancelLabel: "paletteCancelLabel", colorPickerLabel: "colorPickerLabel", isColorCodeLabelNeeded: "isColorCodeLabelNeeded", isArrowIconNeeded: "isArrowIconNeeded", canHideTextInput: "canHideTextInput", canHideColorPicker: "canHideColorPicker" }, outputs: { colorPickerChange: "colorPickerChange", colorPickerSliderChange: "colorPickerSliderChange" }, viewQueries: [{ propertyName: "colorPickerDirective", first: true, predicate: NgxColorsTriggerDirective, descendants: true, static: true }], ngImport: i0, template: "<div\r\n [formGroup]=\"group\"\r\n [ngClass]=\"\r\n config?.isLabelAlignedLeft\r\n ? 'ieeesa-color-picker__label-left'\r\n : 'ieeesa-color-picker__label-top'\r\n \"\r\n>\r\n <mat-label\r\n class=\"ieeesa-body-sm-14 ieeesa-color-picker__label\"\r\n *ngIf=\"colorPickerLabel\"\r\n >{{ colorPickerLabel }}</mat-label\r\n >\r\n <div class=\"d-flex\">\r\n <ngx-colors\r\n class=\"ieeesa-color-picker\"\r\n ngx-colors-trigger\r\n [acceptLabel]=\"paletteSelectLabel\"\r\n [cancelLabel]=\"paletteCancelLabel\"\r\n [palette]=\"palette\"\r\n (input)=\"inputChange($event)\"\r\n (open)=\"onOpenPalette()\"\r\n (close)=\"onClosePalette()\"\r\n (slider)=\"onSliderChange($event)\"\r\n [overlayClassName]=\"overlayClassName\"\r\n [formControlName]=\"config.controlName\"\r\n [format]=\"colorFormat\"\r\n [hideTextInput]=\"canHideTextInput\"\r\n [colorsAnimation]=\"colorAnimation\"\r\n [hideColorPicker]=\"canHideColorPicker\"\r\n [ariaLabel]=\"colorPickerTexts?.ariaLabel?.colorPicker\"\r\n [ariaDescription]=\"colorPickerTexts?.ariaDescription\"\r\n >\r\n </ngx-colors>\r\n <button\r\n class=\"ieeesa-color-picker__toggle-icon\"\r\n *ngIf=\"isArrowIconNeeded\"\r\n type=\"button\"\r\n (click)=\"togglePalette()\"\r\n [attr.aria-label]=\"colorPickerTexts?.ariaLabel?.colorPicker\"\r\n [attr.aria-describedby]=\"colorPickerTexts?.ariaDescribedById\"\r\n >\r\n <i\r\n class=\"fa-solid\"\r\n [ngClass]=\"canShowPalette ? 'fa-caret-up' : 'fa-caret-down'\"\r\n ></i>\r\n </button>\r\n <span\r\n class=\"ieeesa-color-picker--selected ieeesa-body-md-14\"\r\n *ngIf=\"isColorCodeLabelNeeded && defaultColor\"\r\n >{{ defaultColor }}</span\r\n >\r\n </div>\r\n <ieeesa-form-error [formGroup]=\"group\" [config]=\"config\"> </ieeesa-form-error>\r\n <ieeesa-form-support-text\r\n [formGroup]=\"group\"\r\n [config]=\"config\"\r\n ></ieeesa-form-support-text>\r\n</div>\r\n", styles: [".ieeesa-color-picker .preview{border-radius:0!important;box-shadow:none!important;padding:0!important}.ieeesa-color-picker .preview .preview-background{background-image:none!important}.ieeesa-color-picker .preview .circle{border-radius:0!important;height:30px!important;width:30px!important}.ieeesa-color-picker .preview .circle.colornull{background:linear-gradient(135deg,#ecececb3 0% 45%,#f4f3f3 50%,#ecececb3 55% 100%)!important}.ieeesa-color-picker__label-left{display:flex}.ieeesa-color-picker__label-top{display:block}.ieeesa-color-picker--selected{border:1px solid #000000;padding:6px 8px 6px 12px;border-radius:2px}.ieeesa-color-picker__toggle-icon{border:none;background:#fff}.ieeesa-color-picker__overlay .opened .colors .circle,.ieeesa-color-picker__overlay .opened .colors .circle .selected{border-radius:0!important}.ieeesa-color-picker__overlay .opened button.select:focus,.ieeesa-color-picker__overlay .opened button.cancel:focus{border:3px solid #000000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: NgxColorsModule }, { kind: "component", type: i5$4.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i5$4.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormErrorComponent, selector: "ieeesa-form-error", inputs: ["formGroup", "config", "submitResponse"] }, { kind: "component", type: FormSupportTextComponent, selector: "ieeesa-form-support-text", inputs: ["formGroup", "config"], outputs: ["supportTextLinkClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2951
3366
|
}
|
|
2952
3367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2953
3368
|
type: Component,
|
|
@@ -2959,8 +3374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2959
3374
|
ReactiveFormsModule,
|
|
2960
3375
|
FormErrorComponent,
|
|
2961
3376
|
FormSupportTextComponent,
|
|
2962
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\r\n [formGroup]=\"group\"\r\n [ngClass]=\"\r\n config?.isLabelAlignedLeft\r\n ? 'ieeesa-color-picker__label-left'\r\n : 'ieeesa-color-picker__label-top'\r\n \"\r\n>\r\n <mat-label\r\n class=\"ieeesa-body-sm-14 ieeesa-color-picker__label\"\r\n *ngIf=\"colorPickerLabel\"\r\n >{{ colorPickerLabel }}</mat-label\r\n >\r\n <div class=\"d-flex\">\r\n <ngx-colors\r\n class=\"ieeesa-color-picker\"\r\n ngx-colors-trigger\r\n [acceptLabel]=\"paletteSelectLabel\"\r\n [cancelLabel]=\"paletteCancelLabel\"\r\n [palette]=\"palette\"\r\n (input)=\"inputChange($event)\"\r\n (open)=\"onOpenPalette()\"\r\n (close)=\"onClosePalette()\"\r\n (slider)=\"onSliderChange($event)\"\r\n [overlayClassName]=\"overlayClassName\"\r\n [formControlName]=\"config.controlName\"\r\n [format]=\"colorFormat\"\r\n [hideTextInput]=\"canHideTextInput\"\r\n [colorsAnimation]=\"colorAnimation\"\r\n [hideColorPicker]=\"canHideColorPicker\"\r\n [ariaLabel]=\"colorPickerTexts?.colorPicker
|
|
2963
|
-
}], ctorParameters: function () { return [{ type: FormUtilityService }]; }, propDecorators: { colorPickerDirective: [{
|
|
3377
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\r\n [formGroup]=\"group\"\r\n [ngClass]=\"\r\n config?.isLabelAlignedLeft\r\n ? 'ieeesa-color-picker__label-left'\r\n : 'ieeesa-color-picker__label-top'\r\n \"\r\n>\r\n <mat-label\r\n class=\"ieeesa-body-sm-14 ieeesa-color-picker__label\"\r\n *ngIf=\"colorPickerLabel\"\r\n >{{ colorPickerLabel }}</mat-label\r\n >\r\n <div class=\"d-flex\">\r\n <ngx-colors\r\n class=\"ieeesa-color-picker\"\r\n ngx-colors-trigger\r\n [acceptLabel]=\"paletteSelectLabel\"\r\n [cancelLabel]=\"paletteCancelLabel\"\r\n [palette]=\"palette\"\r\n (input)=\"inputChange($event)\"\r\n (open)=\"onOpenPalette()\"\r\n (close)=\"onClosePalette()\"\r\n (slider)=\"onSliderChange($event)\"\r\n [overlayClassName]=\"overlayClassName\"\r\n [formControlName]=\"config.controlName\"\r\n [format]=\"colorFormat\"\r\n [hideTextInput]=\"canHideTextInput\"\r\n [colorsAnimation]=\"colorAnimation\"\r\n [hideColorPicker]=\"canHideColorPicker\"\r\n [ariaLabel]=\"colorPickerTexts?.ariaLabel?.colorPicker\"\r\n [ariaDescription]=\"colorPickerTexts?.ariaDescription\"\r\n >\r\n </ngx-colors>\r\n <button\r\n class=\"ieeesa-color-picker__toggle-icon\"\r\n *ngIf=\"isArrowIconNeeded\"\r\n type=\"button\"\r\n (click)=\"togglePalette()\"\r\n [attr.aria-label]=\"colorPickerTexts?.ariaLabel?.colorPicker\"\r\n [attr.aria-describedby]=\"colorPickerTexts?.ariaDescribedById\"\r\n >\r\n <i\r\n class=\"fa-solid\"\r\n [ngClass]=\"canShowPalette ? 'fa-caret-up' : 'fa-caret-down'\"\r\n ></i>\r\n </button>\r\n <span\r\n class=\"ieeesa-color-picker--selected ieeesa-body-md-14\"\r\n *ngIf=\"isColorCodeLabelNeeded && defaultColor\"\r\n >{{ defaultColor }}</span\r\n >\r\n </div>\r\n <ieeesa-form-error [formGroup]=\"group\" [config]=\"config\"> </ieeesa-form-error>\r\n <ieeesa-form-support-text\r\n [formGroup]=\"group\"\r\n [config]=\"config\"\r\n ></ieeesa-form-support-text>\r\n</div>\r\n", styles: [".ieeesa-color-picker .preview{border-radius:0!important;box-shadow:none!important;padding:0!important}.ieeesa-color-picker .preview .preview-background{background-image:none!important}.ieeesa-color-picker .preview .circle{border-radius:0!important;height:30px!important;width:30px!important}.ieeesa-color-picker .preview .circle.colornull{background:linear-gradient(135deg,#ecececb3 0% 45%,#f4f3f3 50%,#ecececb3 55% 100%)!important}.ieeesa-color-picker__label-left{display:flex}.ieeesa-color-picker__label-top{display:block}.ieeesa-color-picker--selected{border:1px solid #000000;padding:6px 8px 6px 12px;border-radius:2px}.ieeesa-color-picker__toggle-icon{border:none;background:#fff}.ieeesa-color-picker__overlay .opened .colors .circle,.ieeesa-color-picker__overlay .opened .colors .circle .selected{border-radius:0!important}.ieeesa-color-picker__overlay .opened button.select:focus,.ieeesa-color-picker__overlay .opened button.cancel:focus{border:3px solid #000000}\n"] }]
|
|
3378
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: FormUtilityService }]; }, propDecorators: { colorPickerDirective: [{
|
|
2964
3379
|
type: ViewChild,
|
|
2965
3380
|
args: [NgxColorsTriggerDirective, { static: true }]
|
|
2966
3381
|
}], colorPickerChange: [{
|