{"id":26851243,"url":"https://github.com/ruhley/angular-color-picker","last_synced_at":"2025-04-06T23:16:11.082Z","repository":{"id":22952824,"uuid":"26302423","full_name":"ruhley/angular-color-picker","owner":"ruhley","description":"Vanilla AngularJS Color Picker Directive with no requirement on jQuery","archived":false,"fork":false,"pushed_at":"2018-12-02T22:18:07.000Z","size":5460,"stargazers_count":163,"open_issues_count":9,"forks_count":78,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T22:19:21.526Z","etag":null,"topics":["angularjs","color-picker","javascript"],"latest_commit_sha":null,"homepage":"http://ruhley.github.io/angular-color-picker/","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/ruhley.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-07T03:38:25.000Z","updated_at":"2025-03-05T20:40:28.000Z","dependencies_parsed_at":"2022-09-09T06:02:35.796Z","dependency_job_id":null,"html_url":"https://github.com/ruhley/angular-color-picker","commit_stats":null,"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruhley%2Fangular-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruhley%2Fangular-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruhley%2Fangular-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruhley%2Fangular-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruhley","download_url":"https://codeload.github.com/ruhley/angular-color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563935,"owners_count":20958971,"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":["angularjs","color-picker","javascript"],"created_at":"2025-03-30T22:19:11.918Z","updated_at":"2025-04-06T23:16:11.062Z","avatar_url":"https://github.com/ruhley.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Color Picker\n\nVanilla AngularJS Color Picker Directive with no requirement on jQuery\n\n[![Build Status](https://travis-ci.org/ruhley/angular-color-picker.svg?branch=master)](https://travis-ci.org/ruhley/angular-color-picker)\n[![Code Climate](https://lima.codeclimate.com/github/ruhley/angular-color-picker/badges/gpa.svg)](https://lima.codeclimate.com/github/ruhley/angular-color-picker)\n\n## Demo\nhttps://ruhley.github.io/angular-color-picker/\n\n## Installation\n\n#### Bower\n\n```shell\nbower install angularjs-color-picker --save\n```\n\n#### Npm\n```shell\nnpm install angularjs-color-picker --save\n```\n\n#### Usage\n\n* Include files\n\n    * Bower\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"bower_components/angular-color-picker/dist/angularjs-color-picker.min.css\" /\u003e\n    \u003c!-- only include if you use bootstrap --\u003e\n    \u003clink rel=\"stylesheet\" href=\"bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css\" /\u003e\n\n    \u003cscript src=\"bower_components/tinycolor/dist/tinycolor-min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"bower_components/angular-color-picker/dist/angularjs-color-picker.min.js\"\u003e\u003c/script\u003e\n    ```\n\n    * Node\n\n    ```html\n    \u003clink rel=\"stylesheet\" href=\"node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.css\" /\u003e\n    \u003c!-- only include if you use bootstrap --\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/angularjs-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css\" /\u003e\n\n    \u003cscript src=\"node_modules/tinycolor2/dist/tinycolor-min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.js\"\u003e\u003c/script\u003e\n    ```\n\n\n* Add the module to your app\n```javascript\nangular.module('app', ['color.picker']);\n```\n\n* Include in your view\n```html\n\u003ccolor-picker ng-model=\"myColor\"\u003e\u003c/color-picker\u003e\n```\n\n## Options\n\nHTML - Only ```ng-model``` is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.\n\n```html\n\u003ccolor-picker\n    ng-model=\"color\"\n    options=\"options\"\n    api=\"api\"\n    event-api=\"eventApi\"\n\u003e\u003c/color-picker\u003e\n```\nJavascript\n\n```js\n$scope.color = '#FF0000';\n\n// options - if a list is given then choose one of the items. The first item in the list will be the default\n$scope.options = {\n    // html attributes\n    required: [false, true],\n    disabled: [false, true],\n    placeholder: '',\n    inputClass: '',\n    id: undefined,\n    name: undefined,\n    // validation\n    restrictToFormat: [false, true],\n    preserveInputFormat: [false, true],\n    allowEmpty: [false, true],\n    // color\n    format: ['hsl', 'hsv', 'rgb', 'hex', 'hexString', 'hex8', 'hex8String', 'raw'],\n    case: ['upper', 'lower'],\n    // sliders\n    hue: [true, false],\n    saturation: [false, true],\n    lightness: [false, true], // Note: In the square mode this is HSV and in round mode this is HSL\n    alpha: [true, false],\n    dynamicHue: [true, false],\n    dynamicSaturation: [true, false],\n    dynamicLightness: [true, false],\n    dynamicAlpha: [true, false],\n    // swatch\n    swatch: [true, false],\n    swatchPos: ['left', 'right'],\n    swatchBootstrap: [true, false],\n    swatchOnly: [true, false],\n    // popup\n    round: [false, true],\n    pos: ['bottom left', 'bottom right', 'top left', 'top right'],\n    inline: [false, true],\n    horizontal: [false, true],\n    // show/hide\n    show: {\n        swatch: [true, false],\n        focus: [true, false],\n    },\n    hide: {\n        blur: [true, false],\n        escape: [true, false],\n        click: [true, false],\n    },\n    // buttons\n    close: {\n        show: [false, true],\n        label: 'Close',\n        class: '',\n    },\n    clear: {\n        show: [false, true],\n        label: 'Clear',\n        class: '',\n    },\n    reset: {\n        show: [false, true],\n        label: 'Reset',\n        class: '',\n    },\n};\n\n// exposed api functions\n$scope.api.open();       // opens the popup\n$scope.api.close();      // closes the popup\n$scope.api.clear();      // removes value\n$scope.api.reset();      // resets color value to original value\n$scope.api.getElement(); // returns the wrapping \u003ccolor-picker\u003e element\n$scope.api.getScope();   // returns the color picker $scope\n\n// api event handlers\n$scope.eventApi = {\n    onChange:  function(api, color, $event) {},\n    onBlur:    function(api, color, $event) {},\n    onOpen:    function(api, color, $event) {},\n    onClose:   function(api, color, $event) {},\n    onClear:   function(api, color, $event) {},\n    onReset:   function(api, color, $event) {},\n    onDestroy: function(api, color) {},\n};\n\n// decorator - all variables in options can be globally overridden here\nangular\n    .module('app', ['color.picker'])\n    .config(function($provide) {\n        $provide.decorator('ColorPickerOptions', function($delegate) {\n            var options = angular.copy($delegate);\n            options.round = true;\n            options.alpha = false;\n            options.format = 'hex';\n            return options;\n        });\n    });\n```\n\n## Requirements\n\n* angularjs (v1.3 and higher)\n* tinycolor.js (18.8 KB minified)\n\nNO requirement for jQuery!\n\n## Inspiration\n\nInspiration and code taken from projects like\n* http://kaihenzler.github.io/angular-minicolors/\n* http://mjolnic.github.io/bootstrap-colorpicker/\n* https://github.com/buberdds/angular-bootstrap-colorpicker/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruhley%2Fangular-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruhley%2Fangular-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruhley%2Fangular-color-picker/lists"}