Is there a way to disable color-hue-picker?

Something like [disabled]="true"

Thanks!!

As the title said...
I need to change the color continuously.
How can I do this?

When I hover on a color circle, the title shown is hexadecimal related to that color.
Is it possible to set a custom title instead of the hexadecimal

Instead of '#ff0000', I want to display a custom title.

Thank you

On registry https://registry.npmjs.org, the "latest" version (v5.0.11) of dependency travis-deploy-once has the following deprecation notice:

We recommend to use Travis Build Stages instead

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about travis-deploy-once's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Hi Scott.

I'm working on an app to control animation of an LED strip (SK6812 with four channels: Red, Green, Blue, White).

I've tried a few different libraries, some of which are a little too difficult to use or are designed for applications other than LED light control - I'm really glad I've found yours with its wide choice of built-in components - thank you for all this work! I have a few questions though, but I must say I'm not a very experienced TypeScript developer - I'm learning along the way 😊

The debounce time that is currently configured (100 ms) is a little too fast for my application. I'm looking to slow it down to 500-1000 ms, as otherwise it spams my MQTT broker and overloads the microcontroller used to control the lights.

Below are two pieces of my code. Is there any way I can adjust the debounce rate here? Otherwise, is there any way to built on top of the ColorWrap bit to change that? The this.ledService.cmdFill bit publishes an MQTT message, it's a service I wrote.

<color-hue-picker (onChange)="handleChange($event)"></color-hue-picker>

  handleChange($event: ColorEvent) {
    this.colorRgb = $event.color.rgb;
    this.ledService.cmdFill(this.colorRgb.r, this.colorRgb.g, this.colorRgb.b, 0);
  }

If there's no easy way of doing that, I might fall back to using onChangeComplete instead of onChange, but I'd love to have an option to get the LED strip to change its colour as I drag the slider.

My second question is about what you call a shade slider. As I mentioned before, the LED strip I use offers a fourth colour, white. I'm looking to reuse the shade slider component and replace the hue colour with white so there's nice transition from black to white, which would act as a dimmer for white light. What is the best way to create a custom component on top of your shade slider?

Thank you.

When using <color-swatches> the element has fixed width and height due to inline CSS style attribute.

I believe we should be able to resize that as we see fit based on CSS classes (which are already there but have no chance fighting against style="width: 320px; height: 240px")

Thanks.

P.S. Love the library

In first place thank you for your work in this library :).

I have noticed a weird behaviour when using the input color. I have this colors array:

 ["#AC8542", "#E6A200", "#E95D39", "#B5123D", "#9A3078", "#46378A", "#00458A", "#0B72B5",
  "#008A8A", "#025428", "#007E41", "#20A54A", "#426F82", "#5D7A9C", "#45A1C8", "#651264"]

I am setting color with the following code: [color] = "product?.color". When the color has letter characters, looks like it looses the focus (selection effect). But if the color does not have letter characters it works properly.

here color code is "#025428"

Here I have selected the first one (top left) or the product?.color value refers to top left color so the selected effect should appear.... Here is the behavior....

here color code is "#AC8542"

Could you help me with this issue???

Thanks in advance!

Hello,

