{"id":13808857,"url":"https://github.com/digipolisantwerp/antwerp-ui_angular","last_synced_at":"2025-05-14T03:31:40.041Z","repository":{"id":38814212,"uuid":"136037313","full_name":"digipolisantwerp/antwerp-ui_angular","owner":"digipolisantwerp","description":"Antwerp UI is a component interface library for building user interfaces and responsive web apps.","archived":false,"fork":false,"pushed_at":"2024-09-19T08:09:56.000Z","size":36808,"stargazers_count":13,"open_issues_count":34,"forks_count":19,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-11-08T09:51:38.428Z","etag":null,"topics":["angular","antwerp","components"],"latest_commit_sha":null,"homepage":"https://digipolisantwerp.github.io/antwerp-ui_angular","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/digipolisantwerp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2018-06-04T14:28:16.000Z","updated_at":"2024-09-19T08:09:59.000Z","dependencies_parsed_at":"2023-02-17T22:31:10.589Z","dependency_job_id":"e56c6102-c482-41c7-8b0d-3c8627cee58a","html_url":"https://github.com/digipolisantwerp/antwerp-ui_angular","commit_stats":{"total_commits":1399,"total_committers":34,"mean_commits":41.14705882352941,"dds":0.7348105789849892,"last_synced_commit":"85c16364e90a3978fff79a04336fada1307c09df"},"previous_names":["digipolisantwerp/acpaas-ui_angular"],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digipolisantwerp%2Fantwerp-ui_angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digipolisantwerp%2Fantwerp-ui_angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digipolisantwerp%2Fantwerp-ui_angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digipolisantwerp%2Fantwerp-ui_angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digipolisantwerp","download_url":"https://codeload.github.com/digipolisantwerp/antwerp-ui_angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273284,"owners_count":17448078,"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","antwerp","components"],"created_at":"2024-08-04T01:01:53.587Z","updated_at":"2024-11-19T00:31:10.321Z","avatar_url":"https://github.com/digipolisantwerp.png","language":"TypeScript","readme":"# Antwerp UI - Angular Components\n\n![build][antwerp-ui-github-ci]\n[![ngx-components-status]][ngx-components-package]\n\n## Introduction\n\nAntwerp City Platform as a Service User Interface (Antwerp UI) is a **component interface library** for building user interfaces and responsive web apps. It's designed to provide developers with functionality and UI/UX patterns that matches the Antwerpen styleguide.\n\n## Ecosystem\n\nThis library is part of [Antwerp UI][antwerp-ui].\n\n| Name       | Framework   | Status                                             |\n| ---------- | ----------- | -------------------------------------------------- |\n| Javascript | ES5+        | [![antwerp-ui-js-github]][antwerp-ui-js]           |\n| Angular    | Angular 15+ | [![antwerp-ui-angular-github]][antwerp-ui-angular] |\n| React      | React 16+   | [![antwerp-ui-react-github]][antwerp-ui-react]     |\n\n## Getting Started\n\n### Running the project locally\n\n- Use node version `18.x.x` (v. `18.12.1` at time of writing)\n\n```shell\nnpm i\nnpm run build:all\nnpm start\n```\n\n### Troubleshooting\n\n- If `Error: error:0308010C:digital envelope routines::unsupported` -\u003e `export NODE_OPTIONS=--openssl-legacy-provider`\n\n### Install Antwerp UI\n\n```shell\nnpm i @acpaas-ui/ngx-utils\nnpm i @acpaas-ui/ngx-forms\n// Other necessary libs for your app...\n```\n\nEdit styles.scss to import the branding look \u0026 feel.\n\n```scss\n@import url('https://cdn.antwerpen.be/core_branding_scss/6.6.6/main.min.css');\n```\n\nYou can also modify `index.html` to reference the [favicons for the city of Antwerp][branding-favicons].\n\nThen start using the components in your pages. Look at the component documentation below to learn how to use each component.\n\nYou can also add a branding-compatible [flexbox grid layout system][flexboxgrid]:\n\n```scss\n@import url('https://cdn.antwerpen.be/core_flexboxgrid_scss/3.0.0/flexboxgrid.min.css');\n```\n\nNote that you are free to use your own grid, as long as it meets our branding guidelines.\n\n\u003e To learn more about using the branding look \u0026 feel, check the [core branding guide][branding-core-guide]. Note that the [core branding][branding-core] contains the Antwerp logo and fonts, which are subject to a usage restriction. For use outside of apps for the city of Antwerp you can use [Digipolis branding][branding-digipolis] instead.\n\n## Documentation\n\nCheck out our [live examples][antwerp-ui-angular-styleguide] or visit the [Antwerp UI site][antwerp-ui].\n\nThis library contains the following components:\n\n| Name                | Description                        | URL                                                       |\n| ------------------- | ---------------------------------- | --------------------------------------------------------- |\n| ngx-avatar          | User avatar icon                   | [Documentation](./packages/ngx-avatar/README.md)          |\n| ngx-calendar        | Calendar to select dates           | [Documentation](./packages/ngx-calendar/README.md)        |\n| ngx-code-snippet    | Snippet of source code             | [Documentation](./packages/ngx-code-snippet/README.md)    |\n| ngx-context         | Set meta tags for SEO              | [Documentation](./packages/ngx-context/README.md)         |\n| ngx-flyout          | Reveal additional content          | [Documentation](./packages/ngx-flyout/README.md)          |\n| ngx-forms           | Assorted form fields               | [Documentation](./packages/ngx-forms/README.md)           |\n| ngx-layout          | Assorted page layout components    | [Documentation](./packages/ngx-layout/README.md)          |\n| ngx-logo            | Logo icon                          | [Documentation](./packages/ngx-logo/README.md)            |\n| ngx-leaflet         | Leaflet-based map                  | [Documentation](./packages/ngx-leaflet/README.md)         |\n| ngx-pagination      | Pagination control                 | [Documentation](./packages/ngx-pagination/README.md)      |\n| ngx-progress-bar    | Progress bar control               | [Documentation](./packages/ngx-progress-bar/README.md)    |\n| ngx-selectable-list | List control with selectable items | [Documentation](./packages/ngx-selectable-list/README.md) |\n| ngx-table           | Interactive table                  | [Documentation](./packages/ngx-table/README.md)           |\n| ngx-utils           | Assorted helpers                   | [Documentation](./packages/ngx-utils/README.md)           |\n| ngx-user-menu       | User Menu providing login/logout   | [Documentation](./packages/ngx-user-menu/README.md)       |\n\n## Testing\n\n### Test automation\n\nIf you want to start automating your tests, you can have a look at our [Test Automation Guide](./TEST_AUTOMATION.md) for some tips on how to use data-attributes to keep your tests stable and maintainable.\n\n### Cross Browser Testing\n\nWe are using [Browserstack Live](https://www.browserstack.com/live) to make sure that our components work correctly on all major browsers and platforms.\u003cbr/\u003e\nThe people at Browserstack kindly offer an unlimited testing program, free of charge for open source projects so a big thanks to them!\n\n\u003ca href=\"http://browserstack.com/\"\u003e\u003cimg width=\"250\" src=\"https://cloud.githubusercontent.com/assets/7864462/12837037/452a17c6-cb73-11e5-9f39-fc96893bc9bf.png\" alt=\"Browserstack logo\"\u003e\u003c/a\u003e\n\n## Questions\n\nFor questions and support please ask a question on the [#antwerp-ui slack channel][antwerp-ui-slack]. If you're not yet a member of our DigAnt Café slack community, you can easily [join here](https://digantcafe-slack.digipolis.be).\n\nIf you stumble across a bug or missing feature, feel free to [report an issue][antwerp-ui-angular-issues]. Please fill out the issue template completely when [opening an issue][antwerp-ui-angular-issues]. This will help us get to your issue sooner.\n\n## Changelog\n\nDetailed changes for each release are documented in the [changelog](./CHANGELOG.md).\n\n## Contributing\n\nYour contributions are most welcome as pull requests, both code changes and documentation updates. However, to keep a high quality standard, please make sure to read the [Contributing Guide](./CONTRIBUTING.md) before making a pull request.\n\nThank you to all the people [who already contributed][antwerp-ui-angular-contributors] to Antwerp UI!\n\n## Support\n\nJasper Van Proeyen (\u003cjasper.vanproeyen@digipolis.be\u003e)\n\n## License\n\n[MIT](./LICENSE.md)\n\nCopyright (c) 2016-present, Digipolis\n\n\u003c!-- Generic Links --\u003e\n\n[antwerp-ui]: https://antwerp-ui.digipolis.be\n[antwerp-ui-slack]: https://digantcafe.slack.com/messages/CDDLYJU65/\n[flexboxgrid]: https://github.com/a-ui/core_flexboxgrid_scss\n\n\u003c!-- Github URL --\u003e\n\n[antwerp-ui-schematics]: https://github.com/digipolisantwerp/antwerp-ui_schematics\n[antwerp-ui-js]: https://github.com/digipolisantwerp/antwerp-ui_js\n[antwerp-ui-angular]: https://github.com/digipolisantwerp/antwerp-ui_angular\n[antwerp-ui-angular-styleguide]: https://digipolisantwerp.github.io/antwerp-ui_angular\n[antwerp-ui-angular-issues]: https://github.com/digipolisantwerp/antwerp-ui_angular/issues\n[antwerp-ui-angular-contributors]: https://github.com/digipolisantwerp/antwerp-ui_angular/graphs/contributors\n[antwerp-ui-react]: https://github.com/digipolisantwerp/antwerp-ui_react\n[branding-core]: https://github.com/a-ui/core_branding_scss\n[branding-core-guide]: https://a-ui.github.io/core_branding_scss/\n[branding-digipolis]: https://github.com/a-ui/digipolis_branding_scss\n[branding-favicons]: https://github.com/a-ui/core_branding_favicons\n\n\u003c!-- Github Version Badge --\u003e\n\n[antwerp-ui-angular-github]: https://img.shields.io/github/package-json/v/digipolisantwerp/antwerp-ui_angular.svg\n[antwerp-ui-js-github]: https://img.shields.io/github/package-json/v/digipolisantwerp/antwerp-ui_js.svg\n[antwerp-ui-react-github]: https://img.shields.io/github/package-json/v/digipolisantwerp/antwerp-ui_react.svg\n\n\u003c!-- Github Actions Badge --\u003e\n\n[antwerp-ui-github-ci]: https://github.com/digipolisantwerp/antwerp-ui_angular/workflows/CI/badge.svg\n\n\u003c!-- NPM Package links --\u003e\n\n[ngx-components-package]: https://www.npmjs.com/package/@acpaas-ui/ngx-components\n\n\u003c!-- NPM Version Badge --\u003e\n\n[ngx-components-status]: https://img.shields.io/npm/v/@acpaas-ui/ngx-components.svg\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigipolisantwerp%2Fantwerp-ui_angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigipolisantwerp%2Fantwerp-ui_angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigipolisantwerp%2Fantwerp-ui_angular/lists"}