-```
-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);
- }
-});
-```
-
-
-
-### 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
- 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);
-}
-```
----
-
-
-
-## 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.
-- **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:
-- `