{"_id":"@dp_ui_dev/ngx-color-picker","_rev":"1-aaafac061ae14ec41d2ca186c6332653","name":"@dp_ui_dev/ngx-color-picker","dist-tags":{"latest":"11.0.0"},"versions":{"1.0.0":{"name":"@dp_ui_dev/ngx-color-picker","description":"Color picker widget for Angular with a11y","bugs":{"url":"https://github.com/zefoy/ngx-color-picker/issues"},"version":"1.0.0","license":"MIT","scripts":{"ng":"ng","lint":"ng lint","start":"ng serve app","build":"ng build lib","deploy":"deploy-to-git","prepare":"ng build lib --prod","publish":"npm publish ./dist/lib","predeploy":"rimraf ./dist/app && mkdirp ./dist/app"},"tslint":{"extends":"./tslint.json"},"stylelint":{"extends":"./stylelint.json"},"repository":{"type":"git","url":"git+https://github.com/zefoy/ngx-color-picker.git"},"config":{"deployToGit":{"repository":"git@github.com:zefoy/ngx-color-picker.git","branch":"gh-pages","folder":"dist/app","script":"ng build app --prod -- --base-href=ngx-color-picker --delete-output-path=false","commit":"Publishing $npm_package_version","user":{"name":"ZEF Devel","email":"devel@zef.fi"}}},"dependencies":{"@angular/cdk":"^11.0.2","@angular/common":"^11.0.4","@angular/compiler":"^11.0.4","@angular/core":"^11.0.4","@angular/flex-layout":"11.0.0-beta.33","@angular/forms":"^11.0.4","@angular/platform-browser":"^11.0.4","@angular/platform-browser-dynamic":"^11.0.4"},"devDependencies":{"@angular-devkit/build-angular":"^0.1100.4","@angular-devkit/build-ng-packagr":"^0.1002.0","@angular/cli":"^11.0.4","@angular/compiler-cli":"^11.0.4","@types/node":"^14.14.13","codelyzer":"^6.0.1","core-js":"^3.8.1","cpx":"^1.5.0","deploy-to-git":"^0.1.5","mkdirp":"^1.0.4","ng-packagr":"^11.0.3","rimraf":"^3.0.2","rxjs":"^6.6.3","stylelint":"^13.8.0","stylelint-config-standard":"^20.0.0","stylelint-order":"^4.1.0","terser":"^5.5.1","ts-node":"^9.1.1","tsickle":"^0.39.1","tslint":"^6.1.0","typescript":"~4.0.0","watch":"^1.0.2","zone.js":"^0.11.3"},"gitHead":"5be21f3979a4a2842cbb8447f8a67fc137ef4f11","homepage":"https://github.com/zefoy/ngx-color-picker#readme","_id":"@dp_ui_dev/ngx-color-picker@1.0.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-uz1Cco0ZNIe5DhwIDvx/S8wDGmH+L0mL6alvIw2IUq+kqqNvotdECBwAbxYuXurB7OSSPMkGwrOU7l2Zmq5wxw==","shasum":"4359dda417c89f6a92680b4a983688029c09658c","tarball":"https://registry.npmjs.org/@dp_ui_dev/ngx-color-picker/-/ngx-color-picker-1.0.0.tgz","fileCount":63,"unpackedSize":1183576,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsrwDEHJNIe2ewywXlEbi4niXzTlN8PZ25HXoF/L0NXQIgBJSByW7CC7l175TW923JLLM8LGlMy3zmpZ12qC/nRCo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi37otACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7KQ/8DjbxYQNAHL7gdE8F1/Tz/UOTLlYlkrwR+TS+cu5CaubsEazg\r\nAyl11ZBraUd61uktnIXh8CrzAtLBoSf1UGowWlhttYNXRVqpQKEmriVih0T5\r\n+L5oKSKvcTk7ZlNwkWy1S+ear2ausloloFzZUMo5/vvMIzYiztMbfg+mp0FL\r\n/9o9vboPX2alJyemwL7gcOlzoCSfN7CFwog5zLrcilf1c1ztkn2lbnXQVbt7\r\nJvzRurPnXvCBpGISsc5b7VWNEFH+UyO5tbptn7o7ad87wEU0zaQOw6PftSAj\r\n9FUWiMxtygY3NojDuJlma5LDIRzO5DhhLLJfpglGmR1djAGffzppB8mYn0wr\r\n43EEdaDB5FY7kfeDPsC7759VnAYCzHhWpAjTSvgOYL7FsA7EiPWRlPYnmJHk\r\n91iOeht+Di6AXN4IySdJpMZHtujYtBDihWNH4I20NNm2tVXVnbU8pGZTPegH\r\n5ago5ph+CTnKF1KuW5VRmGL83VkF9TrPPjzDvSWvZvzAzTkshxtI5FKUSx3a\r\nrLO6s6mwmapsOOs5aHADVhlAuGhfAoqx3KjE6+dJ3R5v3QIe6lKLPtxo16X3\r\nbfSWZfgdRoepcVXlW9HlursOCByoqZUTViRcNMbRzyfdtNXIKSZpQQdcU6Jw\r\nabwGNPm583/JZjvAnGXpNXzNgeuQJGLJUSQ=\r\n=4t/z\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dp_ui_dev","email":"tdpdivyaprakash@gmail.com"},"directories":{},"maintainers":[{"name":"dp_ui_dev","email":"tdpdivyaprakash@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-color-picker_1.0.0_1658829357429_0.18645626445932617"},"_hasShrinkwrap":false},"11.0.0":{"name":"@dp_ui_dev/ngx-color-picker","description":"Color picker widget for Angular with a11y","bugs":{"url":"https://github.com/zefoy/ngx-color-picker/issues"},"version":"11.0.0","license":"MIT","peerDependencies":{"@angular/common":">=9.0.0","@angular/core":">=9.0.0","@angular/forms":">=9.0.0"},"main":"bundles/ngx-color-picker.umd.js","module":"fesm2015/ngx-color-picker.js","es2015":"fesm2015/ngx-color-picker.js","esm2015":"esm2015/ngx-color-picker.js","fesm2015":"fesm2015/ngx-color-picker.js","typings":"ngx-color-picker.d.ts","metadata":"ngx-color-picker.metadata.json","sideEffects":false,"dependencies":{"tslib":"^2.0.0"},"_id":"@dp_ui_dev/ngx-color-picker@11.0.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-4dUy5hnz7xJjtYMz6TQiSYe/WsSUR8vAJnsuywaDEsudv76jZ8XLuRhEiPlumVUA3dxFlq8jO2heLXp0q7i/Pw==","shasum":"4f0891d0e28367566326f5a1540b1a8952c2e74c","tarball":"https://registry.npmjs.org/@dp_ui_dev/ngx-color-picker/-/ngx-color-picker-11.0.0.tgz","fileCount":31,"unpackedSize":1030642,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrIG40onJzTl/v9429ZHfS8QpXezyF/f4d8ZRXpn+f2gIhAI6gQ2uLLe5LM8oWOm/JXhE9PmZpo/cE2uCrO9SMl1X/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi38D/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Mg//bOtBL9F3mtXELcuaI/i32uK/70zaY3ldGUVpt6nRRDLg4o3/\r\nZ4DO2ZVantD/dFoO/rXKdy8xtVxA4VFHI+5mvr25xpAfYa6m1XVw4PG/1P3Y\r\nArs1xptjLByfltAh9zRi4N9Map/VYsdY5jvpK/MdMymV2wdZmwvciIhf+pi5\r\ntsXmFT63yhm7IpcWih1xlZgScY++QX9ju/k81PzINhhHHmoso+1w3M6xeETa\r\nW3R4i3+AsLN/f91Gggb59VcxCHWg2WYgP89uzxXIRLap3n/C4J7LsP6Ptdl8\r\nGC73T17ZYMCQadrWSN5L6NH7Tld68GJP4n5Ybu1cYIutzNM+RU7BJNLfL1w/\r\n/CcBnxJ39dBxavJeAJl9jToBAlNtjxiTyC+X8XK3dn+qYkXvXmGnJQ7NZwvV\r\n07kiMBxBgwySANuenEbI4XxehSe/qd8YD09HZlca8mBkkXUUvchzHebL8CzR\r\nF0aiIZ5UQ64ik3AB1UO66X/JofGa19kCCbKpDeNWU9XExjdRJJcOdhsTTt2a\r\nzV/q8txWy/t9qk+mBtWQmcBV5mJSH+5s7WRQ72y+xHoHEKq9wb+OB4mIC2lt\r\nZAiGbAggqkxg9X5rjM3foT4doS6cwpFGcYKz2We5UUPT80+iVz0yHxvQiEKb\r\nkRPF4lRI2TAXNPYNik8S/R3xy3KPM3ffVks=\r\n=1Epb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dp_ui_dev","email":"tdpdivyaprakash@gmail.com"},"directories":{},"maintainers":[{"name":"dp_ui_dev","email":"tdpdivyaprakash@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-color-picker_11.0.0_1658831103090_0.7549908039485445"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-26T09:55:57.359Z","1.0.0":"2022-07-26T09:55:57.678Z","modified":"2022-07-26T10:25:03.482Z","11.0.0":"2022-07-26T10:25:03.414Z"},"maintainers":[{"name":"dp_ui_dev","email":"tdpdivyaprakash@gmail.com"}],"description":"Color picker widget for Angular with a11y","bugs":{"url":"https://github.com/zefoy/ngx-color-picker/issues"},"license":"MIT","readme":"# Angular Color Picker\r\n\r\n\r\n\r\nThis is a simple color picker based on the cool angular2-color-picker by Alberplz.\r\n\r\nThis documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from here.\r\n\r\n### Quick links\r\n\r\n[Example application](https://zefoy.github.io/ngx-color-picker/)\r\n |\r\n[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-color-picker/tree/master)\r\n\r\n### Building the library\r\n\r\n```bash\r\nnpm install\r\nnpm run build\r\n```\r\n\r\n### Running the example\r\n\r\n```bash\r\nnpm install\r\nnpm run start\r\n```\r\n\r\n### Installing and usage\r\n\r\n```bash\r\nnpm install ngx-color-picker --save\r\n```\r\n\r\n##### Load the module for your app:\r\n\r\n```javascript\r\nimport { ColorPickerModule } from 'ngx-color-picker';\r\n\r\n@NgModule({\r\n ...\r\n imports: [\r\n ...\r\n ColorPickerModule\r\n ]\r\n})\r\n```\r\n\r\n##### Use it in your HTML template:\r\n\r\n```html\r\n\r\n```\r\n\r\n```javascript\r\n[colorPicker] // The color to show in the color picker dialog.\r\n\r\n[cpWidth] // Use this option to set color picker dialog width ('230px').\r\n[cpHeight] // Use this option to force color picker dialog height ('auto').\r\n\r\n[cpToggle] // Sets the default open / close state of the color picker (false).\r\n[cpDisabled] // Disables opening of the color picker dialog via toggle / events.\r\n\r\n[cpColorMode] // Dialog color mode: 'color', 'grayscale', 'presets' ('color').\r\n\r\n[cpCmykEnabled] // Enables CMYK input format and color change event (false).\r\n\r\n[cpOutputFormat] // Output color format: 'auto', 'hex', 'rgba', 'hsla' ('auto').\r\n[cpAlphaChannel] // Alpha mode: 'enabled', 'disabled', 'always', 'forced' ('enabled').\r\n\r\n[cpFallbackColor] // Used when the color is not well-formed or is undefined ('#000').\r\n\r\n[cpPosition] // Dialog position: 'auto', 'top', 'bottom', 'left', 'right',\r\n // 'top-left', 'top-right', 'bottom-left', 'bottom-right' ('auto').\r\n[cpPositionOffset] // Dialog offset percentage relative to the directive element (0%).\r\n[cpPositionRelativeToArrow] // Dialog position is calculated relative to dialog arrow (false).\r\n\r\n[cpPresetLabel] // Label text for the preset colors if any provided ('Preset colors').\r\n[cpPresetColors] // Array of preset colors to show in the color picker dialog ([]).\r\n\r\n[cpDisableInput] // Disables / hides the color input field from the dialog (false).\r\n\r\n[cpDialogDisplay] // Dialog positioning mode: 'popup', 'inline' ('popup').\r\n // popup: dialog is shown as popup (fixed positioning).\r\n // inline: dialog is shown permanently (static positioning).\r\n\r\n[cpIgnoredElements] // Array of HTML elements that will be ignored when clicked ([]).\r\n\r\n[cpSaveClickOutside] // Save currently selected color when user clicks outside (true).\r\n[cpCloseClickOutside] // Close the color picker dialog when user clicks outside (true).\r\n\r\n[cpOKButton] // Show an OK / Apply button which saves the color (false).\r\n[cpOKButtonText] // Button label text shown inside the OK / Apply button ('OK').\r\n[cpOKButtonClass] // Additional class for customizing the OK / Apply button ('').\r\n\r\n[cpCancelButton] // Show a Cancel / Reset button which resets the color (false).\r\n[cpCancelButtonText] // Button label text shown inside the Cancel / Reset button ('Cancel').\r\n[cpCancelButtonClass] // Additional class for customizing the Cancel / Reset button ('').\r\n\r\n[cpAddColorButton] // Show an Add Color button which add the color into preset (false).\r\n[cpAddColorButtonText] // Button label text shown inside the Add Color button ('Add color').\r\n[cpAddColorButtonClass] // Additional class for customizing the Add Color button ('').\r\n\r\n[cpRemoveColorButtonClass] // Additional class for customizing the Remove Color button ('').\r\n\r\n[cpPresetColorsClass] // Additional class for customizing the Preset Colors container ('').\r\n\r\n[cpMaxPresetColorsLength] // Use this option to set the max colors allowed in presets (null).\r\n\r\n[cpPresetEmptyMessage] // Message for empty colors if any provided used ('No colors added').\r\n[cpPresetEmptyMessageClass] // Additional class for customizing the empty colors message ('').\r\n\r\n[cpUseRootViewContainer] // Create dialog component in the root view container (false).\r\n // Note: The root component needs to have public viewContainerRef.\r\n\r\n(colorPickerOpen) // Current color value, send when dialog is opened (value: string).\r\n(colorPickerClose) // Current color value, send when dialog is closed (value: string).\r\n\r\n(colorPickerChange) // Changed color value, send when color is changed (value: string).\r\n(colorPickerCancel) // Color select canceled, send when Cancel button is pressed (void).\r\n(colorPickerSelect) // Selected color value, send when OK button is pressed (value: string).\r\n\r\n(cpToggleChange) // Status of the dialog, send when dialog is opened / closed (open: boolean).\r\n\r\n(cpInputChange) // Input name and its value, send when user changes color through inputs\r\n // ({input: string, value: number | string, color: string})\r\n\r\n(cpSliderChange) // Slider name and its value, send when user changes color through slider\r\n // ({slider: string, value: number | string, color: string})\r\n(cpSliderDragStart) // Slider name and current color, send when slider dragging starts (mousedown,touchstart)\r\n // ({slider: string, color: string})\r\n(cpSliderDragEnd) // Slider name and current color, send when slider dragging ends (mouseup,touchend)\r\n // ({slider: string, color: string})\r\n\r\n(cpCmykColorChange) // Outputs the color as CMYK string if CMYK is enabled (value: string).\r\n\r\n(cpPresetColorsChange) // Preset colors, send when 'Add Color' button is pressed (value: array).\r\n```\r\n\r\n##### Available control / helper functions (provided by the directive):\r\n\r\n```javascript\r\nopenDialog() // Opens the color picker dialog if not already open.\r\ncloseDialog() // Closes the color picker dialog if not already closed.\r\n```\r\n","readmeFilename":"README.md"}
![\"npm](\"https://badge.fury.io/js/ngx-color-picker.svg\"){kind=icon}