{"id":19443136,"url":"https://github.com/lbgm/otp-widget","last_synced_at":"2025-04-25T00:32:21.353Z","repository":{"id":65345789,"uuid":"589583493","full_name":"lbgm/otp-widget","owner":"lbgm","description":"OTP code input widget for Angular","archived":false,"fork":false,"pushed_at":"2023-01-18T13:30:08.000Z","size":157,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-06T04:40:22.369Z","etag":null,"topics":["angular","angularcomponent","otp","otp-verification","widget"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbgm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-16T13:14:15.000Z","updated_at":"2023-06-12T18:47:53.000Z","dependencies_parsed_at":"2023-02-10T15:15:42.432Z","dependency_job_id":null,"html_url":"https://github.com/lbgm/otp-widget","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fotp-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fotp-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fotp-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbgm%2Fotp-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbgm","download_url":"https://codeload.github.com/lbgm/otp-widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223975416,"owners_count":17234737,"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","angularcomponent","otp","otp-verification","widget"],"created_at":"2024-11-10T15:42:18.145Z","updated_at":"2024-11-10T15:42:18.681Z","avatar_url":"https://github.com/lbgm.png","language":"TypeScript","readme":"# OtpWidget\nOTP code input widget for Angular\n\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.\n\n![image](https://user-images.githubusercontent.com/92580505/212340376-892b9ee4-1cd3-4e38-bd2b-eed867c50221.png)\n\n## install\n```sh\nnpm i @lbgm/otp-widget\n```\n\n## Props\n  Type:\n   ```ts\n   type TGap = \"otp-gap-1\" | \"otp-gap-2\" | \"otp-gap-3\" | \"otp-gap-4\" | \"otp-gap-5\" | \"otp-gap-6\" | \"otp-gap-7\" | \"otp-gap-8\" | \"otp-gap-9\" | \"otp-gap-10\" | \"otp-gap-11\" | \"otp-gap-12\" | \"otp-gap-13\" | \"otp-gap-14\" | \"otp-gap-15\" | \"otp-gap-16\" | \"otp-gap-17\" | \"otp-gap-18\" | \"otp-gap-19\" | \"otp-gap-20\" | \"otp-gap-21\" | \"otp-gap-22\" | \"otp-gap-23\" | \"otp-gap-24\" | \"otp-gap-25\" | \"otp-gap-26\" | \"otp-gap-27\" | \"otp-gap-28\" | \"otp-gap-29\" | \"otp-gap-30\" | \"otp-gap-31\" | \"otp-gap-32\" | \"otp-gap-33\" | \"otp-gap-34\" | \"otp-gap-35\" | \"otp-gap-36\" | \"otp-gap-37\" | \"otp-gap-38\" | \"otp-gap-39\" | \"otp-gap-40\" | \"otp-gap-41\" | \"otp-gap-42\" | \"otp-gap-43\" | \"otp-gap-44\" | \"otp-gap-45\" | \"otp-gap-46\" | \"otp-gap-47\" | \"otp-gap-48\";\n   ```\n   Defaults values \u0026 types\n   ```js\n    @Input() childs?: number = 4;\n    @Input() type?: \"number\" | \"text\" = \"number\";\n    @Input() placeholder?: string = '';\n    @Input() gap?: TGap = \"otp-gap-16\";\n   ```\n\n ## Events\n `code`: sends value filled as `string`;\n\n `filled`: when all inputs are filled;\n\n## Use\n `app.module.ts` :\n ```ts\n  //...\n  import { OtpWidgetModule } from '@lbgm/otp-widget';\n\n  @NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        BrowserModule,\n        OtpWidgetModule\n    ],\n    providers: [],\n    bootstrap: [AppComponent]\n  })\n  export class AppModule { }\n ```\n\n `app.component.html` :\n ```html\n    \u003cotp-widget (filled)=\"filled($event)\" (code)=\"otp = $event\"\u003e\u003c/otp-widget\u003e\n ```\n\n ![image](https://user-images.githubusercontent.com/92580505/212340494-fa18c90b-cb68-4813-817d-e188343719e4.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fotp-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbgm%2Fotp-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbgm%2Fotp-widget/lists"}