Component: Color Picker - Pop-up not showing the full palette when clicked, just the current selected colour

[Eagle-Tim]

Describe the bug

When using the color picker, on clicking the button to show the popup, it is just showing a single square of one colour (the currently selected colour), rather than a full palette of colours. The slider also shows no colours

Note, this screenshot is taken from the Stackblitz linked to from PrimeNg's documentation

Environment

Windows

Reproducer

https://stackblitz.com/edit/acucgw?file=package.json

Angular version

17.3.10

PrimeNG version

17.18.11

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.14.0

Browser(s)

No response

Steps to reproduce the behavior

1. Set up a color picker component
2. Click the button to open it

Color picker pop-up only shows one colour (the selected one), and slider is blank

Expected behavior

Normal color palette and slider is shown

[simonstaffgenius]

I got the same issue. Also happened like 5 days ago. It seems like the ./media/hue.png and ./media/color.png are missing.

[daniel1919-00]

I got the same issue after updating to 17.18.11.

[PrimeFactor7]

Have the issue with color picker with inline mode as well. I updated to 17.18.11 tried to rollback to my previous version 17.18.5 and the issue persists

[simonstaffgenius]

As a temporary workaround, you can replace the files under node_modules/primeng/resources/images.

For color.png use:

For hue.png use:

Note: This only works temporarily until you reinstall your packages.

[arnoudb]

@PrimeFactor7

Have the issue with color picker with inline mode as well. I updated to 17.18.11 tried to rollback to my previous version 17.18.5 and the issue persists

reverting to 17.18.10 worked for me

[deancanen]

Can confirm, seems like both PNG files are corrupted - after rolling back to 17.18.10, the PNGs load correctly.

[faelpinho]

Related to issue #13820

I'm currently using the version 17.18.10. The PNG still not loading for me.

Thanks to @mrafiqk for a good workaround:

/* You can add global styles to this file, and also import other style files */
.p-colorpicker-panel .p-colorpicker-color {
    background: transparent url("assets/img/custom-color.png") no-repeat left top
}

.p-colorpicker-panel .p-colorpicker-hue {
    background: transparent url("assets/img/custom-hue.png") no-repeat left top !important;
}

[rickstick-code]

I just downloaded the images and inserted them manually as well 👍 Perfect workaround for now Other Issue Ticket