Component: Primeng color picker is not working

[DHANUSH-31]

Describe the bug

angular version : 14 prime ng version : 9.1.3 color picker is not working

Environment

local

Reproducer

No response

Angular version

14.3.0

PrimeNG version

9.1.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

10.8.2

Browser(s)

chrome latest

Steps to reproduce the behavior

we have added the code for color picker and the shades are static

Expected behavior

[hsel-dove]

Having the same issue on Angular v18 & PrimeNg v17.18.11.

[DHANUSH-31]

any solution ?

[mrafiqk]

Looks like the resource images are corrupted. 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

[horizoncarlo]

Yep same here, Angular 18.2.8 and PrimeNG 17.18.11

[robinschroeder58]

got the same issue with angular 17.1 and and primeng 17.18

[Viktor-Ivliev]

The 17.18.10 last version where it works fine, 4 versions have already been released and the bug has not been fixed. 😰

[horizoncarlo]

Eh yeah that's PrimeNG for ya

[Viktor-Ivliev]

@horizoncarlo Actually the guys do a great job (thank you for that), but sometimes they rush a lot and create bugs that paradoxically they don't rush to fix (.

[ThoSap]

See https://github.com/primefaces/primeng/issues/13820#issuecomment-2564833659

[kdfrie]

I have taken to hosting this internally so I can fix all the issues that keep coming up and are not resolved quickly. I like the components, but there seems to be many bugs that come up and are not promptly addressed.

For this issue the fix is as easy as adding "{encoding: false}" in gulpfile.js

gulp.task('copy-component-css', function () {
    return gulp.src(['src/app/components/**/*.css', 'src/app/components/**/images/*.png', 'src/app/components/**/images/*.gif'], { encoding: false }).pipe(gulp.dest('dist/resources/components'));
});

gulp.task('images', function () {
    return gulp.src(['src/app/components/**/images/*.png', 'src/app/components/**/images/*.gif'], { encoding: false }).pipe(flatten()).pipe(gulp.dest('dist/resources/images'));
});

[adama357]

This is a duplicate of primefaces/primeng#16449

[mertsincan]

Please try; https://github.com/primefaces/primeng/issues/13820#issuecomment-2859607717

[hija-happy]

Looks like the resource images are corrupted. 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

Will this work for production environment?

[Viktor-Ivliev]

@hija-happy

Yes, but this has been fixed in newer versions.