{"id":13650515,"url":"https://github.com/italia/design-angular-kit","last_synced_at":"2026-02-18T17:07:34.970Z","repository":{"id":32826290,"uuid":"136942394","full_name":"italia/design-angular-kit","owner":"italia","description":"Il toolkit Angular conforme alle linee guida di design per i servizi web della PA.","archived":false,"fork":false,"pushed_at":"2026-02-16T18:36:07.000Z","size":81990,"stargazers_count":85,"open_issues_count":17,"forks_count":41,"subscribers_count":14,"default_branch":"main","last_synced_at":"2026-02-16T19:54:56.190Z","etag":null,"topics":["angular","bootstrap","contributions-welcome","design","frontend","hacktoberfest","italia","toolkit"],"latest_commit_sha":null,"homepage":"https://italia.github.io/design-angular-kit","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/italia.png","metadata":{"files":{"readme":"README.EN.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.EN.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":"publiccode.yml","codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-06-11T15:03:36.000Z","updated_at":"2026-02-16T11:43:30.000Z","dependencies_parsed_at":"2023-02-19T06:16:18.595Z","dependency_job_id":"a9281f73-dd22-4e0b-afc7-b72e135de1dc","html_url":"https://github.com/italia/design-angular-kit","commit_stats":{"total_commits":450,"total_committers":30,"mean_commits":15.0,"dds":0.6888888888888889,"last_synced_commit":"1af2b2d7dc26723aadae3aeb306311ced0d842a9"},"previous_names":[],"tags_count":77,"template":false,"template_full_name":null,"purl":"pkg:github/italia/design-angular-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-angular-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-angular-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-angular-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-angular-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/italia","download_url":"https://codeload.github.com/italia/design-angular-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/italia%2Fdesign-angular-kit/sbom","scorecard":{"id":496665,"data":{"date":"2025-08-11","repo":{"name":"github.com/italia/design-angular-kit","commit":"67843b251506c0227d518fd5c02f9cec8269c20a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.5,"checks":[{"name":"Maintained","score":10,"reason":"28 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":1,"reason":"Found 4/23 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: jobLevel 'contents' permission set to 'write': .github/workflows/publish-release.yml:10","Warn: no topLevel permission defined: .github/workflows/commit-lint.yml:1","Warn: no topLevel permission defined: .github/workflows/pc-update.yml:1","Warn: no topLevel permission defined: .github/workflows/publish-release.yml:1","Warn: no topLevel permission defined: .github/workflows/run-tests.yml:1","Warn: no topLevel permission defined: .github/workflows/update-docs.yml:1"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: BSD 3-Clause \"New\" or \"Revised\" License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 14 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":2,"reason":"dependency not pinned by hash detected -- score normalized to 2","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/commit-lint.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/commit-lint.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/commit-lint.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/commit-lint.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pc-update.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/pc-update.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/pc-update.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/pc-update.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/pc-update.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/pc-update.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/publish-release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/publish-release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-release.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/publish-release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-release.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/publish-release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/run-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/run-tests.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/run-tests.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/run-tests.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/run-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-docs.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/update-docs.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/update-docs.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/italia/design-angular-kit/update-docs.yml/main?enable=pin","Warn: containerImage not pinned by hash: .devcontainer/Dockerfile:1: pin your Docker image by updating mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm to mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm@sha256:428d4ed6264774619bc353fc7dc98e41b4c01b603a638db9a549e66ed86edd15","Warn: npmCommand not pinned by hash: .devcontainer/scripts/postCreateCommand.sh:14","Warn: npmCommand not pinned by hash: .github/workflows/publish-release.yml:41","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   6 third-party GitHubAction dependencies pinned","Info:   3 out of   5 npmCommand dependencies pinned","Info:   0 out of   1 containerImage dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":9,"reason":"1 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T20:34:59.419Z","repository_id":32826290,"created_at":"2025-08-19T20:34:59.419Z","updated_at":"2025-08-19T20:34:59.419Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29587066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T16:55:40.614Z","status":"ssl_error","status_checked_at":"2026-02-18T16:55:37.558Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","bootstrap","contributions-welcome","design","frontend","hacktoberfest","italia","toolkit"],"created_at":"2024-08-02T02:00:37.458Z","updated_at":"2026-02-18T17:07:34.961Z","avatar_url":"https://github.com/italia.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eDesign Angular Kit\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/angular_design_kit.png\" alt=\"angular-logo\" width=\"120px\" height=\"120px\"/\u003e\n  \u003cbr\u003e\n  \u003ci\u003eDesign Angular Kit is a toolkit based on Bootstrap Italia \n    \u003cbr\u003e for the creation of web applications developed with Angular.\u003c/i\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://italia.github.io/design-angular-kit\"\u003e\u003cstrong\u003eitalia.github.io/design-angular-kit\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/design-angular-kit\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/design-angular-kit.svg\" alt=\"NPM\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/italia/design-angular-kit/actions\"\u003e\u003cimg src=\"https://github.com/italia/design-angular-kit/actions/workflows/publish-release.yml/badge.svg\" alt=\"Build\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://codecov.io/gh/italia/design-angular-kit\"\u003e\u003cimg src=\"https://codecov.io/gh/italia/design-angular-kit/branch/main/graph/badge.svg?token=0Ud6YSFi0r\" alt=\"codecov\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/italia/design-angular-kit/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/italia/design-angular-kit.svg\" alt=\"License\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/italia/design-angular-kit/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/italia/design-angular-kit.svg\" alt=\"GitHub issues\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\u003cimg src=\"https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release\" alt=\"semantic-release: angular\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg src=\"https://img.shields.io/badge/code%20style-prettier-ff69b4?logo=Prettier\" alt=\"code style: prettier\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/eslint/eslint\"\u003e\u003cimg src=\"https://img.shields.io/badge/formatter-angular--eslint-4B32C3?logo=eslint\" alt=\"formatter: angular-eslint\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://developersitalia.slack.com/messages/C04H3C19D52/\"\u003e\u003cimg src=\"https://img.shields.io/badge/Slack%20channel-%23design--dev--angular-blue.svg\" alt=\"Join the #design-dev-angular channel\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://slack.developers.italia.it/\"\u003e\u003cimg src=\"https://slack.developers.italia.it/badge.svg\" alt=\"Get invited\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\n_Read this in other languages: [Italiano 🇮🇹](README.md)._\n\n_⚠️ If you need the old version, the code and its documentation can be found [here](https://github.com/italia/design-angular-kit/tree/0.x)._\n\n**Comments and contributions from the entire community are more than welcome!** 🎉\n\n## Intro\n\n**Design Angular kit** is a set of Angular components that implements [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) and the styles found in [Design UI Kit](https://github.com/italia/design-ui-kit).\nThe public version of the library's documentation is available [here](https://italia.github.io/design-angular-kit) for the latest published stable release, and [here](https://design-angular-kit.vercel.app/) for the development version for the `main` branch.\nTo play with the library, the [Playground Angular Kit](https://github.com/italia/design-angular-kit-playground) is available.\n\n## Index\n\n- [How to use the kit](#come-usare-il-kit)\n- [How-to-contribute](#come-contribuire-)\n- [How-to-contribute-with-code](#come-contribuire-con-il-codice)\n- [Useful links](#link-utili)\n\n## How to use the kit\n\nDesign Angular Kit is available on NPM, to install on an existing application on which to test the library run command\n\n```sh\nnpm install design-angular-kit --save\n```\n\nChoose the version corresponding to your Angular version:\n\n| Angular | Design Angular kit | Branch | Documentation                                                                      |\n| ------- | ------------------ | ------ | ---------------------------------------------------------------------------------- |\n| 21+     | v21.0.0 +          | main   | [link](https://italia.github.io/design-angular-kit/design-angular-kit#)            |\n| 20+     | v20.0.0 +          | v20   | [link](https://design-angular-kit-git-v20-dip-trasformazione-digitale.vercel.app/)            |\n| 19+     | v19.0.0 +          | v19    | [link](https://design-angular-kit-git-v19-dip-trasformazione-digitale.vercel.app/) |\n\n⚠️ Previous versions are no more maintained.\n\n\nAlternatively, you can run the command\n\n```sh\nng add design-angular-kit --project \u003cprojectName\u003e\n```\n\nHe will consecutively perform:\n\n- choose the correct Angular version\n- install the dep\n- add the dep to package.json\n- application configuration\n\nThe instruction of the next chapter, **Configuration**, will be executed automatically, except for the customization of \\_i18n.\n\n## Configuration\n\n### App configuration\n\nThe `design-angular-kit` library can be used with the _standalone_ components or with the application using the modules. Follow the\nconfiguration that corresponds to your application.\n\n#### Standalone application\n\nUse the `provideDesignAngularKit` function in the application configuration `ApplicationConfig` to\ninitialise the library's functionality.\n\n```typescript\nimport { provideDesignAngularKit } from 'design-angular-kit';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [...provideDesignAngularKit()],\n};\n```\n\n#### Modular application\n\nYou need to import `DesignAngularKitModule` into the main application module (usually named **AppModule**)\nusing the `forRoot` method in order to initialise the library functionality and **import all components**.\n\n```typescript\nimport { DesignAngularKitModule } from 'design-angular-kit';\n\n@NgModule({\n  imports: [...DesignAngularKitModule.forRoot()],\n})\nexport class AppModule {}\n```\n\nUses the `forChild` method when importing the `DesignAngularKitModule` into other modules of the application to **import all library components**.\n\n```typescript\nimport { DesignAngularKitModule } from 'design-angular-kit';\n\n@NgModule({\n  imports: [...DesignAngularKitModule.forChild()],\n  exports: [DesignAngularKitModule],\n})\nexport class SharedModule {}\n```\n\n#### Hybrid application\n\nIf you have the **AppModule** in your application but want to use **our components with the _standalone_ configuration**,\nuse the `provideDesignAngularKit` function within the main application module to initialise the library functionality.\n\n```typescript\nimport { provideDesignAngularKit } from 'design-angular-kit';\n\n@NgModule({\n  imports: [],\n  providers: [provideDesignAngularKit()],\n})\nexport class AppModule {}\n```\n\n#### Configuration Parameters\n\nFor both the `provideDesignAngularKit` function and the `DesignAngularKitModule.forRoot()` module, an initial configuration can be used [`DesignAngularKitConfig`](/projects/design-angular-kit/src/lib/interfaces/design-angular-kit-config.ts).\n\n```typescript\nimport { provideDesignAngularKit, DesignAngularKitModule, DesignAngularKitConfig } from 'design-angular-kit';\n\n// You can add an initial configuration to the library\nconst initConfig: DesignAngularKitConfig | undefined = {\n  /**\n   * The bootstrap-italia asset folder path\n   * @default ./bootstrap-italia\n   */\n  assetBasePath: string | undefined,\n\n  /**\n   * Load the \u003ca href=\"https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts\"\u003ebootstrap-italia fonts\u003c/a\u003e\n   * @default true\n   */\n  loadFont: boolean | undefined,\n\n  ...\n};\n\nprovideDesignAngularKit(initConfig)\n\nDesignAngularKitModule.forRoot(initConfig)\n```\n\n### Importing bootstrap styles\n\nConfigure the required styles in the file `styles.scss`. Import the SCSS library as shown in the example below.\n\n```scss\n// Importing bootstrap-italia SCSS library\n@import 'bootstrap-italia/src/scss/bootstrap-italia';\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eHow to customise and override the library's default variables (e.g. colours, font-family, sizes, etc.)\u003c/summary\u003e.\n\nBootstrap Italia inherits and extends all the Bootstrap default variables, overriding\nsome values at compile time and setting new ones when needed. One example among many is\nthe value of the colour $primary, which in Bootstrap Italia is represented by the blue colour #0066CC,\ntypical of the library.\n\nThe use of blue #0066CC should, however, be reserved for the central administrations of the\nState, and thus one may find oneself in the position of having to customise the values of the variables\ncolour of Bootstrap Italy, setting new values for their own needs.\n\nThis colour and the other tones are generated from the HSB triad, so the variables primary-h, primary-s and primary-b must be modified.\nTo obtain the correspondence between the hexadecimal value of the colour and HSB, one can use the rgb.to portal, e.g. https://rgb.to/0066CC.\n\nBelow is an example of a `styles.scss` file with colour customisation.\nVariable customisations must always be made before importing the `bootstrap-italia.scss` file.\n\n```scss\n// complete modification of the template: it is possible to recompile the library by modifying some SCSS variables\n\n// For the override of the colour $primary of the HSB palette (colour #FF3333 https://rgb.to/ff3333):\n$primary-h: 0;\n$primary-s: 80;\n$primary-b: 100;\n\n// For the character family override\n$font-family-serif: 'Custom Font', Georgia, serif;\n$font-family-sans-serif: 'Custom Font', Arial, Helvetica, sans-serif;\n$font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;\n\n// Importing bootstrap-italia SCSS library\n@import 'bootstrap-italia/src/scss/bootstrap-italia';\n```\n\n\u003c/details\u003e\n\n### Icon and asset support\n\nTo add icon/asset support, edit your `angular.json` by adding:\n\n```json\n{\n \"assets\": [\n    ...\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"./node_modules/bootstrap-italia/\",\n      \"output\": \"/bootstrap-italia/\"\n    }\n  ]\n}\n```\n\n### i18n support (localisation)\n\nThe library uses [ngx-translate](https://github.com/ngx-translate/core) to add i18n localisations.\n\nEdit your `angular.json` by adding:\n\n```json\n{\n  \"assets\": [\n    ...\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"./node_modules/design-angular-kit/assets/i18n\",\n      \"output\": \"/bootstrap-italia/i18n/\"\n    }\n  ]\n}\n```\n\nYou can use the localised labels of the `design-angular-kit` library in your application, e.g. `{{'en.errors.required-field' | translate}}`. [See our labels](projects/design-angular-kit/assets/i18n/en.json)\n\n#### Existing location\n\nIf you already use localisation files in your app, you can use the library [ngx-translate-multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader)\nto load both the app's localisation files and those of the `design-angular-kit` library\n\n**Using the `provideDesignAngularKit` function:**\n\n```typescript\nimport { HttpBackend } from '@angular/common/http';\nimport { TranslateLoader } from '@ngx-translate/core';\nimport { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';\nimport { provideDesignAngularKit } from 'design-angular-kit';\n\nprovideDesignAngularKit({\n  translateLoader: (itPrefix: string, itSuffix: string) =\u003e ({\n    provide: TranslateLoader,\n    useFactory: (http: HttpBackend) =\u003e\n      new MultiTranslateHttpLoader(http, [\n        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file\n        { prefix: './assets/i18n/' }, // Your i18n location\n      ]),\n    deps: [HttpBackend],\n  }),\n});\n```\n\n**Using the `DesignAngularKitModule`:**\n\n```typescript\nimport { HttpBackend } from '@angular/common/http';\nimport { TranslateLoader } from '@ngx-translate/core';\nimport { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader';\nimport { DesignAngularKitModule } from 'design-angular-kit';\n\nDesignAngularKitModule.forRoot({\n  translateLoader: (itPrefix: string, itSuffix: string) =\u003e ({\n    provide: TranslateLoader,\n    useFactory: (http: HttpBackend) =\u003e\n      new MultiTranslateHttpLoader(http, [\n        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file\n        { prefix: './assets/i18n/' }, // Your i18n location\n      ]),\n    deps: [HttpBackend],\n  }),\n});\n```\n\n#### Localisation customisation\n\nIf you want to customise our labels:\n\n- Do not include i18n support in your `angular.json`.\n  - Create your custom location files in your `assets/bootstrap-italia/i18n/` folder (create the path if it does not exist)\n  - The json must have [this format](projects/design-angular-kit/assets/i18n/en.json).\n  - Add the custom `translateLoader` in the initial library configuration, replacing the string `assets/bootstrap-italia/i18n/` in the `itPrefix` attribute\n- Or, add the localisations in your json files by overwriting the [library json keys](projects/design-angular-kit/assets/i18n/en.json).\n\n### Use\n\nUsing the `DesignAngularKitModule` all components of the library will be imported into the application.\n\nAlternatively, as all our components and directives are _standalone_, you can import only the components/modules you need, e.g. Alerts, Pagination and Breadcrumbs.\n\n```typescript\nimport { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'design-angular-kit';\n\n@NgModule({\n  imports: [\n    ItAlertComponent,\n    ItPaginationComponent,\n    ItBreadcrumbsModule, // Includes ItBreadcrumbComponent and ItBreadcrumbItemComponent\n  ],\n})\nexport class YourAppModule {}\n```\n\n```typescript\nimport { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'design-angular-kit';\n\n@Component({\n  selector: 'app-product',\n  standalone: true,\n  imports: [ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule],\n  templateUrl: './product.component.html',\n})\nexport class ProductComponent {}\n```\n\n## How to contribute 💙\n\n👉🏻 You can contribute to the library in various ways:\n\n- With your own code, taking charge of an issue among those open and not already assigned among [the issues](https://github.com/italia/design-angular-kit/issues) of Angular Kit (a comment on the issue is also sufficient to notify the willingness to take charge).\n- By reporting bugs or improvements to the [official repository](https://github.com/italia/design-angular-kit/) of Angular Kit.\n- By writing to us on Slack's [dedicated channel](https://developersitalia.slack.com/messages/C04H3C19D52/).\n\n## How to contribute the code\n\nWould you like to help out on Design Angular Kit? **You are in the right place!**\n\nIf you haven't already done so, start by spending a few minutes to learn more about the\n[design guidelines for PA web services](https://design-italia.readthedocs.io/it/stable/index.html),\nand refer to [directions on how to contribute to Design Angular Kit](https://github.com/italia/design-angular-kit/blob/main/CONTRIBUTING.md).\n\n### Setting the local environment\n\nThe minimum requirements of your local environment must be:\n\n- NodeJS (\u003e= 20)\n\nAt this point, you need to set up your local environment for compiling source files and generating\nof the documentation:\n\n1. Cloning the project\n\n```\ngit clone https://github.com/italia/design-angular-kit.git\n```\n\n2. In the project folder, install the dependencies\n\n```\nnpm i\n```\n\n3. Launch the application locally\n\n```\nnpm run start\n```\n\n4. To perform unit tests, run the command\n\n```\nnpm run test\n```\n\n### Setting up the local environment with Devcontainer\n\nThe minimum requirements of your local environment for working with Devcontainers must be:\n\n- Visual Studio Code\n- Docker\n- git\n\nStart Visual Studio Code and install Microsoft's Dev Containers extension (ms-vscode-remote.remote-containers).\n\nAt this point, the following steps must be set up:\n\n1. Cloning the project\n\n```\ngit clone https://github.com/italia/design-angular-kit.git\n```\n\n2. Open the project folder with Visual Studio Code\n\n3. Upon loading, Visual Studio Code will recognise the presentation of a devcontainer configuration. Open the project with the devcontainer. More info [here](https://code.visualstudio.com/docs/devcontainers/create-dev-container).\n\n4. Visual Studio Code will perform the container setup, installing the correct version of NodeJs, npm and the IDE extensions. The project dependencies will be installed in the container creation process. The development environment will be ready once the setup is complete.\n\n5. Launch the application locally\n\n```\nnpm run start\n```\n\n6. To perform unit tests, run the command\n\n```\nnpm run test\n```\n\n## Useful links\n\n- [Playground Angular Kit](https://github.com/italia/design-angular-kit-playground)\n- [Vercel preview (updated with each commit)](https://design-angular-kit.vercel.app/)\n\n### From the community\n\n- [Video Commit University: Developing an Angular Web App for PA from scratch](https://www.youtube.com/watch?v=gH-0P36E5jk\u0026t=385s) ([slides](https://www.slideshare.net/commitsoftware/sviluppare-da-zero-una-angular-web-app-per-la-pa))\n- [Video Meetup Angular Roma: Angular, Bootstrap Italia and more..](https://www.youtube.com/live/asGk-mYU-zM?feature=share)\n\n## Contributor to the library\n\nSpecial thanks to those who made the development of this library possible!\n\n| [![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |\n| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |\n| Antonino Bonanno                                                                                           | Cristian Borelli                                                                       | Alessio Napolitano                                                                             |\n\nand thanks to [NetService team](https://www.net-serv.it/):\n\n\u003ca href=\"https://www.net-serv.it/\"\u003e\u003cimg src=\"https://www.net-serv.it/css/internet/agid/images/svg/logo-netservicesrl.svg\" alt=\"NetService logo\" width=\"300\"\u003e\u003c/a\u003e\n\n---\n\nAll contributors (_made with [contributors-img](https://contrib.rocks)_)\n\n\u003ca href = \"https://github.com/italia/design-angular-kit/graphs/contributors\"\u003e\n  \u003cimg src = \"https://contrib.rocks/image?repo=italia/design-angular-kit\"/\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":["📐 Design","Third Party Components"],"sub_categories":["UI Libraries built on Bootstrap"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitalia%2Fdesign-angular-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitalia%2Fdesign-angular-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitalia%2Fdesign-angular-kit/lists"}