{"id":14862289,"url":"https://github.com/timofei-iatsenko/angular-cc-library","last_synced_at":"2025-09-11T17:37:08.622Z","repository":{"id":38362754,"uuid":"73011265","full_name":"timofei-iatsenko/angular-cc-library","owner":"timofei-iatsenko","description":"Library to support Credit Card input masking and validation","archived":false,"fork":false,"pushed_at":"2025-02-20T09:46:21.000Z","size":3757,"stargazers_count":83,"open_issues_count":16,"forks_count":73,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T19:47:47.494Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/timofei-iatsenko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-11-06T18:45:22.000Z","updated_at":"2025-02-20T09:46:26.000Z","dependencies_parsed_at":"2024-06-18T15:15:45.070Z","dependency_job_id":"b6ac2f44-a3d7-47ef-aa49-d4df40d17743","html_url":"https://github.com/timofei-iatsenko/angular-cc-library","commit_stats":{"total_commits":83,"total_committers":14,"mean_commits":5.928571428571429,"dds":0.4819277108433735,"last_synced_commit":"a3a2a280bc84986ada95507a73c8ef1acd79f984"},"previous_names":["nogorilla/ng2-cc-library","nogorilla/angular-cc-library","timofei-iatsenko/angular-cc-library","thekip/angular-cc-library"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timofei-iatsenko%2Fangular-cc-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timofei-iatsenko%2Fangular-cc-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timofei-iatsenko%2Fangular-cc-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timofei-iatsenko%2Fangular-cc-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timofei-iatsenko","download_url":"https://codeload.github.com/timofei-iatsenko/angular-cc-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242680,"owners_count":20907134,"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":[],"created_at":"2024-09-19T20:01:33.909Z","updated_at":"2025-04-04T20:14:29.982Z","avatar_url":"https://github.com/timofei-iatsenko.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eAngular CC Library\u003c/h1\u003e\n\nValidation and formatting input parameters of Credit Cards\n\n\u003chr /\u003e\n\n[![Version][badge-version]][package]\n[![Downloads][badge-downloads]][package]\n\n\u003c/div\u003e\n\n# Demo\n\nhttps://timofei-iatsenko.github.io/angular-cc-library/\n\nOr run locally:\n\n1. Clone repo\n2. run `yarn install`\n3. run `yarn run:demo`\n4. visit `http://localhost:4200`\n\n# Usage\n\n## Installation\n```shell\nnpm install angular-cc-library --save\n```\n\n## Version Compatibility\n\n| Angular | Library |\n|---------|---------|\n| 18.x    | 3.4.x   |\n| 17.x    | 3.3.x   |\n| 16.x    | 3.2.x   |\n| 15.x    | 3.1.x   |\n| 14.x    | 3.0.4   |\n| 13.x    | 3.0.0   |\n| 12.x    | 2.1.3   |\n\n\n## Formatting Directive\nOn the input fields, add the specific directive to format inputs.\nAll fields must be `type='tel'` in order to support spacing and additional characters.\n\nSince `angular-cc-library@3.3.0` all directives declared as standalone, \nso you can import them directly into your component:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CreditCardFormatDirective } from 'angular-cc-library';\n\n@Component({\n  selector: 'credit-card-number-input',\n  standalone: true,\n  deps: [CreditCardFormatDirective],\n  template: `\u003cinput id=\"cc-number\" type=\"tel\" autocomplete=\"cc-number\" ccNumber\u003e`\n})\nexport class CreditCardNumberInputComponent {}\n```\n\nBut you can still import them all at once using `CreditCardDirectivesModule`:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from '@angular/forms';\nimport { CreditCardDirectivesModule } from 'angular-cc-library';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n    imports: [BrowserModule, FormsModule, CreditCardDirectivesModule],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n**Credit Card Formatter**\n* add `ccNumber` directive:\n```html\n\u003cinput id=\"cc-number\" type=\"tel\" autocomplete=\"cc-number\" ccNumber\u003e\n```\n* this will also apply a class name based off the card `.visa`, `.amex`, etc. See the array of card types in `credit-card.ts` for all available types\n\n* You can get parsed card type by using export api: \n\n```html\n\u003cinput type=\"tel\" ccNumber #ccNumber=\"ccNumber\"\u003e\n\u003cspan class=\"scheme\"\u003e{{ccNumber.resolvedScheme$ | async}}\u003c/span\u003e\n```\n\n`resolvedScheme$` will be populated with `visa`, `amex`, etc.\n\n\n**Expiration Date Formatter**\nWill support format of MM/YY or MM/YYYY\n* add `ccExp` directive:\n```html\n\u003cinput id=\"cc-exp-date\" type=\"tel\" autocomplete=\"cc-exp\" ccExp\u003e\n```\n\n**CVC Formater**\n* add `ccCVC` directive:\n```html\n\u003cinput id=\"cc-cvc\" type=\"tel\" autocomplete=\"off\" ccCVC\u003e\n```\n\n### Validation\nCurrent only Model Validation is supported.\nTo implement, import the validator library and apply the specific validator on each form control\n\n```typescript\nimport { CreditCardValidators } from 'angular-cc-library';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cform #demoForm=\"ngForm\" (ngSubmit)=\"onSubmit(demoForm)\" novalidate\u003e\n        \u003cinput id=\"cc-number\" formControlName=\"creditCard\" type=\"tel\" autocomplete=\"cc-number\" ccNumber\u003e\n        \u003cinput id=\"cc-exp-date\" formControlName=\"expirationDate\" type=\"tel\" autocomplete=\"cc-exp\" ccExp\u003e\n        \u003cinput id=\"cc-cvc\" formControlName=\"cvc\" type=\"tel\" autocomplete=\"off\" ccCVC\u003e\n    \u003c/form\u003e\n  `\n})\nexport class AppComponent implements OnInit {\n  form: FormGroup;\n  submitted: boolean = false;\n\n  constructor(private _fb: FormBuilder) {}\n\n  ngOnInit() {\n    this.form = this._fb.group({\n      creditCard: ['', [CreditCardValidators.validateCCNumber]],\n      expirationDate: ['', [CreditCardValidators.validateExpDate]],\n      cvc: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(4)]] \n    });\n  }\n\n  onSubmit(form) {\n    this.submitted = true;\n    console.log(form);\n  }\n}\n```\n\n# Inspiration\n\nBased on Stripe's [jquery.payment](https://github.com/stripe/jquery.payment) plugin but adapted for use by Angular\n\n# License\n\nMIT\n\n[badge-downloads]: https://img.shields.io/npm/dw/angular-cc-library.svg\n[badge-version]: https://img.shields.io/npm/v/angular-cc-library.svg\n[package]: https://www.npmjs.com/package/angular-cc-library\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimofei-iatsenko%2Fangular-cc-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimofei-iatsenko%2Fangular-cc-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimofei-iatsenko%2Fangular-cc-library/lists"}