## Installation Install submodule at `{libs,projects}/common-ui`. Install dependencies: - `yarn add keycloak-angular keycloak-js ngx-toastr @biesbjerg/ngx-translate-extract-marker @ngx-translate/core @ngx-translate/http-loader dayjs lodash-es ngx-translate-messageformat-compiler messageformat` - `yarn add @types/lodash-es -D` - `ng add @angular/material` In `app.module.ts` add: ```ts export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigService): PruningTranslationLoader { return new PruningTranslationLoader(httpClient, '/assets/i18n/', `.json?version=${configService.values.FRONTEND_APP_VERSION}`); } ``` ``` @NgModule({ ... imports: [ ... CommonUiModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: httpLoaderFactory, deps: [HttpClient, ConfigService], }, compiler: { provide: TranslateCompiler, useClass: TranslateMessageFormatCompiler, }, }) ] }) ``` Add the following to the `compilerOptions` section of the root `tsconfig.json`: ``` "compilerOptions": { ... "paths": { ... "@iqser/common-ui": ["{libs,projects}/common-ui/src/index.ts"] }, "allowSyntheticDefaultImports": true }, ``` Make sure `noImplicitOverride` is **not** set to `true`. Include the common-ui assets in the `assets` section of `angular.json`: ```json { "glob": "**/*", "input": "{libs,projects}/common-ui/src/assets/", "output": "/assets/" } ``` Update `styles` and `stylePreprocessorOptions` in `angular.json`: ``` "styles": [ ... "{libs,projects}/common-ui/src/assets/styles/common-styles.scss" ], "stylePreprocessorOptions": { "includePaths": [ ... "./{libs,projects}/common-ui/src/assets/styles" ] } ``` Add theming classes (`light` or `dark`) to the `` element. Configure light and dark theme variables in `styles.scss`. Configure Material theme.