{"id":13808580,"url":"https://github.com/AlexMiniApps/angular-code-input","last_synced_at":"2025-05-14T02:32:06.880Z","repository":{"id":38443111,"uuid":"230658142","full_name":"AlexMiniApps/angular-code-input","owner":"AlexMiniApps","description":"Code (number/chars/otp/password) input component for angular 7, 8, 9, 10, 11, 12+ projects including Ionic 4, 5 +","archived":false,"fork":false,"pushed_at":"2024-06-16T10:21:35.000Z","size":1408,"stargazers_count":180,"open_issues_count":21,"forks_count":50,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T17:28:50.898Z","etag":null,"topics":["angular","angular7","angular8","angular9","input","ionic","otp","otp-codes","password-input","pincode"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/AlexMiniApps.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-28T19:48:26.000Z","updated_at":"2024-10-15T14:21:57.000Z","dependencies_parsed_at":"2023-12-20T15:06:27.965Z","dependency_job_id":"90bce11e-7604-46c6-a4c4-07f7eec30d2c","html_url":"https://github.com/AlexMiniApps/angular-code-input","commit_stats":{"total_commits":99,"total_committers":8,"mean_commits":12.375,"dds":0.4949494949494949,"last_synced_commit":"37b6ba593d767413de935e7d7abfc2884cbce2d4"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexMiniApps%2Fangular-code-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexMiniApps%2Fangular-code-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexMiniApps%2Fangular-code-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlexMiniApps%2Fangular-code-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlexMiniApps","download_url":"https://codeload.github.com/AlexMiniApps/angular-code-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273247,"owners_count":17448074,"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","angular7","angular8","angular9","input","ionic","otp","otp-codes","password-input","pincode"],"created_at":"2024-08-04T01:01:46.597Z","updated_at":"2024-11-19T00:30:52.064Z","avatar_url":"https://github.com/AlexMiniApps.png","language":"TypeScript","readme":"# Code/pincode input component for angular\n\n![](https://img.shields.io/npm/dm/angular-code-input?color=55aa33)\n![](https://img.shields.io/github/stars/AlexMiniApps/angular-code-input)\n![](https://badgen.net/badge/icon/typescript?icon=typescript\u0026label\u0026color=99aabb)\n![](https://img.shields.io/github/license/AlexMiniApps/angular-code-input?color=00ccbb)\n\nRobust and \u003cb\u003etested\u003c/b\u003e code (number/chars) input component for Angular 7 - 16+ projects.\u003cbr /\u003e\nIonic 4 - 7+ is supported, can be used in iOS and Android.\u003cbr /\u003e\n\u003cb\u003eClipboard\u003c/b\u003e events are supported.\n\nStar it to inspire us to build the best component! \u003cimg src=\"https://github.com/AlexMiniApps/angular-code-input/blob/master/star.jpg\" alt=\"Star\"/\u003e\n\nPreview\n\n![](https://github.com/AlexMiniApps/angular-code-input/blob/master/preview1.gif)\n\n![](https://github.com/AlexMiniApps/angular-code-input/blob/master/preview2.gif)\n\n## Supported platforms\n\n\u003cb\u003eAngular\u003c/b\u003e 7 - 16+\u003cbr /\u003e\n\u003cb\u003eIonic\u003c/b\u003e 4 - 7+\u003cbr /\u003e\nMobile browsers and WebViews on: \u003cb\u003eAndroid\u003c/b\u003e and \u003cb\u003eiOS\u003c/b\u003e\u003cbr /\u003e\nDesktop browsers: \u003cb\u003eChrome, Firefox, Safari, Edge v.79 +\u003c/b\u003e\u003cbr /\u003e\nOther browsers:  \u003cb\u003eEdge v.41 - 44\u003c/b\u003e (without code hidden feature)\n\n## Installation\n\n    $ npm install --save angular-code-input\n\nChoose the version corresponding to your Angular version:\n\n| Angular    | angular-code-input |\n|------------|--------------------|\n| 16+        | 2.x+               |\n| 7-15       | 1.x+               |\n\n## Usage\n\nImport `CodeInputModule` in your app module or page module:\n\n```ts\nimport { CodeInputModule } from 'angular-code-input';\n\n@NgModule({\n  imports: [\n    // ...\n    CodeInputModule\n  ]\n})\n```\n\nIt is possible to configure the component across the app using the root config. In such case the import will look as follows:\n```ts\nimport { CodeInputModule } from 'angular-code-input';\n\n@NgModule({\n  imports: [\n    // ...\n    CodeInputModule.forRoot({\n      codeLength: 6,\n      isCharsCode: true,\n      code: 'abcdef'\n    }),\n  ]\n})\n```\n\nInclude the component on page template HTML:\n\n```html\n  \u003ccode-input [isCodeHidden]=\"true\"\n              [codeLength]=\"5\"\n              (codeChanged)=\"onCodeChanged($event)\"\n              (codeCompleted)=\"onCodeCompleted($event)\"\u003e\n  \u003c/code-input\u003e\n```\n\nInside a page script:\n\n```ts\n  // this called every time when user changed the code\n  onCodeChanged(code: string) {\n  }\n\n  // this called only if user entered full code\n  onCodeCompleted(code: string) {\n  }\n```\n\n## Configuration\n\n#### View\n\nIt is possible to configure the component via CSS vars\n\u003cbr /\u003eor using `::ng-deep` (deprecated) angular CSS selector\n[::ng-deep](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)\n\nCSS vars:\n\n| CSS Var                                                      | Description                                            |          \n|--------------------------------------------------------------|--------------------------------------------------------|\n| `--text-security-type: disc;`                                | Text presentation type when the isCodeHidden is enabled |\n| `--item-spacing: 4px;`                                       | Horizontal space between input items                   |\n| `--item-height: 4.375em;`                                    | Height of input items                                  |\n| `--item-border: 1px solid #dddddd;`                          | Border of input item for an empty value                |\n| `--item-border-bottom: 1px solid #dddddd;`                   | Bottom border of input item for an empty value         |\n| `--item-border-has-value: 1px solid #dddddd;`                | Border of input item with a value                      |\n| `--item-border-bottom-has-value: 1px solid #dddddd;`         | Bottom border of input item with a value               |\n| `--item-border-focused: 1px solid #dddddd;`                  | Border of input item when focused                      |\n| `--item-border-bottom-focused: 1px solid #dddddd;`           | Bottom border of input item when focused               |\n| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused                      |\n| `--item-border-radius: 5px;`                                 | Border radius of input item                            |\n| `--item-background: transparent;`                            | Input item background                                  |\n| `--item-font-weight: 300;`                                   | Font weight of input item                              |\n| `--color: #171516;`                                          | Text color of input items                              |\n\nExample with only bottom borders:\n\n````\n/* inside page styles*/\n...\n  code-input {\n    --item-spacing: 10px;\n    --item-height: 3em;\n    --item-border: none;\n    --item-border-bottom: 2px solid #dddddd;\n    --item-border-has-value: none;\n    --item-border-bottom-has-value: 2px solid #888888;\n    --item-border-focused: none;\n    --item-border-bottom-focused: 2px solid #809070;\n    --item-shadow-focused: none;\n    --item-border-radius: 0px;\n  }\n...\n````\n\n#### Component options\n\n| Property  | Type   | Default |  Description |         \n|----------|:-------:|:-----:|----------|\n| \u003cb\u003e`codeLength`\u003c/b\u003e | number | 4 | Length of input code |\n| \u003cb\u003e`inputType`\u003c/b\u003e | string | tel | Type of the input DOM elements like `\u003cinput [type]=\"inputType\"/\u003e` default '`tel'` |\n| \u003cb\u003e`inputMode`\u003c/b\u003e | string | numeric | inputmode of the input DOM elements like `\u003cinput [attr.inputmode]=\"inputMode\"/\u003e` default '`numeric'` |\n| \u003cb\u003e`isCodeHidden`\u003c/b\u003e | boolean | false | When `true` inputted code chars will be shown as asterisks (points) |\n| \u003cb\u003e`isCharsCode`\u003c/b\u003e | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter \u003cb\u003e`code`\u003c/b\u003e contains non digits chars and `isCharsCode` is `false` the value will be ignored |\n| \u003cb\u003e`isPrevFocusableAfterClearing`\u003c/b\u003e | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |\n| \u003cb\u003e`isFocusingOnLastByClickIfFilled`\u003c/b\u003e | boolean | false | When `true` and the code is filled then the focus will be moved to the last input element when clicked |\n| \u003cb\u003e`initialFocusField`\u003c/b\u003e | number | - | The index of the input box for initial focusing. When the component will appear the focus will be placed on the input with this index. \u003cbr/\u003e Note: If you need to dynamically hide the component it is needed to use \u003cb\u003e*ngIf\u003c/b\u003e directive instead of the `[hidden]` attribute |\n| \u003cb\u003e`code`\u003c/b\u003e | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isCharsCode` is `false` the value will be \u003cb\u003eignored\u003c/b\u003e |\n| \u003cb\u003e`disabled`\u003c/b\u003e | boolean | false | When `true` then the component will not handle user actions, like in regular html input element with the `disabled` attribute  |\n| \u003cb\u003e`autocapitalize`\u003c/b\u003e | string | - | The autocapitalize attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user  |\n\n#### Events\n\n| Event  | Description        |          \n|----------|--------------------|\n| `codeChanged` | Will be called every time when a user changed the code |\n| `codeCompleted` | Will be called only if a user entered full code |\n\n## Methods\n\nFor calling the component's methods it is required to access the component inside the template or page script.\nIt can be reached as follows.\n\nInside the page template HTML add a template ref:\n\n```html\n\u003ccode-input\n  ...\n  #codeInput\n  ...\n\u003e\n\u003c/code-input\u003e\n```\n\nInside a page script attach the component:\n\n```ts\n...\n// adding to the imports\nimport {CodeInputComponent} from 'angular-code-input';\n...\n// adding to the page props\n@ViewChild('codeInput') codeInput !: CodeInputComponent;\n...\n// calling the component's methods somewhere in the page.\n// IMPORTANT: it will be accessible only after the view initialization!\nthis.codeInput.reset();\n```\n\n| Method         | Description        |          \n|----------------|--------------------|\n| \u003cb\u003e`focusOnField(index: number): void`\u003c/b\u003e | Focuses the input caret on the input box with the passed index |\n| \u003cb\u003e`reset(isChangesEmitting = false): void`\u003c/b\u003e | \u003cp\u003eResets the component values in the following way:\u003c/p\u003e\u003cp\u003eif the `code` option is supplied then the value will be reset to the `code` option value. If the `code` option is not supplied then the component will be reset to empty values.\u003c/p\u003e\u003cp\u003eif the `initialFocusField` option is supplied then the caret will be focused in that filed after reset.\u003c/p\u003e\u003cp\u003eif the `isChangesEmitting` param is passed then changes will be emitted\u003c/p\u003e|\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexMiniApps%2Fangular-code-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlexMiniApps%2Fangular-code-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlexMiniApps%2Fangular-code-input/lists"}