{"id":13403504,"url":"https://github.com/benjamincharity/angular-keypad","last_synced_at":"2025-08-30T05:11:44.442Z","repository":{"id":57178634,"uuid":"55440559","full_name":"benjamincharity/angular-keypad","owner":"benjamincharity","description":":iphone::1234: A numerical keypad built for mobile devices.","archived":false,"fork":false,"pushed_at":"2016-10-26T16:25:01.000Z","size":183,"stargazers_count":18,"open_issues_count":2,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-31T18:57:24.100Z","etag":null,"topics":["angularjs","keypad","mobile","touch"],"latest_commit_sha":null,"homepage":"","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/benjamincharity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2016-04-04T19:58:55.000Z","updated_at":"2022-02-06T10:34:05.000Z","dependencies_parsed_at":"2022-09-10T20:00:11.501Z","dependency_job_id":null,"html_url":"https://github.com/benjamincharity/angular-keypad","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/benjamincharity/angular-keypad","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keypad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keypad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keypad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keypad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamincharity","download_url":"https://codeload.github.com/benjamincharity/angular-keypad/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamincharity%2Fangular-keypad/sbom","scorecard":{"id":232774,"data":{"date":"2025-08-11","repo":{"name":"github.com/benjamincharity/angular-keypad","commit":"31ee8a3872cc0cde7866d12689c0863c91ec20f3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 2/23 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-17T05:07:52.695Z","repository_id":57178634,"created_at":"2025-08-17T05:07:52.695Z","updated_at":"2025-08-17T05:07:52.695Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272805572,"owners_count":24995916,"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","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","keypad","mobile","touch"],"created_at":"2024-07-30T19:01:30.802Z","updated_at":"2025-08-30T05:11:44.421Z","avatar_url":"https://github.com/benjamincharity.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Directive"],"sub_categories":[],"readme":"# angular-keypad\n\n\u003cimg src=\"http://cdn.benjamincharity.com/codepen/angular-keypad/keypadDemo.gif\" align=\"right\" alt=\"angular-keypad\"\u003e\n\n[![MIT License][license_image]][license_url] [![Coverage Status][coveralls_badge]][coveralls_link] [![NPM version][npm_version_image]][npm_url]\n\n:iphone::1234: An Angular directive that creates a numeric keypad.\n\n\u003e [:tv: **All Demos**][demo_collection]\n\n_[Comments and Pull Requests welcome!][issues]_\n\n## Contents\n\n- [Installation](#installation)\n- [Dependencies](#dependencies)\n- [Usage](#usage)\n- [Directive](#directive)\n  - [Attributes](#attributes)\n    - [`bc-number-model`](#bc-number-model)\n    - [`bc-max-length`](#bc-max-length)\n    - [`bc-right-button`](#bc-right-button)\n    - [`bc-left-button`](#bc-left-button)\n  - [Custom Methods](#custom-methods)\n    - [`bc-right-button-method`](#bc-right-button-method)\n    - [`bc-left-button-method`](#bc-left-button-method)\n    - [`bc-empty-backspace-method`](#bc-empty-backspace-method)\n- [Plug'n'Play Buttons](#plug-n-play-buttons)\n- [`bcKeypadConfigProvider`](#bckeypadconfigprovider)\n  - [`setBackspaceTemplate`](#setbackspacetemplate)\n  - [`setSubmitTemplate`](#setsubmittemplate)\n  - [`setMaxLength`](#setmaxlength)\n- [Styles](#styles)\n- [angular-ripple](#angular-ripple)\n- [Development](#development)\n\n\u003cdiv style=\"clear:both\"\u003e\u003c/div\u003e\n\n---\n\n\n## Installation\n\n#### NPM\n\n```bash\nnpm install angular-keypad --save\n```\n\n#### Bower\n\n```bash\nbower install angular-keypad --save\n```\n\n#### Manually\n\nAdd the script and styles to your HTML:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"../path/to/your/bower_components/angular-keypad/dist/angular-keypad.css\"\u003e\n\u003cscript src=\"../path/to/your/bower_components/angular-keypad/dist/angular-keypad.js\"\u003e\u003c/script\u003e\n```\n\n\n## Dependencies\n\n- Angular.js (\u003e=1.4.0)\n\n\n## Usage\n\nInclude `bc.AngularKeypad` as a dependency in your project:\n\n```javascript\nangular.module('YourModule', ['bc.AngularKeypad']);\n```\n\nUse the directive anywhere in your HTML. The keypad will expand to fill the width of it's container\nwhile maintaining the aspect ratio of the keypad buttons.\n\n```html\n\u003c!-- Show the number model in your UI: --\u003e\n\u003cspan\u003e{{ vm.numbers }}\u003c/span\u003e\n\n\u003c!-- Define the keypad: --\u003e\n\u003cbc-keypad bc-number-model=\"vm.numbers\"\u003e\u003c/bc-keypad\u003e\n```\n\n\u003e [:tv: Simple demo][demo_basic]\n\n#### `bc-number-model`\n\n**Required**: `String`\n\nThe directive will store the current string of numbers here. This is the **only** required\nattribute.\n\n```html\n\u003cbc-keypad bc-number-model=\"vm.numbers\"\u003e\u003c/bc-keypad\u003e\n```\n\n#### `bc-max-length`\n\n**Optional**: `Integer`\n\nThe directive will use this number to set a hard limit on how many characters are allowed in the\nnumber model (`vm.numbers` in the example below).\n\n\u003e [:tv: Demo for `max-length`][demo_length]\n\n```html\n\u003c!-- Restrict 'vm.numbers' to the length of 4 --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-max-length=\"4\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n#### `bc-left-button`\n\n**Optional**: `String`\n\nYou can define a custom [Plug'n'Play button](#plug-n-play-buttons) type by passing in the name of\nany [valid \u003cabbr title=\"plug'n'play\"\u003e(PnP)\u003c/abbr\u003e button](#availablepnpbuttontypes).\n\n\u003e [:tv: Demo for Plug'n'Play button types with custom methods][demo_pnp_with_methods]\n\n```html\n\u003c!-- This would generate a backspace button in the bottom left of the keypad --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-left-button=\"backspace\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n#### `bc-right-button`\n\n**Optional**: `String`\n\nYou can define a custom [Plug'n'Play button](#plug-n-play-buttons) type by passing in the name of\nany [valid \u003cabbr title=\"plug'n'play\"\u003e(PnP)\u003c/abbr\u003e button](#availablepnpbuttontypes).\n\n\u003e [:tv: Demo for Plug'n'Play button types with custom methods][demo_pnp_with_methods]\n\n```html\n\u003c!-- This would generate a submit button in the bottom right of the keypad --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-right-button=\"submit\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n\n### Custom Methods\n\n#### `bc-left-button-method`\n\n**Optional**: `method`\n\nYou can pass in a custom method that will be called each time the button is interacted with. This\nallows you to track interaction or handle custom validation in your controller.\n\n##### Available Parameters:\n\n| Param | Type | Details |\n|-------|------|---------|\n| `$event` | Object | The original [event object][angular_event] from the `ng-click` |\n| `numbers` | String | The current value of [`bc-number-model`](#bc-number-model) |\n\n\u003e [:tv: Demo for Plug'n'Play button types with custom methods][demo_pnp_with_methods]\n\n```html\n\u003c!-- This would create a backspace button in the bottom left corner of the keypad --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-left-button=\"backspace\"\n  bc-left-button-method=\"vm.doSomething($event, numbers)\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n```javascript\nexport class YourController {\n\n    constructor() {\n        this.numbers = '';\n    }\n\n    // I will be called each time the left (backspace) button is interacted with\n    doSomething($event, numbers) {\n        console.log('The backspace button on the left was clicked!');\n        console.log('Original click event object: ', $event);\n        console.log('Current number model value: ', numbers);\n    }\n\n}\n```\n\n\n#### `bc-right-button-method`\n\n**Optional**: `method`\n\nYou can pass in a custom method that will be called each time the button is interacted with. This\nallows you to track interaction or handle custom validation in your controller.\n\n##### Available Parameters:\n\n| Param | Type | Details |\n|-------|------|---------|\n| `$event` | Object | The original [event object][angular_event] from the `ng-click` |\n| `numbers` | String | The current value of [`bc-number-model`](#bc-number-model) |\n\n\u003e [:tv: Demo for Plug'n'Play button types with custom methods][demo_pnp_with_methods]\n\n```html\n\u003c!-- This would create a submit button in the bottom right corner of the keypad --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-right-button=\"submit\"\n  bc-right-button-method=\"vm.doSomething($event, numbers)\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n```javascript\nexport class YourController {\n\n    constructor() {\n        this.numbers = '';\n    }\n\n    // I will be called each time the right (submit) button is interacted with\n    doSomething($event, numbers) {\n        console.log('The submit button on the right was clicked!');\n        console.log('Original click event object: ', $event);\n        console.log('Current number model value: ', numbers);\n    }\n\n}\n```\n\n\n#### `bc-empty-backspace-method`\n\n**Optional**: `method`\n\nYou can pass in a custom method that will be called when the [backspace](#backspace) button is\ninteracted with **and** [`bc-number-model`](#bc-number-model) is already empty. This can be useful\nfor allowing users to step backwards through a multi-part form.\n\n\u003e [:tv: Demo for bc-empty-backspace-method][demo_backspace_empty]\n\n```html\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-right-button=\"backspace\"\n  bc-empty-backspace-method=\"vm.backspaceWhenEmpty()\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n```javascript\nexport class YourController {\n\n    constructor() {\n        this.numbers = '';\n    }\n\n    // I will be called when the backspace button is clicked and the numbers\n    // model is empty\n    backspaceWhenEmpty() {\n        console.log('Backspace clicked, but \"vm.numbers\" is empty!');\n    }\n\n}\n```\n\n\n\n## Plug'n'Play Buttons\n\n\u003cimg src=\"http://cdn.benjamincharity.com/open_source/angular-flickity/custom-buttons.png\" align=\"right\" alt=\"Plug'n'Play buttons\"\u003e\n\nThis directive now supports Plug'n'Play (PnP) button types to the\nleft and right of the final digit. These button types can be used on either side (or both if you\nreally wanted to).\n\n\u003e [:tv: Demo for Plug'n'Play button types with custom methods][demo_pnp_with_methods]\n\n##### Available \u003cabbr title=\"plug'n'play\"\u003e(PnP)\u003c/abbr\u003e Button Types\n\n- [backspace](#backspace)\n- [submit](#submit)\n\nEven when using a \u003cabbr title=\"plug'n'play\"\u003e(PnP)\u003c/abbr\u003e button, any defined [custom\nmethods](#custom-methods) will still be called.\n\nAny \u003cabbr title=\"plug'n'play\"\u003e(PnP)\u003c/abbr\u003e button template can be overwritten using methods exposed\nvia the [provider](#bckeypadconfigprovider).\n\n---\n\n```html\n\u003c!-- Example directive setup for the above image --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-left-button=\"backspace\"\n  bc-right-button=\"submit\"\n  bc-right-button-method=\"vm.submitMyData($event, numbers)\"\n\u003e\u003c/bc-keypad\u003e\n```\n\n\n### Backspace\n\n```html\n\u003c!-- This would create a backspace button in the bottom left corner of the keypad --\u003e\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-right-button=\"backspace\"\n\u003e\u003c/bc-keypad\u003e\n```\n\nThis will create a backspace button with styles and functionality already wired together.\n\n#### Functionality\n\nEach time a backspace button instance is interacted with, the last number will be removed from\n[`bc-number-model`](#bc-number-model).\n\nIf a custom method was passed to [`bc-empty-backspace-method`](#bc-empty-backspace-method) it will\nbe called when the backspace button is interacted with **and** [`bc-number-model`](#bc-number-model)\nis already empty. This can be useful for allowing users to step backwards through a multi-part form.\n\nAny defined [custom methods](#custom-methods) will still be called.\n\n#### Style\n\nBy default the button is using a raw SVG version of [`ion-backspace-outline`][ionicons_backspace]\nfrom [ionicons][ionicons] since this allows you to customize the SVG styles with your project's CSS.\n\n\u003e [:tv: Demo for custom button CSS][demo_custom_theme]\n\n![Ionicons backspace icon][backspace]\n\nA special class is added to the backspace button which can be used to target specific styles:\n\n```scss\n.bc-keypad__key-button--backspace {\n  fill: #DE1E7E;\n}\n```\n\n\n### Submit\n\n```html\n\u003cbc-keypad\n  bc-number-model=\"vm.numbers\"\n  bc-right-button=\"submit\"\n\u003e\u003c/bc-keypad\u003e\n```\n\nThis is a purely aesthetic \u003cabbr title=\"plug'n'play\"\u003e(PnP)\u003c/abbr\u003e button type. No functionality is\nattached, but any defined [custom methods](#custom-methods) will still be called.\n\n#### Style\n\nBy default the button is using a raw SVG version of [`ion-log-in`][ionicons_submit] from\n[ionicons][ionicons] since this allows you to customize the SVG styles with your project's CSS.\n\n\u003e [:tv: Demo for custom button CSS][demo_custom_theme]\n\n![Ionicons submit icon][submit]\n\nA special class is added to the submit button which can be used to target specific styles:\n\n```scss\n.bc-keypad__key-button--submit {\n  fill: #101CA7;\n}\n```\n\n\n## `bcKeypadConfigProvider`\n\nThis module exposes `bcKeypadConfigProvider` which can be used to set custom defaults for the\ndirective. Setting options here will overwrite the directive's default options for all instances\nwithin your module.\n\n\u003e [:tv: Demo for `bcKeypadConfigProvider`][demo_provider]\n\n```javascript\n// ES6 Config Example\nexport function config(bcKeypadConfigProvider) {\n    'ngInject';\n\n    // Set a default of '7' for the max length of all keypads within your module\n    bcKeypadConfigProvider.setMaxLength(7);\n\n}\n\n// ES5 Config Example\nangular.module('myModule')\n    .config((bcKeypadConfigProvider) =\u003e {\n        'ngInject';\n\n        bcKeypadConfigProvider.setMaxLength(7);\n\n    })\n;\n```\n\n\n### `setBackspaceTemplate`\n\nThis allows you to specify a custom template for the [backspace](#backspace) key.\n\nBy default it is using a raw SVG version of [`ion-backspace-outline`][ionicons_backspace] from\n[ionicons][ionicons] since this allows you to overwrite the SVG styles with CSS.\n\n\u003e [:tv: Demo for `bcKeypadConfigProvider`][demo_provider]\n\n![Ionicons backspace icon][backspace]\n\n```javascript\nbcKeypadConfigProvider.setBackspaceTemplate('\u003cspan\u003e↩\u003c/span\u003e');\n```\n\n### `setSubmitTemplate`\n\nThis allows you to specify a custom template for the [submit](#submit) key.\n\nBy default it is using a raw SVG version of [`ion-log-in`][ionicons_submit] from\n[ionicons][ionicons] since this allows you to overwrite the SVG styles with CSS.\n\n\u003e [:tv: Demo for `bcKeypadConfigProvider`][demo_provider]\n\n![Ionicons log in icon][submit]\n\n```javascript\nbcKeypadConfigProvider.setSubmitTemplate('Go');\n```\n\n### `setMaxLength`\n\nThe directive will use this number to impose a hard limit on how many characters the model can hold.\nThis is useful for specific data items such as a phone number:\n\n\u003e [:tv: Demo for `bcKeypadConfigProvider`][demo_provider]\n\n![max-length demo][max_length_gif]\n\n```javascript\nbcKeypadConfigProvider.setMaxLength(10);\n```\n\n\n## Styles\n\nThe included styles are 99% layout with _just_ enough style to work out of the box. The true\nstyles should be written at your project level using the associated classes.\n\nYour project CSS should always be included after any library CSS files. This makes it easy for you\nto override or add to any styles defined by this module. Below are the classes available for\nstyling.\n\n| Class | Element | Details |\n|-------|---------|---------|\n| `.bc-keypad` | `\u003cdiv\u003e` | Primary container (`\u003cdiv\u003e`) around the keypad. |\n| `.bc-keypad__key` | `\u003cdiv\u003e` | Individual wrapper for each key. |\n| `.bc-keypad__key--left` | `\u003cdiv\u003e` | Target the **left** customizable key. |\n| `.bc-keypad__key--center` | `\u003cdiv\u003e` | Target the last number key (between the two customizable keys). |\n| `.bc-keypad__key--right` | `\u003cdiv\u003e` | Target the **right** customizable key. |\n| `.bc-keypad__key-button` | `\u003cbutton\u003e` | The button inside each key. |\n| `.bc-keypad__key-button--backspace` | `\u003cbutton\u003e` | Target the [backspace key](#backspace) (if used) |\n| `.bc-keypad__key-button--submit` | `\u003cbutton\u003e` | Target the [submit key](#submit) (if used) |\n\n\u003e [:tv: Demo for custom theming][demo_custom_theme]\n\n## angular-ripple\n\nThe `bc-keypad` directive was written primarily for mobile so it supports the [Google Material\n'ripple' style feedback][material_ripple] via a module called [angular-ripple][angular_ripple]. As\nnot everyone may want that style of interaction, this project does not automatically install the\n`angular-ripple` library, but is however built to support it out of the box.\n\n\u003e [:tv: Demo for `angular-ripple` integration][demo_ripple]\n\nJust install the `angular-ripple` library:\n\n```bash\n$ npm install nelsoncash/angular-ripple --save\n# or\n$ bower install angular-ripple --save\n```\n\nInclude it as a dependency in your primary project:\n\n```javascript\nangular.module('YourModule', ['bc.AngularKeypad', 'angularRipple']);\n```\n\nAnd you should see it working!\n\n- [angular-ripple][angular_ripple]: The `angular-ripple` library.\n- [KL-Moment/angular-ripple][angular_ripple_fork]: A custom fork of `angular-ripple` library with\n    better mobile support.\n\n\n## Development\n\n- `npm run build` - Build JS/CSS/HTML/SVG\n- `npm run build:js` - Build JS\n- `npm run build:css` - Build CSS\n- `npm run watch:css` - Watch CSS and rebuild on change\n- `npm run watch:js` - Watch JS/HTML and rebuild on change\n- `npm run watch` - Watch JS/CSS/HTML and rebuild on change\n\n\n\n\n[issues]: https://github.com/benjamincharity/angular-keypad/issues\n[angular_ripple]: https://github.com/nelsoncash/angular-ripple\n[angular_ripple_fork]: https://github.com/KL-Moment/angular-ripple\n[ripple_changes]: https://github.com/KL-Moment/angular-ripple/commit/09374947e6cc986ebe7e2629b48edb0885ca842b\n[backspace]: http://cdn.benjamincharity.com/codepen/angular-keypad/backspace.svg\n[submit]: http://cdn.benjamincharity.com/open_source/angular-keypad/log-in.svg\n[ionicons]: http://ionicons.com/\n[ionicons_backspace]: https://github.com/driftyco/ionicons/blob/master/src/backspace-outline.svg\n[ionicons_submit]: https://github.com/driftyco/ionicons/blob/master/src/log-in.svg\n[max_length_gif]: http://cdn.benjamincharity.com/codepen/angular-keypad/rippleDemo.gif\n[angular_event]: https://docs.angularjs.org/guide/expression#-event-\n[material_ripple]: https://material.google.com/motion/material-motion.html#material-motion-how-does-material-move\n\n[demo_basic]: https://codepen.io/benjamincharity/pen/dpdpNo?editors=0010\n[demo_length]: http://codepen.io/benjamincharity/pen/EgQgKr?editors=0010\n[demo_ripple]: https://codepen.io/benjamincharity/pen/ozExBZ?editors=0010\n[demo_pnp_with_methods]: https://codepen.io/benjamincharity/pen/VKQjZV?editors=0010\n[demo_backspace_empty]: http://codepen.io/benjamincharity/pen/WGrGpr?editors=0010\n[demo_provider]: https://codepen.io/benjamincharity/pen/YGZGPX?editors=0010\n[demo_custom_theme]: https://codepen.io/benjamincharity/pen/mAXPzz?editors=0010\n[demo_collection]: https://codepen.io/collection/DkEqLr/\n\n[coveralls_badge]: https://coveralls.io/repos/github/benjamincharity/angular-keypad/badge.svg?branch=master\n[coveralls_link]: https://coveralls.io/github/benjamincharity/angular-keypad?branch=master\n[license_image]: http://img.shields.io/badge/license-MIT-blue.svg\n[license_url]: LICENSE\n[npm_url]: https://npmjs.org/package/angular-keypad\n[npm_version_image]: http://img.shields.io/npm/v/angular-keypad.svg\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-keypad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamincharity%2Fangular-keypad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamincharity%2Fangular-keypad/lists"}