Disabling alpha removes slider as expected (I'm using color-sketch implementation),

But if user types an HEX with a length of 4 such as 1230, it will be converted into a color of #112233 (which is normal behavior), but a transparency set to 0%.
It typically happens when user deletes some chars of a 6-length HEX, coming down to a HEX of 4 and so, transparency.

I think it's a way to bypass the behavior we expect when setting disableAlpha to TRUE.
What do you think ?

Thanks for your time

--
I can do a PR if needed, I've looked into code and it seems to be related with isValidHex(hex: string) / handleChange not taking into account disableAlpha attribute.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Is it possible to create a Sketch color picker with material design?

Hi, I would like to pass a custom set of colors to the color-swatches component but If I pass an array to the property colors I see only a white rectange.
This is an example
https://stackblitz.com/edit/angular-ngx-colors-test

Is it possibile to do this?
Thanks

There is an issue with onChangeComplete. Try dragging the color picker around, or just the opacity indicator, and it gets triggered multiple times. It should only be triggered when the user stops dragging

The circle color swatch does not return to it's initial state after click on it and release a mouse button outside it.

Steps to reproduce:

1. Click a circle color swatch (do not release the mouse button)
2. Move mouse outside the swatch
3. Release the mouse button

Hey man ! Thanks for this great work ! This plugin is just awesome !

I have a question, how can i change the color of circle on CirclePicker ? I've try but i don't see how i can do it...

Thanks again 💯

Hello, first of all, thanks for this great library we really appreciate your work.

So, I have a question, and is about a problem that we have when we try to set values to HSL editor.

Here you have the example: https://www.screencast.com/t/oq336Eca6TU

As you could see, HEX and RGB inputs work fine, but on HSL editor, turns values to 0.

Our lines of code are simply like this:
<color-chrome [disableAlpha]='true' [color]='color' (onChangeComplete)='handleCustomColorChange($event)'>

I really appreciate if you could help us to find which is the error and how we could fix it.

Notes:

Actually, we have the 1.2.1 version, but, we have updated to 2.0.1 and the issue doesn't go out

Hello. First of all thanks for this great library. I use twitter picker and I can't change the default colors of the picker. I want to change one of the colors from this default array but it doesn't work: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']. Can you help me? I need it immediately.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Hi,
I getting this error on prod build with IVY compiler enabled.

Can you please look into it and help.

Thanks.

ERROR Error: Template error: Can't bind to 'hsl' since it isn't a known property of 'color-saturation'.
at createUnknownPropertyError (core.js:12759)
at validateAgainstUnknownProperties (core.js:12698)
at elementPropertyInternal (core.js:12603)
at Module.ɵɵproperty (core.js:19773)
at SketchComponent_Template (ngx-color-sketch.js:494)
at executeTemplate (core.js:12177)
at checkView (core.js:13615)
at componentRefresh (core.js:13359)
at refreshChildComponents (core.js:11858)
at refreshDescendantViews (core.js:11757)

On the demo page, you can see that the "Hex" label in the Sketch color picker has the style cursor: ew-resize;. In the source code, this editable does not set [dragLabel] to true. It seems to come from the neighbouring inputs that do have dragLabel set to true.

Relevant code:
https://github.com/scttcper/ngx-color/blob/master/src/lib/components/sketch/sketch-fields.component.ts#L16-L61

"@angular/core": "^5.2.11",
"ngx-color": "^4.1.0",

I'm getting an error

webpack: Compiled successfully.
ERROR in src/app/...module.ts(6,35): error TS2307: Cannot find module 'ngx-color/sketch'.

When I ctrl-click on ColorSketchModule It actually navigates inside node_modules, so It's properly installed.
I also tried deleting node_modules and installing from scratch.

Also it works OK with "@angular/core": "~8.2.13", (have created demo project for that)

I think it is a bug that when I specify color that are not default in this component, the selection does not work. For example:
colors = ['#FF1744', '#AA0FFF', '#304FFE', '#1DE9B6', '#AEEA00', '#FF6D00', '#795548'];
Here only the color '#795548' is possible to select because it belongs to the default color set, the rest are just not getting selected upon click.
Check here in stackblitz url

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

onSwatchHover never triggers anything regardless of what you place inside it. Nor is it documented anywhere on how to execute it.

<color-twitter *ngIf="editColor" (onChangeComplete)="editColor = !editColor; eventColor=$event.color.hex" (onSwatchHover)="swatchHover($color, $event)" class="animated fadeIn"></color-twitter>

Is it possible that in the future you will add a possibility to open the color picker as a popup, just by pressing the button?

Angular CLI: 8.2.0
Node: 12.17.0
OS: win32 x64
Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.802.0 (cli-only)
@angular-devkit/core         8.2.0 (cli-only)
@angular-devkit/schematics   8.2.0 (cli-only)
@schematics/angular          8.2.0 (cli-only)
@schematics/update           0.802.0 (cli-only)

Why am I receveing this?

ERROR in The target entry-point "ngx-color/sketch" has missing dependencies:
 - @angular/common
 - @angular/core

Hi,
Among all the components, the photoshop component meets our requirements and it would be much better if you can provide customization of labels for buttons and fields for multi-language support. I will pass the label property as a parameter. There are four labels in the photoshop component(i,e Ok, Cancel, new and current) that require multi-language support and it would be good if we get this feature.

FYI,

Thank you

I'd assign myself but I don't seem to have permission. I wanted to make PR, but I don't have permission.

First, thank you for your work on this library :)

I noticed the variable type for the [color] input on the ColorWrap component is HSLA.

The documentation says that the input accepts hex strings, RGBA, HSLA or HSVA.

In practice, the input does indeed accept all types but typescript warns about the incompatibility.

First of all, thank you for this great library. It works great in normal mode, but fails while running on SSR mode via angular universal.

The error i get is:
Event is not defined
on
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Event, Number, Number, Object]),
This error occurs after webpack compilation.

It would be great if this issue is fixed.

want to change the preset tooltip but still shows the hex value, please advice on a workaround or if a fix is available.

presetColors.push({ color: hexColor, title: r:${color.r} g:${color.g} b:${color.b} a:${color.a} });

Hi, I would like to suggest a new feature for the color slider, this is a simple shade slider. this is just like a hue slider but the start color is the selected color from hue slider going to a darker color

I have changed alpha slider but its not working.

@scttcper Is it possible to provide support for IE11?

hello,

is this module expected to work on angular5?

i got this exception

Uncaught Error: Unexpected value 'ColorSketchModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

not sure if it's for angular5 or for something stupid that i do :)

Hey,

As you can tell from this image, with no presets given, there is a free border. The issue comes from the fact that the div sketch-swatches inside the SketchPresetColorsComponent has margin and padding applied to it.

I expect that with no preset colours, we would not see a border.

An easy solution is to just add *ngIf="colors && colors.length" to the div or do something similar a level up.

