+```
+may break, because the browser resolves them relative to the host page.
+
+To fix this, we provide:
+
+src/app/services/assets-public-path.directive.ts
+
+This directive automatically rewrites any src / href that starts with assets/ (or /assets/) to:
+
+```js
+__webpack_public_path__ + 'assets/...'
+```
+Import the directive in a component (Standalone)
+Add the directive to the component imports:
+
+```js
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { AssetsPublicPathDirective } from '../services/assets-public-path.directive';
+
+@Component({
+ selector: 'custom-example',
+ standalone: true,
+ templateUrl: './example.component.html',
+ styleUrls: ['./example.component.scss'],
+ imports: [CommonModule, AssetsPublicPathDirective],
+})
+export class ExampleComponent {}
+```
+If the component is not standalone (NgModule-based), import and export the directive from a shared module, and include that module where your components are declared.
+
+Use it in HTML
+After the directive is imported, you can use plain assets/... paths in templates:
+
+
+```html
+
+
+
+
+
+
+
+Help
+```
+Supported attributes/elements (common cases):
+
+img[src]
+
+source[src]
+
+script[src]
+
+link[href]
+
+a[href]
+
+### Accessing app router
+
+- You can gain access to the app router service by injecting the SHELL_ROUTER injection token to your component:
+
+```angular2html
+import {SHELL_ROUTER} from "../../injection-tokens"; //the import path may vary on your project
+private router = inject(SHELL_ROUTER);
+```
+
+- Listening for router navigation events. For example:
+
+```angular2html
+this.routerSubscription = this.router.events.subscribe((event) => {
+ if (event instanceof NavigationEnd) {
+ console.log('Tracking PageView: ', event.urlAfterRedirects);
}
+});
+```
- export const PROXY_TARGET = environments['example'];
- ```
- - Start the development server with the configured proxy by running:
+
+
+### Translating from code tables
+
+You can translate codes in your custom component by using ngx-translate (https://github.com/ngx-translate/core).
+
+- If you are using a stand alone component you will need to add the TranslateModule to your component imports list.
+- In your components HTML you can translate a label like so:
+```angular2html
+This is some translated code: {{'delivery.code.ext_not_restricted' | translate}}
+```
+
+
+---
+
+## Creating your own color theme
+
+The NDE theming is based on Angular Material.
+We allow via the view configuration to choose between a number of pre built themes.
+
+
+
+
+If you want to create your own theme instead of using one of our options follow these steps:
+
+1. Create a material 3 theme by running:
```bash
- npm run start:proxy
- ```
+ ng generate @angular/material:m3-theme
+ ```
+ You will be prompted to answer a number of questions like so:
+ ```
+? What HEX color should be used to generate the M3 theme? It will represent your primary color palette. (ex. #ffffff) #1eba18
+? What HEX color should be used represent the secondary color palette? (Leave blank to use generated colors from Material)
+? What HEX color should be used represent the tertiary color palette? (Leave blank to use generated colors from Material)
+? What HEX color should be used represent the neutral color palette? (Leave blank to use generated colors from Material)
+? What is the directory you want to place the generated theme file in? (Enter the relative path such as 'src/app/styles/' or leave blank to generate at your project root) src/app/styles/
+? Do you want to use system-level variables in the theme? System-level variables make dynamic theming easier through CSS custom properties, but increase the bundle size. yes
+? Choose light, dark, or both to generate the corresponding themes light
+
+```
+- Note that it is imporant to answer yes when asked if you want to use system-level variables.
+
+- Also note that I'm only entering the primary color and not secondary or tertiary. They will be selected automatically based on my primary color.
+
+Once this script completes successfully you will recieve this message:
+
+`CREATE src/app/styles/m3-theme.scss (2710 bytes)`
+
+To apply the theme go to `_customized-theme.scss` and uncomment the following lines:
+```
+.custom-nde-theme{
+ @include mat.all-component-colors(m3-theme.$light-theme);
+ @include mat.system-level-colors(m3-theme.$light-theme);
+}
+```
+---
-- **Option 2: Enhancements in Customization**:
- - **Local Custom Package Development**:
- - To work with your live environment using a custom package, add the following configuration:
- ```bash
- useLocalCustomPackage=true
- ```
- - This setting assumes that your local development environment is running on the default port `4201`.
- - When starting your local development environment with the proxy enabled, configure your development customization package by specifying your local URL in the proxy configuration. Example:
- ```plaintext
- localhost:4201/...
- ```
- - This setup allows for real-time testing and development that closely mirrors live environment conditions.
+## Developing an Add-On for the NDE UI
+
+The NDE UI supports loading of custom modules at runtime and also provides infrastructure to dynamically load add-ons developed by vendors, consortia, or community members. This enables seamless integration, allowing institutions to configure and deploy external add-ons through **Add-On Configuration in Alma**.
+
+The NDE UI add-on framework allows various stakeholders to develop and integrate custom functionality:
+
+- **Vendors** can create and host services that institutions can seamlessly incorporate into their environment.
+- **Institutions and consortia** can develop and share custom components, enabling consistency and collaboration across multiple libraries.
+
+Library staff can easily add, configure, and manage these add-ons through Alma, following guidelines provided by the stakeholders. These typically include:
+
+- **Add-on Name** – The identifier used in Alma’s configuration. This must match the add-on name as set when developing the add-on in the [section](#set-add-on-name) below.
+- **Add-on URL** – The location where the add-on is hosted (static folder to load the add-on at runtime).
+- **Configuration Parameters** – JSON-based config parameters to be referenced at runtime by the add-on.
+
+
+
+---
+
+## Guidelines for Developing an Add-On
+
+You can download the custom module and modify it to function as an add-on.
+
+### Set Add-on Name
+
+This section below should remain the same.
+
+
+
+
+
+---
+
+The add-on infrastructure provides a way to access institution-specific configuration parameters. Institutions can upload their configuration settings in JSON format, which your add-on can reference dynamically within its components.
+
+### 🔧 Accessing Add-On Configuration Parameters
+
+Use Angular DI to inject the parameters directly into your component via the `MODULE_PARAMETERS` token:
+
+```ts
+import { Component, Inject } from '@angular/core';
+
+@Component({
+ selector: 'custom-test-bottom',
+ host: { 'data-component-id': 'custom-test-bottom-unique' },
+ templateUrl: './test-bottom.component.html',
+ styleUrls: ['./test-bottom.component.scss']
+})
+export class TestBottomComponent {
+ constructor(@Inject('MODULE_PARAMETERS') public moduleParameters: any) {
+ console.log('Module parameters TestBottomComponent:', this.moduleParameters);
+ }
+
+ getKeys(obj: any): string[] {
+ return Object.keys(obj || {});
+ }
+}
+
+```
+
+> 📘 `yourParamKey` should match the keys defined in your Alma Add-on JSON configuration.
+---
+
+If your add-on includes assets such as images, you can ensure a complete separation between the frontend code and asset deployment. To achieve this, set `ASSET_BASE_URL` to point to your designated static folder, allowing your add-on to reference assets independently of the core application.
+
+
+
+
+The `autoAssetSrc` directive automatically prepends `ASSET_BASE_URL` to your `[src]` attribute.
+
+### Example:
+```html
+
+```
+
+### Supported Elements:
+- `