{"_id":"@am-zero/ngx-color-picker","_rev":"4-ae00a8eac8bb0d9de3303e7706bab1ed","name":"@am-zero/ngx-color-picker","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@am-zero/ngx-color-picker","version":"0.0.1","keywords":["angular","color-picker","angular color-picker","ngx-color-picker"],"license":"MIT","_id":"@am-zero/ngx-color-picker@0.0.1","maintainers":[{"name":"am-zero","email":"saltybrain2@gmail.com"}],"homepage":"https://github.com/SltyBr/am-zero-ngx-color-picker#readme","bugs":{"url":"https://github.com/SltyBr/am-zero-ngx-color-picker/issues"},"dist":{"shasum":"b3a75ac1928d54272cb19e2a57cc932db5cf0e38","tarball":"https://registry.npmjs.org/@am-zero/ngx-color-picker/-/ngx-color-picker-0.0.1.tgz","fileCount":5,"integrity":"sha512-5EYuGWf09TO3cwdvy8cvJDicIXJRDxdnewbtRqxeqJnUVjXAnwr8gUilrk1e3XyWt88cERPkhmRQo3SVHym31g==","signatures":[{"sig":"MEUCIQCE0pc6JH7CUh25xUfnLMcxkEazZA8aiooys+E7W5xk7wIgGohevCwnSTHvLCcx1vhH5PRQQ4D5Rq0g+EfWM9s1FeY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84647},"module":"fesm2022/am-zero-ngx-color-picker.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/am-zero-ngx-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"f39e2781d2fbe50f1c23946cd81d91a9f08ad09f","typings":"index.d.ts","_npmUser":{"name":"am-zero","email":"saltybrain2@gmail.com"},"repository":{"url":"git+https://github.com/SltyBr/am-zero-ngx-color-picker.git","type":"git"},"_npmVersion":"12.0.2","description":"Angular Color Picker component for Angular20+ (**RxJs** event handling + state handling with **SignalApi**). When for some reason input[type=\"color\"] not compatible with your purposes. Thanks to Cross-device event handling works in mobile browsers.","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.3.28","@angular/common":"^20.3.28"},"_npmOperationalInternal":{"tmp":"tmp/ngx-color-picker_0.0.1_1788698777940_0.6524483287429532","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@am-zero/ngx-color-picker","version":"0.0.2","keywords":["angular","color-picker","angular color-picker","ngx-color-picker"],"license":"MIT","_id":"@am-zero/ngx-color-picker@0.0.2","maintainers":[{"name":"am-zero","email":"saltybrain2@gmail.com"}],"homepage":"https://github.com/SltyBr/am-zero-ngx-color-picker#readme","bugs":{"url":"https://github.com/SltyBr/am-zero-ngx-color-picker/issues"},"dist":{"shasum":"a2bdc82bf123f411a66181470e363ba1025c0c7f","tarball":"https://registry.npmjs.org/@am-zero/ngx-color-picker/-/ngx-color-picker-0.0.2.tgz","fileCount":5,"integrity":"sha512-hbOJSH6COCaSyfeiyTNFuUZX77oSDmasC1FyoGxhV14pC3OTF8aPoUgfZyWogygIb/h3zzG8Bx3CTLO7OdZngQ==","signatures":[{"sig":"MEUCIQCHecFCqpMiapeYDkeLfo9B3XB+AcxQfydu7kd8CSoAFwIgVAqTTZIayplYsVP6qj/LQlLuRl2QgqOHhtwatTcAhHs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84692},"module":"fesm2022/am-zero-ngx-color-picker.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/am-zero-ngx-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6a083defe5435b5efd685140d0f537d9d84cc9b8","typings":"index.d.ts","_npmUser":{"name":"am-zero","email":"saltybrain2@gmail.com"},"repository":{"url":"git+https://github.com/SltyBr/am-zero-ngx-color-picker.git","type":"git"},"_npmVersion":"12.0.2","description":"Angular Color Picker component for Angular20+ (**RxJs** event handling + state handling with **SignalApi**). When for some reason input[type=\"color\"] not compatible with your purposes. Thanks to Cross-device event handling works in mobile browsers.","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.3.28","@angular/common":"^20.3.28"},"_npmOperationalInternal":{"tmp":"tmp/ngx-color-picker_0.0.2_1788885382832_0.6841575498366814","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@am-zero/ngx-color-picker","version":"0.0.3","keywords":["angular","color-picker","angular color-picker","ngx-color-picker"],"license":"MIT","_id":"@am-zero/ngx-color-picker@0.0.3","maintainers":[{"name":"am-zero","email":"saltybrain2@gmail.com"}],"homepage":"https://github.com/SltyBr/am-zero-ngx-color-picker#readme","bugs":{"url":"https://github.com/SltyBr/am-zero-ngx-color-picker/issues"},"dist":{"shasum":"d837d9f04823b8cf1dca657f09e77a94dbf1389b","tarball":"https://registry.npmjs.org/@am-zero/ngx-color-picker/-/ngx-color-picker-0.0.3.tgz","fileCount":5,"integrity":"sha512-le/cik9uG/xIf8fji9QhMn/1uKINYs2UEnxiSc5V1rKwClRWd/D6mRFyb00V/hBLna2POJ+IV+i0OqXtPotCYw==","signatures":[{"sig":"MEQCICqlRzrEwEz5wN+S/Wnz4StljbzZda/fek9FdKB0Ke/nAiBDiGAyNBeRC0+VpLL41jmpFmPGtit7Qorb5dhEONDVcQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84515},"module":"fesm2022/am-zero-ngx-color-picker.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/am-zero-ngx-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6a083defe5435b5efd685140d0f537d9d84cc9b8","typings":"index.d.ts","_npmUser":{"name":"am-zero","email":"saltybrain2@gmail.com"},"repository":{"url":"git+https://github.com/SltyBr/am-zero-ngx-color-picker.git","type":"git"},"_npmVersion":"12.0.2","description":"Angular Color Picker component for Angular20+ (**RxJs** event handling + state handling with **SignalApi**). When for some reason input[type=\"color\"] not compatible with your purposes. Thanks to Cross-device event handling works in mobile browsers.","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^20.3.28","@angular/common":"^20.3.28"},"_npmOperationalInternal":{"tmp":"tmp/ngx-color-picker_0.0.3_1788885627997_0.24592513275694383","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@am-zero/ngx-color-picker","version":"0.0.4","peerDependencies":{"@angular/common":"^20.3.28","@angular/core":"^20.3.28"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"keywords":["angular","color-picker","angular color-picker","ngx-color-picker"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/SltyBr/am-zero-ngx-color-picker.git"},"module":"fesm2022/am-zero-ngx-color-picker.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/am-zero-ngx-color-picker.mjs"}},"gitHead":"6aa4fc44b3514246a5e08e557a3570f4a6320994","_id":"@am-zero/ngx-color-picker@0.0.4","description":"Angular Color Picker component for Angular20+ (**RxJs** event handling + state handling with **SignalApi**). When for some reason input[type=\"color\"] not compatible with your purposes. Thanks to Cross-device event handling works in mobile browsers.","bugs":{"url":"https://github.com/SltyBr/am-zero-ngx-color-picker/issues"},"homepage":"https://github.com/SltyBr/am-zero-ngx-color-picker#readme","_nodeVersion":"24.19.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-t7vTukwrza9Y0Kb9/3Xq1pjgH8Vf1hwjp8tWqloLKidQ7DjzVbReQdBWLaaqBipCzMyqI8duqjE7P3LcvIGe7w==","shasum":"96ba8d84492f419bb920ddad8a21d4fd6041fcfa","tarball":"https://registry.npmjs.org/@am-zero/ngx-color-picker/-/ngx-color-picker-0.0.4.tgz","fileCount":5,"unpackedSize":89245,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEn7h5GPjcd7IbDstzZDz+ITEFO5QvVk4P+oUWylJv2CAiEA6/fKEf79xkT7mE0s0hgb4Dsafx2tYQm3cOaEg2lc1ys="}]},"_npmUser":{"name":"am-zero","email":"saltybrain2@gmail.com"},"directories":{},"maintainers":[{"name":"am-zero","email":"saltybrain2@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-color-picker_0.0.4_1789038842426_0.31496342877865713"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-06T12:46:17.675Z","modified":"2026-09-10T11:14:02.717Z","0.0.1":"2026-09-06T12:46:18.069Z","0.0.2":"2026-09-08T16:36:22.983Z","0.0.3":"2026-09-08T16:40:28.149Z","0.0.4":"2026-09-10T11:14:02.555Z"},"bugs":{"url":"https://github.com/SltyBr/am-zero-ngx-color-picker/issues"},"license":"MIT","homepage":"https://github.com/SltyBr/am-zero-ngx-color-picker#readme","keywords":["angular","color-picker","angular color-picker","ngx-color-picker"],"repository":{"type":"git","url":"git+https://github.com/SltyBr/am-zero-ngx-color-picker.git"},"description":"Angular Color Picker component for Angular20+ (**RxJs** event handling + state handling with **SignalApi**). When for some reason input[type=\"color\"] not compatible with your purposes. Thanks to Cross-device event handling works in mobile browsers.","maintainers":[{"name":"am-zero","email":"saltybrain2@gmail.com"}],"readme":"# Angular v20+ Color Picker\nAngular Color Picker component for Angular20+ (**RxJs** event handling + state handling with **SignalApi**).\nWhen for some reason input[type=\"color\"] not compatible with your purposes.\nThanks to Cross-device event handling works in mobile browsers.\n\n![demo](assets/demo.gif)\n\n### Content\n- [Instalation](#instalation)\n- [Usage](#usage)\n- [Options](#options)\n- [Suggestions](#suggestions)\n- [License](#license)\n\n## Instalation\n\n`npm i @am-zero/color-picker`\n\nthen add `AzColorPicker` into module/component imports\n```typescript\nimport { AzColorPicker } from 'az-color-picker';\n\n@NgModule({\n// ...\n  imports: [\n    // ...\n    AzColorPicker,\n    // ...\n  ],\n// ...\n})\n```\n\n## Usage\n```angular2html\n<az-color-picker [(color)]=\"color\"></az-color-picker>\n```\ncolor is model signal with hex-string type (opacity hex code is optional)\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  imports: [AzColorPicker],\n  template: `\n    <az-color-picker  [(color)]=\"color\" />\n  `,\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  color = \"#5d5ff0\";\n}\n```\n\n## Options\n| Parameter | Description |\n| --- | --- |\n| [(color)]: string  | initial color |\n| [width]: number | width of color picker, takes 100% of parent by default |\n| [height]: number | height of color picker |\n| [submitBtnText]: string | text of submit btn |\n| [cancelBtnText]: string | text of cancel btn |\n| [showRgbControls]: boolean | to show rgb controls |\n| [showHslControls]: boolean | to show hsl controls |\n| [showAlphaControl]: boolean | to show alpha control |\n| [showAlphaHandler]: boolean | to show alpha handler |\n| (onSubmit): string | fires on click submit btn |\n| (onCancel): void | fires on click cancel btn |\n| (onCopied): string | fires on click new color box |\n\n## Suggestions\nIt's not that ideal, because I only started and not have many ideas how to extend api.\nIf you have some suggestions, or found bugs, please, create an issue or contact me [LinkedIn](https://www.linkedin.com/in/pavel-popov-673062254/)\n\n## License\nMIT","readmeFilename":"README.md"}