I couldn't find any contribution guides on the repo, so I've logged the issue. If you instead rather I make a pull request, let me know and I can go down that road. Just let me know what guidelines to follow.

Thanks,

Great library, looks really good.

I have two questions:

1. How can I use it with input, I mean when I click on input the picker needs to be shown next to it.
2. There is an option to append it to the body element? The idea is to use it with elements with overflow hidden.

Thanks.

SwatchesComponent uses color-raised, but doesn't allow to change it's zDepth input.

So that if you want to display it in drop down menu, it will have two shadows.

Hi!, I tried to resize a circle with circleSize property but it didn't work, circleSpacing too.

<color-circle [colors]="defaultColorPicker" width="100%" circleSize="36" circleSpacing="10" (onChange)="handleChangeColor($event)"></color-circle>

And I think the problem in template of circle.component.ts, you din't pass circleSize and circleSpacing properties into color-circle-swatch

Is it possible to retrieve the alpha value when using color.hex on ColorEvent?

it would be better than doing

let hexValue = colorEvent.color.hex || '';
  if (hexValue.length === 7) {
    hexValue += Math.round(colorEvent.color.rgb.a * 255).toString(16);
}

How can I modfiy the CSS of the circle picker in order to center the circles? Because I'm trying to override it and nothing happens. Could you help me? I want to adapt it to my design.
Thanks.

I am getting the following error while building my angular app for production.
Running ng serve does not produce any error

ERROR in /Users/ashok/WebRoot/sociostuff/node_modules/ngx-color/fesm5/ngx-color.js
Module build failed (from /Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:77:21)
    at visitNodes (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16144:30)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16370:24)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16265:21)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16322:24)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16333:24)
    at checkNodeForDecorators (/Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16135:24)
    at Object.forEachChild (/Users/ashok/WebRoot/sociostuff/node_modules/typescript/lib/typescript.js:16229:21)
ERROR in /Users/ashok/WebRoot/sociostuff/node_modules/ngx-color/circle/fesm5/ngx-color-circle.js
Module build failed (from /Users/ashok/WebRoot/sociostuff/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):

Versions of packages from package.json

"@angular/animations": "~7.2.0",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/http": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/platform-server": "~7.2.0",
"@angular/router": "~7.2.0",
"ngx-color": "^5.1.1",

Hey as the title suggests

when clicking ctrl + c in the hex box, opacity is reset to 100. the expectation is that opacity should not reset.

This is not a bug, this is 2 requests:

1. Once you've created color component (e.g.: color-sketch), I am unable to override programmatically it's value, because seems like "[color]" input parameter seems like one way binded, it doesn't care the color object has changed on parent even if I try to send like this: "[(color)]".

2. Is it possible to modify preset colors somehow? If not please can you put that in?

Thanks

Hello there,
I am getting some errors with the basic implementation of this component.

I'm using:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.2.9
Angular Compiler CLI: 5.2.9
Node: 9.11.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Mobile Safari/537.36

First I tried <color-slider></color-slider> (with and without color and (onChange) set) and got an exception every time I clicked in the slider, and of course, couldn't drag the slider itself.

Then I tried <color-alpha-picker></color-alpha-picker>, got the same exception that occurs in this part of the code (line 895 of ngx-color.js):

  this.mousemove = fromEvent(document, 'mousemove')
            .subscribe(function (e) { return _this.handleMousemove(e); });

It seems that fromEvent object is not defined.

When I finally tried <color-sketch></color-sketch> I still got the same exception, but only when clicked in the two bottom sliders.

Would love if you could give any hint to help me solve this problem.

Thanks in advance

Hi,

I'm using in v 4.0.0. I set disabledAlpha to true and the alpha slider is still visible. It also changes the color in the preview.

When using HueComponent with direction vertical, the default slider/pointer css is not adjusted.

Work around is to pass in a custom 'pointer'. If vertical is an out of the box option should a default slider for the vertical hue also be included.

Hey, when I include your color picker in my angular project, I get the following error:

Must call super constructor in derived class before accessing 'this' or returning from derived constructor

This error only occurs on a live server. When compiling on my local machine, I donot see this error, only when compliling and upload via ftp.

In my app.module.ts I import the ColorCircleModule like so

import { ColorCircleModule } from 'ngx-color/circle';

then import it like:

imports: [ColorCircleModule]

and use it like so

<color-circle width="120px" [colors]="wallColors" circleSize="30" circleSpacing="5" (onChangeComplete)="setWallColor($event)"></color-circle>

where wallColors is a array of strings

private wallColors: string[] = ['#e6e1c9', '#b34a59', '#...']

I'm looking for a good color picker that is aria compliant. This looks to be one of the best pickers but I'm not seeing any compliancy. Don't take this bad, I haven't found one that is.

I'm looking to use the slacker interface but haven't looked at the code too much. Would it e easier to make a new component that is Aria compliant? It would need to add aria roles and attributes to html tags, change the way tab works and use of arrow keys for selections and space/enter to select.

If no thoughts have been on this topic and the above would work, I could look at doing the new component.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