{"_id":"@nng-components/angular-material-color-picker","_rev":"5-a927e7a1bfa562827d4069bcdee7ea90","name":"@nng-components/angular-material-color-picker","dist-tags":{"latest":"20.0.0"},"versions":{"16.0.1":{"name":"@nng-components/angular-material-color-picker","version":"16.0.1","keywords":["angular","angular2","angular 12","angular 13","angular 14","angular 15","angular 16","angular-material","angular material color picker","color-picker","colorpicker","ngx-mat","ngx-mat-color-picker","ngx-material-color-picker"],"author":{"name":"HO Hong Quan"},"license":"MIT","_id":"@nng-components/angular-material-color-picker@16.0.1","maintainers":[{"name":"nng-dev","email":"developer.1.nng@gmail.com"}],"homepage":"https://github.com/developer-1-nng/angular-material-components","bugs":{"url":"https://github.com/developer-1-nng/angular-material-components/issues"},"dist":{"shasum":"2f715a90e997adb500aa096f6dfca221df8245a3","tarball":"https://registry.npmjs.org/@nng-components/angular-material-color-picker/-/angular-material-color-picker-16.0.1.tgz","fileCount":48,"integrity":"sha512-ioRHV7WmuJW7ncoVoSNBp1GixPLOO1geBmDLEmG/eSni3c6widcsY/HtlCBAZkRPVo14eakI3wI2isJonOudzw==","signatures":[{"sig":"MEUCIQC3Iid/NiLdnYvY6g/IeGMODmIFKyhNpcBM7EUbG/xhdwIgSc1PuLwMkBp70vgUjYZR/PsRk8xxouSyrp7Ta19Jc+A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":418014},"module":"fesm2022/nng-components-angular-material-color-picker.mjs","exports":{".":{"esm":"./esm2022/nng-components-angular-material-color-picker.mjs","types":"./index.d.ts","default":"./fesm2022/nng-components-angular-material-color-picker.mjs","esm2022":"./esm2022/nng-components-angular-material-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"58a922c1b7db8bae89d637b656a2e1643611487a","typings":"index.d.ts","_npmUser":{"name":"nng-dev","email":"developer.1.nng@gmail.com"},"repository":{"url":"git+https://github.com/developer-1-nng/angular-material-components.git","type":"git"},"_npmVersion":"10.2.3","description":"Angular Material Color Picker","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^16.0.0","@angular/core":"^16.0.0","@angular/forms":"^16.0.0","@angular/common":"^16.0.0","@angular/material":"^16.0.0","@angular/platform-browser":"^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular-material-color-picker_16.0.1_1770015979367_0.0916213875833376","host":"s3://npm-registry-packages-npm-production"}},"17.0.0":{"name":"@nng-components/angular-material-color-picker","version":"17.0.0","keywords":["angular","angular2","angular 12","angular 13","angular 14","angular 15","angular 16","angular 17","angular-material","angular material color picker","color-picker","colorpicker","ngx-mat","ngx-mat-color-picker","ngx-material-color-picker"],"author":{"name":"HO Hong Quan"},"license":"MIT","_id":"@nng-components/angular-material-color-picker@17.0.0","maintainers":[{"name":"nng-dev","email":"developer.1.nng@gmail.com"}],"homepage":"https://github.com/developer-1-nng/angular-material-components","bugs":{"url":"https://github.com/developer-1-nng/angular-material-components/issues"},"dist":{"shasum":"9b06570377cc7978424d377d199d87a1586ebb8d","tarball":"https://registry.npmjs.org/@nng-components/angular-material-color-picker/-/angular-material-color-picker-17.0.0.tgz","fileCount":48,"integrity":"sha512-sUnpFPsUm3+TKOS8UDlv/N7Iu2Y/rzQ3cWJpp54rBNZs9dyas70P/dXtyfyvHA/xs7d+spIqCVbN3U2dwpLCFw==","signatures":[{"sig":"MEUCIQDbK12QY70FKwfEEDUowOpKtPIyTweb+/5/VU1IPvO2EgIgaVxW5GkpB3E2dRfUSsMnIA90W3j1SSfG+u8iG27M0oE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":415833},"module":"fesm2022/nng-components-angular-material-color-picker.mjs","exports":{".":{"esm":"./esm2022/nng-components-angular-material-color-picker.mjs","types":"./index.d.ts","default":"./fesm2022/nng-components-angular-material-color-picker.mjs","esm2022":"./esm2022/nng-components-angular-material-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3913b7b9592e0bcc430e94af96e5cf0d29905df5","typings":"index.d.ts","_npmUser":{"name":"nng-dev","email":"developer.1.nng@gmail.com"},"repository":{"url":"git+https://github.com/developer-1-nng/angular-material-components.git","type":"git"},"_npmVersion":"10.2.3","description":"Angular Material Color Picker","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^17.0.0","@angular/core":"^17.0.0","@angular/forms":"^17.0.0","@angular/common":"^17.0.0","@angular/material":"^17.0.0","@angular/platform-browser":"^17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular-material-color-picker_17.0.0_1770019511580_0.09330386986132733","host":"s3://npm-registry-packages-npm-production"}},"18.0.0":{"name":"@nng-components/angular-material-color-picker","version":"18.0.0","keywords":["angular","angular2","angular 12","angular 13","angular 14","angular 15","angular 16","angular 17","angular 18","angular-material","angular material color picker","color-picker","colorpicker","ngx-mat","ngx-mat-color-picker","ngx-material-color-picker"],"author":{"name":"HO Hong Quan"},"license":"MIT","_id":"@nng-components/angular-material-color-picker@18.0.0","maintainers":[{"name":"nng-dev","email":"developer.1.nng@gmail.com"}],"homepage":"https://github.com/developer-1-nng/angular-material-components","bugs":{"url":"https://github.com/developer-1-nng/angular-material-components/issues"},"dist":{"shasum":"a5268e8237768d48c71ce1f17fee60c759905b3a","tarball":"https://registry.npmjs.org/@nng-components/angular-material-color-picker/-/angular-material-color-picker-18.0.0.tgz","fileCount":48,"integrity":"sha512-X07bTC0YnJ7Fqs7n2twttdi3R+3cgi+JXO5p0rApPZONrlUQlKbb5cJJeWMC/d3VAqY9PDa9JFQOdP+PZ5zimQ==","signatures":[{"sig":"MEQCIFWADu6X3cQbJOSBF/DWwBoZF/MPMpl67DzaXAiCfeSkAiBQm5wW7svI03kym/yeC+A6HtgbN4FCaaxMOpGgPIKUfw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":415851},"module":"fesm2022/nng-components-angular-material-color-picker.mjs","exports":{".":{"esm":"./esm2022/nng-components-angular-material-color-picker.mjs","types":"./index.d.ts","default":"./fesm2022/nng-components-angular-material-color-picker.mjs","esm2022":"./esm2022/nng-components-angular-material-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"92917b36161e04750834bfe7623003cde98ee5b8","typings":"index.d.ts","_npmUser":{"name":"nng-dev","email":"developer.1.nng@gmail.com"},"repository":{"url":"git+https://github.com/developer-1-nng/angular-material-components.git","type":"git"},"_npmVersion":"10.2.3","description":"Angular Material Color Picker","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^18.0.0","@angular/core":"^18.0.0","@angular/forms":"^18.0.0","@angular/common":"^18.0.0","@angular/material":"^18.0.0","@angular/platform-browser":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular-material-color-picker_18.0.0_1770021952262_0.7083632642849689","host":"s3://npm-registry-packages-npm-production"}},"19.0.0":{"name":"@nng-components/angular-material-color-picker","version":"19.0.0","keywords":["angular","angular2","angular 12","angular 13","angular 14","angular 15","angular 16","angular 17","angular 18","angular-material","angular material color picker","color-picker","colorpicker","ngx-mat","ngx-mat-color-picker","ngx-material-color-picker"],"author":{"name":"HO Hong Quan"},"license":"MIT","_id":"@nng-components/angular-material-color-picker@19.0.0","maintainers":[{"name":"nng-dev","email":"developer.1.nng@gmail.com"}],"homepage":"https://github.com/developer-1-nng/angular-material-components","bugs":{"url":"https://github.com/developer-1-nng/angular-material-components/issues"},"dist":{"shasum":"23e3a1f9b1ab45adb836ab3f2adcbc47415a6f17","tarball":"https://registry.npmjs.org/@nng-components/angular-material-color-picker/-/angular-material-color-picker-19.0.0.tgz","fileCount":26,"integrity":"sha512-VsGW7tMFQvxuRIjYyu37xxuM9F2+7LOVqI77ZZ8T9mE+yvQGBQfWR3ZUrqIPWj9eFNBlYc8xIIKMh346izb16g==","signatures":[{"sig":"MEYCIQD4OqLArzAjLSZDbyLbIXvOA+lNWcBZ+Z8QV2aWdLw8ewIhAJ6zU+VLJBUl/xn5nteMJqFoLYaSfWNRr4Slm43txSYr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":203928},"module":"fesm2022/nng-components-angular-material-color-picker.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/nng-components-angular-material-color-picker.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"d0613f2c4b37d7bea139fd1f6aeeced79848f8f6","typings":"index.d.ts","_npmUser":{"name":"nng-dev","email":"developer.1.nng@gmail.com"},"repository":{"url":"git+https://github.com/developer-1-nng/angular-material-components.git","type":"git"},"_npmVersion":"10.2.3","description":"Angular Material Color Picker","directories":{},"sideEffects":false,"_nodeVersion":"18.19.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/common":"^19.0.0","@angular/material":"^19.0.0","@angular/platform-browser":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular-material-color-picker_19.0.0_1770024280110_0.6232584424851628","host":"s3://npm-registry-packages-npm-production"}},"20.0.0":{"name":"@nng-components/angular-material-color-picker","version":"20.0.0","description":"Angular Material Color Picker","author":{"name":"HO Hong Quan"},"maintainers":[{"name":"nng-dev","email":"developer.1.nng@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/developer-1-nng/angular-material-components.git"},"bugs":{"url":"https://github.com/developer-1-nng/angular-material-components/issues"},"homepage":"https://github.com/developer-1-nng/angular-material-components","keywords":["angular","angular2","angular 12","angular 13","angular 14","angular 15","angular 16","angular 17","angular 18","angular 19","angular 20","angular-material","angular material color picker","color-picker","colorpicker","ngx-mat","ngx-mat-color-picker","ngx-material-color-picker"],"license":"MIT","peerDependencies":{"@angular/platform-browser":"^19.0.0 || ^20.0.0","@angular/common":"^19.0.0 || ^20.0.0","@angular/core":"^19.0.0 || ^20.0.0","@angular/forms":"^19.0.0 || ^20.0.0","@angular/material":"^19.0.0 || ^20.0.0","@angular/cdk":"^19.0.0 || ^20.0.0"},"module":"fesm2022/nng-components-angular-material-color-picker.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/nng-components-angular-material-color-picker.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_id":"@nng-components/angular-material-color-picker@20.0.0","gitHead":"5490cde1459c44b70c56a5bc2437f2a6b0dbfdd7","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-g0zthNYywE0njw149eplXqeeqe24OH6v0OZcU1JZFJgWiCBHP5aeDgcHGe0p2VzH21zkoL/CTFBwZCIVgs6EJA==","shasum":"b1edf12f04d2bb71e8d115bed438244e49826cc2","tarball":"https://registry.npmjs.org/@nng-components/angular-material-color-picker/-/angular-material-color-picker-20.0.0.tgz","fileCount":5,"unpackedSize":200330,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGrJYQy7hriN1PevWrZ1TJCuSNmII6Gl5VaVHBQO3orbAiEAq4ARo4JU9chbt1LX34YFjr4Be7NIWFzmY+glDWWAZto="}]},"_npmUser":{"name":"nng-dev","email":"developer.1.nng@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angular-material-color-picker_20.0.0_1770101876353_0.6753043071920213"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T07:06:19.251Z","modified":"2026-02-03T06:57:56.632Z","16.0.1":"2026-02-02T07:06:19.517Z","17.0.0":"2026-02-02T08:05:11.769Z","18.0.0":"2026-02-02T08:45:52.405Z","19.0.0":"2026-02-02T09:24:40.252Z","20.0.0":"2026-02-03T06:57:56.495Z"},"bugs":{"url":"https://github.com/developer-1-nng/angular-material-components/issues"},"author":{"name":"HO Hong Quan"},"license":"MIT","homepage":"https://github.com/developer-1-nng/angular-material-components","keywords":["angular","angular2","angular 12","angular 13","angular 14","angular 15","angular 16","angular 17","angular 18","angular 19","angular 20","angular-material","angular material color picker","color-picker","colorpicker","ngx-mat","ngx-mat-color-picker","ngx-material-color-picker"],"repository":{"type":"git","url":"git+https://github.com/developer-1-nng/angular-material-components.git"},"description":"Angular Material Color Picker","maintainers":[{"name":"nng-dev","email":"developer.1.nng@gmail.com"}],"readme":"# Angular Material Color Picker for @angular/material 16.x, 17.x, 18.x, 19.x, 20.x\n\n## Description\n\nAn Angular Material Color Picker.\n\n## DEMO\n\n@see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-color-picker)\n\n![Alt Text](demo_color_picker.png)\n\n Choose the version corresponding to your Angular version:\n\n Angular     | @nng-components/angular-material-color-picker\n ----------- | -------------------\n 20          | 20.x+\n 19          | 19.x+\n 18          | 18.x+\n 17          | 17.x+\n 16          | 16.x+\n \n\n## Getting started\n\n```\nnpm install --save  @nng-components/angular-material-color-picker\n```\n\n## Setup\n\n```\nimport { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@nng-components/angular-material-color-picker';\n\n@NgModule({\n   ...\n   imports: [\n        ...\n        NgxMatColorPickerModule\n   ],\n   providers: [\n    { provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS }\n   ],\n   ...\n})\nexport class AppModule { }\n```\n@see [src/app/demo-colorpicker/demo-colorpicker.module.ts](src/app/demo-colorpicker/demo-colorpicker.module.ts)\n\n## Using the component\n\n### Color Picker (ngx-mat-color-picker)\n\n```\n<mat-form-field>\n    <input matInput [ngxMatColorPicker]=\"picker\" [formControl]=\"colorCtr\" [disabled]=\"disabled\">\n    <ngx-mat-color-toggle matSuffix [for]=\"picker\"></ngx-mat-color-toggle>\n    <ngx-mat-color-picker #picker [touchUi]=\"touchUi\" [color]=\"color\"></ngx-mat-color-picker>\n</mat-form-field>\n```\n\n#### List of @Input\n\n| @Input        \t| Type     \t| Default value \t| Description                                                          \t|\n|---------------\t|----------\t|---------------\t|----------------------------------------------------------------------\t|\n| **disabled**      \t| boolean  \t| null          \t| If true, the picker is readonly and can't be modified                \t|\n| **touchUi**    \t   | boolean   | false           | Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets. \t|\n\n## Theming\n- @see @angular/material [Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)\n- Add the Material Design icon font to your index.html\n```\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\" rel=\"stylesheet\">\n```\n\n## License\nMIT","readmeFilename":"README.md"}