scttcper / ngx-color Goto Github PK
View Code? Open in Web Editor NEW🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
Home Page: https://ngx-color.vercel.app
License: MIT License
🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
Home Page: https://ngx-color.vercel.app
License: MIT License
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.
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);
}
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}
});
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', '#...']
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
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.
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
I have changed alpha slider but its not working.
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>
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
I'd assign myself but I don't seem to have permission. I wanted to make PR, but I don't have permission.
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,
As the title said...
I need to change the color continuously.
How can I do this?
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.
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",
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 :)
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.
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
"@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)
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.
Is it possible to create a Sketch color picker with material design?
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.
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:
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.
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 there a way to disable color-hue-picker?
Something like [disabled]="true"
Thanks!!
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.
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
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
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
This is not a bug, this is 2 requests:
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)]".
Is it possible to modify preset colors somehow? If not please can you put that in?
Thanks
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:
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.
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 📦🚀
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
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"]
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.
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
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?
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.
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)
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!
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.
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 💯
Great library, looks really good.
I have two questions:
Thanks.
@scttcper Is it possible to provide support for IE11?
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:
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.
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 📦🚀
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,
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.
Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.