ColorPicker: *.png missing

[102-97-98-105]

Describe the bug

By following the installation guide the png-files are missing, and the color picker is broken. (fore example the hue.png is missing)

Environment

Angular CLI: 16.2.4 Node: 18.17.0 Package Manager: npm 9.8.1 Windows: 10 IDE: Intellij Community

Reproducer

No response

Angular version

16.2.4

PrimeNG version

16.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.0

Browser(s)

No response

Steps to reproduce the behavior

0. Angular application setup with sass for styling
1. Follow the installation guide.
2. Use the ColorPicker in a project.

Expected behavior

Displaying that way, no error messages or anything else in dev tools. Files are in the node_modules folder

[102-97-98-105]

I found a fix: Add the following to the top level styles.sass

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

.p-colorpicker-panel .p-colorpicker-hue
   background: transparent url("./images/hue.png") no-repeat left top

The problem seems to be the styles generator that throws away the css styles of colorpicker-images.css

[SoyDiego]

I cannot reproduce. I added in my project and all is working perfectly.

Maybe is better if you share a stackblitz or give more information.

Thanks

[sitterrus]

@SoyDiego i think the op used sass theme https://github.com/primefaces/primeng-sass-theme/blob/main/theme-base/components/input/_colorpicker.scss which doesn't have the backround style and indeed there is no background

Shouldn't colorpicker-images.css be included in colorpicker component? https://github.com/primefaces/primeng/blob/7216049475cdde34593d321181dbbb174e164dd8/src/app/components/colorpicker/colorpicker.ts#L74C38-L74C38

[cetincakiroglu]

Hi,

Could you please share a stackblitz reproducer so we can identify the issue clearly?

[mrafiqk]

@cetincakiroglu Looks like the resource images are corrupted in the latest build. I replaced the images and added some style in css. It worked.

FYI: style.css / style.scss

/* 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;
}

custom-color.png

custom-hue.png

[StefaniOSApps]

same

[faelpinho]

Same here. Both versions 17.18.10 and 17.18.11 (with Angular 18).

[Eagle-Tim]

Hi,

Could you please share a stackblitz reproducer so we can identify the issue clearly?

If you want to reproduce, simply go to color picker on the primeng.org website (https://primeng.org/colorpicker) and select the Stackblitz for the Basic example

[rajabilal555]

Downgrading to 17.18.10 seems to be the solution for the time being...