{"id":15093337,"url":"https://github.com/pascaliske/form-elements","last_synced_at":"2025-10-06T11:31:58.678Z","repository":{"id":37584842,"uuid":"141901084","full_name":"pascaliske/form-elements","owner":"pascaliske","description":"Collection of form elements for Angular projects.","archived":true,"fork":false,"pushed_at":"2023-06-19T20:11:23.000Z","size":22385,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-15T07:48:14.312Z","etag":null,"topics":["angular","angular-cli","form-elements","storybook"],"latest_commit_sha":null,"homepage":"https://pascaliske.github.io/form-elements","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/pascaliske.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2018-07-22T14:06:30.000Z","updated_at":"2023-06-19T20:11:35.000Z","dependencies_parsed_at":"2023-02-04T08:45:50.377Z","dependency_job_id":null,"html_url":"https://github.com/pascaliske/form-elements","commit_stats":null,"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascaliske%2Fform-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascaliske%2Fform-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascaliske%2Fform-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pascaliske%2Fform-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pascaliske","download_url":"https://codeload.github.com/pascaliske/form-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235524155,"owners_count":19003815,"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","angular-cli","form-elements","storybook"],"created_at":"2024-09-25T11:21:29.195Z","updated_at":"2025-10-06T11:31:52.511Z","avatar_url":"https://github.com/pascaliske.png","language":"TypeScript","readme":"# [`@pascaliske/form-elements`](https://pascaliske.github.io/form-elements)\n\n[![Build Status](https://img.shields.io/github/workflow/status/pascaliske/form-elements/Test%20package/master?label=test\u0026style=flat-square)](https://github.com/pascaliske/form-elements/actions)\n\n## Installation\n\nTo install the module use the following command:\n\n```bash\n$ yarn add @pascaliske/form-elements\n```\n\n## Usage\n\nImport the module in your Angular app:\n\n```typescript\nimport { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { BrowserModule } from '@angular/platform-browser'\nimport { FormElementsModule } from '@pascaliske/form-elements'\nimport { AppComponent } from './app.component'\n\n@NgModule({\n    bootstrap: [AppComponent],\n    declarations: [AppComponent],\n    imports: [CommonModule, BrowserModule, FormElementsModule],\n})\nexport class AppModule {}\n```\n\nThen import the styles in your global scss styles:\n\n```scss\n@import '~@pascaliske/form-elements/styles';\n```\n\n\u003e **Note:** If you want to use the `cmp-f-select`, `cmp-f-date` od `cmp-f-time` components you also need to add their 3rd-party library styles:\n\u003e\n\u003e ```scss\n\u003e @import '~choices.js/public/assets/styles/choices.min.css'; // cmp-f-select\n\u003e @import '~flatpickr/dist/flatpickr.min.css'; // cmp-f-date, cmp-f-time\n\u003e ```\n\nNow you can use the components in your template:\n\n```html\n\u003ccmp-f-form\u003e\n    \u003ccmp-f-row\u003e\n        \u003ccmp-f-column\u003e\n            \u003ccmp-f-input [label]=\"'My text input'\"\u003e\u003c/cmp-f-input\u003e\n        \u003c/cmp-f-column\u003e\n    \u003c/cmp-f-row\u003e\n\u003c/cmp-f-form\u003e\n```\n\n## License\n\nMIT © [Pascal Iske](https://pascaliske.dev)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascaliske%2Fform-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpascaliske%2Fform-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpascaliske%2Fform-elements/lists"}