{"id":13577374,"url":"https://github.com/brianpkelley/md-color-picker","last_synced_at":"2025-04-04T08:08:08.788Z","repository":{"id":46774131,"uuid":"41875062","full_name":"brianpkelley/md-color-picker","owner":"brianpkelley","description":"Angular-Material based color picker","archived":false,"fork":false,"pushed_at":"2020-04-27T16:37:17.000Z","size":936,"stargazers_count":252,"open_issues_count":51,"forks_count":120,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2025-03-28T07:06:19.659Z","etag":null,"topics":["angular","angularjs","color-chooser","color-input","color-palette","color-picker","color-wheel","input-color","palette","palettes","tinycolor"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brianpkelley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-03T17:54:06.000Z","updated_at":"2025-01-06T10:09:32.000Z","dependencies_parsed_at":"2022-09-05T16:51:49.423Z","dependency_job_id":null,"html_url":"https://github.com/brianpkelley/md-color-picker","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianpkelley%2Fmd-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianpkelley%2Fmd-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianpkelley%2Fmd-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brianpkelley%2Fmd-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brianpkelley","download_url":"https://codeload.github.com/brianpkelley/md-color-picker/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142066,"owners_count":20890652,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","color-chooser","color-input","color-palette","color-picker","color-wheel","input-color","palette","palettes","tinycolor"],"created_at":"2024-08-01T15:01:20.893Z","updated_at":"2025-04-04T08:08:08.766Z","avatar_url":"https://github.com/brianpkelley.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# md-color-picker\nAngular-Material based color picker with no jQuery or other DOM/utility library dependencies.\n\n[![NPM version](https://badge-me.herokuapp.com/api/npm/md-color-picker.png)](http://badges.enytc.com/for/npm/md-color-picker)\n[![BOWER version](https://badge-me.herokuapp.com/api/bower/brianpkelley/md-color-picker.png)](http://badges.enytc.com/for/bower/brianpkelley/md-color-picker)\n[![Build Status](https://travis-ci.org/brianpkelley/md-color-picker.svg?branch=develop)](https://travis-ci.org/brianpkelley/md-color-picker)\n\n![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/master/md-color-picker-2.png)\n\n## Demo\nTry out the demo here: **[GitHub Page](http://brianpkelley.github.io/md-color-picker/)**\n\n\n## Install\n#### NPM\n1. Download [tinycolor.js](https://github.com/bgrins/TinyColor) 1.2.1 or higher. Other versions may work, though 1.2.1 was used to develop this.\n2. Install `md-color-picker`.\n```bash\nnpm install md-color-picker\n```\n\n#### Bower (includes tinycolor.js):\n```bash\nbower install md-color-picker\n```\n\n## Angular dependencies\n- [Angular Material](https://material.angularjs.org)\n- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional)\n\n## Other dependencies\nThe only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library.\n\n## Usage\n- Include the css.\n````html\n\u003clink href=\"path/to/md-color-picker/dist/mdColorPicker.min.css\" rel=\"stylesheet\" /\u003e\n````\n- Include the javascript.\n````html\n\u003cscript src=\"path/to/tinycolor/dist/tinycolor-min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/md-color-picker/dist/mdColorPicker.min.js\"\u003e\u003c/script\u003e\n````\n- Add dependencies to your application (ngCookies is optional)\n````javascript\nvar app = angular.module('myApp', ['ngMaterial','ngCookies', 'mdColorPicker']);\n````\n\n- Place the directive wherever it is needed.  _note:_ this breaks the old version 0.1 as it now uses _ng-model_ instead of _value_\n````html\n\u003cdiv md-color-picker ng-model=\"valueObj\"\u003e\u003c/div\u003e\n````\n\n## Options\n\nOptions may be set either by an options object on the `md-color-picker` attribute and/or using attributes.  If an option is present on both the options object and as an attribute, the attribute will take precedence.\n\n**Setting options by scope object**\n```js\n// Controller\n$scope.scopeVariable.options = {\n    label: \"Choose a color\",\n    icon: \"brush\",\n    default: \"#f00\",\n    genericPalette: false,\n    history: false\n};\n```\n```html\n\u003cdiv md-color-picker=\"scopeVariable.options\" ng-model=\"scopeVariable.color\"\u003e\u003c/div\u003e\n```\n\n**Setting options by attribute**\n```html\n\u003cdiv\n    md-color-picker\n    ng-model=\"scopeVariable.color\"\n    label=\"Choose a color\"\n    icon=\"brush\"\n    default=\"#f00\"\n    md-color-generic-palette=\"false\"\n    md-color-history=\"false\"\n\u003e\u003c/div\u003e\n```\n\n| Option Object name  \t| Attribute Option name     \t| Type        \t| Default            \t| Description                                                                                                                                                                                                                                          \t|\n|---------------------\t|---------------------------\t|-------------\t|--------------------\t|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------\t|\n| type                \t| type                      \t| Int         \t| 0                  \t| Default output type. 0: hex, 1: rgb, 2: hsl                                                                                                                                                                                                          \t|\n| label               \t| label                     \t| String      \t| \"\"                 \t| The lable for the input.                                                                                                                                                                                                                             \t|\n| icon                \t| icon                      \t| String      \t| \"\"                 \t| Material Icon name. https://design.google.com/icons/                                                                                                                                                                                                 \t|\n| random              \t| random                    \t| Boolean     \t| false              \t| Select a random color on open                                                                                                                                                                                                                        \t|\n| default             \t| default                   \t| Color       \t| \"rgb(255,255,255)\" \t| Default color                                                                                                                                                                                                                                        \t|\n| openOnInput         \t| open-on-input             \t| Boolean     \t| true               \t| Open color picker when user clicks on the input field. If disabled, color picker will only open when clicking on the preview.                                                                                                                        \t|\n| hasBackdrop         \t| has-backdrop              \t| Boolean     \t| true               \t| Dialog Backdrop. https://material.angularjs.org/latest/api/service/$mdDialog                                                                                                                                                                         \t|\n| clickOutsideToClose \t| click-outside-to-close    \t| Boolean     \t| true               \t| Dialog click outside to close. https://material.angularjs.org/latest/api/service/$mdDialog                                                                                                                                                           \t|\n| skipHide            \t| skip-hide                 \t| Boolean     \t| true               \t| Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262                                                                                                                                                                 \t|\n| preserveScope       \t| preserve-scope            \t| Boolean     \t| true               \t| Dialog preserveScope. https://material.angularjs.org/latest/api/service/$mdDialog                                                                                                                                                                    \t|\n| clearButton         \t| md-color-clear-button     \t| Boolean     \t| true               \t| Show the \"clear\" button inside of the input.                                                                                                                                                                                                         \t|\n| preview             \t| md-color-preview          \t| Boolean     \t| true               \t| Show the color preview circle next to the input.                                                                                                                                                                                                     \t|\n| alphaChannel        \t| md-color-alpha-channel    \t| Boolean     \t| true               \t| Enable alpha channel.                                                                                                                                                                                                                                \t|\n| spectrum            \t| md-color-spectrum         \t| Boolean     \t| true               \t| Show the spectrum tab.                                                                                                                                                                                                                               \t|\n| sliders             \t| md-color-sliders          \t| Boolean     \t| true               \t| Show the sliders tab.                                                                                                                                                                                                                                \t|\n| genericPalette      \t| md-color-generic-palette  \t| Boolean     \t| true               \t| Show the generic palette tab.                                                                                                                                                                                                                        \t|\n| materialPalette     \t| md-color-material-palette \t| Boolean     \t| true               \t| Show the material colors palette tab.                                                                                                                                                                                                                \t|\n| history             \t| md-color-history          \t| Boolean     \t| true               \t| Show the history tab.                                                                                                                                                                                                                                \t|\n| hex             \t| md-color-hex          \t| Boolean     \t| true               \t| Show the HEX values tab.                                                                                                                                                                                                                                \t|\n| rgb             \t| md-color-rgb          \t| Boolean     \t| true               \t| Show the RGB values tab.                                                                                                                                                                                                                                \t|\n| hsl             \t| md-color-hsl          \t| Boolean     \t| true               \t| Show the HSL values tab.                                                                                                                                                                                                                                \t|\n| defaultTab          \t| md-color-default-tab      \t| String, Int \t| \"spectrum\"         \t| Which tab should be selected when opening.  Can either be a string or index.  If the value is an index, do not count hidden/disabled tabs. \u003cul\u003e\u003cli\u003espectrum\u003c/li\u003e\u003cli\u003esliders\u003c/li\u003e\u003cli\u003egenericPalette\u003c/li\u003e\u003cli\u003ematerialPalette\u003c/li\u003e\u003cli\u003ehistory\u003c/li\u003e\u003c/ul\u003e \t|\n\n\n## Disclaimer\nThis is still in a very early beta, and is rapidly changing (3 versions before initial commit).  I am open to any and all help anyone is willing to put in.  Will update as we go.\n\n\n## Known issues / TODO\n[ ] Break apart md-color-picker into other directives, md-color-picker-preview , input, etc.\n[ ] Add i18n support.\n[ ] Refactor LESS\n[ ] Add optional SASS file\n[ ] IE 11 Issues\n[ ] Inline dropdown mode\n[ ] Validation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianpkelley%2Fmd-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianpkelley%2Fmd-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianpkelley%2Fmd-color-picker/lists"}